Blomios
b152e33b60
Le bouton + de la barre d'onglets projets était invisible (pas de variant d'affichage). Il est désormais rendu en permanence via un variant secondary, avec aria-pressed et title pour l'accessibilité, permettant d'ajouter un projet en onglet. Couvert par un nouveau test (ProjectTabs.test.tsx). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
/**
|
|
* `ProjectTabs` — the project tab bar rendered below the app header.
|
|
*
|
|
* Shows one tab per open project with a close control, and a "+" button to the
|
|
* right that opens the **Projects** panel (floating) — the single entry point
|
|
* for creating a project or switching to a known one (#26). Purely
|
|
* presentational: all state lives in the parent (ProjectsView via useProjects).
|
|
*
|
|
* The bar is always present (even with no open project) so the "+" stays
|
|
* reachable; the empty case shows a muted placeholder next to it.
|
|
*/
|
|
|
|
import type { TabItem } from "@/shared";
|
|
import { Button, Tabs, cn } from "@/shared";
|
|
|
|
export interface ProjectTabsProps {
|
|
items: TabItem[];
|
|
activeTabId: string | null;
|
|
onSelect: (id: string) => void;
|
|
onClose: (id: string) => void;
|
|
/** Whether the Projects panel is currently open (in any placement). */
|
|
projectsPanelOpen: boolean;
|
|
/** Open the Projects panel (floating) — create/switch project. */
|
|
onOpenProjectsPanel: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function ProjectTabs({
|
|
items,
|
|
activeTabId,
|
|
onSelect,
|
|
onClose,
|
|
projectsPanelOpen,
|
|
onOpenProjectsPanel,
|
|
className,
|
|
}: ProjectTabsProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex shrink-0 items-center gap-1 border-b border-border bg-surface px-2 py-1",
|
|
className,
|
|
)}
|
|
>
|
|
{items.length === 0 ? (
|
|
<p className="flex-1 px-2 text-sm text-muted">No open tabs.</p>
|
|
) : (
|
|
<Tabs
|
|
items={items}
|
|
value={activeTabId}
|
|
onSelect={onSelect}
|
|
onClose={onClose}
|
|
className="flex-1"
|
|
/>
|
|
)}
|
|
{/* Add-project affordance (#46): always a bordered `secondary` button so
|
|
it reads as a clickable control in every state — including zero open
|
|
projects — instead of the near-invisible `ghost` glyph it used to be.
|
|
When the Projects panel is open it also shows the pressed ring. */}
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={onOpenProjectsPanel}
|
|
aria-label="open projects panel"
|
|
aria-pressed={projectsPanelOpen}
|
|
title="Ajouter un projet"
|
|
className={cn(
|
|
"shrink-0",
|
|
projectsPanelOpen && "ring-1 ring-border-strong",
|
|
)}
|
|
>
|
|
+
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|