22 files changed, 228 insertions, 103 deletions

diff --git a/viewer/.env b/viewer/.env
index 59b220a..9092dea 100644
--- a/viewer/.env
+++ b/viewer/.env
@@ -1,4 +1,4 @@
 VUE_APP_I18N_LOCALE=en
 VUE_APP_I18N_FALLBACK_LOCALE=en
-VUE_APP_DATA_URL=/gallery/
 VUE_APP_EXAMPLE_PROJECT=../example/out/
+VUE_APP_DATA_URL=gallery/
diff --git a/viewer/public/config.json b/viewer/public/config.json
new file mode 100644
index 0000000..7023edb
--- /dev/null
+++ b/viewer/public/config.json
@@ -0,0 +1,4 @@
+{
+    "generationTimestamp": 0,
+    "galleryRoot": "gallery/"
+}
\ No newline at end of file
diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
index 25407e8..b112b6d 100644
--- a/viewer/src/@types/gallery/index.d.ts
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -18,6 +18,9 @@
 */
 
 declare namespace Gallery {
+    interface Other extends Item {
+        properties: OtherProperties,
+    }
     interface Picture extends Item {
         properties: PictureProperties,
     }
@@ -31,7 +34,10 @@ declare namespace Gallery {
         tags: RawTag[],
         path: string,
         thumbnail?: string,
-        properties: PictureProperties | DirectoryProperties,
+        properties: OtherProperties | PictureProperties | DirectoryProperties,
+    }
+    interface OtherProperties {
+        type: "other",
     }
     interface PictureProperties {
         type: "picture",
@@ -42,4 +48,5 @@ declare namespace Gallery {
         items: Item[]
     }
     type RawTag = string;
+    type ItemType = "other" | "picture" | "directory";
 }
\ No newline at end of file
diff --git a/viewer/src/assets/scss/buefy.scss b/viewer/src/assets/scss/buefy.scss
index 7fdb883..735ce6a 100644
--- a/viewer/src/assets/scss/buefy.scss
+++ b/viewer/src/assets/scss/buefy.scss
@@ -24,8 +24,7 @@
 @import "buefy_variables";
 
 // 2. Setup your Custom Colors
-// $linkedin: #0077b5;
-// $linkedin-invert: findColorInvert($linkedin);
+@import "@/assets/scss/theme.scss";
 
 @import "~bulma/sass/utilities/derived-variables";
 
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 1903c9e..b418911 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -32,6 +32,9 @@
 .nowrap {
   white-space: nowrap;
 }
+.no-scroll-x {
+  overflow-x: hidden;
+}
 
 .flex {
   display: flex;
@@ -44,19 +47,35 @@
   align-items: center;
 }
 
+// === Links
+
+.link {
+  color: $link;
+  cursor: pointer;
+  text-decoration: none;
+  &:hover {
+    color: $link-hover;
+  }
+}
+
+.disabled {
+  color: $disabled-color !important;
+}
+
 // === Scrollbar styling
 
 .scrollbar {
   overflow: auto;
 }
 .scrollbar::-webkit-scrollbar {
-  width: 12px;
+  width: 10px;
+  height: 10px;
 }
 .scrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
 }
 .scrollbar::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 6px black;
+  box-shadow: inset 0 0 1px black;
   background-color: $toolbar-color;
 }
 
@@ -71,6 +90,9 @@
     margin: 1px;
   }
 }
+img {
+  image-orientation: from-image;
+}
 
 // === Effect to apply on lazy-image loading
 
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index efd5d79..d3aac99 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -19,7 +19,7 @@
 
 // === Theme
 
-$layout-top: 70px;
+$layout-top: 35px;
 $layout-left: 250px;
 
 $panel-top-bgcolor: #225;
@@ -27,7 +27,10 @@ $panel-top-txtcolor: white;
 $panel-left-bgcolor: $panel-top-bgcolor;
 $panel-left-txtcolor: $panel-top-txtcolor;
 $content-bgcolor: #1e1e1e;
-
 $toolbar-color: #d62929;
-
-$loader-color: #119;
+$loader-color: #272727;
+$link: $panel-top-txtcolor;
+$link-hover: lightblue;
+$disabled-color: rgba($link, 0.3);
+$control-radius: 0;
+$input-radius: 0;
diff --git a/viewer/src/components/LdKeyPress.vue b/viewer/src/components/LdKeyPress.vue
new file mode 100644
index 0000000..8276607
--- /dev/null
+++ b/viewer/src/components/LdKeyPress.vue
@@ -0,0 +1,49 @@
+<!-- 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/>.
+-->
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from "vue-property-decorator";
+
+@Component
+export default class LdKeyPress extends Vue {
+  @Prop({ type: Number, required: true }) readonly keycode!: number;
+  @Prop({ type: String, default: "keyup" }) readonly event!: "keyup" | "keydown" | "keypress";
+
+  mounted() {
+    window.addEventListener(this.event, this.onEvent);
+  }
+
+  destroyed() {
+    window.removeEventListener(this.event, this.onEvent);
+  }
+
+  render() {
+    return null;
+  }
+
+  private onEvent(e: KeyboardEvent) {
+    if (e.keyCode === this.keycode) this.action(e);
+  }
+
+  @Emit()
+  private action(e: KeyboardEvent) {
+    r