Files
HealthLog/src/components/settings/import-panel/import-card-shell.tsx
T
Marc-André Bombeck 715b733164 feat(shell): add a command palette for pages, settings, modules and actions
Cmd/Ctrl+K or the search control at the end of the top bar opens a
combobox over a client-side index built from the lists the navigation
already renders: pages, Insights pages, every Settings section and card
(deep-linked by a new anchor prop on SettingsCardHeader), the Appearance
sub-pages, module switches and a few actions. Entries follow the module
map, the Coach capability, the admin role and a shared record's grant;
inside somebody else's record no cards, switches or backup are offered.

Ranking is prefix, then word start, then substring, then a small edit
distance, then subsequence, with a short multilingual synonym list. The
empty state shows recent places (per account, in localStorage) and the
main actions. The palette is its own lazily loaded chunk; the top bar
shows a search field where it has room and a magnifier otherwise. The
module switch mutation moves into a shared hook used by the Modules hub
and the palette.
2026-10-09 16:35:21 +02:00

36 lines
873 B
TypeScript

import type { LucideIcon } from "lucide-react";
import { SettingsCard } from "@/components/settings/settings-card";
import { SettingsCardHeader } from "@/components/settings/_card-header";
export interface ImportCardShellProps {
testId: string;
/** Deep-link anchor for the card (`/settings/export#<anchor>`). */
anchor: string;
icon: LucideIcon;
title: string;
description: string;
children: React.ReactNode;
}
export function ImportCardShell({
testId,
anchor,
icon: Icon,
title,
description,
children,
}: ImportCardShellProps) {
return (
<SettingsCard data-testid={testId} className="flex h-full flex-col">
<SettingsCardHeader
anchor={anchor}
icon={Icon}
title={title}
description={description}
/>
<div className="flex flex-1 flex-col gap-3">{children}</div>
</SettingsCard>
);
}