Files
legal-ai/web-ui/src/components/app-shell.tsx
Chaim 1133272e34
All checks were successful
Build & Deploy / build-and-deploy (push) Successful in 34s
Fix Paperclip integration (identifier→issue_prefix) + add settings page
- Fix column name mismatch in paperclip_client.py and app.py: Paperclip's
  companies table uses `issue_prefix`, not `identifier`
- Fix _LEGAL_DB_URL to read from POSTGRES_URL env var (used in container)
- Add settings page (/settings) for managing tag → Paperclip company mappings
- Replace "תיק חדש" nav item with "הגדרות" (new case is on home page)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 14:09:08 +00:00

101 lines
3.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import type { ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
/**
* Ezer Mishpati navigation shell.
*
* Editorial/judicial aesthetic:
* - Navy header with a gold hairline rule (border-b-3)
* - Parchment/cream body background (set on <body> via globals.css)
* - Hebrew RTL throughout (set on <html> in layout.tsx)
*
* Nav items pick up an `aria-current="page"` and a gold underline when
* the current route matches, so screen readers announce the active
* section and sighted users can see where they are.
*/
type NavItem = {
href: string;
label: string;
};
const NAV_ITEMS: NavItem[] = [
{ href: "/", label: "בית" },
{ href: "/training", label: "אימון סגנון" },
{ href: "/skills", label: "מיומנויות" },
{ href: "/diagnostics", label: "אבחון" },
{ href: "/settings", label: "הגדרות" },
];
function isActive(pathname: string, href: string): boolean {
if (href === "/") return pathname === "/";
return pathname === href || pathname.startsWith(`${href}/`);
}
export function AppShell({ children }: { children: ReactNode }) {
const pathname = usePathname();
return (
<>
<header
className="
relative z-10 flex items-center gap-4
px-10 py-[18px]
bg-navy text-parchment
border-b-[3px] border-gold
shadow-md
"
>
<Link href="/" className="flex items-baseline gap-3 hover:text-parchment">
<span className="font-display text-[1.45rem] font-bold tracking-[0.02em] text-parchment">
עוזר משפטי
</span>
<span className="text-gold-soft text-sm font-medium">ניהול תיקים</span>
</Link>
<nav
className="me-auto flex items-center gap-1"
aria-label="ניווט ראשי"
>
{NAV_ITEMS.map((item) => {
const active = isActive(pathname, item.href);
return (
<Link
key={item.href}
href={item.href}
aria-current={active ? "page" : undefined}
className={`
relative px-3 py-1.5 rounded text-sm transition-colors
${
active
? "text-parchment font-semibold bg-navy-soft/80"
: "text-parchment/80 hover:text-parchment hover:bg-navy-soft/60"
}
`}
>
{item.label}
{active && (
<span
className="absolute -bottom-[19px] inset-x-2 h-[2px] bg-gold"
aria-hidden="true"
/>
)}
</Link>
);
})}
</nav>
</header>
<main
id="main"
className="flex-1 w-full max-w-[1400px] mx-auto px-10 py-10"
>
{children}
</main>
</>
);
}