@glossarist/concept-browser 0.1.0

package/src/components/AppHeader.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { useUiStore } from '../stores/ui';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useSiteConfig } from '../config/use-site-config';
+import { ref } from 'vue';
+
+const router = useRouter();
+const ui = useUiStore();
+const store = useVocabularyStore();
+const { config: siteConfig } = useSiteConfig();
+const searchInput = ref('');
+
+function doSearch() {
+  const q = searchInput.value.trim();
+  if (q) {
+    ui.searchQuery = q;
+    router.push({ name: 'search', query: { q } });
+  }
+}
+
+function goHome() {
+  router.push({ name: 'home' });
+}
+</script>
+
+<template>
+  <header class="bg-surface-raised border-b border-ink-100/80 z-30 relative">
+    <div class="px-4 lg:px-5 h-14 flex items-center gap-3">
+      <!-- Mobile hamburger -->
+      <button
+        @click="ui.toggleSidebar()"
+        :aria-label="ui.sidebarOpen ? 'Close navigation menu' : 'Open navigation menu'"
+        class="lg:hidden p-2 -ml-1 rounded-lg text-ink-600 hover:bg-ink-50 transition-colors flex-shrink-0"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>
+        </svg>
+      </button>
+
+      <!-- Logo -->
+      <button @click="goHome" class="flex items-center gap-2 hover:opacity-80 transition flex-shrink-0 group">
+        <div v-if="siteConfig?.branding?.logo" class="h-8 flex items-center">
+          <img
+            :src="siteConfig.branding.logo.path"
+            :alt="siteConfig.branding.logo.alt"
+            class="h-8 max-w-[48px] object-contain rounded"
+          />
+        </div>
+        <div v-else class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" style="background-color: var(--brand-dark)">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
+            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+            <line x1="9" y1="7" x2="17" y2="7"/>
+            <line x1="9" y1="11" x2="15" y2="11"/>
+          </svg>
+        </div>
+        <span class="font-serif text-lg text-ink-800 leading-none hidden sm:inline">{{ siteConfig?.title || 'Glossarist' }}</span>
+      </button>
+
+      <!-- Search -->
+      <form @submit.prevent="doSearch" class="flex-1 max-w-lg mx-2 sm:mx-4">
+        <div class="relative">
+          <input
+            v-model="searchInput"
+            type="text"
+            aria-label="Search concepts"
+            placeholder="Search..."
+            class="w-full pl-9 pr-3 py-2 text-sm bg-surface border border-ink-100 rounded-lg focus:ring-2 focus:ring-ink-200 focus:border-ink-400 outline-none placeholder:text-ink-300 transition-all"
+          />
+          <svg class="absolute left-3 top-2.5 w-4 h-4 text-ink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+          </svg>
+        </div>
+      </form>
+
+      <!-- Stats -->
+      <div class="text-xs text-ink-400 flex-shrink-0 hidden md:block">
+        {{ store.datasetList.length }} datasets
+      </div>
+
+      <!-- Theme toggle -->
+      <button
+        @click="ui.toggleTheme()"
+        :aria-label="ui.isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+        class="p-2 rounded-lg text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors flex-shrink-0"
+      >
+        <!-- Sun icon (shown in dark mode) -->
+        <svg v-if="ui.isDark" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+        </svg>
+        <!-- Moon icon (shown in light mode) -->
+        <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+        </svg>
+      </button>
+    </div>
+  </header>
+</template>

package/src/components/AppSidebar.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+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 NavIcon from './NavIcon.vue';
+
+const store = useVocabularyStore();
+const ui = useUiStore();
+const router = useRouter();
+const route = useRoute();
+const { getColor } = useDsStyle();
+const { globalPages, datasetPages } = useSiteConfig();
+
+const currentDataset = computed(() => (route.params as any).registerId ?? '');
+
+const datasetEntries = computed(() => {
+  const entries: { id: string; title: string; loaded: boolean; conceptCount: number }[] = [];
+  for (const [id, adapter] of store.datasets) {
+    const m = store.manifests.get(id);
+    entries.push({
+      id,
+      title: m?.title ?? id.toUpperCase(),
+      loaded: !!m,
+      conceptCount: m?.conceptCount ?? 0,
+    });
+  }
+  return entries;
+});
+
+const currentManifest = computed(() => store.manifests.get(currentDataset.value));
+
+function closeMobile() { ui.sidebarOpen = false; }
+
+function goToDataset(id: string) {
+  router.push({ name: 'dataset', params: { registerId: id } });
+  closeMobile();
+}
+
+function pageRoute(page: { route: string; datasetScoped?: boolean }): string {
+  if (!page.route) return '/';
+  if (page.datasetScoped) {
+    return `/dataset/${currentDataset.value}/${page.route}`;
+  }
+  return `/${page.route}`;
+}
+
+function isActive(page: { route: string; datasetScoped?: boolean }): boolean {
+  if (!page.route) return route.name === 'home';
+  if (page.datasetScoped) return route.name === page.route;
+  return route.name === page.route;
+}
+</script>
+
+<template>
+  <!-- Mobile backdrop -->
+  <div v-if="ui.sidebarOpen" @click="closeMobile" class="lg:hidden fixed inset-0 bg-ink-800/30 z-40"></div>
+
+  <!-- Sidebar -->
+  <aside
+    :class="ui.sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
+    class="fixed lg:static inset-y-0 left-0 z-50 w-60 bg-surface-raised border-r border-ink-100/80 overflow-y-auto flex-shrink-0 transition-transform duration-200 lg:transition-none"
+    style="top: 56px;"
+  >
+    <div class="p-4">
+      <!-- Navigation -->
+      <div class="section-label">Navigation</div>
+      <nav class="space-y-0.5 mb-6">
+        <router-link
+          v-for="page in globalPages"
+          :key="page.route || 'home'"
+          :to="pageRoute(page)"
+          class="btn-ghost w-full text-left flex items-center gap-2"
+          :class="isActive(page) ? 'active' : ''"
+          @click="closeMobile"
+        >
+          <NavIcon :name="page.icon" />
+          {{ page.title }}
+        </router-link>
+      </nav>
+
+      <!-- Dataset-level navigation (shown when viewing a dataset) -->
+      <div v-if="currentManifest" class="mb-6">
+        <div class="section-label">{{ currentManifest.title }}</div>
+        <nav class="space-y-0.5">
+          <router-link
+            v-for="page in datasetPages"
+            :key="page.route || 'concepts'"
+            :to="pageRoute(page)"
+            class="btn-ghost w-full text-left flex items-center gap-2"
+            :class="isActive(page) ? 'active' : ''"
+            @click="closeMobile"
+          >
+            <NavIcon :name="page.icon" />
+            {{ page.title }}
+          </router-link>
+        </nav>
+      </div>
+
+      <!-- Datasets -->
+      <div class="section-label">Datasets</div>
+      <nav class="space-y-1">
+        <button
+          v-for="ds in datasetEntries"
+          :key="ds.id"
+          @click="goToDataset(ds.id)"
+          class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-150 border-l-2"
+          :class="[
+            currentDataset === ds.id
+              ? 'bg-surface 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">{{ 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() }} concepts
+          </div>
+        </button>
+      </nav>
+
+      <!-- Graph stats -->
+      <div class="mt-6 pt-4 border-t border-ink-100/60">
+        <div class="text-[11px] text-ink-300 space-y-0.5">
+          <div>{{ store.graph.nodeCount.toLocaleString() }} graph nodes</div>
+          <div>{{ store.graph.edgeCount.toLocaleString() }} edges</div>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>

package/src/components/ConceptCard.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { ConceptSummary } from '../adapters/types';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useDsStyle } from '../utils/dataset-style';
+import { useVocabularyStore } from '../stores/vocabulary';
+
+const props = defineProps<{
+  entry: ConceptSummary;
+  registerId: string;
+}>();
+
+const router = useRouter();
+const { getColor } = useDsStyle();
+const store = useVocabularyStore();
+
+function viewConcept() {
+  router.push({
+    name: 'concept',
+    params: { registerId: props.registerId, conceptId: props.entry.id },
+  });
+}
+
+function statusColor(status: string): string {
+  if (status === 'valid' || status === 'Standard') return 'bg-emerald-50 text-emerald-600';
+  if (status === 'superseded') return 'bg-red-50 text-red-600';
+  if (status === 'withdrawn') return 'bg-red-100 text-red-700';
+  return 'bg-amber-50 text-amber-600';
+}
+
+const manifestLanguages = computed(() => store.manifests.get(props.registerId)?.languages ?? []);
+</script>
+
+<template>
+  <button
+    @click="viewConcept"
+    class="card-hover p-4 text-left w-full border-l-2 group"
+    :style="{ borderLeftColor: getColor(registerId) }"
+  >
+    <div class="flex items-start justify-between gap-2">
+      <div class="min-w-0">
+        <h3 class="font-medium text-ink-800 truncate group-hover:text-ink-900 transition-colors leading-snug text-[15px]">
+          {{ entry.eng || entry.id }}
+        </h3>
+        <p class="text-[11px] text-ink-300 mt-1 font-mono tabular-nums">{{ entry.id }}</p>
+      </div>
+      <span
+        class="text-[9px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded flex-shrink-0 mt-0.5"
+        :class="statusColor(entry.status)"
+      >
+        {{ entry.status === 'Standard' ? 'valid' : entry.status }}
+      </span>
+    </div>
+    <!-- Language coverage dots -->
+    <div class="flex gap-0.5 mt-2.5" :aria-label="`${manifestLanguages.length} languages`" role="img">
+      <span
+        v-for="lang in manifestLanguages"
+        :key="lang"
+        class="w-1.5 h-1.5 rounded-full"
+        :style="{ backgroundColor: getColor(registerId) + '60' }"
+        :aria-label="lang"
+      ></span>
+    </div>
+  </button>
+</template>