23 files changed, 325 insertions, 51 deletions

diff --git a/viewer/src/@types/gallery.ts b/viewer/src/@types/gallery.ts
index 8c0f177..6960de2 100644
--- a/viewer/src/@types/gallery.ts
+++ b/viewer/src/@types/gallery.ts
@@ -64,6 +64,9 @@ export interface MarkdownProperties extends Downloadable {
 export interface PDFProperties extends Downloadable {
   type: ItemType.PDF;
 }
+export interface EPUBProperties extends Downloadable {
+  type: ItemType.EPUB;
+}
 export interface VideoProperties extends Downloadable {
   type: ItemType.VIDEO;
 }
@@ -107,6 +110,9 @@ export interface MarkdownItem extends Item {
 export interface PDFItem extends Item {
   properties: PDFProperties;
 }
+export interface EPUBItem extends Item {
+  properties: EPUBProperties;
+}
 export interface VideoItem extends Item {
   properties: VideoProperties;
 }
diff --git a/viewer/src/@types/itemType.ts b/viewer/src/@types/itemType.ts
index ecab05c..8528728 100644
--- a/viewer/src/@types/itemType.ts
+++ b/viewer/src/@types/itemType.ts
@@ -23,6 +23,7 @@ export enum ItemType {
   PLAINTEXT = 'plaintext',
   MARKDOWN = 'markdown',
   PDF = 'pdf',
+  EPUB = 'epub',
   VIDEO = 'video',
   AUDIO = 'audio',
   DIRECTORY = 'directory',
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 63febbf..6622fa5 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -41,6 +41,8 @@ $dropdown-item-color: $palette-600;
 $dropdown-item-hover-color: $palette-500;
 $panel-top-bgcolor: $palette-800;
 $panel-top-txtcolor: $primary;
+$panel-bottom-bgcolor: $palette-800;
+$panel-bottom-txtcolor: $primary;
 $panel-left-bgcolor: $palette-800;
 $panel-left-txtcolor: $primary;
 $command-buttons-bgcolor: $palette-700;
@@ -55,6 +57,7 @@ $thumbnail-other-size: $body-line-height * 7em;
 $proposed-category-bgcolor: $palette-700;
 $viewer-text: $palette-000;
 $viewer-text-background: $palette-900;
+$viewer-epub-background: $palette-000;
 
 // Layout
 
diff --git a/viewer/src/components/async/AsyncLdMarkdown.vue b/viewer/src/components/async/AsyncLdMarkdown.vue
index 213c11c..c3f368a 100644
--- a/viewer/src/components/async/AsyncLdMarkdown.vue
+++ b/viewer/src/components/async/AsyncLdMarkdown.vue
@@ -40,7 +40,6 @@ const html = computed(() => marked(props.markdown));
 <style lang="scss" module>
 .markdown {
   color: white;
-  line-height: 1.7;
   word-wrap: break-word;
 
   a {
@@ -52,19 +51,10 @@ const html = computed(() => marked(props.markdown));
     background-color: #666;
   }
 
-  p,
-  blockquote,
-  ul,
-  ol,
-  dl,
-  table,
-  pre {
-    margin: 15px 0;
-  }
-
   ul,
   ol {
-    padding-left: 30px;
+    list-style-type: disc;
+    padding-left: 1em;
   }
 
   h1 {
diff --git a/viewer/src/locales/en.yml b/viewer/src/locales/en.yml
index acbe24b..280f18b 100644
--- a/viewer/src/locales/en.yml
+++ b/viewer/src/locales/en.yml
@@ -1,6 +1,7 @@
 command:
   back: Go back
   parent: Go to parent directory
+  download: Download
   search:
     clear: Clear
     search: Search
@@ -14,6 +15,9 @@ directory:
   no-results: Empty directory
 download:
   download-file-fmt: Download {0}
+epubViewer:
+  previousSection: Previous section
+  nextSection: Next section
 gallery:
   resource-loading-error: Error loading resource
   unknown-resource: Resource not found
diff --git a/viewer/src/services/navigation.ts b/viewer/src/services/navigation.ts
index b2e807b..fb01169 100644
--- a/viewer/src/services/navigation.ts
+++ b/viewer/src/services/navigation.ts
@@ -19,7 +19,18 @@
 
 import { DirectoryItem, DownloadableItem, Item } from '@/@types/gallery';
 import { ItemType } from '@/@types/itemType';
-import { faFile, faFileAlt, faFileAudio, faFilePdf, faFileVideo, faFolder, faHome, faImage, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import {
+  faFile,
+  faFileAlt,
+  faFileAudio,
+  faFilePdf,
+  faBook,
+  faFileVideo,
+  faFolder,
+  faHome,
+  faImage,
+  IconDefinition,
+} from '@fortawesome/free-solid-svg-icons';
 import { isDirectory } from './itemGuards';
 
 const ICON_BY_TYPE: Record<ItemType, IconDefinition> = {
@@ -28,6 +39,7 @@ const ICON_BY_TYPE: Record<ItemType, IconDefinition> = {
   plaintext: faFileAlt,
   markdown: faFileAlt,
   pdf: faFilePdf,
+  epub: faBook,
   video: faFileVideo,
   audio: faFileAudio,
   other: faFile,
diff --git a/viewer/src/services/ui/ldItemResourceUrl.ts b/viewer/src/services/ui/ldItemResourceUrl.ts
index 7db7ab9..d6734b3 100644
--- a/viewer/src/services/ui/ldItemResourceUrl.ts
+++ b/viewer/src/services/ui/ldItemResourceUrl.ts
@@ -1,12 +1,12 @@
 import { Item } from '@/@types/gallery';
 import { useGalleryStore } from '@/store/galleryStore';
-import { computed } from 'vue';
+import { computed, ToRef } from 'vue';
 import { isDownloadableItem } from '../itemGuards';
 
-export const useItemResource = (item: Item) => {
+export const useItemResource = (item: ToRef<Item>) => {
   const galleryStore = useGalleryStore();
-  const itemResourceUrl = computed(() => isDownloadableItem(item) ? galleryStore.resourceRoot + item.properties.resource : '');
-  const thumbnailResourceUrl = computed(() => item.thumbnail ? galleryStore.resourceRoot + item.thumbnail.resource : '');
+  const itemResourceUrl = computed(() => isDownloadableItem(item.value) ? galleryStore.resourceRoot + item.value.properties.resource : '');
+  const thumbnailResourceUrl = computed(() => item.value.thumbnail ? galleryStore.resourceRoot + item.value.thumbnail.resource : '');
 
   return {
     itemResourceUrl,
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 0869aaf..b342c52 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -44,6 +44,7 @@ import { computedEager } from '@vueuse/shared';
 import { computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import GallerySearch from './GallerySearch.vue';
+import { EpubViewer } from './item_handlers/async';
 import AudioViewer from './item_handlers/AudioViewer.vue';
 import DirectoryViewer from './item_handlers/DirectoryViewer.vue';
 import DownloadViewer from './item_handlers/DownloadViewer.vue';
@@ -67,6 +68,7 @@ const COMPONENT_BY_TYPE: Record<ItemType, unknown> = {
   plaintext: PlainTextViewer,