@mdguggenbichler/slugbase-core 0.0.31 → 0.0.32

package/frontend/src/components/bookmarks/BookmarkTableView.tsx

@@ -1,10 +1,16 @@
 import { useState, useMemo } from 'react';
-import { Share2, Tag as TagIcon, ExternalLink, Copy, Edit, Trash2, CheckSquare, Square, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
+import { Share2, Tag as TagIcon, ExternalLink, Copy, Edit, Trash2, CheckSquare, Square, ArrowUpDown, ArrowUp, ArrowDown, MoreHorizontal } from 'lucide-react';
 import Button from '../ui/Button';
 import Tooltip from '../ui/Tooltip';
 import Favicon from '../Favicon';
 import FolderIcon from '../FolderIcon';
 import { Badge } from '../ui/badge';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
 import {
   Table,
   TableBody,
@@ -374,38 +380,56 @@ export default function BookmarkTableView({
                     </TableCell>
                   </>
                 )}
-                <TableCell className={`${cellClass} opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-200`}>
-                  <div className={`flex items-center justify-end ${compact ? 'gap-1' : 'gap-2'}`}>
-                    {bookmark.forwarding_enabled && (
-                      <Tooltip content={`${window.location.origin}/go/${bookmark.slug}`}>
-                        <Button variant="ghost" size="sm" icon={Copy} className={`flex-shrink-0 h-8 w-8 p-0`} onClick={() => onCopyUrl(bookmark)} aria-label={t('bookmarks.copyUrl')} />
-                      </Tooltip>
-                    )}
+                <TableCell className={cellClass}>
+                  <div className={`flex items-center justify-end gap-1 min-w-[4.5rem]`}>
                     {onOpen ? (
                       <Tooltip content={t('bookmarks.open')}>
-                        <Button variant="ghost" size="sm" icon={ExternalLink} className={`flex-shrink-0 ${compact ? 'h-8 w-8 p-0' : 'h-8 w-8 p-0'}`} onClick={() => onOpen(bookmark)} aria-label={t('bookmarks.open')} />
+                        <Button variant="ghost" size="sm" icon={ExternalLink} className="h-8 w-8 p-0 flex-shrink-0" onClick={() => onOpen(bookmark)} aria-label={t('bookmarks.open')} />
                       </Tooltip>
                     ) : (
                       <Tooltip content={t('bookmarks.open')}>
                         <a href={safeHref(bookmark.url)} target="_blank" rel="noopener noreferrer" className="flex-shrink-0">
-                          <Button variant="ghost" size="sm" icon={ExternalLink} className={`flex-shrink-0 ${compact ? 'h-8 w-8 p-0' : 'h-8 w-8 p-0'}`} aria-label={t('bookmarks.open')} />
+                          <Button variant="ghost" size="sm" icon={ExternalLink} className="h-8 w-8 p-0" aria-label={t('bookmarks.open')} />
                         </a>
                       </Tooltip>
                     )}
                     {bookmark.bookmark_type === 'own' && (
-                      <>
-                        {onShare && (
-                          <Tooltip content={t('sharing.shareBookmark')}>
-                            <Button variant="ghost" size="sm" icon={Share2} className={`flex-shrink-0 ${compact ? 'h-8 w-8 p-0' : 'h-8 w-8 p-0'}`} onClick={() => onShare(bookmark)} aria-label={t('sharing.shareBookmark')} />
-                          </Tooltip>
-                        )}
-                        <Tooltip content={t('common.edit')}>
-                          <Button variant="ghost" size="sm" icon={Edit} className={`flex-shrink-0 ${compact ? 'h-8 w-8 p-0' : 'h-8 w-8 p-0'}`} onClick={() => onEdit(bookmark)} aria-label={t('common.edit')} />
-                        </Tooltip>
-                        <Tooltip content={t('common.delete')}>
-                          <Button variant="ghost" size="sm" icon={Trash2} className={`flex-shrink-0 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 ${compact ? 'h-8 w-8 p-0' : 'h-8 w-8 p-0'}`} onClick={() => onDelete(bookmark.id, bookmark.title)} aria-label={t('common.delete')} />
-                        </Tooltip>
-                      </>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            icon={MoreHorizontal}
+                            className="h-8 w-8 p-0 flex-shrink-0 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity"
+                            aria-label={t('bookmarks.moreActions')}
+                          />
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          {bookmark.forwarding_enabled && (
+                            <DropdownMenuItem onClick={() => onCopyUrl(bookmark)}>
+                              <Copy className="h-4 w-4" />
+                              {t('bookmarks.copyUrl')}
+                            </DropdownMenuItem>
+                          )}
+                          {onShare && (
+                            <DropdownMenuItem onClick={() => onShare(bookmark)}>
+                              <Share2 className="h-4 w-4" />
+                              {t('sharing.shareBookmark')}
+                            </DropdownMenuItem>
+                          )}
+                          <DropdownMenuItem onClick={() => onEdit(bookmark)}>
+                            <Edit className="h-4 w-4" />
+                            {t('common.edit')}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() => onDelete(bookmark.id, bookmark.title)}
+                            className="text-destructive focus:text-destructive"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                            {t('common.delete')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     )}
                   </div>
                 </TableCell>

package/frontend/src/components/collections/CollectionToolbar.tsx

@@ -0,0 +1,294 @@
+/**
+ * CollectionToolbar — Reusable toolbar for collection pages (Bookmarks, Folders, Tags).
+ *
+ * Props API summary:
+ * - Row 1 (header): title, count?, subtitle?, tabs? (scope), createButton?
+ * - Row 2: filterChips? (chips + onRemove, onClearAll, labels)
+ * - Row 3 (toolbar card): search?, folderFilter?, tagFilter?, sort?, perPage?, viewMode?,
+ *   pinnedToggle?, onImport?, onExport?, bulkSelect?
+ * Only provided props are rendered. No collection-specific logic.
+ */
+
+import { Plus, LayoutGrid, List, CheckSquare, Download, Upload, Pin, Search } from 'lucide-react';
+import { PageHeader } from '../PageHeader';
+import { ScopeSegmentedControl } from '../ScopeSegmentedControl';
+import { FilterChips, type FilterChipItem } from '../FilterChips';
+import Button from '../ui/Button';
+import Select from '../ui/Select';
+
+export type ViewModeValue = 'card' | 'list';
+
+export interface CollectionToolbarProps {
+  /** Row 1 */
+  title: string;
+  count?: number;
+  subtitle?: string;
+  tabs?: {
+    value: string;
+    onChange: (value: string) => void;
+    options: { value: string; label: string }[];
+    ariaLabel?: string;
+  };
+  createButton?: { label: string; onClick: () => void };
+  /** Row 2 */
+  filterChips?: {
+    chips: FilterChipItem[];
+    onRemove: (key: string) => void;
+    onClearAll: () => void;
+    clearAllLabel: string;
+    clearAllAriaLabel: string;
+  };
+  /** Row 3 — primary filters */
+  search?: {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    ariaLabel?: string;
+  };
+  folderFilter?: {
+    value: string;
+    onChange: (value: string) => void;
+    options: { value: string; label: string; icon?: string | null }[];
+    placeholder?: string;
+  };
+  tagFilter?: {
+    value: string;
+    onChange: (value: string) => void;
+    options: { value: string; label: string }[];
+    placeholder?: string;
+  };
+  sort?: {
+    value: string;
+    onChange: (value: string) => void;
+    options: { value: string; label: string }[];
+    className?: string;
+  };
+  /** Row 3 — utility */
+  perPage?: {
+    value: number;
+    onChange: (value: number) => void;
+    options: number[];
+    label?: string;
+  };
+  viewMode?: {
+    value: ViewModeValue;
+    onChange: (value: ViewModeValue) => void;
+    cardLabel?: string;
+    listLabel?: string;
+  };
+  pinnedToggle?: { active: boolean; onClick: () => void; label: string };
+  onImport?: () => void;
+  importLabel?: string;
+  onExport?: () => void;
+  exportLabel?: string;
+  bulkSelect?: { onClick: () => void; label: string; disabled?: boolean };
+  /** Optional wrapper className */
+  className?: string;
+}
+
+const STICKY_CLASS =
+  'sticky top-0 z-40 space-y-4 pb-4 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 pt-0 -mt-8 bg-background shadow-sm';
+
+export function CollectionToolbar({
+  title,
+  count,
+  subtitle,
+  tabs,
+  createButton,
+  filterChips,
+  search,
+  folderFilter,
+  tagFilter,
+  sort,
+  perPage,
+  viewMode,
+  pinnedToggle,
+  onImport,
+  importLabel = 'Import',
+  onExport,
+  exportLabel = 'Export',
+  bulkSelect,
+  className,
+}: CollectionToolbarProps) {
+  const displayTitle = count !== undefined ? `${title} (${count})` : title;
+
+  const hasToolbarRow =
+    search ||
+    folderFilter ||
+    tagFilter ||
+    sort ||
+    perPage ||
+    viewMode ||
+    pinnedToggle ||
+    onImport ||
+    onExport ||
+    (bulkSelect && !bulkSelect.disabled);
+
+  const headerActions = (
+    <div className="flex flex-wrap items-center gap-2">
+      {tabs && (
+        <ScopeSegmentedControl
+          value={tabs.value}
+          onChange={tabs.onChange}
+          options={tabs.options}
+          ariaLabel={tabs.ariaLabel}
+        />
+      )}
+      {createButton && (
+        <Button onClick={createButton.onClick} icon={Plus}>
+          {createButton.label}
+        </Button>
+      )}
+    </div>
+  );
+
+  return (
+    <div className={className ? `${STICKY_CLASS} ${className}` : STICKY_CLASS}>
+      <PageHeader
+        className="pt-4"
+        title={displayTitle}
+        subtitle={subtitle}
+        actions={tabs || createButton ? headerActions : undefined}
+      />
+
+      {filterChips && filterChips.chips.length > 0 && (
+        <FilterChips
+          chips={filterChips.chips}
+          onRemove={filterChips.onRemove}
+          onClearAll={filterChips.onClearAll}
+          clearAllLabel={filterChips.clearAllLabel}
+          clearAllAriaLabel={filterChips.clearAllAriaLabel}
+        />
+      )}
+
+      {hasToolbarRow && (
+        <div className="flex flex-wrap items-center gap-3 bg-card rounded-lg border border-border p-4 shadow-sm">
+          {/* Primary filters — left */}
+          <div className="flex flex-wrap items-center gap-3 flex-1 min-w-[200px]">
+            {search && (
+              <div className="flex items-center gap-2 min-w-[200px] flex-1">
+                <Search className="h-4 w-4 text-muted-foreground flex-shrink-0" aria-hidden />
+                <input
+                  type="search"
+                  value={search.value}
+                  onChange={(e) => search.onChange(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      search.onSubmit((e.target as HTMLInputElement).value.trim());
+                    }
+                  }}
+                  placeholder={search.placeholder}
+                  className="flex-1 min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  aria-label={search.ariaLabel ?? search.placeholder}
+                />
+              </div>
+            )}
+            {folderFilter && (
+              <div className="flex-1 min-w-[180px]">
+                <Select
+                  value={folderFilter.value}
+                  onChange={folderFilter.onChange}
+                  options={folderFilter.options}
+                  placeholder={folderFilter.placeholder}
+                />
+              </div>
+            )}
+            {tagFilter && (
+              <div className="flex-1 min-w-[180px]">
+                <Select
+                  value={tagFilter.value}
+                  onChange={tagFilter.onChange}
+                  options={tagFilter.options}
+                  placeholder={tagFilter.placeholder}
+                />
+              </div>
+            )}
+            {sort && (
+              <div className="flex items-center gap-2">
+                <Select
+                  value={sort.value}
+                  onChange={sort.onChange}
+                  options={sort.options}
+                  className={sort.className ?? 'min-w-[160px]'}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Utility — right, visually quieter */}
+          <div className="flex flex-wrap items-center gap-3 border-l border-border pl-3 ml-auto">
+            {pinnedToggle && (
+              <Button
+                variant={pinnedToggle.active ? 'secondary' : 'ghost'}
+                size="sm"
+                icon={Pin}
+                onClick={pinnedToggle.onClick}
+                title={pinnedToggle.label}
+                aria-pressed={pinnedToggle.active}
+              >
+                <span className="hidden sm:inline">{pinnedToggle.label}</span>
+              </Button>
+            )}
+            {onImport && (
+              <Button variant="ghost" size="sm" icon={Upload} onClick={onImport} title={importLabel}>
+                <span className="hidden sm:inline">{importLabel}</span>
+              </Button>
+            )}
+            {onExport && (
+              <Button variant="ghost" size="sm" icon={Download} onClick={onExport} title={exportLabel}>
+                <span className="hidden sm:inline">{exportLabel}</span>
+              </Button>
+            )}
+            {perPage && (
+              <div className="flex items-center gap-2">
+                <Select
+                  value={String(perPage.value)}
+                  onChange={(value) => perPage.onChange(Number(value))}
+                  options={perPage.options.map((n) => ({ value: String(n), label: String(n) }))}
+                  className="min-w-[80px]"
+                />
+                <span className="text-sm text-muted-foreground whitespace-nowrap">
+                  {perPage.label ?? 'Per page'}
+                </span>
+              </div>
+            )}
+            {viewMode && (
+              <div className="flex items-center gap-1 bg-muted rounded-lg p-1 border border-border">
+                <button
+                  type="button"
+                  onClick={() => viewMode.onChange('card')}
+                  className={`p-1.5 rounded transition-colors ${
+                    viewMode.value === 'card'
+                      ? 'bg-background text-primary shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                  title={viewMode.cardLabel ?? 'Card view'}
+                >
+                  <LayoutGrid className="h-4 w-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => viewMode.onChange('list')}
+                  className={`p-1.5 rounded transition-colors ${
+                    viewMode.value === 'list'
+                      ? 'bg-background text-primary shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                  title={viewMode.listLabel ?? 'List view'}
+                >
+                  <List className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+            {bulkSelect && !bulkSelect.disabled && (
+              <Button variant="ghost" size="sm" icon={CheckSquare} onClick={bulkSelect.onClick}>
+                {bulkSelect.label}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+# CollectionToolbar
+
+Reusable toolbar for collection pages (Bookmarks, Folders, Tags). Renders only the controls passed via props; no collection-specific logic.
+
+## Props API
+
+| Prop | Type | Description |
+|------|------|-------------|
+| **Row 1 — Header** | | |
+| `title` | `string` | Page title (e.g. "Bookmarks") |
+| `count?` | `number` | Shown as "Title (count)" |
+| `subtitle?` | `string` | e.g. "Showing X of Y" |
+| `tabs?` | `{ value, onChange, options, ariaLabel? }` | Scope tabs (All / Mine / Shared) |
+| `createButton?` | `{ label, onClick }` | Primary Create button |
+| **Row 2 — Filter chips** | | |
+| `filterChips?` | `{ chips, onRemove, onClearAll, clearAllLabel, clearAllAriaLabel }` | Renders when chips.length > 0 |
+| **Row 3 — Toolbar** | | |
+| `search?` | `{ value, onChange, onSubmit, placeholder?, ariaLabel? }` | Search input (Enter submits) |
+| `folderFilter?` | `{ value, onChange, options, placeholder? }` | Folder select |
+| `tagFilter?` | `{ value, onChange, options, placeholder? }` | Tag select |
+| `sort?` | `{ value, onChange, options, className? }` | Sort select |
+| `perPage?` | `{ value, onChange, options, label? }` | Per-page select |
+| `viewMode?` | `{ value: 'card' \| 'list', onChange, cardLabel?, listLabel? }` | Card/list toggle |
+| `pinnedToggle?` | `{ active, onClick, label }` | Pinned filter (utility) |
+| `onImport?` | `() => void` | Import button (utility) |
+| `importLabel?` | `string` | Default: "Import" |
+| `onExport?` | `() => void` | Export button (utility) |
+| `exportLabel?` | `string` | Default: "Export" |
+| `bulkSelect?` | `{ onClick, label, disabled? }` | Bulk select (hidden when disabled) |
+| `className?` | `string` | Optional wrapper class |
+
+## Usage
+
+- **Bookmarks**: title, count, subtitle, tabs, createButton, filterChips, search, folderFilter, tagFilter, sort, perPage, viewMode, pinnedToggle, onImport, onExport, bulkSelect.
+- **Folders**: title, count, subtitle, tabs, createButton, filterChips, sort, perPage, viewMode.
+- **Tags**: title, count, subtitle, createButton, filterChips, sort, perPage, viewMode.
+
+## Modified files (refactor)
+
+- `frontend/src/components/collections/CollectionToolbar.tsx` (new)
+- `frontend/src/components/collections/index.ts` (new)
+- `frontend/src/pages/Bookmarks.tsx`
+- `frontend/src/pages/Folders.tsx`
+- `frontend/src/pages/Tags.tsx`

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

@@ -0,0 +1,2 @@
+export { CollectionToolbar } from './CollectionToolbar';
+export type { CollectionToolbarProps, ViewModeValue } from './CollectionToolbar';

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

@@ -0,0 +1,16 @@
+import { PageHeader } from '../PageHeader';
+
+export interface DashboardHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Dashboard page header: title, optional subtitle, optional actions.
+ * Uses the shared PageHeader for consistency.
+ */
+export function DashboardHeader({ title, subtitle, actions, className }: DashboardHeaderProps) {
+  return <PageHeader title={title} subtitle={subtitle} actions={actions} className={className} />;
+}

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

@@ -0,0 +1,49 @@
+import { Link } from 'react-router-dom';
+import { TrendingUp } from 'lucide-react';
+import { Badge } from '../ui/badge';
+
+export interface MostUsedTagsSectionTag {
+  id: string;
+  name: string;
+  bookmark_count: number;
+}
+
+export interface MostUsedTagsSectionProps {
+  tags: MostUsedTagsSectionTag[];
+  pathPrefix: string;
+  t: (key: string) => string;
+}
+
+/**
+ * Most used tags section: title, clickable tag chips linking to bookmarks filtered by tag.
+ * Improved spacing and visual rhythm.
+ */
+export function MostUsedTagsSection({ tags, pathPrefix, t }: MostUsedTagsSectionProps) {
+  const prefix = pathPrefix.replace(/\/+/g, '/') || '';
+
+  if (tags.length === 0) return null;
+
+  return (
+    <section className="space-y-3">
+      <h2 className="text-sm font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
+        <TrendingUp className="h-4 w-4" />
+        {t('dashboard.topTags')}
+      </h2>
+      <div className="flex flex-wrap gap-2.5">
+        {tags.map((tag) => (
+          <Link
+            key={tag.id}
+            to={`${prefix}/bookmarks?tag_id=${tag.id}`}
+            className="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-accent hover:border-primary/50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            title={t('dashboard.filterByTagHint')}
+          >
+            <span>{tag.name}</span>
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 font-normal">
+              {tag.bookmark_count}
+            </Badge>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,110 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { ArrowRight, Bookmark } 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 PinnedSectionBookmark {
+  id: string;
+  title: string;
+  url: string;
+  slug: string;
+}
+
+function toBookmarkCardItem(
+  b: PinnedSectionBookmark,
+  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 PinnedSectionProps {
+  items: PinnedSectionBookmark[];
+  pathPrefix: string;
+  maxItems?: number;
+  t: (key: string) => string;
+  onOpen: (id: string, url: string) => void;
+  onCopyUrl: (url: string) => void;
+}
+
+/**
+ * Pinned bookmarks section: title, "View all" link, grid (limited to maxItems), empty state.
+ */
+export function PinnedSection({
+  items,
+  pathPrefix,
+  maxItems = 6,
+  t,
+  onOpen,
+  onCopyUrl,
+}: PinnedSectionProps) {
+  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">
+        <h2 className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
+          {t('dashboard.pinned')}
+        </h2>
+        <Link
+          to={prefix + '/bookmarks?pinned=true'}
+          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, true)}
+              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.noPinnedBookmarks')}
+              description={t('dashboard.pinFromBookmarks')}
+              action={
+                <Link to={prefix + '/bookmarks'}>
+                  <Button variant="secondary">{t('dashboard.pinFromBookmarksLink')}</Button>
+                </Link>
+              }
+            />
+          </CardContent>
+        </Card>
+      )}
+    </section>
+  );
+}