From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001
From: Zéro~Informatique
Date: Tue, 26 Jul 2022 08:44:34 +0200
Subject: viewer: migrate to vue 3, general refactoring and cleanup

Non-exhaustive list of fixes and improvements done at the same time:

- html default background to grey (avoids white flash during init)
- unified links behavior
- added more theme variables
- removed the flex-expand transition (it wasn't working) and replaced it
  with a slide
- fixed LdLoading not centered on the content
- title on removable tags
- fixed an issue with encoded URI from vue-router
- unified Item resource URLs
- removed the iframe for PlainTextViewer (it wasn't working properly)
  and replaced it with a pre
- fixed clear and search buttons tabindex
- fixed the information panel bumping up during the fade animation of
  tag's dropdown
- fixed some focus outlines not appearing correctly
- moved CSS variables to the :root context
- Code cleaning

GitHub: closes #217
GitHub: closes #300
GitHub: closes #297
GitHub: closes #105
GitHub: closes #267
GitHub: closes #275
GitHub: closes #228
GitHub: closes #215
GitHub: closes #112
---
 viewer/src/views/GalleryNavigation.vue             | 106 ++++++-----
 viewer/src/views/GallerySearch.vue                 |  60 +++---
 viewer/src/views/GalleryTiles.vue                  |  70 +++++++
 viewer/src/views/ItemThumbnail.vue                 |  99 ++++++++++
 viewer/src/views/MainLayout.vue                    | 173 +++++++----------
 viewer/src/views/PanelLeft.vue                     | 120 ------------
 viewer/src/views/PanelTop.vue                      |  32 ----
 viewer/src/views/SplashScreen.vue                  | 106 ++++++-----
 viewer/src/views/item_handlers/AudioViewer.vue     |  65 +++++++
 viewer/src/views/item_handlers/DirectoryViewer.vue |  42 +++++
 viewer/src/views/item_handlers/DownloadViewer.vue  |  66 +++++++
 viewer/src/views/item_handlers/MarkdownViewer.vue  |  50 +++++
 viewer/src/views/item_handlers/PdfViewer.vue       |  48 +++++
 viewer/src/views/item_handlers/PictureViewer.vue   | 129 +++++++++++++
 viewer/src/views/item_handlers/PlainTextViewer.vue |  69 +++++++
 viewer/src/views/item_handlers/VideoViewer.vue     |  47 +++++
 .../src/views/layout/left/LayoutCommandSearch.vue  |  64 +++++++
 viewer/src/views/layout/left/LayoutInformation.vue |  99 ++++++++++
 viewer/src/views/layout/left/LayoutLeft.vue        | 158 ++++++++++++++++
 viewer/src/views/layout/left/LayoutProposition.vue | 208 +++++++++++++++++++++
 viewer/src/views/layout/left/LayoutTagInput.vue    | 164 ++++++++++++++++
 viewer/src/views/layout/left/LayoutTagList.vue     |  74 ++++++++
 viewer/src/views/layout/top/LayoutBreadcrumb.vue   | 130 +++++++++++++
 viewer/src/views/layout/top/LayoutCommand.vue      | 127 +++++++++++++
 viewer/src/views/layout/top/LayoutCommandSort.vue  | 117 ++++++++++++
 viewer/src/views/layout/top/LayoutTop.vue          |  38 ++++
 26 files changed, 2071 insertions(+), 390 deletions(-)
 create mode 100644 viewer/src/views/GalleryTiles.vue
 create mode 100644 viewer/src/views/ItemThumbnail.vue
 delete mode 100644 viewer/src/views/PanelLeft.vue
 delete mode 100644 viewer/src/views/PanelTop.vue
 create mode 100644 viewer/src/views/item_handlers/AudioViewer.vue
 create mode 100644 viewer/src/views/item_handlers/DirectoryViewer.vue
 create mode 100644 viewer/src/views/item_handlers/DownloadViewer.vue
 create mode 100644 viewer/src/views/item_handlers/MarkdownViewer.vue
 create mode 100644 viewer/src/views/item_handlers/PdfViewer.vue
 create mode 100644 viewer/src/views/item_handlers/PictureViewer.vue
 create mode 100644 viewer/src/views/item_handlers/PlainTextViewer.vue
 create mode 100644 viewer/src/views/item_handlers/VideoViewer.vue
 create mode 100644 viewer/src/views/layout/left/LayoutCommandSearch.vue
 create mode 100644 viewer/src/views/layout/left/LayoutInformation.vue
 create mode 100644 viewer/src/views/layout/left/LayoutLeft.vue
 create mode 100644 viewer/src/views/layout/left/LayoutProposition.vue
 create mode 100644 viewer/src/views/layout/left/LayoutTagInput.vue
 create mode 100644 viewer/src/views/layout/left/LayoutTagList.vue
 create mode 100644 viewer/src/views/layout/top/LayoutBreadcrumb.vue
 create mode 100644 viewer/src/views/layout/top/LayoutCommand.vue
 create mode 100644 viewer/src/views/layout/top/LayoutCommandSort.vue
 create mode 100644 viewer/src/views/layout/top/LayoutTop.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 200637e..0869aaf 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -1,7 +1,7 @@
 <!-- ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
--- Copyright (C) 2019-2020  Guillaume FOUET
+-- Copyright (C) 2019-2022  Guillaume FOUET
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -19,65 +19,63 @@
 
 <template>
   <div>
-    <ld-error v-if="isError" icon="folder-open" :message="$t('gallery.unknown-resource')" />
-    <gallery-search v-else-if="isSearch" :path="path" />
-    <component :is="componentName" v-else :key="componentKey" :item="$galleryStore.currentItem" />
+    <LdNotice
+      v-if="isError"
+      :icon="faFolderOpen"
+      :message="t('gallery.unknown-resource')"
+    />
+    <GallerySearch v-else-if="isSearch" />
+    <component
+      :is="componentName"
+      v-else
+      :key="componentKey"
+      :item="galleryStore.currentItem"
+    />
   </div>
 </template>
 
-<script lang="ts">
-import { ItemType } from "@/@types/ItemType";
-import Navigation from "@/services/navigation";
-import GallerySearch from "@/views/GallerySearch.vue";
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+<script setup lang="ts">
+import { ItemType } from '@/@types/itemType';
+import LdNotice from '@/components/LdNotice.vue';
+import { isDirectory } from '@/services/itemGuards';
+import { useGalleryStore } from '@/store/galleryStore';
+import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
+import { computedEager } from '@vueuse/shared';
+import { computed, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
+import GallerySearch from './GallerySearch.vue';
+import AudioViewer from './item_handlers/AudioViewer.vue';
+import DirectoryViewer from './item_handlers/DirectoryViewer.vue';
+import DownloadViewer from './item_handlers/DownloadViewer.vue';
+import MarkdownViewer from './item_handlers/MarkdownViewer.vue';
+import PdfViewer from './item_handlers/PdfViewer.vue';
+import PictureViewer from './item_handlers/PictureViewer.vue';
+import PlainTextViewer from './item_handlers/PlainTextViewer.vue';
+import VideoViewer from './item_handlers/VideoViewer.vue';
 
-@Component({
-  components: {
-    GallerySearch,
-  },
-})
-export default class GalleryNavigation extends Vue {
-  @Prop(String) readonly path!: string;
-  @Prop(Array) readonly query!: string[];
+const props = defineProps({
+  path: { type: String, required: true },
+  query: { type: Array<string>, required: true },
+});
 
-  readonly COMPONENT_BY_TYPE: Record<ItemType, string> = {
-    directory: "ld-directory-viewer",
-    picture: "ld-picture-viewer",
-    plaintext: "ld-plain-text-viewer",
-    markdown: "ld-markdown-viewer",
-    pdf: "ld-pdf-viewer",
-    video: "ld-video-viewer",
-    audio: "ld-audio-viewer",
-    other: "ld-download-viewer",
-  };
+const { t } = useI18n();
+const galleryStore = useGalleryStore();
 
-  mounted() {
-    this.pathChanged();
-  }
+const COMPONENT_BY_TYPE: Record<ItemType, unknown> = {
+  directory: DirectoryViewer,
+  picture: PictureViewer,
+  plaintext: PlainTextViewer,
+  markdown: MarkdownViewer,
+  pdf: PdfViewer,
+  video: VideoViewer,
+  audio: AudioViewer,
+  other: DownloadViewer,
+};
 
-  get isError() {
-    return this.checkType(null);
-  }
+const isError = computedEager(() => !galleryStore.currentItem?.properties.type);
+const isSearch = computedEager(() => isDirectory(galleryStore.currentItem) && props.query.length > 0);
+const componentName = computed(() => COMPONENT_BY_TYPE[galleryStore.currentItem?.properties.type ?? ItemType.OTHER]);
+const componentKey = computed(() => galleryStore.currentItem?.path ?? '');
 
-  get isSearch() {
-    return this.checkType(ItemType.DIRECTORY) && this.query.length > 0;
-  }
-
-  get componentName() {
-    return this.COMPONENT_BY_TYPE[this.$galleryStore.currentItem?.properties.type ?? ItemType.OTHER];
-  }
-
-  get componentKey() {
-    return this.$galleryStore.currentItem?.path ?? "";
-  }
-
-  @Watch("path")
-  pathChanged() {
-    this.$galleryStore.setCurrentPath(this.path);
-  }
-
-  checkType(type: ItemType | null): boolean {
-    return Navigation.checkType(this.$galleryStore.currentItem, type);
-  }
-}
+watchEffect(() => (galleryStore.currentPath = props.path));
 </script>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 5ab56e0..d148b9c 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -1,7 +1,7 @@
 <!-- ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
--- Copyright (C) 2019-2020  Guillaume FOUET
+-- Copyright (C) 2019-2022  Guillaume FOUET
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -18,37 +18,39 @@
 -->
 
 <template>
-  <ld-gallery :items="items" :noresult="noResult" />
+  <GalleryTiles
+    :items="items.filteredByPath"
+    :noresult-message="noResult"
+  />
 </template>
 
-<script lang="ts">
-import IndexSearch from "@/services/indexsearch";
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script setup lang="ts">
+import { useIndexSearch } from '@/services/indexSearch';
+import { useGalleryStore } from '@/store/galleryStore';
+import { useUiStore } from '@/store/uiStore';
+import { computed, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import GalleryTiles from './GalleryTiles.vue';
 
-@Component
-export default class GalleryPicture extends Vue {
-  @Prop(String) readonly path!: string;
-  otherCount: number = 0;
+const { t } = useI18n();
+const uiStore = useUiStore();
+const galleryStore = useGalleryStore();
+const indexSearch = useIndexSearch();
 
-  mounted() {
-    this.$uiStore.toggleFullscreen(false);
-    this.$uiStore.toggleSearchMode(true);
-  }
+uiStore.toggleFullscreen(false);
+uiStore.searchMode = true;
+onUnmounted(() => {
+  uiStore.searchMode = false;
+  galleryStore.currentSearch = [];
+});
 
-  destroyed() {
-    this.$uiStore.toggleSearchMode(false);
-    this.$galleryStore.setCurrentSearch([]);
-  }
-
-  get items() {
-    const searchResult = IndexSearch.search(this.$galleryStore.currentSearch);
-    const filteredByPath = searchResult.filter(item => item.path.startsWith(this.path));
-    this.otherCount = searchResult.length - filteredByPath.length;
-    return filteredByPath;
-  }
-
-  get noResult() {
-    return this.$tc("search.no-result-fmt", this.otherCount, [this.otherCount]);
-  }
-}
+const items = computed(() => {
+  const { currentPath, currentSearch } = galleryStore;
+  if (!currentPath) return { searchResult: [], filteredByPath: [] };
+  const searchResult = indexSearch(currentSearch);
+  const filteredByPath = searchResult.filter(item => item.path.startsWith(currentPath));
+  return { searchResult, filteredByPath };
+});
+const otherCount = computed(() => items.value.searchResult.length - items.value.filteredByPath.length);
+const noResult = computed(() => t('search.no-result-fmt', [otherCount.value]));
 </script>
diff --git a/viewer/src/views/GalleryTiles.vue b/viewer/src/views/GalleryTiles.vue
new file mode 100644
index 0000000..96d69da
--- /dev/null
+++ b/viewer/src/views/GalleryTiles.vue
@@ -0,0 +1,70 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    v-if="hasResults"
+    :class="$style.thumbnailTiles"
+  >
+    <LdLink
+      v-for="item in orderedItems"
+      :key="item.path"
+      :to="item.path"
+    >
+      <ItemThumbnail :item="item" />
+    </LdLink>
+  </div>
+  <LdNotice
+    v-else
+    :icon="faSearch"
+    :message="noresultMessage"
+  />
+</template>
+
+<script setup lang="ts">
+import { Item } from '@/@types/gallery';
+import LdLink from '@/components/LdLink.vue';
+import LdNotice from '@/components/LdNotice.vue';
+import { useUiStore } from '@/store/uiStore';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { computed } from 'vue';
+import ItemThumbnail from './ItemThumbnail.vue';
+
+const props = defineProps({
+  items: { type: Array<Item>, required: true },
+  noresultMessage: { type: String, required: true },
+});
+
+const uiStore = useUiStore();
+const hasResults = computed(() => props.items.length);
+const orderedItems = computed(() => [...props.items].sort(uiStore.sort.fn));
+</script>
+
+<style lang="scss" module>
+.thumbnailTiles {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-evenly;
+
+  & > a {
+    margin: 2px;
+  }
+}
+</style>
diff --git a/viewer/src/views/ItemThumbnail.vue b/viewer/src/views/ItemThumbnail.vue
new file mode 100644
index 0000000..1c9e206
--- /dev/null
+++ b/viewer/src/views/ItemThumbnail.vue
@@ -0,0 +1,99 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div :class="{ [$style.preload]: loading }">
+    <!-- Can't use img loading="lazy" yet because @loadstart doesn't work on Chromium -->
+    <!-- Also it loads the picture before scroll init (too early) -->
+    <VLazyImage
+      v-if="thumbnailResourceUrl"
+      :src="thumbnailResourceUrl"
+      :style="pictureStyle"
+      :title="item.title"
+      @intersect="loading = true"
+      @load="loading = false"
+    />
+    <div
+      v-else
+      class="flex-column flex-center"
+      :class="$style.thumbnailOther"
+    >
+      <div>
+        <fa-icon
+          :icon="icon"
+          size="4x"
+        />
+      </div>
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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';
+
+const props = defineProps({
+  item: { type: Object as PropType<Item>, required: true },
+});
+
+const navigation = useNavigation();
+
+const loading = ref(false);
+
+const { thumbnailResourceUrl } = useItemResource(props.item);
+
+const pictureStyle = computed(() => {
+  const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 };
+  return { width: `${resolution.width}px`, height: `${resolution.height}px` };
+});
+
+const icon = computed(() => navigation.getIcon(props.item));
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.thumbnailOther {
+  width: $thumbnail-other-size;
+  height: $thumbnail-other-size;
+  padding-top: $body-line-height * 1em;
+  text-align: center;
+  word-break: break-word;
+  overflow: hidden;
+  > div {
+    min-height: $body-line-height * 3em;
+  }
+}
+
+.preload {
+  animation: preloadAnimation 1s infinite ease-in-out alternate;
+}
+@keyframes preloadAnimation {
+  from {
+    background-color: $content-bgcolor;
+  }
+  to {
+    background-color: $skeleton-color;
+  }
+}
+</style>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2347ba7..9c84116 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -1,7 +1,7 @@
 <!-- ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
--- Copyright (C) 2019-2020  Guillaume FOUET
+-- Copyright (C) 2019-2022  Guillaume FOUET
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -18,131 +18,94 @@
 -->
 
 <template>
-  <div :class="{ [$style.fullscreen]: $uiStore.fullscreen, [$style.fullwidth]: $uiStore.fullWidth }">
-    <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" />
-    <PanelTop v-if="isReady" :class="[$style.layout, $style.layoutTop]" />
-    <PanelLeft v-if="isReady" :class="[$style.layout, $style.layoutLeft]" />
-    <b-loading v-if="isLoading" active />
+  <div :class="{ [$style.fullscreen]: uiStore.fullscreen, [$style.fullwidth]: uiStore.fullWidth }">
+    <LdLoading v-if="isLoading" />
     <SplashScreen
-      v-else-if="$uiStore.splashScreenEnabled"
-      :class="$style.layout"
-      @validation="$uiStore.validateSpashScreen()"
+      v-else-if="uiStore.splashScreenEnabled"
+      @validation="validateSpashScreen"
     />
-    <router-view v-else ref="content" :class="[$style.layout, $style.layoutContent]" class="scrollbar" tabindex="01" />
-    <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
+    <template v-else-if="galleryStore.config && galleryStore.galleryIndex">
+      <LayoutTop :class="[$style.layout, $style.layoutTop]" />
+      <LayoutLeft :class="[$style.layout, $style.layoutLeft]" />
+      <router-view
+        ref="content"
+        :class="[$style.layout, $style.layoutContent]"
+        class="scrollbar"
+        tabindex="2"
+      />
+    </template>
   </div>
 </template>
 
-<script lang="ts">
-import { ScrollPosition } from "@/@types/scrollposition";
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
-import { Route } from "vue-router";
-import PanelLeft from "./PanelLeft.vue";
-import PanelTop from "./PanelTop.vue";
-import SplashScreen from "./SplashScreen.vue";
-
-@Component({
-  components: {
-    PanelLeft,
-    PanelTop,
-    SplashScreen,
-  },
-})
-export default class MainLayout extends Vue {
-  @Ref() readonly content?: Vue;
-
-  isLoading: boolean = true;
-  scrollPositions: ScrollPosition = {};
-
-  get contentDiv(): HTMLDivElement | null {
-    return (this.content?.$el as HTMLDivElement) ?? null;
-  }
-
-  get isReady(): boolean {
-    return (
-      !this.$uiStore.splashScreenEnabled &&
-      !this.isLoading &&
-      this.$galleryStore.config !== null &&
-      this.$galleryStore.currentPath !== null
-    );
-  }
-
-  mounted() {
-    history.replaceState({ ldgallery: "ENTRYPOINT" }, "");
-    this.fetchGalleryItems();
-    document.body.addEventListener("fullscreenchange", this.onFullscreenChange);
-  }
-
-  destroyed() {
-    document.body.removeEventListener("fullscreenchange", this.onFullscreenChange);
-  }
-
-  moveFocusToContentDiv() {
-    setTimeout(() => this.contentDiv?.focus());
-  }
-
-  @Watch("$route")
-  routeChanged(newRoute: Route, oldRoute: Route) {
-    if (!this.contentDiv) return;
-    this.scrollPositions[oldRoute.path] = this.contentDiv.scrollTop;
-    this.$nextTick(() => (this.contentDiv!.scrollTop = this.scrollPositions[newRoute.path]));
-    this.moveFocusToContentDiv();
-  }
-
-  fetchGalleryItems() {
-    this.isLoading = true;
-    this.$galleryStore
-      .fetchConfig()
-      .then(this.$uiStore.initFromConfig)
-      .then(this.$galleryStore.fetchGalleryItems)
-      .then(this.moveFocusToContentDiv)
-      .finally(() => (this.isLoading = false))
-      .catch(this.displayError);
-  }
-
-  displayError(reason: any) {
-    this.$buefy.snackbar.open({
-      message: `${reason}`,
-      actionText: this.$t("snack.retry"),
-      position: "is-top",
-      type: "is-danger",
-      indefinite: true,
-      onAction: this.fetchGalleryItems,
-    });
-  }
-
-  isFullscreenActive(): boolean {
-    return Boolean(document.fullscreenElement);
-  }
+<script setup lang="ts">
+import LdLoading from '@/components/LdLoading.vue';
+import { useLdKeepFocus } from '@/services/ui/ldKeepFocus';
+import { useLdSaveScroll } from '@/services/ui/ldSaveScroll';
+import { useGalleryStore } from '@/store/galleryStore';
+import { useUiStore } from '@/store/uiStore';
+import { VueInstance } from '@vueuse/core';
+import { createToast } from 'mosha-vue-toastify';
+import { nextTick, ref } from 'vue';
+import LayoutLeft from './layout/left/LayoutLeft.vue';
+import LayoutTop from './layout/top/LayoutTop.vue';
+import SplashScreen from './SplashScreen.vue';
+
+const uiStore = useUiStore();
+const galleryStore = useGalleryStore();
+
+const content = ref<VueInstance>();
+const isLoading = ref(true);
+
+useLdSaveScroll(content);
+const { moveFocus } = useLdKeepFocus(content);
+
+history.replaceState({ ldgallery: 'ENTRYPOINT' }, '');
+fetchGalleryItems();
+
+function fetchGalleryItems() {
+  isLoading.value = true;
+  galleryStore
+    .fetchConfig()
+    .then(uiStore.initFromConfig)
+    .then(galleryStore.fetchGalleryItems)
+    .then(moveFocus)
+    .finally(() => (isLoading.value = false))
+    .catch(displayError);
+}
 
-  @Watch("$uiStore.fullscreen")
-  applyFullscreen(fullscreen: boolean) {
-    const isFullscreenActive = this.isFullscreenActive();
-    if (fullscreen && !isFullscreenActive) document.body.requestFullscreen();
-    else if (isFullscreenActive) document.exitFullscreen();
-  }
+function displayError(reason: unknown) {
+  createToast(String(reason), {
+    type: 'danger',
+    position: 'top-center',
+    timeout: 10000,
+    showIcon: true,
+    onClose: () => !isLoading.value && fetchGalleryItems(),
+  });
+}
 
-  onFullscreenChange() {
-    this.$uiStore.toggleFullscreen(this.isFullscreenActive());
-  }
+function validateSpashScreen() {
+  uiStore.validateSpashScreen();
+  nextTick(moveFocus);
 }
 </script>
 
 <style lang="scss" module>
-@import "~@/assets/scss/theme.scss";
+@import "~@/assets/scss/theme";
 
+:root {
+  --layout-top: #{$layout-top};
+  --layout-left: #{$layout-left};
+}
 :global(body),
 :global(html) {
+  font-family: $family-sans-serif;
   height: 100%;
   overflow: hidden;
   touch-action: none;
   background-color: $content-bgcolor;
-  --layout-top: #{$layout-top};
-  --layout-left: #{$layout-left};
 }
 .layout {
   position: fixed;
-  transition: all $transition-flex-expand linear;
   top: 0;
   bottom: 0;
   left: 0;
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
deleted file mode 100644
index ea61865..0000000
--- a/viewer/src/views/PanelLeft.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<!-- ldgallery - A static generator which turns a collection of tagged
---             pictures into a searchable web gallery.
---
--- Copyright (C) 2019-2020  Guillaume FOUET
---
--- This program is free software: you can redistribute it and/or modify
--- it under the terms of the GNU Affero General Public License as
--- published by the Free Software Foundation, either version 3 of the
--- License, or (at your option) any later version.
---
--- This program is distributed in the hope that it will be useful,
--- but WITHOUT ANY WARRANTY; without even the implied warranty of
--- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
--- GNU Affero General Public License for more details.
---
--- You should have received a copy of the GNU Affero General Public License
--- along with this program.  If not, see <https://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="flex-column" :class="$style.sidebar">
-    <ld-tag-input
-      :search-filters.sync="searchFilters"
-      :tags-index="$galleryStore.tagsIndex"
-      @onkeyenter-empty="search"
-    />
-    <ld-command-search @clear="clear" @search="search" />
-    <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
-    <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrinkFully">
-      <ld-proposition
-        v-for="category in $galleryStore.tagsCategories"
-        :key="category.tag"
-        :category="$galleryStore.tagsIndex[category.tag]"
-        :show-category="$galleryStore.tagsCategories.length > 1"
-        :search-filters.sync="searchFilters"
-        :tags-index="category.index"
-        :current-tags="currentTags"
-      />
-    </div>
-    <h1 :class="$style.infoPanelTitleBar" class="flex title" @click="infoOpen = !infoOpen">
-      {{ $t("panelLeft.information.title") }}
-      <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
-    </h1>
-    <transition name="flex-expand">
-      <ld-information v-show="infoOpen" :item="$galleryStore.currentItem" class="scrollbar no-scroll-x" />
-    </transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { TagSearch } from "@/@types/tag";
-import Navigation from "@/services/navigation";
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { Dictionary, Route } from "vue-router/types/router";
-
-@Component
-export default class PanelLeft extends Vue {
-  searchFilters: TagSearch[] = [];
-  infoOpen: boolean = true;
-
-  mounted() {
-    this.restoreSearchFilters(this.$route);
-  }
-
-  clear() {
-    this.searchFilters = [];
-    this.search();
-  }
-
-  search() {
-    const lastDirectory = Navigation.getLastDirectory(this.$galleryStore.currentItemPath);
-    this.$router.push({ path: lastDirectory.path, query: this.serializeSearch() }).catch(err => {
-      if (err.name !== "NavigationDuplicated") throw err;
-    });
-  }
-
-  serializeSearch() {
-    let query: Dictionary<null> = {};
-    this.searchFilters.forEach(filter => (query[filter.display] = null));
-    return query;
-  }
-
-  get currentTags() {
-    return this.$galleryStore.currentItem?.tags ?? [];
-  }
-
-  @Watch("$route")
-  restoreSearchFilters(route: Route) {
-    const query = Object.keys(route.query);
-    if (query.length > 0) this.$galleryStore.search(query).then(search => (this.searchFilters = [...search]));
-  }
-}
-</script>
-
-<style lang="scss" module>
-@import "~@/assets/scss/theme.scss";
-
-.sidebar {
-  :global(.title) {
-    background-color: $proposed-category-bgcolor;
-    padding: 0.2em 0.5em;
-    margin: 0 0 1px 0;
-    font-variant: small-caps;
-    justify-content: space-between;
-    user-select: none;
-    > svg {
-      color: $link;
-      margin-top: 2px; // Fixes a vertical centering issue with the carret
-    }
-  }
-
-  .infoPanelTitleBar {
-    cursor: pointer;
-  }
-}
-
-.flexShrinkFully {
-  flex-shrink: 1000;
-}
-</style>
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
deleted file mode 100644
index 4e92f07..0000000
--- a/viewer/src/views/PanelTop.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- ldgallery - A static generator which turns a collection of tagged
---             pictures into a searchable web gallery.
---
--- Copyright (C) 2019-2020  Guillaume FOUET
---
--- This program is free software: you can redistribute it and/or modify
--- it under the terms of the GNU Affero General Public License as
--- published by the Free Software Foundation, either version 3 of the
--- License, or (at your option) any later version.
---
--- This program is distributed in the hope that it will be useful,
--- but WITHOUT ANY WARRANTY; without even the implied warranty of
--- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
--- GNU Affero General Public License for more details.
---
--- You should have received a copy of the GNU Affero General Public License
--- along with this program.  If not, see <https://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="flex">
-    <ld-command :current-item-path="$galleryStore.currentItemPath" />
-    <ld-breadcrumb :current-item-path="$galleryStore.currentItemPath" :search-mode="$uiStore.searchMode" />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class PanelTop extends Vue {}
-</script>
diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
index 93d84a1..c6c2d09 100644
--- a/viewer/src/views/SplashScreen.vue
+++ b/viewer/src/views/SplashScreen.vue
@@ -1,62 +1,63 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
-  <b-loading v-if="isLoading" active />
-  <div v-else-if="markdown" :class="$style.splashscreen" class="scrollbar">
-    <Markdown :style="config.style" class="flex-grow-1" :markdown="markdown" />
-    <b-button size="is-large" :label="buttonAcknowledgeLabel" @click="validation" />
+  <LdLoading v-if="isFetching" />
+  <div
+    v-else-if="!error && data"
+    :class="$style.splashscreen"
+    class="scrollbar"
+  >
+    <LdMarkdown
+      :style="config.style"
+      class="flex-grow-1"
+      :markdown="data"
+    />
+    <button
+      tabindex="1"
+      autofocus
+      @click="emit('validation')"
+    >
+      {{ buttonAcknowledgeLabel }}
+    </button>
   </div>
 </template>
 
-<script lang="ts">
-import { SplashScreenConfig } from "@/@types/splashscreen";
-import { Markdown } from "@/components/async";
-import FetchWithCheck from "@/services/fetchWithCheck";
-import { TranslateResult } from "vue-i18n";
-import { Component, Emit, Vue } from "vue-property-decorator";
-
-@Component({
-  components: {
-    Markdown,
-  },
-})
-export default class SplashScreen extends Vue {
-  isLoading: boolean = true;
-  markdown: string | null = null;
+<script setup lang="ts">
+import { LdMarkdown } from '@/components/async';
+import LdLoading from '@/components/LdLoading.vue';
+import { useLdFetch } from '@/services/api/ldFetch';
+import { useUiStore } from '@/store/uiStore';
+import { computed, readonly } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-  get config(): SplashScreenConfig {
-    return this.$uiStore.splashScreenConfig!;
-  }
+const emit = defineEmits(['validation']);
 
-  created() {
-    this.fetchMarkdown();
-  }
+const { t } = useI18n();
+const uiStore = useUiStore();
 
-  // TODO: Identical to LdMarkdownViewer.vue, use composition with Vue3.
-  fetchMarkdown() {
-    FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`)
-      .then(response => response.text())
-      .then(text => (this.markdown = text))
-      .finally(() => (this.isLoading = false))
-      .catch(this.displayError);
-  }
+const config = readonly(uiStore.splashScreenConfig ?? {});
 
-  displayError(reason: any) {
-    this.$buefy.snackbar.open({
-      message: `${reason}`,
-      actionText: this.$t("snack.retry"),
-      position: "is-top",
-      type: "is-danger",
-      indefinite: true,
-      onAction: this.fetchMarkdown,
-    });
-  }
+const buttonAcknowledgeLabel = computed(() => config.buttonAcknowledgeLabel ?? t('splashScreen.button.acknowledge'));
+const itemResourceUrl = computed(() => `${process.env.VUE_APP_DATA_URL}${config.resource}?${config.acknowledgmentKey ?? ''}`);
 
-  get buttonAcknowledgeLabel(): TranslateResult {
-    return this.config.buttonAcknowledgeLabel ?? this.$t("splashScreen.button.acknowledge");
-  }
-
-  @Emit()
-  validation() {}
-}
+const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
 </script>
 
 <style lang="scss" module>
@@ -65,5 +66,10 @@ export default class SplashScreen extends Vue {
   flex-flow: column;
   align-items: center;
   padding: 32px;
+
+  button {
+    font-size: 1.5rem;
+    margin-top: 1em;
+  }
 }
 </style>
diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue
new file mode 100644
index 0000000..da9579f
--- /dev/null
+++ b/viewer/src/views/item_handlers/AudioViewer.vue
@@ -0,0 +1,65 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div class="flex-column container-vh-centering">
+    <ItemThumbnail :item="item" />
+    <audio
+      :class="$style.player"
+      :src="itemResourceUrl"
+      preload="auto"
+      controls
+    >
+      <a
+        :download="itemFileName"
+        :href="itemResourceUrl"
+        v-text="t('download.download-file-fmt', [itemFileName])"
+      />
+    </audio>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AudioItem } from '@/@types/gallery';
+import { useNavigation } from '@/services/navigation';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
+import { computed, PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ItemThumbnail from '../ItemThumbnail.vue';
+
+const props = defineProps({
+  item: { type: Object as PropType<AudioItem>, required: true },
+});
+
+const { t } = useI18n();
+const navigation = useNavigation();
+
+const { itemResourceUrl } = useItemResource(props.item);
+const itemFileName = computed(() => navigation.getFileName(props.item));
+</script>
+
+<style lang="scss" module>
+.player {
+  width: 100%;
+  max-width: 500px;
+  margin-top: 1em;
+  text-align: center; // for fallback download link
+}
+</style>
diff --git a/viewer/src/views/item_handlers/DirectoryViewer.vue b/viewer/src/views/item_handlers/DirectoryViewer.vue
new file mode 100644
index 0000000..9b52fa8
--- /dev/null
+++ b/viewer/src/views/item_handlers/DirectoryViewer.vue
@@ -0,0 +1,42 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <GalleryTiles
+    :items="props.item.properties.items"
+    :noresult-message="t('directory.no-results')"
+  />
+</template>
+
+<script setup lang="ts">
+import { DirectoryItem } from '@/@types/gallery';
+import { useUiStore } from '@/store/uiStore';
+import GalleryTiles from '@/views/GalleryTiles.vue';
+import { PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  item: { type: Object as PropType<DirectoryItem>, required: true },
+});
+
+const { t } = useI18n();
+const uiStore = useUiStore();
+
+uiStore.toggleFullscreen(false);
+</script>
diff --git a/viewer/src/views/item_handlers/DownloadViewer.vue b/viewer/src/views/item_handlers/DownloadViewer.vue
new file mode 100644
index 0000000..6562bee
--- /dev/null
+++ b/viewer/src/views/item_handlers/DownloadViewer.vue
@@ -0,0 +1,66 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div class="container-vh-centering">
+    <a
+      :class="$style.content"
+      :download="itemFileName"
+      :href="itemResourceUrl"
+    >
+      <!-- TODO: show thumbnail instead of this generic file download icon? -->
+      <fa-icon
+        :class="$style.icon"
+        :icon="faFileDownload"
+        size="6x"
+      />
+      <div>{{ t("download.download-file-fmt", [itemFileName]) }}</div>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  item: { type: Object as PropType<DownloadableItem>, required: true },
+});
+
+const { t } = useI18n();
+const navigation = useNavigation();
+
+const itemFileName = computed(() => navigation.getFileName(props.item));
+const { itemResourceUrl } = useItemResource(props.item);
+</script>
+
+<style lang="scss" module>
+.content {
+  text-align: center;
+}
+
+.icon {
+  margin-bottom: 0.15em;
+}
+</style>
diff --git a/viewer/src/views/item_handlers/MarkdownViewer.vue b/viewer/src/views/item_handlers/MarkdownViewer.vue
new file mode 100644
index 0000000..d5ac7e2
--- /dev/null
+++ b/viewer/src/views/item_handlers/MarkdownViewer.vue
@@ -0,0 +1,50 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2021  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <LdLoading v-if="isFetching" />
+  <LdMarkdown
+    v-else-if="!error && data"
+    :class="$style.container"
+    :markdown="data"
+  />
+</template>
+
+<script setup lang="ts">
+import { MarkdownItem } from '@/@types/gallery';
+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';
+
+const props = defineProps({
+  item: { type: Object as PropType<MarkdownItem>, required: true },
+});
+
+const { itemResourceUrl } = useItemResource(props.item);
+const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
+</script>
+
+<style lang="scss" module>
+.container {
+  padding: 8px;
+}
+</style>
diff --git a/viewer/src/views/item_handlers/PdfViewer.vue b/viewer/src/views/item_handlers/PdfViewer.vue
new file mode 100644
index 0000000..29f8033
--- /dev/null
+++ b/viewer/src/views/item_handlers/PdfViewer.vue
@@ -0,0 +1,48 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <!-- intermediate container necessary to eliminate the double scrollbar -->
+  <div class="fill no-scroll">
+    <!-- prefer native browser PDF viewer if available -->
+    <object
+      class="fill"
+      :data="itemResourceUrl"
+      type="application/pdf"
+    >
+      <!-- TODO: fallback to PDF.js (https://github.com/pacien/ldgallery/issues/212) -->
+      <DownloadViewer :item="item" />
+    </object>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PDFItem } from '@/@types/gallery';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
+import { PropType } from 'vue';
+import DownloadViewer from './DownloadViewer.vue';
+
+const props = defineProps({
+  item: { type: Object as PropType<PDFItem>, required: true },
+});
+
+const { itemResourceUrl } = useItemResource(props.item);
+
+</script>
diff --git a/viewer/src/views/item_handlers/PictureViewer.vue b/viewer/src/views/item_handlers/PictureViewer.vue
new file mode 100644
index 0000000..10055fd
--- /dev/null
+++ b/viewer/src/views/item_handlers/PictureViewer.vue
@@ -0,0 +1,129 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    ref="containerElement"
+    v-dragscroll
+    class="scrollbar"
+    :class="$style.pictureContainer"
+    @dblclick="uiStore.toggleFullscreen()"
+  >
+    <img
+      v-if="!error"
+      ref="imageElement"
+      :src="itemResourceUrl"
+      :class="[$style.pictureElement, $style.slowLoading]"
+      :style="imageStyle"
+      @load="clearSlowLoading"
+      @error="onError"
+    >
+    <LdLoading v-if="loader" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PictureItem } from '@/@types/gallery';
+import LdLoading from '@/components/LdLoading.vue';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
+import { useLdZoom } from '@/services/ui/ldZoom';
+import { useUiStore } from '@/store/uiStore';
+import { unrefElement, VueInstance } from '@vueuse/core';
+import { createToast } from 'mosha-vue-toastify';
+import { CSSProperties, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  item: { type: Object as PropType<PictureItem>, required: true },
+});
+
+const { t } = useI18n();
+const uiStore = useUiStore();
+
+const imageStyle = ref<CSSProperties>({});
+const error = ref(false);
+const loader = ref(false);
+
+const containerElement = ref<HTMLDivElement>();
+const imageElement = ref<VueInstance>();
+
+const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item);
+
+onMounted(() => {
+  generateSlowLoadingStyle();
+  if (!containerElement.value) return;
+  useLdZoom(
+    imageStyle,
+    containerElement.value,
+    unrefElement(imageElement) as HTMLImageElement,
+    props.item.properties,
+  );
+});
+
+onUnmounted(() => {
+  clearSlowLoading();
+});
+
+function clearSlowLoading() {
+  imageStyle.value.backgroundImage = undefined;
+  loader.value = false;
+}
+
+function generateSlowLoadingStyle() {
+  clearSlowLoading();
+  loader.value = true;
+  if (thumbnailResourceUrl.value) {
+    imageStyle.value.backgroundImage = `url('${thumbnailResourceUrl.value}')`;
+  }
+}
+
+function onError() {
+  clearSlowLoading();
+  error.value = true;
+  createToast(t('gallery.resource-loading-error'), {
+    type: 'danger',
+    position: 'top-center',
+    timeout: 10000,
+    showIcon: true,
+  });
+}
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.pictureContainer {
+  height: 100%;
+}
+
+.pictureElement {
+  max-width: unset;
+  max-height: unset;
+  cursor: grab;
+}
+
+.slowLoading {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-color: $content-bgcolor;
+  background-blend-mode: soft-light;
+  opacity: 1 !important;
+}
+</style>
diff --git a/viewer/src/views/item_handlers/PlainTextViewer.vue b/viewer/src/views/item_handlers/PlainTextViewer.vue
new file mode 100644
index 0000000..d386437
--- /dev/null
+++ b/viewer/src/views/item_handlers/PlainTextViewer.vue
@@ -0,0 +1,69 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <!-- Outer div necessary for the resize handle to appear on Firefox. -->
+  <div
+    :class="$style.content"
+    class="fill"
+  >
+    <pre
+      v-if="isFinished"
+      v-text="data"
+    />
+    <LdLoading v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PlainTextItem } from '@/@types/gallery';
+import LdLoading from '@/components/LdLoading.vue';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
+import { useFetch } from '@vueuse/core';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  item: { type: Object as PropType<PlainTextItem>, required: true },
+});
+
+const { itemResourceUrl } = useItemResource(props.item);
+const { isFinished, data } = useFetch(itemResourceUrl).text();
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.content {
+  display: flex;
+  justify-content: center;
+  background: $viewer-text-background;
+  color: $viewer-text;
+
+  > pre {
+    width: 100%;
+    max-width: 100%; // Forbid overflow when resizing.
+    margin: 1em; // Necessary for the resize handle to be selectable on qutebrowser.
+    border: none;
+    white-space: pre-wrap;
+    resize: horizontal; // Allow the user to adjust the width of the text view for easier column reading.
+    overflow: hidden; // Necessary for the resize handle to be shown in Chromium.
+  }
+}
+</style>
diff --git a/viewer/src/views/item_handlers/VideoViewer.vue b/viewer/src/views/item_handlers/VideoViewer.vue
new file mode 100644
index 0000000..7d17367
--- /dev/null
+++ b/viewer/src/views/item_handlers/VideoViewer.vue
@@ -0,0 +1,47 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <!-- intermediate container necessary to eliminate the scrollbar -->
+  <div class="fill no-scroll">
+    <video
+      class="fill"
+      :src="itemResourceUrl"
+      :poster="thumbnailResourceUrl"
+      preload="auto"
+      controls
+    >
+      <DownloadViewer :item="item" />
+    </video>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VideoItem } from '@/@types/gallery';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
+import { PropType } from 'vue';
+import DownloadViewer from './DownloadViewer.vue';
+
+const props = defineProps({
+  item: { type: Object as PropType<VideoItem>, required: true },
+});
+
+const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item);
+</script>
diff --git a/viewer/src/views/layout/left/LayoutCommandSearch.vue b/viewer/src/views/layout/left/LayoutCommandSearch.vue
new file mode 100644
index 0000000..ab31a84
--- /dev/null
+++ b/viewer/src/views/layout/left/LayoutCommandSearch.vue
@@ -0,0 +1,64 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    class="flex"
+    :class="[$style.commands, $style.webkitFlexShrinkFix]"
+  >
+    <button
+      tabindex="60"
+      @click="emit('clear')"
+    >
+      <fa-icon :icon="faEraser" />
+      <span>{{ t("command.search.clear") }}</span>
+    </button>
+    <button
+      tabindex="61"
+      class="flex-grow-1"
+      @click="emit('search')"
+    >
+      <fa-icon :icon="faSearch" />
+      <span>{{ t("command.search.search") }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { faEraser, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits(['clear', 'search']);
+
+const { t } = useI18n();
+</script>
+
+<style lang="scss" module>
+// fix flexbox shrinking and overlap in old webkit versions
+// https://github.com/pacien/ldgallery/issues/183
+.webkitFlexShrinkFix {
+  flex: none;
+}
+
+.commands {
+  span {
+    margin-left: 0.5rem;
+  }
+}
+</style>
diff --git a/viewer/src/views/layout/left/LayoutInformation.vue b/viewer/src/views/layout/left/LayoutInformation.vue
new file mode 100644
index 0000000..780a458
--- /dev/null
+++ b/viewer/src/views/layout/left/LayoutInformation.vue
@@ -0,0 +1,99 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    v-if="item"
+    class="flex-column"
+    :class="$style.infopanel"
+  >
+    <div
+      v-if="item.title"
+      :class="$style.title"
+    >
+      {{ item.title }}
+    </div>
+    <time
+      v-if="item.datetime"
+      :datetime="item.datetime"
+      :class="$style.datetime"
+    >
+      {{ formatDate }}
+    </time>
+    <LdMarkdown
+      v-if="item.description"
+      :class="$style.description"
+      :markdown="item.description"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Item } from '@/@types/gallery';
+import { LdMarkdown } from '@/components/async';
+import { computed, PropType } from 'vue';
+
+const props = defineProps({
+  item: { type: Object as PropType<Item>, required: true },
+});
+
+const formatDate = computed(() => {
+  const { datetime } = props.item;
+  const date = datetime.substring(0, 10);
+  const time = datetime.substring(11, 16);
+  return `${date} ${time}`;
+});
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.infopanel {
+  padding: 2px 2px 7px 7px;
+  overflow-wrap: break-word;
+
+  .title {
+    font-weight: bold;
+  }
+  .datetime {
+    font-size: 0.9em;
+    color: $palette-300;
+  }
+  .description {
+    padding-bottom: 7px;
+    > * {
+      margin-top: 5px;
+    }
+    ul,
+    ol {
+      margin-left: 1em;
+    }
+    ul {
+      list-style-type: disc;
+    }
+    a {
+      color: $palette-200;
+      &:hover {
+        color: $palette-050;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
diff --git a/viewer/src/views/layout/left/LayoutLeft.vue b/viewer/src/views/layout/left/LayoutLeft.vue
new file mode 100644
index 0000000..bb3e747
--- /dev/null
+++ b/viewer/src/views/layout/left/LayoutLeft.vue
@@ -0,0 +1,158 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    class="flex-column"
+    :class="$style.sidebar"
+  >
+    <LayoutTagList v-model="searchFilters" />
+    <LayoutTagInput
+      v-model="searchFilters"
+      @search="search"
+      @opening="isOpenSearch=true"
+      @closing="isOpenSearch=false"
+    />
+    <!-- We disable the components beneath the Dropdown for accessibility purposes -->
+    <LayoutCommandSearch
+      v-show="!isOpenSearch"
+      @clear="clear"
+      @search="search"
+    />
+    <h1
+      v-show="!isOpenSearch"
+      :class="$style.title"
+    >
+      {{ t("panelLeft.propositions.related") }}
+    </h1>
+    <div
+      v-show="!isOpenSearch"
+      class="scrollbar no-scroll-x"
+      :class="$style.flexShrinkFully"
+    >
+      <LayoutProposition
+        v-for="category in galleryStore.tagsCategories"
+        :key="category.tag"
+        v-model:search-filters="searchFilters"
+        :category="galleryStore.tagsIndex[category.tag]"
+        :show-category="galleryStore.tagsCategories.length > 1"
+        :tags-index="category.index"
+        :current-tags="currentTags"
+      />
+    </div>
+
+    <template v-if="galleryStore.currentItem">
+      <div class="flex-grow-1" />
+      <h1
+        :class="[$style.infoPanelTitleBar, $style.title]"
+        class="flex"
+        @click="infoOpen = !infoOpen"
+      >
+        {{ t("panelLeft.information.title") }}
+        <fa-icon :icon="infoOpen ? faCaretDown : faCaretUp" />
+      </h1>
+      <transition name="slide">
+        <LayoutInformation
+          v-show="infoOpen"
+          :item="galleryStore.currentItem"
+          class="scrollbar no-scroll-x"
+        />
+      </transition>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TagSearch } from '@/@types/tag';
+import { useNavigation } from '@/services/navigation';
+import { useGalleryStore } from '@/store/galleryStore';
+import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import LayoutCommandSearch from './LayoutCommandSearch.vue';
+import LayoutInformation from './LayoutInformation.vue';
+import LayoutProposition from './LayoutProposition.vue';
+import LayoutTagInput from './LayoutTagInput.vue';
+import LayoutTagList from './LayoutTagList.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const navigation = useNavigation();
+const galleryStore = useGalleryStore();
+
+const searchFilters = ref<TagSearch[]>([]);
+const infoOpen = ref(true);
+const isOpenSearch = ref(false);
+
+function clear() {
+  searchFilters.value = [];
+  search();
+}
+
+function search() {
+  const lastDirectory = navigation.getLastDirectory(galleryStore.currentItemPath);
+  router.push({ path: lastDirectory.path, query: serializeSearch() }).catch(err => {
+    if (err.name !== 'NavigationDuplicated') throw err;
+  });
+}
+
+function serializeSearch() {
+  const query: Record<string, null> = {};
+  searchFilters.value.forEach(filter => (query[filter.display] = null));
+  return query;
+}
+
+const currentTags = computed(() => galleryStore.currentItem?.tags ?? []);
+
+watch(() => route.query, (query) => {
+  const filters = Object.keys(query);
+  if (filters.length > 0) galleryStore.search(filters).then(search => (searchFilters.value = [...search]));
+}, { immediate: true });
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.sidebar {
+  .title {
+    background-color: $proposed-category-bgcolor;
+    color: $title-color;
+    padding: 0.2em 0.5em;
+    margin: 0 0 1px 0;
+    font-variant: small-caps;
+    justify-content: space-between;
+    user-select: none;
+
+    >svg {
+      color: $link;
+      margin-top: 2px; // Fixes a vertical centering issue with the carret
+    }
+  }
+
+  .infoPanelTitleBar {
+    cursor: pointer;
+  }
+}
+
+.flexShrinkFully {
+  flex-shrink: 1000;
+}
+</style>
diff --git a/viewer/src/views/layout/left/LayoutProposition.vue b/viewer/src/views/layout/left/LayoutProposition.vue
new file mode 100644
index 0000000..97dc3a6
--- /dev/null
+++ b/viewer/src/views/layout/left/LayoutProposition.vue
@@ -0,0 +1,208 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div :class="$style.proposition">
+    <h2
+      v-if="showCategory && Object.keys(propositions).length"
+      :class="[$style.subtitle, $style.category]"
+    >
+      {{ title }}
+    </h2>
+    <div
+      v-for="proposed in proposedTags"
+      :key="proposed.rawTag"
+    >
+      <LdLink
+        :class="$style.operationBtns"
+        :title="t('tag-propositions.substraction')"
+        @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
+      >
+        <fa-icon
+          :icon="faMinus"
+          alt="[-]"
+        />
+      </LdLink>
+
+      <LdLink
+        :class="$style.operationBtns"
+        :title="t('tag-propositions.addition')"
+        @click="add(Operation.ADDITION, proposed.rawTag)"
+      >
+        <fa-icon
+          :icon="faPlus"
+          alt="[+]"
+        />
+      </LdLink>
+
+      <LdLink
+        :class="$style.operationTag"
+        :title="t('tag-propositions.intersection')"
+        @click="add(Operation.INTERSECTION, proposed.rawTag)"
+      >
+        {{ proposed.rawTag }}
+      </LdLink>
+
+      <div
+        class="disabled"
+        :title="t('tag-propositions.item-count')"
+      >
+        {{ proposed.count }}
+      </div>
+    </div>
+    <div
+      v-if="showMoreCount > 0"
+      :class="$style.showmore"
+      @click="limit += showMoreCount"
+    >
+      {{ t("tag-propositions.showmore", [showMoreCount]) }}<fa-icon :icon="faAngleDoubleDown" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Item, RawTag } from '@/@types/gallery';
+import { Operation } from '@/@types/operation';
+import { TagIndex, TagNode, TagSearch } from '@/@types/tag';
+import LdLink from '@/components/LdLink.vue';
+import { useGalleryStore } from '@/store/galleryStore';
+import { faAngleDoubleDown, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { useVModel } from '@vueuse/core';
+import { computed, PropType, ref, watch } from 'vue';
+