@mdguggenbichler/slugbase-core 0.0.31 → 0.0.32

package/frontend/src/components/dashboard/QuickAccessSection.tsx

@@ -0,0 +1,120 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { ArrowRight, Bookmark, Plus } from 'lucide-react';
+import { Card, CardContent } from '../ui/card';
+import { EmptyState } from '../EmptyState';
+import Button from '../ui/Button';
+import BookmarkCard from '../bookmarks/BookmarkCard';
+
+export interface QuickAccessSectionBookmark {
+  id: string;
+  title: string;
+  url: string;
+  slug: string;
+}
+
+function toBookmarkCardItem(
+  b: QuickAccessSectionBookmark,
+  pinned: boolean
+): Parameters<typeof BookmarkCard>[0]['bookmark'] {
+  return {
+    id: b.id,
+    title: b.title,
+    url: b.url,
+    slug: b.slug || '',
+    forwarding_enabled: !!b.slug,
+    folders: [],
+    tags: [],
+    shared_teams: [],
+    shared_users: [],
+    bookmark_type: 'own',
+    pinned,
+    access_count: undefined,
+    last_accessed_at: null,
+  };
+}
+
+export interface QuickAccessSectionProps {
+  items: QuickAccessSectionBookmark[];
+  pathPrefix: string;
+  maxItems?: number;
+  /** Optional subtitle (e.g. "Most opened with shortcuts") */
+  subtitle?: string;
+  t: (key: string) => string;
+  onOpen: (id: string, url: string) => void;
+  onCopyUrl: (url: string) => void;
+}
+
+/**
+ * Quick access section: title, optional subtitle, "View all" link, grid (limited to maxItems), empty state.
+ */
+export function QuickAccessSection({
+  items,
+  pathPrefix,
+  maxItems = 6,
+  subtitle,
+  t,
+  onOpen,
+  onCopyUrl,
+}: QuickAccessSectionProps) {
+  const navigate = useNavigate();
+  const prefix = pathPrefix.replace(/\/+/g, '/') || '';
+  const displayItems = items.slice(0, maxItems);
+
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center justify-between flex-wrap gap-2">
+        <div>
+          <h2 className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
+            {t('dashboard.quickAccess')}
+          </h2>
+          {subtitle && (
+            <p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+        <Link
+          to={prefix + '/bookmarks'}
+          className="text-sm font-medium text-primary hover:underline inline-flex items-center gap-1"
+        >
+          {t('dashboard.viewAll')}
+          <ArrowRight className="h-4 w-4" />
+        </Link>
+      </div>
+      {displayItems.length > 0 ? (
+        <div className="grid gap-3 items-stretch [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
+          {displayItems.map((b) => (
+            <BookmarkCard
+              key={b.id}
+              bookmark={toBookmarkCardItem(b, false)}
+              compact={false}
+              selected={false}
+              onSelect={() => {}}
+              onEdit={() => navigate(prefix + '/bookmarks')}
+              onDelete={() => {}}
+              onCopyUrl={() => onCopyUrl(b.url)}
+              onOpen={() => onOpen(b.id, b.url)}
+              bulkMode={false}
+              t={t}
+            />
+          ))}
+        </div>
+      ) : (
+        <Card className="border border-border bg-card shadow-sm">
+          <CardContent className="p-6">
+            <EmptyState
+              icon={Bookmark}
+              title={t('dashboard.noQuickAccessBookmarks')}
+              description={t('dashboard.noQuickAccessBookmarksHint')}
+              action={
+                <Link to={`${prefix}/bookmarks?create=true`}>
+                  <Button variant="primary" icon={Plus}>
+                    {t('bookmarks.create')}
+                  </Button>
+                </Link>
+              }
+            />
+          </CardContent>
+        </Card>
+      )}
+    </section>
+  );
+}

package/frontend/src/components/dashboard/README.md

@@ -0,0 +1,35 @@
+# Dashboard components
+
+Reusable sections for the Overview/Dashboard page.
+
+## Component structure
+
+| Component | File | Responsibility |
+|-----------|------|----------------|
+| **DashboardHeader** | `DashboardHeader.tsx` | Page title, optional subtitle, optional actions (uses shared `PageHeader`). |
+| **StatsCardsRow** | `StatsCardsRow.tsx` | Row of three stat cards (bookmarks, folders, tags) with optional per-card usage/limit/CTA for cloud. |
+| **PinnedSection** | `PinnedSection.tsx` | "Pinned" section: title, "View all" link, grid of bookmark cards (max 6), empty state. |
+| **QuickAccessSection** | `QuickAccessSection.tsx` | "Quick access" section: title, optional subtitle, "View all" link, grid (max 6), empty state. |
+| **MostUsedTagsSection** | `MostUsedTagsSection.tsx` | "Most Used Tags" section: clickable tag chips linking to `bookmarks?tag_id=<id>`. |
+
+## StatCard usage-display API (cloud-ready)
+
+In `StatCard` (and via `StatsCardsRow` → `StatItem.usage`), optional props for plan/usage display:
+
+- **`secondaryLine?: string`** — Text below the main value (e.g. "+12 this week").
+- **`used?: number`** — When set with `limit`, shows usage (e.g. "42 / 50").
+- **`limit?: number`** — When set with `used`, enables usage line and optional progress bar.
+- **`labelOverride?: string`** — Label for the usage line (e.g. "Bookmarks used").
+- **`showProgress?: boolean`** — Show progress bar when `used` and `limit` are set (default `true`).
+- **`progressVariant?: 'normal' | 'warning' | 'danger'`** — Bar color (primary / amber / destructive).
+- **`cta?: { label: string; onClick: () => void }`** — Optional button (e.g. "Upgrade"); only pass in cloud.
+
+In slugbase-core the dashboard does **not** pass `used`, `limit`, or `cta`. slugbase-cloud can pass these to show plan usage and upgrade CTA without changing layout.
+
+## Visual / UX improvements
+
+- **Header**: Dashboard now has a clear title ("Overview") and subtitle ("Quick access and recent activity").
+- **Stats row**: Typography hierarchy (label secondary, value prominent); optional secondary line and usage/progress/CTA supported.
+- **Section spacing**: Tighter vertical rhythm (`space-y-6`), consistent section headers (uppercase, muted).
+- **Pinned / Quick Access**: Limited to 6 items on overview with "View all →"; Quick Access has subtitle "Most opened with shortcuts".
+- **Most Used Tags**: Improved spacing (`gap-2.5`), same click-to-filter behavior.

package/frontend/src/components/dashboard/StatsCardsRow.tsx

@@ -0,0 +1,78 @@
+import { Bookmark, Folder, Tag } from 'lucide-react';
+import { StatCard, type StatCardUsageProps } from '../StatCard';
+
+export interface StatItem {
+  label: string;
+  value: number;
+  href: string;
+  secondaryLine?: string;
+  /** Optional usage/limit for cloud; in core leave undefined */
+  usage?: StatCardUsageProps;
+}
+
+export interface StatsCardsRowProps {
+  bookmarks: StatItem;
+  folders: StatItem;
+  tags: StatItem;
+  /** Optional; for denser layouts */
+  dense?: boolean;
+}
+
+/**
+ * Row of three stat cards: bookmarks, folders, tags.
+ * Supports optional usage/limit/CTA per card for slugbase-cloud (pass usage in cloud only).
+ */
+export function StatsCardsRow({ bookmarks, folders, tags, dense }: StatsCardsRowProps) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+      <StatCard
+        label={bookmarks.label}
+        value={bookmarks.value}
+        icon={Bookmark}
+        href={bookmarks.href}
+        dense={dense}
+        iconContainerClassName="bg-primary/20"
+        iconColorClassName="text-primary"
+        secondaryLine={bookmarks.secondaryLine}
+        used={bookmarks.usage?.used}
+        limit={bookmarks.usage?.limit}
+        labelOverride={bookmarks.usage?.labelOverride}
+        showProgress={bookmarks.usage?.showProgress}
+        progressVariant={bookmarks.usage?.progressVariant}
+        cta={bookmarks.usage?.cta}
+      />
+      <StatCard
+        label={folders.label}
+        value={folders.value}
+        icon={Folder}
+        href={folders.href}
+        dense={dense}
+        iconContainerClassName="bg-primary/20"
+        iconColorClassName="text-primary"
+        secondaryLine={folders.secondaryLine}
+        used={folders.usage?.used}
+        limit={folders.usage?.limit}
+        labelOverride={folders.usage?.labelOverride}
+        showProgress={folders.usage?.showProgress}
+        progressVariant={folders.usage?.progressVariant}
+        cta={folders.usage?.cta}
+      />
+      <StatCard
+        label={tags.label}
+        value={tags.value}
+        icon={Tag}
+        href={tags.href}
+        dense={dense}
+        iconContainerClassName="bg-primary/20"
+        iconColorClassName="text-primary"
+        secondaryLine={tags.secondaryLine}
+        used={tags.usage?.used}
+        limit={tags.usage?.limit}
+        labelOverride={tags.usage?.labelOverride}
+        showProgress={tags.usage?.showProgress}
+        progressVariant={tags.usage?.progressVariant}
+        cta={tags.usage?.cta}
+      />
+    </div>
+  );
+}

package/frontend/src/components/dashboard/index.ts

@@ -0,0 +1,17 @@
+export { DashboardHeader } from './DashboardHeader';
+export type { DashboardHeaderProps } from './DashboardHeader';
+
+export { StatsCardsRow } from './StatsCardsRow';
+export type { StatsCardsRowProps, StatItem } from './StatsCardsRow';
+
+export { PinnedSection } from './PinnedSection';
+export type { PinnedSectionProps, PinnedSectionBookmark } from './PinnedSection';
+
+export { QuickAccessSection } from './QuickAccessSection';
+export type {
+  QuickAccessSectionProps,
+  QuickAccessSectionBookmark,
+} from './QuickAccessSection';
+
+export { MostUsedTagsSection } from './MostUsedTagsSection';
+export type { MostUsedTagsSectionProps, MostUsedTagsSectionTag } from './MostUsedTagsSection';

package/frontend/src/locales/de.json

@@ -162,6 +162,7 @@
     "forwardingPreview": "Weiterleitungs-URL",
     "forwardingPreviewDescription": "Diese URL leitet zu deinem Lesezeichen weiter",
     "bulkSelect": "Mehrere auswählen",
+    "moreActions": "Weitere Aktionen",
     "bulkActions": "Massenaktionen",
     "bulkMoveToFolder": "In Ordner verschieben",
     "bulkAddTags": "Tags hinzufügen",
@@ -393,6 +394,7 @@
     "createTag": "Tag erstellen",
     "searchPlaceholder": "Lesezeichen suchen oder durch SlugBase navigieren",
     "quickAccess": "Schnellzugriff",
+    "quickAccessSubtitle": "Am häufigsten mit Shortcuts geöffnet",
     "viewAll": "Alle anzeigen",
     "noQuickAccessBookmarks": "Noch keine Lesezeichen mit Shortcuts",
     "noQuickAccessBookmarksHint": "Weise einem Lesezeichen einen Slug zu, um es hier zu sehen und go/slug im Browser zu nutzen.",

package/frontend/src/locales/en.json

@@ -436,6 +436,7 @@
     "createFolder": "Create Folder",
     "createTag": "Create Tag",
     "quickAccess": "Quick access",
+    "quickAccessSubtitle": "Most opened with shortcuts",
     "pinned": "Pinned",
     "noPinnedBookmarks": "No pinned bookmarks",
     "pinFromBookmarks": "Pin bookmarks from the Bookmarks page to see them here.",

package/frontend/src/locales/es.json

@@ -161,6 +161,7 @@
     "forwardingPreview": "URL de reenvío",
     "forwardingPreviewDescription": "Esta es la URL que redirigirá a tu marcador",
     "bulkSelect": "Seleccionar múltiples",
+    "moreActions": "Más acciones",
     "bulkActions": "Acciones en masa",
     "bulkMoveToFolder": "Mover a carpeta",
     "bulkAddTags": "Agregar etiquetas",
@@ -404,6 +405,7 @@
     "createFolder": "Crear carpeta",
     "createTag": "Crear etiqueta",
     "quickAccess": "Acceso rápido",
+    "quickAccessSubtitle": "Más abiertos con atajos",
     "viewAll": "Ver todo",
     "noQuickAccessBookmarks": "Aún no hay marcadores con atajos",
     "noQuickAccessBookmarksHint": "Añade un slug a un marcador para verlo aquí y usar go/slug en el navegador.",

package/frontend/src/locales/fr.json

@@ -122,6 +122,7 @@
     "forwardingPreview": "URL de redirection",
     "forwardingPreviewDescription": "C'est l'URL qui redirigera vers votre favori",
     "bulkSelect": "Sélectionner plusieurs",
+    "moreActions": "Plus d'actions",
     "bulkActions": "Actions groupées",
     "bulkMoveToFolder": "Déplacer vers un dossier",
     "bulkAddTags": "Ajouter des tags",
@@ -293,6 +294,7 @@
     "noRecentBookmarks": "Aucun favori pour le moment",
     "noTags": "Aucun tag pour le moment",
     "quickAccess": "Accès rapide",
+    "quickAccessSubtitle": "Plus ouverts avec raccourcis",
     "viewAll": "Tout voir",
     "noQuickAccessBookmarks": "Aucun favori avec raccourci",
     "noQuickAccessBookmarksHint": "Ajoutez un slug à un favori pour le voir ici et utiliser go/slug dans le navigateur.",

package/frontend/src/locales/it.json

@@ -107,6 +107,7 @@
     "forwardingPreview": "URL di reindirizzamento",
     "forwardingPreviewDescription": "Questo è l'URL che reindirizzerà al tuo segnalibro",
     "bulkSelect": "Seleziona multipli",
+    "moreActions": "Altre azioni",
     "bulkActions": "Azioni di gruppo",
     "bulkMoveToFolder": "Sposta in cartella",
     "bulkAddTags": "Aggiungi tag",
@@ -278,6 +279,7 @@
     "noRecentBookmarks": "Ancora nessun segnalibro",
     "noTags": "Ancora nessun tag",
     "quickAccess": "Accesso rapido",
+    "quickAccessSubtitle": "Più aperti con scorciatoie",
     "viewAll": "Vedi tutto",
     "noQuickAccessBookmarks": "Nessun segnalibro con scorciatoia",
     "noQuickAccessBookmarksHint": "Aggiungi uno slug a un segnalibro per vederlo qui e usare go/slug nel browser.",

package/frontend/src/locales/ja.json

@@ -107,6 +107,7 @@
     "forwardingPreview": "転送URL",
     "forwardingPreviewDescription": "これはブックマークに転送されるURLです",
     "bulkSelect": "複数選択",
+    "moreActions": "その他の操作",
     "bulkActions": "一括操作",
     "bulkMoveToFolder": "フォルダに移動",
     "bulkAddTags": "タグを追加",
@@ -278,6 +279,7 @@
     "noTags": "まだタグがありません",
     "searchPlaceholder": "ブックマークを検索するか、SlugBase内を移動",
     "quickAccess": "クイックアクセス",
+    "quickAccessSubtitle": "ショートカットでよく開くもの",
     "viewAll": "すべて表示",
     "noQuickAccessBookmarks": "ショートカット付きブックマークはまだありません",
     "noQuickAccessBookmarksHint": "ブックマークにスラグを追加するとここに表示され、ブラウザで go/スラグ が使えます。",

package/frontend/src/locales/nl.json

@@ -122,6 +122,7 @@
     "forwardingPreview": "Doorstuur-URL",
     "forwardingPreviewDescription": "Dit is de URL die doorverwijst naar je bladwijzer",
     "bulkSelect": "Meerdere selecteren",
+    "moreActions": "Meer acties",
     "bulkActions": "Bulkacties",
     "bulkMoveToFolder": "Verplaatsen naar map",
     "bulkAddTags": "Tags toevoegen",
@@ -293,6 +294,7 @@
     "noTags": "Nog geen tags",
     "searchPlaceholder": "Zoek een bladwijzer of navigeer door SlugBase",
     "quickAccess": "Snelle toegang",
+    "quickAccessSubtitle": "Meest geopend met snelkoppelingen",
     "viewAll": "Alles bekijken",
     "noQuickAccessBookmarks": "Nog geen bladwijzers met snelkoppeling",
     "noQuickAccessBookmarksHint": "Voeg een slug toe aan een bladwijzer om die hier te zien en go/slug in de browser te gebruiken.",

package/frontend/src/locales/pl.json

@@ -107,6 +107,7 @@
     "forwardingPreview": "URL przekierowania",
     "forwardingPreviewDescription": "To jest URL, który przekieruje do Twojej zakładki",
     "bulkSelect": "Wybierz wiele",
+    "moreActions": "Więcej akcji",
     "bulkActions": "Akcje grupowe",
     "bulkMoveToFolder": "Przenieś do folderu",
     "bulkAddTags": "Dodaj tagi",
@@ -278,6 +279,7 @@
     "noTags": "Brak tagów",
     "searchPlaceholder": "Szukaj zakładki lub nawiguj po SlugBase",
     "quickAccess": "Szybki dostęp",
+    "quickAccessSubtitle": "Najczęściej otwierane ze skrótami",
     "viewAll": "Zobacz wszystko",
     "noQuickAccessBookmarks": "Brak zakładek ze skrótami",
     "noQuickAccessBookmarksHint": "Dodaj slug do zakładki, aby zobaczyć ją tutaj i używać go/slug w przeglądarce.",

package/frontend/src/locales/pt.json

@@ -107,6 +107,7 @@
     "forwardingPreview": "URL de redirecionamento",
     "forwardingPreviewDescription": "Esta é a URL que redirecionará para seu favorito",
     "bulkSelect": "Selecionar múltiplos",
+    "moreActions": "Mais ações",
     "bulkActions": "Ações em massa",
     "bulkMoveToFolder": "Mover para pasta",
     "bulkAddTags": "Adicionar tags",
@@ -278,6 +279,7 @@
     "noTags": "Ainda não há tags",
     "searchPlaceholder": "Pesquisar um favorito ou navegar pelo SlugBase",
     "quickAccess": "Acesso rápido",
+    "quickAccessSubtitle": "Mais abertos com atalhos",
     "viewAll": "Ver tudo",
     "noQuickAccessBookmarks": "Ainda não há favoritos com atalhos",
     "noQuickAccessBookmarksHint": "Adicione um slug a um favorito para vê-lo aqui e usar go/slug no navegador.",

package/frontend/src/locales/ru.json

@@ -107,6 +107,7 @@
     "forwardingPreview": "URL переадресации",
     "forwardingPreviewDescription": "Это URL, который будет перенаправлять на вашу закладку",
     "bulkSelect": "Выбрать несколько",
+    "moreActions": "Ещё действия",
     "bulkActions": "Массовые действия",
     "bulkMoveToFolder": "Переместить в папку",
     "bulkAddTags": "Добавить теги",
@@ -278,6 +279,7 @@
     "noTags": "Пока нет тегов",
     "searchPlaceholder": "Поиск закладки или навигация по SlugBase",
     "quickAccess": "Быстрый доступ",
+    "quickAccessSubtitle": "Наиболее открываемые по ярлыкам",
     "viewAll": "Показать все",
     "noQuickAccessBookmarks": "Пока нет закладок с ярлыками",
     "noQuickAccessBookmarksHint": "Добавьте слаг к закладке, чтобы видеть её здесь и использовать go/слаг в браузере.",

package/frontend/src/locales/zh.json

@@ -107,6 +107,7 @@
     "forwardingPreview": "转发URL",
     "forwardingPreviewDescription": "这是将转发到您的书签的URL",
     "bulkSelect": "选择多个",
+    "moreActions": "更多操作",
     "bulkActions": "批量操作",
     "bulkMoveToFolder": "移动到文件夹",
     "bulkAddTags": "添加标签",
@@ -278,6 +279,7 @@
     "noTags": "还没有标签",
     "searchPlaceholder": "搜索书签或在 SlugBase 中导航",
     "quickAccess": "快速访问",
+    "quickAccessSubtitle": "最常通过快捷方式打开",
     "viewAll": "查看全部",
     "noQuickAccessBookmarks": "暂无带快捷方式的书签",
     "noQuickAccessBookmarksHint": "为书签添加 slug 即可在此显示，并在浏览器中使用 go/slug。",