16 files changed, 292 insertions, 34 deletions

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,
   markdown: MarkdownViewer,
   pdf: PdfViewer,
+  epub: EpubViewer,
   video: VideoViewer,
   audio: AudioViewer,
   other: DownloadViewer,
diff --git a/viewer/src/views/ItemThumbnail.vue b/viewer/src/views/ItemThumbnail.vue
index 1c9e206..afd0e48 100644
--- a/viewer/src/views/ItemThumbnail.vue
+++ b/viewer/src/views/ItemThumbnail.vue
@@ -40,7 +40,7 @@
           size="4x"
         />
       </div>
-      {{ item.title }}
+      <div v-text="item.title" />
     </div>
   </div>
 </template>
@@ -50,7 +50,7 @@ import { Item } from '@/@types/gallery';
 import { useNavigation } from '@/services/navigation';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
 import VLazyImage from 'v-lazy-image';
-import { computed, PropType, ref } from 'vue';
+import { computed, PropType, ref, toRef } from 'vue';
 
 const props = defineProps({
   item: { type: Object as PropType<Item>, required: true },
@@ -60,7 +60,7 @@ const navigation = useNavigation();
 
 const loading = ref(false);
 
-const { thumbnailResourceUrl } = useItemResource(props.item);
+const { thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
 
 const pictureStyle = computed(() => {
   const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 };
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index d8b3300..30bfe97 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -26,7 +26,10 @@
     />
     <template v-else-if="galleryStore.config && galleryStore.galleryIndex">
       <LayoutTop :class="[$style.layout, $style.layoutTop]" />
-      <LayoutLeft :class="[$style.layout, $style.layoutLeft]" />
+      <LayoutLeft
+        v-show="!uiStore.fullWidth"
+        :class="[$style.layout, $style.layoutLeft]"
+      />
       <router-view
         ref="content"
         :class="[$style.layout, $style.layoutContent]"
diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue
index da9579f..124d132 100644
--- a/viewer/src/views/item_handlers/AudioViewer.vue
+++ b/viewer/src/views/item_handlers/AudioViewer.vue
@@ -20,7 +20,10 @@
 
 <template>
   <div class="flex-column container-vh-centering">
-    <ItemThumbnail :item="item" />
+    <ItemThumbnail
+      :item="item"
+      :class="$style.audiothumb"
+    />
     <audio
       :class="$style.player"
       :src="itemResourceUrl"
@@ -40,7 +43,7 @@
 import { AudioItem } from '@/@types/gallery';
 import { useNavigation } from '@/services/navigation';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { computed, PropType } from 'vue';
+import { computed, PropType, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ItemThumbnail from '../ItemThumbnail.vue';
 
@@ -51,11 +54,17 @@ const props = defineProps({
 const { t } = useI18n();
 const navigation = useNavigation();
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 const itemFileName = computed(() => navigation.getFileName(props.item));
 </script>
 
 <style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.audiothumb {
+  color: $text-light;
+}
+
 .player {
   width: 100%;
   max-width: 500px;
diff --git a/viewer/src/views/item_handlers/DownloadViewer.vue b/viewer/src/views/item_handlers/DownloadViewer.vue
index 6562bee..c627d3e 100644
--- a/viewer/src/views/item_handlers/DownloadViewer.vue
+++ b/viewer/src/views/item_handlers/DownloadViewer.vue
@@ -41,7 +41,7 @@ import { DownloadableItem } from '@/@types/gallery';
 import { useNavigation } from '@/services/navigation';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
 import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
-import { computed, PropType } from 'vue';
+import { computed, PropType, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -52,7 +52,7 @@ const { t } = useI18n();
 const navigation = useNavigation();
 
 const itemFileName = computed(() => navigation.getFileName(props.item));
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 </script>
 
 <style lang="scss" module>
diff --git a/viewer/src/views/item_handlers/MarkdownViewer.vue b/viewer/src/views/item_handlers/MarkdownViewer.vue
index d5ac7e2..574029f 100644
--- a/viewer/src/views/item_handlers/MarkdownViewer.vue
+++ b/viewer/src/views/item_handlers/MarkdownViewer.vue
@@ -33,13 +33,13 @@ import { LdMarkdown } from '@/components/async';
 import LdLoading from '@/components/LdLoading.vue';
 import { useLdFetch } from '@/services/api/ldFetch';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 
 const props = defineProps({
   item: { type: Object as PropType<MarkdownItem>, required: true },
 });
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
 </script>
 
diff --git a/viewer/src/views/item_handlers/PdfViewer.vue b/viewer/src/views/item_handlers/PdfViewer.vue
index 29f8033..a6ba273 100644
--- a/viewer/src/views/item_handlers/PdfViewer.vue
+++ b/viewer/src/views/item_handlers/PdfViewer.vue
@@ -36,13 +36,13 @@
 <script setup lang="ts">
 import { PDFItem } from '@/@types/gallery';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 import DownloadViewer from './DownloadViewer.vue';
 
 const props = defineProps({
   item: { type: Object as PropType<PDFItem>, required: true },
 });
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 
 </script>
diff --git a/viewer/src/views/item_handlers/PictureViewer.vue b/vi