@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/components/GlobalSearch.tsx

@@ -0,0 +1,275 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import { useSearchCommand } from '../contexts/SearchCommandContext';
+import {
+  Search,
+  Bookmark,
+  Folder,
+  Tag,
+  ExternalLink,
+  Plus,
+  ArrowRight,
+} from 'lucide-react';
+import api from '../api/client';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from './ui/command';
+
+interface SearchResult {
+  id: string;
+  type: 'bookmark' | 'folder' | 'tag' | 'navigation' | 'action';
+  title: string;
+  url?: string;
+  icon?: string | null;
+  action?: () => void;
+  path?: string;
+}
+
+export default function GlobalSearch() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { appBasePath } = useAppConfig();
+  const { user } = useAuth();
+  const { open, setOpen, openSearch } = useSearchCommand();
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const showAdmin = user?.is_admin;
+
+  const navigationItems: SearchResult[] = useMemo(() => [
+    { type: 'navigation', title: t('bookmarks.title'), path: `${appBasePath}/bookmarks`, id: 'nav-bookmarks' },
+    { type: 'navigation', title: t('folders.title'), path: `${appBasePath}/folders`, id: 'nav-folders' },
+    { type: 'navigation', title: t('tags.title'), path: `${appBasePath}/tags`, id: 'nav-tags' },
+    { type: 'navigation', title: t('shared.title'), path: `${appBasePath}/shared`, id: 'nav-shared' },
+    ...(showAdmin ? [{ type: 'navigation' as const, title: t('admin.title'), path: `${appBasePath}/admin/members`, id: 'nav-admin' }] : []),
+  ], [showAdmin, t, appBasePath]);
+
+  const actionItems: SearchResult[] = useMemo(() => [
+    { type: 'action', title: t('bookmarks.create'), path: `${appBasePath}/bookmarks`, id: 'action-create-bookmark', action: () => navigate(`${appBasePath}/bookmarks?create=true`) },
+    { type: 'action', title: t('folders.create'), path: `${appBasePath}/folders`, id: 'action-create-folder', action: () => navigate(`${appBasePath}/folders?create=true`) },
+    { type: 'action', title: t('bookmarks.import'), path: `${appBasePath}/bookmarks`, id: 'action-import', action: () => navigate(`${appBasePath}/bookmarks?import=true`) },
+    { type: 'action', title: t('bookmarks.export'), path: `${appBasePath}/bookmarks`, id: 'action-export', action: () => navigate(`${appBasePath}/bookmarks?export=true`) },
+  ], [t, navigate, appBasePath]);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        openSearch();
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [openSearch]);
+
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([...navigationItems, ...actionItems]);
+      return;
+    }
+
+    if (!open) {
+      setResults([]);
+      return;
+    }
+
+    const searchTimeout = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const searchLower = query.toLowerCase();
+        try {
+          const searchRes = await api.get('/bookmarks/search', { params: { q: query } });
+          const searchResults: SearchResult[] = searchRes.data.map((item: { id: string; type: string; title: string; url?: string; icon?: string | null }) => ({
+            id: item.id,
+            type: item.type,
+            title: item.title,
+            url: item.url,
+            icon: item.icon,
+          }));
+          setResults([
+            ...navigationItems.filter((n) => n.title.toLowerCase().includes(searchLower)),
+            ...actionItems.filter((a) => a.title.toLowerCase().includes(searchLower)),
+            ...searchResults,
+          ]);
+        } catch {
+          const [bookmarksRes, foldersRes, tagsRes] = await Promise.all([
+            api.get('/bookmarks', { params: { limit: 100 } }),
+            api.get('/folders'),
+            api.get('/tags'),
+          ]);
+          const bookmarksPayload = bookmarksRes.data;
+          const bookmarksItems = bookmarksPayload?.items ?? bookmarksPayload ?? [];
+
+          const bookmarkResults: SearchResult[] = (Array.isArray(bookmarksItems) ? bookmarksItems : [])
+            .filter((b: { title?: string; url?: string; slug?: string }) =>
+              (b.title?.toLowerCase().includes(searchLower)) ||
+              (b.url?.toLowerCase().includes(searchLower)) ||
+              (b.slug?.toLowerCase().includes(searchLower))
+            )
+            .slice(0, 5)
+            .map((b: { id: string; title: string; url?: string }) => ({
+              id: b.id,
+              type: 'bookmark' as const,
+              title: b.title,
+              url: b.url,
+            }));
+
+          const folderResults: SearchResult[] = foldersRes.data
+            .filter((f: { name: string }) => f.name.toLowerCase().includes(searchLower))
+            .slice(0, 3)
+            .map((f: { id: string; name: string; icon?: string | null }) => ({
+              id: f.id,
+              type: 'folder' as const,
+              title: f.name,
+              icon: f.icon,
+            }));
+
+          const tagResults: SearchResult[] = tagsRes.data
+            .filter((tag: { name: string }) => tag.name.toLowerCase().includes(searchLower))
+            .slice(0, 3)
+            .map((tag: { id: string; name: string }) => ({
+              id: tag.id,
+              type: 'tag' as const,
+              title: tag.name,
+            }));
+
+          setResults([
+            ...navigationItems.filter((n) => n.title.toLowerCase().includes(searchLower)),
+            ...actionItems.filter((a) => a.title.toLowerCase().includes(searchLower)),
+            ...bookmarkResults,
+            ...folderResults,
+            ...tagResults,
+          ]);
+        }
+      } catch (error) {
+        console.error('Search failed:', error);
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+
+    return () => clearTimeout(searchTimeout);
+  }, [query, open, navigationItems, actionItems]);
+
+  function handleResultClick(result: SearchResult) {
+    setOpen(false);
+    setQuery('');
+
+    if (result.type === 'navigation' && result.path) {
+      navigate(result.path);
+    } else if (result.type === 'action' && result.action) {
+      result.action();
+    } else if (result.type === 'bookmark' && result.url) {
+      api.post(`/bookmarks/${result.id}/track-access`).catch(() => {});
+      window.open(result.url, '_blank', 'noopener,noreferrer');
+    } else if (result.type === 'folder') {
+      navigate(`${appBasePath}/bookmarks?folder_id=${result.id}`);
+    } else if (result.type === 'tag') {
+      navigate(`${appBasePath}/bookmarks?tag_id=${result.id}`);
+    }
+  }
+
+  function getResultIcon(result: SearchResult) {
+    switch (result.type) {
+      case 'bookmark':
+        return <Bookmark className="h-4 w-4" />;
+      case 'folder':
+        return <Folder className="h-4 w-4" />;
+      case 'tag':
+        return <Tag className="h-4 w-4" />;
+      case 'navigation':
+        return <ArrowRight className="h-4 w-4" />;
+      case 'action':
+        return <Plus className="h-4 w-4" />;
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={openSearch}
+        className="hidden md:flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-muted-foreground bg-muted/80 hover:bg-accent/80 rounded-xl border border-border hover:border-primary/30 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      >
+        <Search className="h-5 w-5 shrink-0" />
+        <span className="flex-1 truncate">{t('dashboard.searchPlaceholder')}</span>
+        <kbd className="shrink-0 inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-muted-foreground bg-background border border-border rounded">
+          {navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}K
+        </kbd>
+      </button>
+
+      <CommandDialog open={open} onOpenChange={setOpen} shouldFilter={false}>
+        <CommandInput
+          placeholder={t('dashboard.searchPlaceholder')}
+          value={query}
+          onValueChange={setQuery}
+        />
+        <CommandList className="max-h-[60vh]">
+          <CommandEmpty>
+            {loading ? t('common.loading') : t('common.noResults')}
+          </CommandEmpty>
+          {!query.trim() ? (
+            <>
+              <CommandGroup heading={t('common.navigation')}>
+                {navigationItems.map((item) => (
+                  <CommandItem
+                    key={item.id}
+                    value={item.id}
+                    onSelect={() => handleResultClick(item)}
+                  >
+                    {getResultIcon(item)}
+                    <span>{item.title}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading={t('common.quickActions')}>
+                {actionItems.map((item) => (
+                  <CommandItem
+                    key={item.id}
+                    value={item.id}
+                    onSelect={() => handleResultClick(item)}
+                  >
+                    {getResultIcon(item)}
+                    <span>{item.title}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </>
+          ) : (
+            results.map((result) => (
+              <CommandItem
+                key={`${result.type}-${result.id}`}
+                value={`${result.type}-${result.id}-${result.title}`}
+                onSelect={() => handleResultClick(result)}
+              >
+                {getResultIcon(result)}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate font-medium">{result.title}</span>
+                    {result.type === 'bookmark' && (
+                      <ExternalLink className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                    )}
+                  </div>
+                  {result.url && (
+                    <div className="text-xs text-muted-foreground truncate mt-0.5">{result.url}</div>
+                  )}
+                </div>
+              </CommandItem>
+            ))
+          )}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

package/frontend/src/components/Layout.tsx

@@ -0,0 +1,60 @@
+import { Outlet } from 'react-router-dom';
+import { Suspense, useEffect, useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { useTranslation } from 'react-i18next';
+import { SearchCommandProvider } from '../contexts/SearchCommandContext';
+import { SidebarProvider, SidebarInset } from './ui/sidebar';
+import TopBar from './TopBar';
+import AppSidebar from './AppSidebar';
+import api from '../api/client';
+
+const SIDEBAR_COLLAPSED_KEY = 'slugbase_sidebar_collapsed';
+
+export default function Layout() {
+  const { user } = useAuth();
+  const { t } = useTranslation();
+  const [version, setVersion] = useState<string | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(
+    () => localStorage.getItem(SIDEBAR_COLLAPSED_KEY) !== 'true'
+  );
+
+  useEffect(() => {
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(!sidebarOpen));
+  }, [sidebarOpen]);
+
+  useEffect(() => {
+    api.get('/version')
+      .then((res) => {
+        if (res.data.commit) {
+          setVersion(res.data.commit.substring(0, 7));
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  return (
+    <SearchCommandProvider>
+      <SidebarProvider open={sidebarOpen} onOpenChange={setSidebarOpen} className="h-svh overflow-hidden bg-background flex flex-col">
+        <TopBar user={user} />
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        <AppSidebar user={user} version={version} />
+        <SidebarInset className="flex flex-col min-h-0 overflow-hidden">
+          <div className="flex-1 min-h-0 overflow-y-auto">
+            <div className="px-4 sm:px-6 lg:px-8 py-8 w-full min-h-full">
+              <Suspense
+                fallback={
+                  <div className="min-h-[400px] flex items-center justify-center">
+                    <div className="text-muted-foreground">{t('common.loading')}</div>
+                  </div>
+                }
+              >
+                <Outlet />
+              </Suspense>
+            </div>
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+    </SearchCommandProvider>
+  );
+}

package/frontend/src/components/PageHeader.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function PageHeader({ title, subtitle, actions, className }: PageHeaderProps) {
+  return (
+    <div className={cn('flex items-start justify-between gap-4 flex-wrap', className)}>
+      <div className="space-y-1">
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+          {title}
+        </h1>
+        {subtitle && (
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {actions && (
+        <div className="flex items-center gap-2">
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}

package/frontend/src/components/ScopeSegmentedControl.tsx

@@ -0,0 +1,42 @@
+export interface ScopeOption {
+  value: string;
+  label: string;
+}
+
+interface ScopeSegmentedControlProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: ScopeOption[];
+  ariaLabel?: string;
+}
+
+export function ScopeSegmentedControl({ value, onChange, options, ariaLabel }: ScopeSegmentedControlProps) {
+  return (
+    <div
+      className="flex items-center rounded-lg border border-border bg-muted/50 p-0.5"
+      role="group"
+      aria-label={ariaLabel}
+    >
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              onChange(opt.value);
+            }
+          }}
+          className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+            value === opt.value ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'
+          }`}
+          aria-pressed={value === opt.value}
+          aria-label={opt.label}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/frontend/src/components/SentryDebug.tsx

@@ -0,0 +1,32 @@
+import * as Sentry from '@sentry/react';
+
+/**
+ * Floating debug buttons for Sentry testing.
+ * Only visible when VITE_SENTRY_DEBUG=true at build time.
+ */
+export function SentryDebug() {
+  if (import.meta.env.VITE_SENTRY_DEBUG !== 'true') return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex gap-2">
+      <button
+        type="button"
+        onClick={() => {
+          throw new Error('Sentry frontend test error (throw)');
+        }}
+        className="px-3 py-1.5 text-sm rounded-md bg-red-100 dark:bg-red-900/80 text-red-800 dark:text-red-200 hover:opacity-90"
+      >
+        Test Sentry (throw)
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          Sentry.captureException(new Error('Sentry frontend test (capture)'));
+        }}
+        className="px-3 py-1.5 text-sm rounded-md bg-amber-100 dark:bg-amber-900/80 text-amber-800 dark:text-amber-200 hover:opacity-90"
+      >
+        Test Sentry (capture)
+      </button>
+    </div>
+  );
+}

package/frontend/src/components/StatCard.tsx

@@ -0,0 +1,66 @@
+import { Link } from 'react-router-dom';
+import { LucideIcon } from 'lucide-react';
+import { Card, CardContent } from './ui/card';
+import { cn } from '@/lib/utils';
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  icon: LucideIcon;
+  href?: string;
+  /** Use compact padding and smaller icon for dense layouts */
+  dense?: boolean;
+  /** Tailwind classes for the icon container (e.g. bg-blue-100 dark:bg-blue-900/20) */
+  iconContainerClassName?: string;
+  /** Tailwind classes for the icon color (e.g. text-blue-600 dark:text-blue-400) */
+  iconColorClassName?: string;
+  className?: string;
+}
+
+export function StatCard({ label, value, icon: Icon, href, dense, iconContainerClassName, iconColorClassName, className }: StatCardProps) {
+  const content = (
+    <>
+      <div className="flex items-center justify-between">
+        <div>
+          <p className={cn('font-medium text-muted-foreground', dense ? 'text-xs' : 'text-sm')}>
+            {label}
+          </p>
+          <p className={cn('font-semibold mt-2', dense ? 'text-xl' : 'text-2xl')}>
+            {value}
+          </p>
+        </div>
+        <div className={cn('rounded-lg', iconContainerClassName ?? 'bg-muted', dense ? 'p-2' : 'p-3')}>
+          <Icon className={cn(iconColorClassName ?? 'text-muted-foreground', dense ? 'h-5 w-5' : 'h-6 w-6')} />
+        </div>
+      </div>
+    </>
+  );
+
+  const cardClassName = cn(
+    'transition-colors',
+    href && 'cursor-pointer hover:border-primary/70 hover:bg-muted/50 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 rounded-xl',
+    className
+  );
+
+  const contentPadding = dense ? 'p-3' : 'p-4';
+
+  if (href) {
+    return (
+      <Link to={href} className="block focus:outline-none">
+        <Card className={cardClassName}>
+          <CardContent className={contentPadding}>
+            {content}
+          </CardContent>
+        </Card>
+      </Link>
+    );
+  }
+
+  return (
+    <Card className={cardClassName}>
+      <CardContent className={contentPadding}>
+        {content}
+      </CardContent>
+    </Card>
+  );
+}

package/frontend/src/components/TopBar.tsx

@@ -0,0 +1,63 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Plus } from 'lucide-react';
+import Button from './ui/Button';
+import GlobalSearch from './GlobalSearch';
+import UserDropdown from './UserDropdown';
+import { SidebarTrigger, useSidebar } from './ui/sidebar';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import type { User } from '../contexts/AuthContext';
+
+interface TopBarProps {
+  user: User | null;
+}
+
+export default function TopBar({ user }: TopBarProps) {
+  const { t } = useTranslation();
+  const { appBasePath } = useAppConfig();
+  const { isMobile } = useSidebar();
+
+  return (
+    <header className="sticky top-0 z-50 flex h-14 shrink-0 items-center border-b bg-background px-4 lg:h-16 lg:px-6 relative">
+      {/* Left: SidebarTrigger (mobile) + Logo — left-aligned */}
+      <div className="flex items-center gap-3 shrink-0">
+        {isMobile && (
+          <SidebarTrigger className="-ml-2" aria-label={t('common.expandSidebar')} />
+        )}
+        <Link
+          to={appBasePath || '/'}
+          className="flex items-center gap-2 text-xl font-bold text-foreground hover:text-primary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg"
+        >
+          <img
+            src="/slugbase_icon_blue.svg"
+            alt=""
+            className="h-10 w-10 lg:h-12 lg:w-12 dark:hidden"
+          />
+          <img
+            src="/slugbase_icon_white.svg"
+            alt=""
+            className="h-10 w-10 lg:h-12 lg:w-12 hidden dark:block"
+          />
+          <span className="hidden sm:inline">{t('app.name')}</span>
+        </Link>
+      </div>
+
+      {/* Center: search bar — truly centered in header */}
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl px-4 pointer-events-none">
+        <div className="pointer-events-auto w-full">
+          <GlobalSearch />
+        </div>
+      </div>
+
+      {/* Right: Create bookmark + Profile — right-aligned */}
+      <div className="flex items-center gap-2 sm:gap-4 shrink-0 ml-auto">
+        <Link to={`${appBasePath}/bookmarks?create=true`}>
+          <Button variant="primary" size="sm" icon={Plus}>
+            <span className="hidden sm:inline">{t('bookmarks.create')}</span>
+          </Button>
+        </Link>
+        <UserDropdown user={user} />
+      </div>
+    </header>
+  );
+}

package/frontend/src/components/UserDropdown.tsx

@@ -0,0 +1,86 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { User as UserIcon, LogOut, Settings } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import type { User } from '../contexts/AuthContext';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+
+interface UserDropdownProps {
+  user: User | null;
+}
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+}
+
+export default function UserDropdown({ user }: UserDropdownProps) {
+  const { t } = useTranslation();
+  const { appBasePath } = useAppConfig();
+  const { logout } = useAuth();
+
+  const showAdmin = user?.is_admin;
+
+  if (!user) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="flex items-center justify-center w-9 h-9 rounded-full bg-secondary text-secondary-foreground font-medium text-sm hover:bg-accent hover:text-accent-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          aria-haspopup="menu"
+          aria-label={t('profile.title')}
+        >
+          {user.name ? (
+            getInitials(user.name)
+          ) : (
+            <UserIcon className="h-5 w-5" />
+          )}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">{user.name}</p>
+            <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link to={`${appBasePath}/profile`} className="flex items-center gap-2 cursor-pointer">
+            <UserIcon className="h-4 w-4" />
+            {t('profile.title')}
+          </Link>
+        </DropdownMenuItem>
+        {showAdmin && (
+          <DropdownMenuItem asChild>
+            <Link to={`${appBasePath}/admin/members`} className="flex items-center gap-2 cursor-pointer">
+              <Settings className="h-4 w-4" />
+              {t('admin.title')}
+            </Link>
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={() => logout()}
+          className="flex items-center gap-2 cursor-pointer text-destructive focus:text-destructive"
+        >
+          <LogOut className="h-4 w-4" />
+          {t('auth.logout')}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}