tessera-ctl/apps/web/src/components/settings/settings-sidebar.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';

/**
 * Settings sub-sidebar (D-19, D-20).
 * Phase 05 categories: Dashboard > Widgets, Calendar.
 * Active item uses sidebar-accent pattern with aria-current="page".
 */
export function SettingsSidebar() {
  const t = useTranslations('settings');
  const pathname = usePathname();

  const items = [
    {
      label: t('categoryWidgets'),
      href: '/settings/dashboard',
    },
    {
      label: t('categoryCalendar'),
      href: '/settings/dashboard/calendar',
    },
  ];

  const isActive = (href: string) => {
    if (href === '/settings/dashboard') {
      // Active when exactly on /settings/dashboard (not on sub-routes like /calendar)
      return pathname === '/settings/dashboard';
    }
    return pathname.startsWith(href);
  };

  return (
    <aside
      className="flex w-[220px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar"
      role="navigation"
      aria-label={t('navLabel')}
    >
      {/* Allgemein category — above Dashboard (Surface C, 07-06) */}
      <div className="p-4 pb-2">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
          {t('categoryGeneral')}
        </h2>
      </div>
      <nav className="mb-2 flex flex-col gap-1 px-3">
        <Link
          href="/settings/general/account"
          className={`flex items-center rounded-md px-2 py-1.5 text-sm transition-colors ${
            isActive('/settings/general/account')
              ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
              : 'text-sidebar-foreground hover:bg-muted'
          }`}
          aria-current={
            isActive('/settings/general/account') ? 'page' : undefined
          }
        >
          {t('categoryAccount')}
        </Link>
      </nav>

      {/* Dashboard category — existing items unchanged */}
      <div className="p-4">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
          {t('categoryDashboard')}
        </h2>
      </div>
      <nav className="flex flex-col gap-1 px-3">
        {items.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={`flex items-center rounded-md px-2 py-1.5 text-sm transition-colors ${
              isActive(item.href)
                ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
                : 'text-sidebar-foreground hover:bg-muted'
            }`}
            aria-current={isActive(item.href) ? 'page' : undefined}
          >
            {item.label}
          </Link>
        ))}
      </nav>
    </aside>
  );
}