@glossarist/concept-browser 0.7.11 → 0.7.13

package/README.md

@@ -231,6 +231,39 @@ pages:
         source: about-fra.md
 ```
 
+### Dataset groups
+
+When a site has many datasets, you can group them in the sidebar navigation. Datasets within a group are displayed under a collapsible header.
+
+```yaml
+datasetGroups:
+  - id: viml
+    label: "VIML — International Vocabulary of Legal Metrology"
+    color: "#004996"
+    datasets: [viml-2022, viml-2013, viml-2000, viml-1968]
+    translations:
+      fra:
+        label: "VIML — Vocabulaire international de métrologie légale"
+
+  - id: vim
+    label: "VIM — International Vocabulary of Metrology"
+    color: "#005A9C"
+    datasets: [vim-2012, vim-2010, vim-2007, vim-1993]
+```
+
+#### Dataset group field reference
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `id` | yes | Unique identifier for the group |
+| `label` | yes | Display name shown as the collapsible group header |
+| `description` | no | Short description of the group |
+| `color` | no | Hex color for the group header text |
+| `datasets` | yes | Ordered array of dataset IDs belonging to this group |
+| `translations` | no | Localized label and description per language |
+
+Datasets not assigned to any group appear at the bottom of the dataset list. If `datasetGroups` is omitted, all datasets are displayed as a flat list (the default behavior).
+
 ### Cross-reference mapping
 
 ```yaml

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.7.11",
+  "version": "0.7.13",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

package/scripts/generate-data.mjs

@@ -1170,6 +1170,7 @@ writeJson(path.join(PUBLIC, 'site-config.json'), {
   description: config.description,
   translations: config.translations || undefined,
   datasets: config.datasets.map(d => d.id),
+  datasetGroups: config.datasetGroups || undefined,
   datasetTranslations: Object.keys(datasetTranslations).length ? datasetTranslations : undefined,
   defaultDataset: config.datasets.length === 1 ? config.datasets[0].id : undefined,
   uiLanguages: config.uiLanguages || undefined,

package/src/components/AppSidebar.vue

@@ -5,16 +5,17 @@ import { useUiStore } from '../stores/ui';
 import { useRoute, useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
+import type { DatasetGroup } from '../config/types';
 import { useOntologyNav, compactToSlug } from '../composables/use-ontology-nav';
 import NavIcon from './NavIcon.vue';
-import { useI18n } from '../i18n';
+import { useI18n, locale } from '../i18n';
 
 const store = useVocabularyStore();
 const ui = useUiStore();
 const router = useRouter();
 const route = useRoute();
 const { getColor } = useDsStyle();
-const { globalPages, datasetPages, config: siteConfig, localizedTitle, localizedDatasetField } = useSiteConfig();
+const { globalPages, datasetPages, config: siteConfig, localizedTitle, localizedDatasetField, datasetGroups } = useSiteConfig();
 const { t } = useI18n();
 
 const currentDataset = computed(() => route.params.registerId as string ?? '');
@@ -85,6 +86,60 @@ const datasetEntries = computed(() => {
 
 const datasetIds = computed(() => new Set(datasetEntries.value.map(d => d.id)));
 
+const hasGroups = computed(() => (datasetGroups.value?.length ?? 0) > 0);
+
+interface SidebarGroup {
+  id: string;
+  label: string;
+  description?: string;
+  color?: string;
+  entries: { id: string; title: string; loaded: boolean; conceptCount: number }[];
+}
+
+const groupedDatasetEntries = computed<SidebarGroup[]>(() => {
+  const groups = datasetGroups.value;
+  if (!groups?.length) return [];
+
+  const entryMap = new Map(datasetEntries.value.map(e => [e.id, e]));
+  const assigned = new Set<string>();
+  const result: SidebarGroup[] = [];
+
+  for (const g of groups) {
+    const entries = g.datasets
+      .map(id => entryMap.get(id))
+      .filter((e): e is typeof entryMap extends Map<string, infer V> ? V : never => !!e);
+    for (const e of entries) assigned.add(e.id);
+    const trLabel = g.translations?.[locale.value]?.label;
+    result.push({
+      id: g.id,
+      label: trLabel || g.label,
+      description: g.description,
+      color: g.color,
+      entries,
+    });
+  }
+
+  const ungrouped = datasetEntries.value.filter(e => !assigned.has(e.id));
+  if (ungrouped.length) {
+    result.push({ id: '__ungrouped__', label: '', entries: ungrouped });
+  }
+
+  return result;
+});
+
+const collapsedGroups = ref<Set<string>>(new Set());
+
+function toggleGroup(groupId: string) {
+  const s = new Set(collapsedGroups.value);
+  if (s.has(groupId)) s.delete(groupId);
+  else s.add(groupId);
+  collapsedGroups.value = s;
+}
+
+function isGroupExpanded(groupId: string): boolean {
+  return !collapsedGroups.value.has(groupId);
+}
+
 // Hide dataset-prefixed pages (e.g. "viml-about") from global nav
 const filteredGlobalPages = computed(() =>
   globalPages.value.filter(p => {
@@ -473,7 +528,84 @@ function navTitle(page: { route: string }): string {
 
       <!-- Datasets -->
       <div class="section-label">{{ t('nav.datasets') }}</div>
-      <nav class="space-y-1">
+
+      <!-- Grouped datasets -->
+      <template v-if="hasGroups">
+        <div v-for="group in groupedDatasetEntries" :key="group.id" class="mb-2">
+          <!-- Group header (skip for ungrouped) -->
+          <button
+            v-if="group.label"
+            @click="toggleGroup(group.id)"
+            class="w-full flex items-start gap-1.5 px-2 py-1.5 rounded-lg text-xs font-semibold transition-colors hover:bg-ink-50"
+            :style="group.color ? { color: group.color } : {}"
+          >
+            <span class="w-3 text-[10px] mt-0.5 flex-shrink-0">{{ isGroupExpanded(group.id) ? '▾' : '▸' }}</span>
+            <span class="flex-1 text-left leading-snug">{{ group.label }}</span>
+          </button>
+
+          <!-- Group entries -->
+          <div v-if="isGroupExpanded(group.id)" class="space-y-1" :class="group.label ? 'ml-1' : ''">
+            <div
+              v-for="ds in group.entries"
+              :key="ds.id"
+              class="rounded-lg transition-all duration-150"
+              :class="currentDataset === ds.id ? 'bg-surface' : ''"
+            >
+              <button
+                @click="goToDataset(ds.id)"
+                class="w-full text-left px-3 py-2 rounded-lg text-sm border-l-2"
+                :class="[
+                  currentDataset === ds.id
+                    ? 'text-ink-800'
+                    : 'border-transparent text-ink-600 hover:bg-ink-50 hover:text-ink-800'
+                ]"
+                :style="currentDataset === ds.id ? { borderLeftColor: getColor(ds.id), borderLeftWidth: '2px' } : {}"
+              >
+                <div class="font-medium truncate leading-snug">{{ localizedDatasetField(ds.id, 'title', ds.title) }}</div>
+                <div v-if="ds.loaded" class="text-xs mt-0.5" :class="currentDataset === ds.id ? 'text-ink-400' : 'text-ink-300'">
+                  {{ ds.conceptCount.toLocaleString() }} {{ t('home.concepts').toLowerCase() }}
+                </div>
+              </button>
+
+              <!-- Expanded dataset: sub-pages + provenance -->
+              <div v-if="currentDataset === ds.id && (filteredDatasetPages.length || provenance.owner)" class="px-2 pb-2">
+                <nav v-if="filteredDatasetPages.length" class="space-y-0.5 mt-1">
+                  <router-link
+                    v-for="page in filteredDatasetPages"
+                    :key="page.route || 'concepts'"
+                    :to="pageRoute(page)"
+                    class="btn-ghost w-full text-left flex items-center gap-2 text-sm"
+                    :class="isActive(page) ? 'active' : ''"
+                    @click="closeMobile"
+                  >
+                    <NavIcon :name="page.icon" />
+                    {{ navTitle(page) }}
+                  </router-link>
+                </nav>
+
+                <div v-if="provenance.owner" class="mt-3 pt-3 border-t border-ink-100/60">
+                  <div class="text-[11px] text-ink-300 space-y-1.5 px-1">
+                    <div v-if="provenance.ref" class="text-xs font-semibold text-ink-700">
+                      {{ provenance.ref }}
+                    </div>
+                    <div class="flex items-center gap-1">
+                      <span class="text-ink-400">{{ t('sidebar.publishedBy') }}</span>
+                      <a v-if="provenance.ownerUrl" :href="provenance.ownerUrl" target="_blank" rel="noopener" class="concept-link font-medium">{{ provenance.owner }}</a>
+                      <span v-else class="text-ink-600 font-medium">{{ provenance.owner }}</span>
+                    </div>
+                    <div v-if="provenance.sourceRepo">
+                      <a :href="provenance.sourceRepo" target="_blank" rel="noopener" class="concept-link">{{ t('sidebar.viewSource') }}</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Flat dataset list (fallback when no groups) -->
+      <nav v-else class="space-y-1">
         <div
           v-for="ds in datasetEntries"
           :key="ds.id"

package/src/config/types.ts

@@ -140,6 +140,17 @@ export interface PageConfig {
   datasetScoped?: boolean;
 }
 
+// === Dataset Groups ===
+
+export interface DatasetGroup {
+  id: string;
+  label: string;
+  description?: string;
+  color?: string;
+  datasets: string[];
+  translations?: Record<string, { label?: string; description?: string }>;
+}
+
 // === Site Config ===
 
 export interface SiteConfig {
@@ -152,6 +163,7 @@ export interface SiteConfig {
   description?: string;
   translations?: Record<string, { title?: string; subtitle?: string; description?: string }>;
   datasets: DatasetConfig[];
+  datasetGroups?: DatasetGroup[];
   routing: RoutingEntry[];
   branding: SiteBranding;
   analytics?: AnalyticsConfig;

package/src/config/use-site-config.ts

@@ -1,5 +1,6 @@
 import { ref, computed } from 'vue';
 import type { PageConfig } from './types';
+import type { DatasetGroup } from './types';
 import { locale } from '../i18n';
 
 export interface RuntimeSiteConfig {
@@ -12,6 +13,7 @@ export interface RuntimeSiteConfig {
   translations?: Record<string, { title?: string; subtitle?: string; description?: string }>;
   datasetTranslations?: Record<string, Record<string, { title?: string; description?: string }>>;
   datasets: string[];
+  datasetGroups?: DatasetGroup[];
   defaultDataset?: string;
   uiLanguages?: { code: string; label: string }[];
   branding?: {
@@ -182,5 +184,5 @@ export function useSiteConfig() {
     synthesizeDatasetPages(siteConfig.value?.features, siteConfig.value?.pages),
   );
 
-  return { config, visibleDatasets, localizedTitle, localizedSubtitle, localizedDescription, localizedDatasetField, loadConfig, globalPages, datasetPages };
+  return { config, visibleDatasets, localizedTitle, localizedSubtitle, localizedDescription, localizedDatasetField, loadConfig, globalPages, datasetPages, datasetGroups: computed(() => siteConfig.value?.datasetGroups) };
 }