edr-platform/apps/finance-web/src/shared/components/AppShell.tsx

import { DashboardLayout } from "@edr/ui-common";
import { Box } from "@mantine/core";
import { useLocation, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import type { ReactNode } from "react";

import { useAuth } from "@/auth/AuthContext";
import { setLanguage } from "@/i18n";
import { FINANCE_NAV, findActive, visibleNav } from "@/shared/nav/nav-model";
import { localized } from "@/shared/lib/localizedName";
import {
  CommandPalette,
  openCommandPalette,
} from "@/shared/components/CommandPalette";

const LANGUAGES = [
  { code: "en", label: "English" },
  { code: "am", label: "አማርኛ" },
];

/** The shortcut is only discoverable if something on screen names it. */
function SearchPill() {
  return (
    <button
      type="button"
      onClick={openCommandPalette}
      data-testid="command-palette-trigger"
      className="ml-3 hidden shrink-0 items-center gap-2 rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-muted-foreground transition hover:border-[#10B981]/30 hover:text-foreground sm:inline-flex"
    >
      <span>Search</span>
      <kbd className="rounded border border-border bg-background px-1.5 py-0.5 text-xs">
        ⌘K
      </kbd>
    </button>
  );
}

export function AppShell({ children }: { children: ReactNode }) {
  const navigate = useNavigate();
  const location = useLocation();
  const { user, logout, can } = useAuth();
  const { i18n } = useTranslation();

  const items = visibleNav(FINANCE_NAV, can);
  const { group, entry } = findActive(FINANCE_NAV, location.pathname);

  const name = localized(user?.name, "en") || user?.username || "";

  const breadcrumb = entry ? (
    <span data-testid="breadcrumb" className="truncate">
      {group ? (
        <>
          <span className="text-muted-foreground">{group.label}</span>
          <span className="mx-1.5 text-muted-foreground">/</span>
        </>
      ) : null}
      <span className="font-semibold">{entry.label}</span>
    </span>
  ) : (
    <span data-testid="breadcrumb">EDR Finance</span>
  );

  return (
    <>
      <CommandPalette />
      <DashboardLayout
        title="EDR Finance"
        sidebarItems={items}
        activeHref={location.pathname}
        onNavigate={(href) => navigate(href)}
        userName={name}
        userEmail={user?.email}
        userInitials={name.slice(0, 2).toUpperCase()}
        onLogout={logout}
        enableThemeToggle
        breadcrumb={breadcrumb}
        headerLeft={<SearchPill />}
        languages={LANGUAGES}
        language={i18n.language}
        onLanguageChange={(code) => setLanguage(code as "en" | "am")}
        // No notification source exists in this app yet.
        showNotifications={false}
        // finance-web has no profile screen — an entry that 404s is worse than
        // no entry.
        showProfileLink={false}
        responsiveSidebar
        sidebarPersistKey="finance-nav-expanded"
      >
        {/* `main` in ui-common has zero padding by design — its other ~94
            consumers pad themselves — so the gutter belongs here. */}
        <Box px="xl" py="lg">
          {children}
        </Box>
      </DashboardLayout>
    </>
  );
}