mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
Marc-André Bombeck
ab3f21c58c
The timeline's Segmented, the document sources' SegmentedChoice, the medication detail's SegmentedToggle and the icon-only ViewToggle were four implementations of the same control in two looks, two at 36 px on a phone. ui/segmented.tsx replaces all four, plus the hand-rolled range rows above the lab and custom metric charts, the mood dimension window and the inventory quantity mode: a muted track with the chosen segment raised, radio semantics with roving focus by default, pressed-button semantics for view switches and form sheets, icon-only segments, and 44 px per segment on a coarse pointer. A test holds the definition to that one module.
68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Settings → Layout → Documents.
|
|
*
|
|
* Reached from the wrench beside the vault's Upload button, the way the
|
|
* illness journal's wrench reaches its own page. Two choices, each in its own
|
|
* card with the toggle in the header's status slot (the illness page's
|
|
* shape): the card/list view and the month arrangement. Both persist per user
|
|
* through `/api/documents/inbound/layout`.
|
|
*/
|
|
import { LayoutGrid, Rows3, WrapText } from "lucide-react";
|
|
|
|
import { SettingsCardHeader } from "@/components/settings/_card-header";
|
|
import { SettingsCard } from "@/components/settings/settings-card";
|
|
import { ModuleViewToggle } from "@/components/module-list/module-view-toggle";
|
|
import { Segmented } from "@/components/ui/segmented";
|
|
import { useTranslations } from "@/lib/i18n/context";
|
|
import { useDocumentsLayout } from "@/lib/queries/use-documents-layout";
|
|
|
|
export function DocumentsSection() {
|
|
const { t } = useTranslations();
|
|
const { layout, setView, setArrangement } = useDocumentsLayout();
|
|
|
|
return (
|
|
<div className="space-y-6" data-slot="documents-layout-settings">
|
|
<SettingsCard id="documents-view" className="scroll-mt-28">
|
|
<SettingsCardHeader
|
|
icon={LayoutGrid}
|
|
title={t("moduleList.viewHeading")}
|
|
description={t("documents.layout.viewDescription")}
|
|
status={<ModuleViewToggle view={layout.view} onChange={setView} />}
|
|
/>
|
|
</SettingsCard>
|
|
|
|
<SettingsCard id="documents-arrangement" className="scroll-mt-28">
|
|
<SettingsCardHeader
|
|
icon={Rows3}
|
|
title={t("documents.layout.arrangementHeading")}
|
|
description={t("documents.layout.arrangementDescription")}
|
|
status={
|
|
<Segmented
|
|
mode="toggle"
|
|
iconOnly
|
|
value={layout.arrangement}
|
|
onChange={setArrangement}
|
|
label={t("documents.layout.arrangementHeading")}
|
|
optionSlot={(value) => `documents-arrangement-${value}`}
|
|
options={[
|
|
{
|
|
value: "stacked",
|
|
label: t("documents.layout.stacked"),
|
|
icon: Rows3,
|
|
},
|
|
{
|
|
value: "flow",
|
|
label: t("documents.layout.flow"),
|
|
icon: WrapText,
|
|
},
|
|
]}
|
|
/>
|
|
}
|
|
/>
|
|
</SettingsCard>
|
|
</div>
|
|
);
|
|
}
|