125c5f5744
- TodoView collapses to a single-panel navigation stack (list -> items with Back) via container query when narrow (right dock); wide two-panel layout unchanged. - Embedded Import Tasks body scrolls vertically so the preview can be much taller (stacked layout gives the preview natural height; wide layout keeps internal scroll). - Add a shared ViewHeader component (icon + CC-style title + wrapping actions) for consistent main-view headers. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import "./ViewHeader.css";
|
|
import type { ComponentType, ReactNode } from "react";
|
|
import type { LucideProps } from "lucide-react";
|
|
|
|
/*
|
|
FNXC:Navigation 2026-06-22-01:00:
|
|
Shared header for main-content views so every left-sidebar destination reads consistently, modeled after Command Center (cc-header/cc-title): an icon + 1.125rem title on the left, optional actions on the right, with the standard --space-lg view padding. Views adopting this should NOT add their own outer top/side padding for the header row.
|
|
*/
|
|
export interface ViewHeaderProps {
|
|
icon: ComponentType<LucideProps>;
|
|
title: string;
|
|
/** Optional right-aligned actions (buttons, filters, status). */
|
|
actions?: ReactNode;
|
|
/** Optional id for the heading element (for aria-labelledby). */
|
|
titleId?: string;
|
|
}
|
|
|
|
export function ViewHeader({ icon: Icon, title, actions, titleId }: ViewHeaderProps) {
|
|
return (
|
|
<header className="view-header">
|
|
<h2 className="view-header__title" id={titleId}>
|
|
<Icon size={20} aria-hidden="true" />
|
|
<span>{title}</span>
|
|
</h2>
|
|
{actions ? <div className="view-header__actions">{actions}</div> : null}
|
|
</header>
|
|
);
|
|
}
|