@mdguggenbichler/slugbase-core 0.0.39 → 0.0.40

package/frontend/src/locales/de.json

@@ -635,6 +635,9 @@
   "searchEngineGuide": {
     "title": "Anleitung zur Einrichtung benutzerdefinierter Suchmaschinen",
     "description": "So richtest du eine Suchmaschine im Browser ein und greifst schnell auf deine Lesezeichen zu",
+    "tabChromium": "Chromium-basiert",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Schritt {{n}}",
     "howItWorks": "Wie es funktioniert",
     "howItWorksDescription": "Mit einer Suchmaschine tippst du in der Adresszeile z. B. 'go' plus Slug und landest direkt beim Lesezeichen.",
     "yourSearchUrl": "Ihre Such-URL",

package/frontend/src/locales/en.json

@@ -675,6 +675,9 @@
   "searchEngineGuide": {
     "title": "Custom Search Engine Setup Guide",
     "description": "Learn how to set up a custom search engine in your browser to quickly access your bookmarks",
+    "tabChromium": "Chromium-based",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Step {{n}}",
     "howItWorks": "How It Works",
     "howItWorksDescription": "By setting up a custom search engine, you can type a keyword (like 'go') followed by a bookmark slug in your browser's address bar to instantly navigate to that bookmark.",
     "yourSearchUrl": "Your Search URL",

package/frontend/src/locales/es.json

@@ -636,6 +636,9 @@
   "searchEngineGuide": {
     "title": "Guía de configuración de motor de búsqueda personalizado",
     "description": "Aprende cómo configurar un motor de búsqueda personalizado en tu navegador para acceder rápidamente a tus marcadores",
+    "tabChromium": "Basado en Chromium",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Paso {{n}}",
     "howItWorks": "Cómo funciona",
     "howItWorksDescription": "Al configurar un motor de búsqueda personalizado, puedes escribir una palabra clave (como 'go') seguida de un slug de marcador en la barra de direcciones de tu navegador para navegar instantáneamente a ese marcador.",
     "yourSearchUrl": "Tu URL de búsqueda",

package/frontend/src/locales/fr.json

@@ -459,6 +459,9 @@
   "searchEngineGuide": {
     "title": "Guide de configuration du moteur de recherche personnalisé",
     "description": "Apprenez à configurer un moteur de recherche personnalisé dans votre navigateur pour accéder rapidement à vos favoris",
+    "tabChromium": "Basé sur Chromium",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Étape {{n}}",
     "howItWorks": "Comment ça fonctionne",
     "howItWorksDescription": "En configurant un moteur de recherche personnalisé, vous pouvez taper un mot-clé (comme 'go') suivi d'un slug de favori dans la barre d'adresse de votre navigateur pour naviguer instantanément vers ce favori.",
     "yourSearchUrl": "Votre URL de recherche",

package/frontend/src/locales/it.json

@@ -444,6 +444,9 @@
   "searchEngineGuide": {
     "title": "Guida alla configurazione del motore di ricerca personalizzato",
     "description": "Scopri come configurare un motore di ricerca personalizzato nel tuo browser per accedere rapidamente ai tuoi segnalibri",
+    "tabChromium": "Basato su Chromium",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Passo {{n}}",
     "howItWorks": "Come funziona",
     "howItWorksDescription": "Configurando un motore di ricerca personalizzato, puoi digitare una parola chiave (come 'go') seguita da uno slug di segnalibro nella barra degli indirizzi del browser per navigare istantaneamente a quel segnalibro.",
     "yourSearchUrl": "La tua URL di ricerca",

package/frontend/src/locales/ja.json

@@ -444,6 +444,9 @@
   "searchEngineGuide": {
     "title": "カスタム検索エンジン設定ガイド",
     "description": "ブラウザでカスタム検索エンジンを設定してブックマークにすばやくアクセスする方法を学ぶ",
+    "tabChromium": "Chromiumベース",
+    "tabFirefox": "Firefox",
+    "stepTitle": "ステップ {{n}}",
     "howItWorks": "仕組み",
     "howItWorksDescription": "カスタム検索エンジンを設定すると、ブラウザのアドレスバーにキーワード（例：'go'）に続いてブックマークスラッグを入力することで、そのブックマークに瞬時に移動できます。",
     "yourSearchUrl": "検索URL",

package/frontend/src/locales/nl.json

@@ -459,6 +459,9 @@
   "searchEngineGuide": {
     "title": "Gids voor aangepaste zoekmachine-instelling",
     "description": "Leer hoe je een aangepaste zoekmachine in je browser instelt om snel toegang te krijgen tot je bladwijzers",
+    "tabChromium": "Chromium-gebaseerd",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Stap {{n}}",
     "howItWorks": "Hoe het werkt",
     "howItWorksDescription": "Door een aangepaste zoekmachine in te stellen, kun je een trefwoord (zoals 'go') gevolgd door een bladwijzerslug in de adresbalk van je browser typen om direct naar die bladwijzer te navigeren.",
     "yourSearchUrl": "Je zoek-URL",

package/frontend/src/locales/pl.json

@@ -444,6 +444,9 @@
   "searchEngineGuide": {
     "title": "Przewodnik konfiguracji niestandardowej wyszukiwarki",
     "description": "Dowiedz się, jak skonfigurować niestandardową wyszukiwarkę w przeglądarce, aby szybko uzyskać dostęp do zakładek",
+    "tabChromium": "Na bazie Chromium",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Krok {{n}}",
     "howItWorks": "Jak to działa",
     "howItWorksDescription": "Konfigurując niestandardową wyszukiwarkę, możesz wpisać słowo kluczowe (np. 'go'), a następnie slug zakładki w pasku adresu przeglądarki, aby natychmiast przejść do tej zakładki.",
     "yourSearchUrl": "Twój URL wyszukiwania",

package/frontend/src/locales/pt.json

@@ -444,6 +444,9 @@
   "searchEngineGuide": {
     "title": "Guia de configuração de mecanismo de pesquisa personalizado",
     "description": "Aprenda como configurar um mecanismo de pesquisa personalizado no seu navegador para acessar rapidamente seus favoritos",
+    "tabChromium": "Baseado em Chromium",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Passo {{n}}",
     "howItWorks": "Como funciona",
     "howItWorksDescription": "Ao configurar um mecanismo de pesquisa personalizado, você pode digitar uma palavra-chave (como 'go') seguida de um slug de favorito na barra de endereços do navegador para navegar instantaneamente para esse favorito.",
     "yourSearchUrl": "Sua URL de pesquisa",

package/frontend/src/locales/ru.json

@@ -444,6 +444,9 @@
   "searchEngineGuide": {
     "title": "Руководство по настройке пользовательской поисковой системы",
     "description": "Узнайте, как настроить пользовательскую поисковую систему в браузере для быстрого доступа к закладкам",
+    "tabChromium": "На базе Chromium",
+    "tabFirefox": "Firefox",
+    "stepTitle": "Шаг {{n}}",
     "howItWorks": "Как это работает",
     "howItWorksDescription": "Настроив пользовательскую поисковую систему, вы можете ввести ключевое слово (например, 'go'), за которым следует slug закладки в адресной строке браузера, чтобы мгновенно перейти к этой закладке.",
     "yourSearchUrl": "Ваш URL для поиска",

package/frontend/src/locales/zh.json

@@ -444,6 +444,9 @@
   "searchEngineGuide": {
     "title": "自定义搜索引擎设置指南",
     "description": "了解如何在浏览器中设置自定义搜索引擎以快速访问您的书签",
+    "tabChromium": "基于 Chromium",
+    "tabFirefox": "Firefox",
+    "stepTitle": "步骤 {{n}}",
     "howItWorks": "工作原理",
     "howItWorksDescription": "通过设置自定义搜索引擎，您可以在浏览器的地址栏中输入关键字（如'go'），后跟书签别名，即可立即导航到该书签。",
     "yourSearchUrl": "您的搜索URL",

package/frontend/src/pages/SearchEngineGuide.tsx

@@ -1,136 +1,239 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ArrowLeft, Search, Code, CheckCircle } from 'lucide-react';
+import { ArrowLeft, Code } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import Button from '../components/ui/Button';
+import { PageHeader } from '../components/PageHeader';
+import { ScopeSegmentedControl } from '../components/ScopeSegmentedControl';
+import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
 import { useAppConfig } from '../contexts/AppConfigContext';
 
 export default function SearchEngineGuide() {
   const { t } = useTranslation();
   const { pathPrefixForLinks } = useAppConfig();
   const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
+  const [activeTab, setActiveTab] = useState<'chromium' | 'firefox'>('chromium');
 
   const baseUrl = window.location.origin;
   const goPath = '/go/%s';
   const searchUrl = `${baseUrl}${goPath}`;
 
+  const tabOptions = [
+    { value: 'chromium', label: t('searchEngineGuide.tabChromium') },
+    { value: 'firefox', label: t('searchEngineGuide.tabFirefox') },
+  ];
+
   return (
     <div className="space-y-6 max-w-4xl mx-auto">
-      {/* Header */}
-      <div className="flex items-center gap-4">
+      {/* Header: back + PageHeader with tabs */}
+      <div className="flex flex-col gap-4">
         <Link to={`${prefix}/bookmarks`}>
           <Button variant="ghost" size="sm" icon={ArrowLeft}>
             {t('common.back')}
           </Button>
         </Link>
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
-            <Search className="h-8 w-8" />
-            {t('searchEngineGuide.title')}
-          </h1>
-          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            {t('searchEngineGuide.description')}
-          </p>
-        </div>
+        <PageHeader
+          title={t('searchEngineGuide.title')}
+          subtitle={t('searchEngineGuide.description')}
+          actions={
+            <ScopeSegmentedControl
+              value={activeTab}
+              onChange={(v) => setActiveTab(v as 'chromium' | 'firefox')}
+              options={tabOptions}
+              ariaLabel={t('searchEngineGuide.title')}
+            />
+          }
+        />
       </div>
 
       {/* How it works */}
-      <div className="bg-primary/10 border border-primary/30 rounded-xl p-6">
-        <h2 className="text-xl font-semibold text-foreground mb-3">
-          {t('searchEngineGuide.howItWorks')}
-        </h2>
-        <p className="text-muted-foreground mb-4">
-          {t('searchEngineGuide.howItWorksDescription')}
-        </p>
-        <div className="bg-card rounded-lg p-4 border border-primary/30">
-          <div className="flex items-center gap-2 text-sm font-mono text-foreground">
-            <Code className="h-4 w-4 text-primary" />
-            <span className="text-primary">go</span>
-            <span className="text-gray-400">your-slug</span>
+      <Card className="bg-primary/10 border-primary/30">
+        <CardHeader>
+          <CardTitle className="text-xl text-foreground">
+            {t('searchEngineGuide.howItWorks')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">
+            {t('searchEngineGuide.howItWorksDescription')}
+          </p>
+          <div className="bg-card rounded-lg p-4 border border-border">
+            <div className="flex items-center gap-2 text-sm font-mono text-foreground">
+              <Code className="h-4 w-4 text-primary" />
+              <span className="text-primary">go</span>
+              <span className="text-muted-foreground">your-slug</span>
+            </div>
           </div>
-        </div>
-      </div>
+        </CardContent>
+      </Card>
 
       {/* Your search URL */}
-      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
-          {t('searchEngineGuide.yourSearchUrl')}
-        </h2>
-        <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-          <code className="text-sm font-mono text-gray-900 dark:text-white break-all">
-            {searchUrl}
-          </code>
-        </div>
-        <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">
-          {t('searchEngineGuide.urlNote')}
-        </p>
-      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">{t('searchEngineGuide.yourSearchUrl')}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="bg-muted rounded-lg p-4 border border-border">
+            <code className="text-sm font-mono text-foreground break-all">{searchUrl}</code>
+          </div>
+          <p className="text-sm text-muted-foreground">{t('searchEngineGuide.urlNote')}</p>
+        </CardContent>
+      </Card>
 
-      {/* Chromium-based browsers */}
-      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-          <CheckCircle className="h-6 w-6 text-green-600 dark:text-green-400" />
-          {t('searchEngineGuide.chromiumTitle')}
-        </h2>
-        <p className="text-gray-700 dark:text-gray-300 mb-4">
-          {t('searchEngineGuide.chromiumDescription')}
-        </p>
-        <ol className="list-decimal list-inside space-y-3 text-gray-700 dark:text-gray-300">
-          <li>{t('searchEngineGuide.chromiumStep1')}</li>
-          <li>{t('searchEngineGuide.chromiumStep2')}</li>
-          <li>{t('searchEngineGuide.chromiumStep3')}</li>
-          <li>
-            {t('searchEngineGuide.chromiumStep4')}
-            <ul className="list-disc list-inside ml-6 mt-2 space-y-1 text-sm text-gray-600 dark:text-gray-400">
-              <li>{t('searchEngineGuide.chromiumStep4a')}</li>
-              <li>{t('searchEngineGuide.chromiumStep4b')}</li>
-              <li>{t('searchEngineGuide.chromiumStep4c')}</li>
-            </ul>
-          </li>
-          <li>{t('searchEngineGuide.chromiumStep5')}</li>
-        </ol>
-      </div>
+      {/* Chromium steps (only when active) */}
+      {activeTab === 'chromium' && (
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold text-foreground">
+            {t('searchEngineGuide.chromiumTitle')}
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            {t('searchEngineGuide.chromiumDescription')}
+          </p>
+          <div className="space-y-4">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 1 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground">{t('searchEngineGuide.chromiumStep1')}</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 2 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground">{t('searchEngineGuide.chromiumStep2')}</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 3 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground">{t('searchEngineGuide.chromiumStep3')}</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 4 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <p className="text-foreground">{t('searchEngineGuide.chromiumStep4')}</p>
+                <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground ml-2">
+                  <li>{t('searchEngineGuide.chromiumStep4a')}</li>
+                  <li>{t('searchEngineGuide.chromiumStep4b')}</li>
+                  <li>{t('searchEngineGuide.chromiumStep4c')}</li>
+                </ul>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 5 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground">{t('searchEngineGuide.chromiumStep5')}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      )}
 
-      {/* Firefox */}
-      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-          <CheckCircle className="h-6 w-6 text-orange-600 dark:text-orange-400" />
-          {t('searchEngineGuide.firefoxTitle')}
-        </h2>
-        <p className="text-gray-700 dark:text-gray-300 mb-4">
-          {t('searchEngineGuide.firefoxDescription')}
-        </p>
-        <ol className="list-decimal list-inside space-y-3 text-gray-700 dark:text-gray-300">
-          <li>{t('searchEngineGuide.firefoxStep1')}</li>
-          <li>{t('searchEngineGuide.firefoxStep2')}</li>
-          <li>{t('searchEngineGuide.firefoxStep3')}</li>
-          <li>
-            {t('searchEngineGuide.firefoxStep4')}
-            <ul className="list-disc list-inside ml-6 mt-2 space-y-1 text-sm text-gray-600 dark:text-gray-400">
-              <li>{t('searchEngineGuide.firefoxStep4a')}</li>
-              <li>{t('searchEngineGuide.firefoxStep4b')}</li>
-              <li>{t('searchEngineGuide.firefoxStep4c')}</li>
-            </ul>
-          </li>
-          <li>{t('searchEngineGuide.firefoxStep5')}</li>
-        </ol>
-      </div>
+      {/* Firefox steps (only when active) */}
+      {activeTab === 'firefox' && (
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold text-foreground">
+            {t('searchEngineGuide.firefoxTitle')}
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            {t('searchEngineGuide.firefoxDescription')}
+          </p>
+          <div className="space-y-4">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 1 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground">{t('searchEngineGuide.firefoxStep1')}</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 2 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground">{t('searchEngineGuide.firefoxStep2')}</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 3 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground">{t('searchEngineGuide.firefoxStep3')}</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 4 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <p className="text-foreground">{t('searchEngineGuide.firefoxStep4')}</p>
+                <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground ml-2">
+                  <li>{t('searchEngineGuide.firefoxStep4a')}</li>
+                  <li>{t('searchEngineGuide.firefoxStep4b')}</li>
+                  <li>{t('searchEngineGuide.firefoxStep4c')}</li>
+                </ul>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  {t('searchEngineGuide.stepTitle', { n: 5 })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground">{t('searchEngineGuide.firefoxStep5')}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      )}
 
       {/* Usage example */}
-      <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
-          {t('searchEngineGuide.usageExample')}
-        </h2>
-        <div className="space-y-2 text-gray-700 dark:text-gray-300">
-          <p>{t('searchEngineGuide.usageStep1')}</p>
-          <div className="bg-white dark:bg-gray-800 rounded-lg p-3 border border-green-200 dark:border-green-700">
-            <code className="text-sm font-mono text-gray-900 dark:text-white">go test</code>
+      <Card className="bg-primary/10 border-primary/30">
+        <CardHeader>
+          <CardTitle className="text-xl text-foreground">
+            {t('searchEngineGuide.usageExample')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <p className="text-foreground">{t('searchEngineGuide.usageStep1')}</p>
+          <div className="bg-card rounded-lg p-3 border border-border">
+            <code className="text-sm font-mono text-foreground">go test</code>
           </div>
-          <p className="mt-3">{t('searchEngineGuide.usageStep2')}</p>
-          <p className="text-sm text-gray-600 dark:text-gray-400">
-            {t('searchEngineGuide.usageNote')}
-          </p>
-        </div>
-      </div>
+          <p className="text-foreground">{t('searchEngineGuide.usageStep2')}</p>
+          <p className="text-sm text-muted-foreground">{t('searchEngineGuide.usageNote')}</p>
+        </CardContent>
+      </Card>
     </div>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdguggenbichler/slugbase-core",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "SlugBase core: backend and frontend entrypoints for self-hosted and cloud apps",
   "type": "module",
   "exports": {