4 files changed, 56 insertions, 15 deletions

diff --git a/viewer/src/views/layout/left/LayoutInformation.vue b/viewer/src/views/layout/left/LayoutInformation.vue
index 780a458..9dfb311 100644
--- a/viewer/src/views/layout/left/LayoutInformation.vue
+++ b/viewer/src/views/layout/left/LayoutInformation.vue
@@ -67,6 +67,7 @@ const formatDate = computed(() => {
 .infopanel {
   padding: 2px 2px 7px 7px;
   overflow-wrap: break-word;
+  max-height: 50%;
 
   .title {
     font-weight: bold;
@@ -80,13 +81,6 @@ const formatDate = computed(() => {
     > * {
       margin-top: 5px;
     }
-    ul,
-    ol {
-      margin-left: 1em;
-    }
-    ul {
-      list-style-type: disc;
-    }
     a {
       color: $palette-200;
       &:hover {
diff --git a/viewer/src/views/layout/left/LayoutTagInput.vue b/viewer/src/views/layout/left/LayoutTagInput.vue
index a37c546..9ee6f8a 100644
--- a/viewer/src/views/layout/left/LayoutTagInput.vue
+++ b/viewer/src/views/layout/left/LayoutTagInput.vue
@@ -23,7 +23,7 @@
     v-model="search"
     :placeholder="t('tagInput.placeholder')"
     :tabindex="50"
-    @focus="e => (e.target as HTMLInputElement).select()"
+    @focus="(e: FocusEvent) => (e.target as HTMLInputElement).select()"
     @keypress.enter="inputEnter"
     @keydown.backspace="inputBackspace"
   />
@@ -58,7 +58,8 @@ import LdDropdown from '@/components/LdDropdown.vue';
 import LdInput from '@/components/LdInput.vue';
 import { useIndexFactory } from '@/services/indexFactory';
 import { useGalleryStore } from '@/store/galleryStore';
-import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core';
+import { useUiStore } from '@/store/uiStore';
+import { computedEager, onKeyStroke, useElementBounding, useFocus, useKeyModifier, useVModel } from '@vueuse/core';
 import { computed, ref, StyleValue, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -69,6 +70,7 @@ const emit = defineEmits(['update:modelValue', 'search', 'opening', 'closing']);
 const model = useVModel(props, 'modelValue', emit);
 
 const { t } = useI18n();
+const uiStore = useUiStore();
 const galeryStore = useGalleryStore();
 const indexFactory = useIndexFactory();
 
@@ -88,6 +90,16 @@ const { focused } = useFocus(input);
 
 // ---
 
+const controlState = useKeyModifier('Control');
+onKeyStroke('k', e => {
+  if (!controlState.value || focused.value) return;
+  e.preventDefault();
+  uiStore.toggleFullWidth(false);
+  focused.value = true;
+});
+
+// ---
+
 const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false)
   .filter(filterAlreadyPresent)
   .sort((a, b) => b.items.length - a.items.length));
diff --git a/viewer/src/views/layout/top/LayoutCommand.vue b/viewer/src/views/layout/top/LayoutCommand.vue
index 8919da3..85d47b6 100644
--- a/viewer/src/views/layout/top/LayoutCommand.vue
+++ b/viewer/src/views/layout/top/LayoutCommand.vue
@@ -2,7 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2022  Guillaume FOUET
---               2020       Pacien TRAN-GIRARD
+--               2020-2022  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
@@ -33,7 +33,24 @@
         size="lg"
       />
     </LdLink>
-    <LayoutCommandSort :tabindex="20" />
+
+    <LdLink
+      v-if="itemResourceUrl"
+      :title="t('command.download')"
+      :download="navigation.getFileName(props.item)"
+      :href="itemResourceUrl"
+      :tabindex="20"
+    >
+      <fa-icon
+        :icon="faFileDownload"
+        size="lg"
+      />
+    </LdLink>
+    <LayoutCommandSort
+      v-else
+      :tabindex="20"
+    />
+
     <LdLink
       :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }"
       :title="t('command.back')"
@@ -66,22 +83,34 @@
 <script setup lang="ts">
 import { Item } from '@/@types/gallery';
 import LdLink from '@/components/LdLink.vue';
+import { useNavigation } from '@/services/navigation';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
 import { useUiStore } from '@/store/uiStore';
-import { faAngleDoubleLeft, faArrowLeft, faFolder, faLevelUpAlt, faSearch } from '@fortawesome/free-solid-svg-icons';
+import {
+  faAngleDoubleLeft,
+  faArrowLeft,
+  faFileDownload,
+  faFolder,
+  faLevelUpAlt,
+  faSearch,
+} from '@fortawesome/free-solid-svg-icons';
 import { computedEager } from '@vueuse/shared';
-import { computed } from 'vue';
+import { computed, PropType, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import LayoutCommandSort from './LayoutCommandSort.vue';
 
 const props = defineProps({
   currentItemPath: { type: Array<Item>, required: true },
+  item: { type: Object as PropType<Item>, required: true },
 });
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const uiStore = useUiStore();
+const navigation = useNavigation();
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 
 const commandToggleSearchPanelIcon = computed(() => uiStore.fullWidth ? faSearch : faAngleDoubleLeft);
 const isRoot = computedEager(() => props.currentItemPath.length <= 1 && !uiStore.searchMode);
diff --git a/viewer/src/views/layout/top/LayoutTop.vue b/viewer/src/views/layout/top/LayoutTop.vue
index b755c42..02c8b7b 100644
--- a/viewer/src/views/layout/top/LayoutTop.vue
+++ b/viewer/src/views/layout/top/LayoutTop.vue
@@ -18,8 +18,14 @@
 -->
 
 <template>
-  <div class="flex">
-    <LayoutCommand :current-item-path="galleryStore.currentItemPath" />
+  <div
+    v-if="galleryStore.currentItem"
+    class="flex"
+  >
+    <LayoutCommand
+      :current-item-path="galleryStore.currentItemPath"
+      :item="galleryStore.currentItem"
+    />
     <LayoutBreadcrumb
       :current-item-path="galleryStore.currentItemPath"
       :search-mode="uiStore.searchMode"