mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
Marc-André Bombeck
a589e15f86
The hub arranges and picks what the dashboard, insights and each module show and holds no theme control, so "Appearance" promised something it does not have. It reads "Layout" in every locale, and its subtitle says what it does. In German "Darstellung" now names only the account page's language-and-units card.
66 lines
2.3 KiB
TypeScript
66 lines
2.3 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 { ViewToggle } from "@/components/ui/view-toggle";
|
|
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={
|
|
<ViewToggle
|
|
view={layout.arrangement}
|
|
onChange={setArrangement}
|
|
groupLabel={t("documents.layout.arrangementHeading")}
|
|
dataSlotPrefix="documents-arrangement"
|
|
segments={[
|
|
{
|
|
value: "stacked",
|
|
label: t("documents.layout.stacked"),
|
|
icon: Rows3,
|
|
},
|
|
{
|
|
value: "flow",
|
|
label: t("documents.layout.flow"),
|
|
icon: WrapText,
|
|
},
|
|
]}
|
|
/>
|
|
}
|
|
/>
|
|
</SettingsCard>
|
|
</div>
|
|
);
|
|
}
|