@lad-sapienza/scms-core 0.1.0-alpha.2 → 0.1.0-alpha.4

package/components/Map/Search/SearchUI.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import type { SearchInFields, SearchQuery, SearchOperators } from '../types';
 import { SearchUISimple } from './SearchUISimple';
 import { SearchUIAdvanced } from './SearchUIAdvanced';
+import { useTranslation } from '../../i18n';
 
 export interface SearchUIProps {
   fieldList: SearchInFields;
@@ -24,6 +25,7 @@ export function SearchUI({
   limitTo,
   currentQuery 
 }: SearchUIProps) {
+  const t = useTranslation();
   const [isAdvanced, setIsAdvanced] = useState(limitTo === 'advanced');
 
   const toggleMode = () => {
@@ -34,7 +36,7 @@ export function SearchUI({
   if (!fieldList || Object.keys(fieldList).length === 0) {
     return (
       <div className="text-danger small">
-        No searchable fields configured for this layer.
+        {t('map.search.noFieldsConfigured')}
       </div>
     );
   }
@@ -47,7 +49,7 @@ export function SearchUI({
       {isLoading && (
         <div className="text-center mb-3">
           <div className="spinner-border text-primary" role="status">
-            <span className="visually-hidden">Loading...</span>
+            <span className="visually-hidden">{t('map.search.loading')}</span>
           </div>
         </div>
       )}

package/components/Map/Search/SearchUIAdvanced.tsx

@@ -1,7 +1,7 @@
 import { useState, type SyntheticEvent } from 'react';
 import { Search, X, Plus, Minus, ArrowLeft } from 'lucide-react';
 import type { SearchInFields, SearchQuery, SearchFilter, SearchOperators } from '../types';
-import { DEFAULT_OPERATORS, DEFAULT_CONNECTORS } from './SearchOperators';
+import { useTranslation } from '../../i18n';
 
 export interface SearchUIAdvancedProps {
   fieldList: SearchInFields;
@@ -24,8 +24,33 @@ export function SearchUIAdvanced({
   onToggleSimple,
   currentQuery 
 }: SearchUIAdvancedProps) {
-  const mergedOperators = { ...DEFAULT_OPERATORS, ...operators };
-  
+  const t = useTranslation();
+  // Translated defaults for the operator/connector *labels* only — the
+  // underscore-prefixed keys are Directus's own filter-operator wire
+  // format, unaffected by translation. An explicit `operators` prop still
+  // overrides these, same precedence as before.
+  const translatedOperators: SearchOperators = {
+    _eq: t('map.search.operators.eq'),
+    _neq: t('map.search.operators.neq'),
+    _lt: t('map.search.operators.lt'),
+    _lte: t('map.search.operators.lte'),
+    _gt: t('map.search.operators.gt'),
+    _gte: t('map.search.operators.gte'),
+    _null: t('map.search.operators.null'),
+    _nnull: t('map.search.operators.nnull'),
+    _contains: t('map.search.operators.contains'),
+    _icontains: t('map.search.operators.icontains'),
+    _ncontains: t('map.search.operators.ncontains'),
+    _starts_with: t('map.search.operators.startsWith'),
+    _istarts_with: t('map.search.operators.istartsWith'),
+    _nstarts_with: t('map.search.operators.nstartsWith'),
+    _ends_with: t('map.search.operators.endsWith'),
+    _iends_with: t('map.search.operators.iendsWith'),
+    _nends_with: t('map.search.operators.nendsWith'),
+  };
+  const translatedConnectors = { _and: t('map.search.connectors.and'), _or: t('map.search.connectors.or') };
+  const mergedOperators = { ...translatedOperators, ...operators };
+
   // Initialize state from currentQuery if provided
   const getInitialConnector = (): '_and' | '_or' => {
     return currentQuery?.connector || '_and';
@@ -140,7 +165,7 @@ export function SearchUIAdvanced({
                   onChange={(e) => setConnector(e.target.value as '_and' | '_or')}
                   className="form-check-input"
                 />
-                <span className="small">{DEFAULT_CONNECTORS._and}</span>
+                <span className="small">{translatedConnectors._and}</span>
               </label>
               
               <label className="d-flex align-items-center gap-2">
@@ -152,7 +177,7 @@ export function SearchUIAdvanced({
                   onChange={(e) => setConnector(e.target.value as '_and' | '_or')}
                   className="form-check-input"
                 />
-                <span className="small">{DEFAULT_CONNECTORS._or}</span>
+                <span className="small">{translatedConnectors._or}</span>
               </label>
             </div>
           </div>
@@ -226,7 +251,7 @@ export function SearchUIAdvanced({
                 className="btn btn-danger btn-sm"
                 onClick={() => removeFilter(index)}
                 disabled={isLoading || filters.length === 1}
-                title={filters.length === 1 ? "Cannot remove the last filter" : "Remove filter"}
+                title={filters.length === 1 ? t('map.search.cannotRemoveLastFilter') : t('map.search.removeFilter')}
               >
                 <Minus size={16} />
               </button>
@@ -243,34 +268,34 @@ export function SearchUIAdvanced({
             disabled={isLoading}
           >
             <Plus size={16} />
-            Add Filter
+            {t('map.search.addFilter')}
           </button>
         </div>
 
         {/* Actions */}
         <div className="d-flex gap-2 mt-3">
-          <button 
-            type="submit" 
+          <button
+            type="submit"
             className="btn btn-primary btn-sm"
             disabled={isLoading}
           >
             {isLoading ? (
               <span className="spinner-border spinner-border-sm" role="status">
-                <span className="visually-hidden">Loading...</span>
+                <span className="visually-hidden">{t('map.search.loading')}</span>
               </span>
             ) : (
               <Search size={16} />
             )}
-            Search
+            {t('map.search.submit')}
           </button>
-          <button 
-            type="button" 
+          <button
+            type="button"
             className="btn btn-secondary btn-sm"
             onClick={handleClear}
             disabled={isLoading || !hasFilters()}
           >
             <X size={16} />
-            Clear
+            {t('map.search.clear')}
           </button>
           {onToggleSimple && (
             <button 
@@ -279,7 +304,7 @@ export function SearchUIAdvanced({
               onClick={onToggleSimple}
             >
               <ArrowLeft size={16} />
-              Simple Search
+              {t('map.search.simpleSearch')}
             </button>
           )}
         </div>

package/components/Map/Search/SearchUISimple.tsx

@@ -1,6 +1,7 @@
 import { useState, type SyntheticEvent } from 'react';
 import { Search, X, TextSearch } from 'lucide-react';
 import type { SearchInFields, SearchQuery, SearchFilter } from '../types';
+import { useTranslation } from '../../i18n';
 
 export interface SearchUISimpleProps {
   fieldList: SearchInFields;
@@ -21,6 +22,7 @@ export function SearchUISimple({
   onToggleAdvanced,
   currentQuery 
 }: SearchUISimpleProps) {
+  const t = useTranslation();
   // Extract search text from currentQuery if it exists and is a simple search (all filters have same value)
   const getInitialSearchText = () => {
     if (!currentQuery?.filters?.length) return '';
@@ -67,7 +69,7 @@ export function SearchUISimple({
           <input
             type="text"
             className="form-control form-control-sm"
-            placeholder="Search..."
+            placeholder={t('map.search.placeholder')}
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
             disabled={isLoading}
@@ -79,34 +81,34 @@ export function SearchUISimple({
           >
             {isLoading ? (
               <span className="spinner-border spinner-border-sm" role="status">
-                <span className="visually-hidden">Loading...</span>
+                <span className="visually-hidden">{t('map.search.loading')}</span>
               </span>
             ) : (
               <Search size={16} />
             )}
-            Search
+            {t('map.search.submit')}
           </button>
-          <button 
-            type="button" 
+          <button
+            type="button"
             className="btn btn-secondary btn-sm"
             onClick={handleClear}
             disabled={isLoading || !searchText}
           >
             <X size={16} />
-            Clear
+            {t('map.search.clear')}
           </button>
         </div>
       </form>
-      
+
       {onToggleAdvanced && (
         <div className="text-center">
-          <button 
+          <button
             type="button"
             className="btn btn-sm btn-link"
             onClick={onToggleAdvanced}
           >
             <TextSearch size={16} />
-            Advanced Search
+            {t('map.search.advancedSearch')}
           </button>
         </div>
       )}

package/components/README.md

@@ -56,7 +56,7 @@ Core components should be:
 
 ## User Customization
 
-Users should **not** edit core components directly. Instead:
-- Override behavior in `usr/layouts/`
-- Create custom components in `usr/components/`
+Users should **not** fork these components. Instead:
+- Override behavior in `src/layouts/`
+- Create custom components in `src/components/`
 - Extend layouts with slots and composition

package/components/Record/RecordFetcher.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import type { ComponentType } from 'react';
+import { useTranslation } from '../i18n';
 
 export interface RecordFetcherProps {
   /** Directus base URL. Defaults to PUBLIC_DIRECTUS_URL env var. */
@@ -23,17 +24,19 @@ export interface RecordFetcherProps {
 }
 
 function DefaultLoading() {
+  const t = useTranslation();
   return (
     <div style={{ padding: '2rem', opacity: 0.5 }}>
-      Loading record&hellip;
+      {t('record.loading')}
     </div>
   );
 }
 
 function DefaultError({ table, id }: { table: string; id: string }) {
+  const t = useTranslation();
   return (
     <div style={{ padding: '2rem', color: 'red' }}>
-      Record not found for table &ldquo;{table}&rdquo; with ID &ldquo;{id}&rdquo;.
+      {t('record.notFound', { table, id })}
     </div>
   );
 }

package/components/TableOfContents/TableOfContents.astro

@@ -19,7 +19,7 @@ const { maxDepth = 3, minDepth = 2, title = "Table of Contents" } = Astro.props;
 const tocId = `toc-${Math.random().toString(36).substring(7)}`;
 ---
 
-<nav id={tocId} class="toc bg-light border border-secondary rounded p-3 mb-4 shadow-sm">
+<nav id={tocId} class="toc border rounded p-3 mb-4 shadow-sm">
   <h2 class="h5 mb-3 text-secondary">{title}</h2>
   <ul class="toc-list small"></ul>
 </nav>
@@ -27,7 +27,6 @@ const tocId = `toc-${Math.random().toString(36).substring(7)}`;
 <style>
   .toc {
     background-color: var(--bs-light);
-    border-color: var(--bs-secondary);
   }
   
   a.toc-link {

package/components/ThemeToggle.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from "react";
+import { Sun, Moon, Monitor } from "lucide-react";
+
+/** Must match the key the `scms()` integration's anti-FOUC head script reads/writes — see `scms.ts`. */
+const STORAGE_KEY = "scms-theme";
+
+type ThemePreference = "system" | "light" | "dark";
+type ResolvedTheme = "light" | "dark";
+
+/** Click order: System -> Light -> Dark -> System -> ... */
+const CYCLE: ThemePreference[] = ["system", "light", "dark"];
+
+const LABELS: Record<ThemePreference, string> = {
+  system: "Auto (follows system)",
+  light: "Light",
+  dark: "Dark",
+};
+
+function prefersDark(): boolean {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+/** Reads the stored preference, defaulting to "system" for anything else (absent, or a stale/foreign value). */
+function readStoredPreference(): ThemePreference {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored === "light" || stored === "dark" ? stored : "system";
+  } catch {
+    return "system";
+  }
+}
+
+function resolveTheme(preference: ThemePreference): ResolvedTheme {
+  return preference === "system" ? (prefersDark() ? "dark" : "light") : preference;
+}
+
+function applyTheme(theme: ResolvedTheme) {
+  document.documentElement.setAttribute("data-bs-theme", theme);
+}
+
+/** Optional CSS class override for the toggle button. */
+interface ThemeToggleProps {
+  /** Additional CSS classes applied to the toggle button. */
+  className?: string;
+}
+
+/**
+ * Floating three-state (system / light / dark) theme toggle. Clicking cycles
+ * through the three; while on "system" the resolved theme follows the OS's
+ * `prefers-color-scheme` live, including changes made after the page loaded
+ * (e.g. an OS's scheduled light/dark switch) — this is the standard pattern
+ * (GitHub, VS Code, Bootstrap's own docs all default to "system" and only
+ * pin to an explicit theme once the user overrides it).
+ *
+ * Flips Bootstrap 5.3's `data-bs-theme` attribute on `<html>` and persists
+ * the choice to `localStorage` ("system" is stored as the *absence* of a
+ * key, so a user who never touches the toggle keeps following the OS
+ * indefinitely). Pairs with the inline anti-FOUC script `scms()` injects
+ * into every page's `<head>` (see `scms.ts`), which sets the same attribute
+ * from `localStorage`/`prefers-color-scheme` before first paint.
+ *
+ * A site's own `global.css` supplies the actual dark palette as
+ * `[data-bs-theme="dark"]` overrides of its light-mode custom properties;
+ * this component only owns the toggle mechanism.
+ *
+ * Must be hydrated with `client:load`.
+ *
+ * @example
+ * ```astro
+ * <ThemeToggle client:load />
+ * ```
+ */
+const ThemeToggle: React.FC<ThemeToggleProps> = ({ className }) => {
+  // Starts "system" on both server and first client render so hydration
+  // never mismatches; corrected to the real stored value in the effect
+  // below, which only runs client-side after `document`/`localStorage` exist.
+  const [preference, setPreference] = useState<ThemePreference>("system");
+
+  useEffect(() => {
+    setPreference(readStoredPreference());
+
+    // Live-follow the OS while (and only while) "system" is the active
+    // preference. Reads localStorage directly at fire time rather than
+    // closing over `preference`, so this stays correct without having to
+    // resubscribe every time the preference changes.
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleSystemChange = () => {
+      if (readStoredPreference() === "system") {
+        applyTheme(resolveTheme("system"));
+      }
+    };
+    media.addEventListener("change", handleSystemChange);
+    return () => media.removeEventListener("change", handleSystemChange);
+  }, []);
+
+  const cycle = () => {
+    const next = CYCLE[(CYCLE.indexOf(preference) + 1) % CYCLE.length];
+    setPreference(next);
+    try {
+      if (next === "system") {
+        localStorage.removeItem(STORAGE_KEY);
+      } else {
+        localStorage.setItem(STORAGE_KEY, next);
+      }
+    } catch {
+      // localStorage unavailable (private browsing, disabled storage) — theme still applies for this page view.
+    }
+    applyTheme(resolveTheme(next));
+  };
+
+  const next = CYCLE[(CYCLE.indexOf(preference) + 1) % CYCLE.length];
+  const icon =
+    preference === "system" ? <Monitor size={18} /> : preference === "dark" ? <Moon size={18} /> : <Sun size={18} />;
+
+  return (
+    <button
+      type="button"
+      onClick={cycle}
+      aria-label={`Theme: ${LABELS[preference]}. Click to switch to ${LABELS[next]}.`}
+      title={`Theme: ${LABELS[preference]}`}
+      className={className}
+      style={{
+        position: "fixed",
+        bottom: "1.25rem",
+        right: "1.25rem",
+        zIndex: 1040,
+        width: "2.75rem",
+        height: "2.75rem",
+        borderRadius: "50%",
+        border: "1px solid var(--bs-border-color)",
+        background: "var(--bs-body-bg)",
+        color: "var(--bs-body-color)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+        cursor: "pointer",
+      }}
+    >
+      {icon}
+    </button>
+  );
+};
+
+export default ThemeToggle;

package/components/ZoteroGeoViewer/ZoteroGeoViewer.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import type { ZoteroGeoViewerProps } from './types';
 import { Map } from '../Map';
 import { ZoteroRecordsPreview } from './ZoteroRecordsPreview';
+import { useTranslation } from '../i18n';
 
 // Module-level cache to avoid re-fetching data
 let zoteroCache: Record<string, number> | null = null;
@@ -10,12 +11,15 @@ let coordinateCache: any[] | null = null;
 const COORDINATES_URL = '/data/zoteroTagCoordinates.geojson';
 
 export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
+  // Hooks must run unconditionally, before any of the early error returns below.
+  const t = useTranslation();
+
   // Add error handling for props
   if (!props) {
     return (
       <div className="alert alert-danger">
-        <h3 className="fw-semibold">Error loading Zotero data</h3>
-        <p className="mb-0">Component props are undefined</p>
+        <h3 className="fw-semibold">{t('zoteroGeoViewer.error.title')}</h3>
+        <p className="mb-0">{t('zoteroGeoViewer.error.propsUndefined')}</p>
       </div>
     );
   }
@@ -33,9 +37,9 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
   if (!groupId) {
     return (
       <div className="alert alert-danger">
-        <h3 className="fw-semibold">Error loading Zotero data</h3>
-        <p className="mb-1">Group ID is required</p>
-        <p className="small mb-0">Group ID: {groupId}</p>
+        <h3 className="fw-semibold">{t('zoteroGeoViewer.error.title')}</h3>
+        <p className="mb-1">{t('zoteroGeoViewer.error.groupIdRequired')}</p>
+        <p className="small mb-0">{t('zoteroGeoViewer.groupId', { id: groupId })}</p>
       </div>
     );
   }
@@ -300,10 +304,10 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
     return (
       <div className="d-flex align-items-center justify-content-center p-4">
         <div className="spinner-border text-primary" role="status">
-          <span className="visually-hidden">Loading...</span>
+          <span className="visually-hidden">{t('zoteroGeoViewer.loading')}</span>
         </div>
-        <span className="ms-2">Loading Zotero library...</span>
-        <div className="ms-3 small text-secondary">Group ID: {groupId}</div>
+        <span className="ms-2">{t('zoteroGeoViewer.loadingLibrary')}</span>
+        <div className="ms-3 small text-secondary">{t('zoteroGeoViewer.groupId', { id: groupId })}</div>
       </div>
     );
   }
@@ -311,15 +315,15 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
   if (error) {
     return (
       <div className="alert alert-danger">
-        <h3 className="fw-semibold">Error loading Zotero data</h3>
+        <h3 className="fw-semibold">{t('zoteroGeoViewer.error.title')}</h3>
         <p className="small mb-1">{error}</p>
-        <p className="small mb-0">Group ID: {groupId}</p>
+        <p className="small mb-0">{t('zoteroGeoViewer.groupId', { id: groupId })}</p>
       </div>
     );
   }
 
   if (!data || !mapped) {
-    return <div className="p-3 text-secondary">No data loaded</div>;
+    return <div className="p-3 text-secondary">{t('zoteroGeoViewer.noDataLoaded')}</div>;
   }
 
   // Prepare GeoJSON for map
@@ -332,8 +336,23 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
   const totalItems = Object.values(data).reduce((sum, count) => sum + count, 0);
   const geoItems = featuresWithGeometry.reduce((sum, f) => sum + (f.properties.zoteroCount || 0), 0);
 
+  // The popup below is built as an HTML string for MapLibre's own template
+  // substitution (its "${propertyName}" syntax, resolved per-feature when a
+  // popup opens — a second, later templating pass, unrelated to this one).
+  // t() runs now, at React render time, so `{count}` here means "substitute
+  // the translated text" — the literal marker string `${zoteroCount}` inside
+  // it is what actually reaches MapLibre, preserved verbatim so it can still
+  // do its own substitution afterwards.
+  const popupItemsLabel = t('zoteroGeoViewer.popup.items', { count: '${zoteroCount}' });
+  const popupShowRecordsLabel = t('zoteroGeoViewer.popup.showRecords', { count: '${zoteroCount}' });
+
   return (
     <div className="zotero-geo-viewer">
+      <style>{`
+        .zoterogeo-panel {
+          background-color: var(--bs-tertiary-bg);
+        }
+      `}</style>
       <div className={getLayoutClasses()}>
         {/* Map */}
         <div className={getMapColSpan()}>
@@ -342,7 +361,7 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
             center={mapCenter}
             baseLayers={['EsriSatellite', 'GoogleTerrain', 'Imperium']}
             vectorLayers={mapCenter && geojson && geojson.features.length > 0 ? [{
-              name: 'Zotero Items',
+              name: t('zoteroGeoViewer.layerName'),
               source: { type: 'geojson', data: geojson },
               style: {
                 type: 'circle',
@@ -368,7 +387,7 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
                   'circle-stroke-color': '#ffffff'
                 }
               },
-              popupTemplate: `<h4>\${name}</h4><p>\${altLabel}</p><div class="text-sm mb-2">Items: \${zoteroCount}</div><button style="background-color: #1d4ed8; color: white; padding: 8px 16px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);" onmouseover="this.style.backgroundColor='#1e40af'" onmouseout="this.style.backgroundColor='#1d4ed8'" type="button" data-tag="\${name}" data-alt-labels="\${altLabel}" onclick="window['${handlerName}'] && window['${handlerName}'](this.dataset.tag, this.dataset.altLabels)">📚 Show \${zoteroCount} records</button>`,
+              popupTemplate: `<h4>\${name}</h4><p>\${altLabel}</p><div class="text-sm mb-2">${popupItemsLabel}</div><button style="background-color: #1d4ed8; color: white; padding: 8px 16px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);" onmouseover="this.style.backgroundColor='#1e40af'" onmouseout="this.style.backgroundColor='#1d4ed8'" type="button" data-tag="\${name}" data-alt-labels="\${altLabel}" onclick="window['${handlerName}'] && window['${handlerName}'](this.dataset.tag, this.dataset.altLabels)">${popupShowRecordsLabel}</button>`,
               visible: true,
               fitToContent: true
             }] : []}
@@ -382,27 +401,27 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
         <div className={getControlsColSpan()}>
           <div className="mb-3">
             {/* Library Statistics */}
-            <div className="bg-light rounded p-3 mb-3">
-              <h3 className="fw-semibold mb-3">Library Statistics</h3>
+            <div className="zoterogeo-panel rounded p-3 mb-3">
+              <h3 className="fw-semibold mb-3">{t('zoteroGeoViewer.stats.title')}</h3>
               <div className="row g-3 small">
                 <div className="col-6 text-center">
                   <div className="h4 fw-bold text-primary">{totalItems}</div>
-                  <div className="text-secondary">Total Items</div>
+                  <div className="text-secondary">{t('zoteroGeoViewer.stats.totalItems')}</div>
                 </div>
                 <div className="col-6 text-center">
                   <div className="h4 fw-bold text-success">{geoItems}</div>
-                  <div className="text-secondary">Georeferenced</div>
+                  <div className="text-secondary">{t('zoteroGeoViewer.stats.georeferenced')}</div>
                 </div>
               </div>
             </div>
 
             {/* Tag Search */}
-            <div className="bg-white border rounded p-3">
-              <h3 className="fw-semibold mb-3">Search Tags</h3>
+            <div className="zoterogeo-panel border rounded p-3">
+              <h3 className="fw-semibold mb-3">{t('zoteroGeoViewer.search.title')}</h3>
               <div className="position-relative">
                 <input
                   type="text"
-                  placeholder="Search for locations..."
+                  placeholder={t('zoteroGeoViewer.search.placeholder')}
                   value={searchTerm}
                   onChange={(e) => {
                     setSearchTerm(e.target.value);
@@ -415,7 +434,7 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
                 
                 {/* Simple autocomplete */}
                 {tagAutocomplete && showDropdown && filteredSuggestions.length > 0 && (
-                  <div className="position-absolute w-100 mt-1 bg-white border rounded shadow" style={{zIndex: 1000, maxHeight: '12rem', overflowY: 'auto'}}>
+                  <div className="zoterogeo-panel position-absolute w-100 mt-1 border rounded shadow" style={{zIndex: 1000, maxHeight: '12rem', overflowY: 'auto'}}>
                     {filteredSuggestions.map((tag, index) => (
                       <button
                         key={index}
@@ -432,8 +451,8 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
                         <div className="fw-medium">{tag.label}</div>
                         {tag.alts.length > 0 && (
                           <div className="small text-secondary">
-                            Also: {tag.alts.slice(0, 3).join(', ')}
-                            {tag.alts.length > 3 && ` +${tag.alts.length - 3} more`}
+                            {t('zoteroGeoViewer.search.also', { list: tag.alts.slice(0, 3).join(', ') })}
+                            {tag.alts.length > 3 && ` ${t('zoteroGeoViewer.search.moreCount', { count: tag.alts.length - 3 })}`}
                           </div>
                         )}
                       </button>
@@ -451,7 +470,7 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
                   }}
                   className="mt-2 small btn btn-link p-0"
                 >
-                  Clear search
+                  {t('zoteroGeoViewer.search.clearSearch')}
                 </button>
               )}
             </div>
@@ -459,14 +478,14 @@ export function ZoteroGeoViewer(props: ZoteroGeoViewerProps) {
             {/* Selected tag info */}
             {selectedTag && (
               <div className="alert alert-info">
-                <h4 className="fw-semibold alert-heading">Selected: {selectedTag.main}</h4>
+                <h4 className="fw-semibold alert-heading">{t('zoteroGeoViewer.search.selected', { tag: selectedTag.main })}</h4>
                 {selectedTag.alternatives.length > 0 && (
                   <p className="small mb-1">
-                    Also includes: {selectedTag.alternatives.join(', ')}
+                    {t('zoteroGeoViewer.search.alsoIncludes', { list: selectedTag.alternatives.join(', ') })}
                   </p>
                 )}
                 <p className="small mb-0">
-                  Use the map markers to explore items at this location.
+                  {t('zoteroGeoViewer.search.helpText')}
                 </p>
               </div>
             )}