13 files changed, 131 insertions, 39 deletions

diff --git a/compiler/ldgallery.1.md b/compiler/ldgallery.1.md
index 3c52f9d..4f9935b 100644
--- a/compiler/ldgallery.1.md
+++ b/compiler/ldgallery.1.md
@@ -107,7 +107,7 @@ description
 
 tags
 : List of tags for the item.
-  Tag groups can be defined using prefixes separated by ":" (colon).
+  Tag categories can be defined using prefixes separated by ":" (colon).
   Tags specified in a directory metadata sidecar are applied to all items within that directory.
 
 
@@ -139,6 +139,10 @@ excludedTags[]
 : Glob patterns of tags to exclude from the gallery.
   Defaults to [] (none).
 
+tagCategories[]
+: Top-level tag categories.
+  Defaults to [] (none).
+
 tagsFromDirectories.fromParents
 : Automatically generate tags from the name of parent directories,
   looking up in the hierarchy as far as indicated by this parameter.
diff --git a/compiler/src/Config.hs b/compiler/src/Config.hs
index 8796c3c..0ae0fa1 100644
--- a/compiler/src/Config.hs
+++ b/compiler/src/Config.hs
@@ -57,6 +57,7 @@ data GalleryConfig = GalleryConfig
   , excludedFiles :: [String]
   , includedTags :: [String]
   , excludedTags :: [String]
+  , tagCategories :: [String]
   , tagsFromDirectories :: TagsFromDirectoriesConfig
   , thumbnailMaxResolution :: Resolution
   , pictureMaxResolution :: Maybe Resolution
@@ -71,6 +72,7 @@ instance FromJSON GalleryConfig where
     <*> v .:? "excludedFiles" .!= []
     <*> v .:? "includedTags" .!= ["*"]
     <*> v .:? "excludedTags" .!= []
+    <*> v .:? "tagCategories" .!= []
     <*> v .:? "tagsFromDirectories" .!= (TagsFromDirectoriesConfig 0 "")
     <*> v .:? "thumbnailMaxResolution" .!= (Resolution 400 300)
     <*> v .:? "pictureMaxResolution"
@@ -80,9 +82,9 @@ readConfig = decodeYamlFile
 
 
 data ViewerConfig = ViewerConfig
-  { -- TODO: add viewer config keys (tag groups...)
-    galleryTitle :: String
+  { galleryTitle :: String
+  , tagCategories :: [String]
   } deriving (Generic, ToJSON, Show)
 
 viewerConfig :: GalleryConfig -> ViewerConfig
-viewerConfig GalleryConfig{galleryTitle} = ViewerConfig galleryTitle
+viewerConfig GalleryConfig{galleryTitle, tagCategories} = ViewerConfig galleryTitle tagCategories
diff --git a/example/src/gallery.yaml b/example/src/gallery.yaml
index dba6b39..b569910 100644
--- a/example/src/gallery.yaml
+++ b/example/src/gallery.yaml
@@ -14,6 +14,10 @@ includedFiles:
 #includedTags: ["*"]
 #excludedTags: []
 
+tagCategories:
+  - photographer
+  - location
+
 #tagsFromDirectories:
 #  fromParents: 0
 #  prefix: ''
diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index 4fa544f..de1c0dd 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -23,7 +23,8 @@ declare namespace Gallery {
     }
 
     interface GalleryProperties {
-        galleryTitle: string
+        galleryTitle: string,
+        tagCategories: RawTag[]
     }
     interface Index {
         properties: GalleryProperties,
diff --git a/viewer/src/@types/tag.d.ts b/viewer/src/@types/tag.d.ts
index a390c80..229c418 100644
--- a/viewer/src/@types/tag.d.ts
+++ b/viewer/src/@types/tag.d.ts
@@ -21,6 +21,7 @@ declare namespace Tag {
     interface Node {
         tag: Gallery.RawTag;
         tagfiltered: Gallery.RawTag;
+        rootPart: boolean;
         items: Gallery.Item[];
         children: Index;
     }
@@ -31,4 +32,9 @@ declare namespace Tag {
     }
     type SearchByOperation = { [index: string]: Tag.Search[] };
     type Index = { [index: string]: Node };
+
+    interface Category {
+        tag: string;
+        index: Index;
+    }
 }
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index bd7a7e7..9e61b8b 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -85,8 +85,8 @@ button svg + span {
   overflow: auto;
 }
 .scrollbar::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: $scrollbar-width;
+  height: $scrollbar-width;
 }
 .scrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0028688..9e9cdc8 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -42,6 +42,8 @@ $radius: 0;
 $loading-background: $palette-800;
 $title-color: $palette-200;
 $title-size: $size-5;
+$subtitle-color: $palette-200;
+$subtitle-size: $size-5;
 $tag-background-color: $palette-800;
 $button-color: $palette-100;
 $button-active-color: $palette-100;
@@ -62,11 +64,13 @@ $panel-left-txtcolor: $primary;
 $command-buttons-bgcolor: $palette-700;
 $content-bgcolor: $palette-900;
 $scrollbar-color: $palette-300;
+$scrollbar-width: 10px;
 $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
 $breadcrumb-margins: 12px;
 $breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
 $thumbnail-other-size: $body-line-height * 9em;
+$proposed-category-bgcolor: $palette-700;
 
 // Layout
 
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 3357777..c69a7c3 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,8 +19,9 @@
 -->
 
 <template>
-  <div>
-    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
+  <div class="proposition">
+    <h2 v-if="showCategory && proposedTags.length" class="subtitle category">{{title}}</h2>
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag">
       <a
         class="operation-btns link"
         :title="$t('tag-propositions.substraction')"
@@ -54,6 +55,8 @@ import { Operation } from "@/@types/Operation";
 
 @Component
 export default class LdProposition extends Vue {
+  @Prop() readonly category?: Tag.Node;
+  @Prop({ type: Boolean, required: true }) readonly showCategory!: boolean;
   @Prop({ type: Array, required: true }) readonly currentTags!: string[];
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
   @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
@@ -69,13 +72,14 @@ export default class LdProposition extends Vue {
       this.extractDistinctItems(this.model)
         .flatMap(item => item.tags)
         .map(this.rightmost)
-        .filter(rawTag => !this.model.find(search => search.tag === rawTag))
+        .filter(rawTag => this.tagsIndex[rawTag] && !this.model.find(search => search.tag === rawTag))
         .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
     } else {
       // Tags count from the current directory
       this.currentTags
         .flatMap(tag => tag.split(":"))
         .map(tag => this.tagsIndex[tag])
+        .filter(Boolean)
         .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
     }
 
@@ -84,6 +88,10 @@ export default class LdProposition extends Vue {
       .map(entry => ({ rawTag: entry[0], count: entry[1] }));