mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 05:42:19 +00:00
Marc-André Bombeck
ba0cd63cf5
Measured before the sweep: 317 description and hint strings under the `settings` and `admin` namespaces, median 83 characters, 113 of them two sentences or more. The rule the design standards now carry is one sentence, guideline 120 characters, and this is the sweep that makes it true. Almost nothing was retranslated. A second sentence is already written in every language — it is just in the wrong slot. `scripts/split-description.mjs` cuts a description at its first sentence boundary in all six bundles at once and either drops the tail or files it under its own key; the twenty-one keys that moved now render in the card body as foreground `text-sm`, which is where multi-sentence prose belongs and where a reader can actually read it (the slot is muted `text-xs`). Eight tails were dropped outright, because "Off by default" under a switch, "Topics and frequency are adjustable" above the topic switches, and "Only admins can create invitations" on an admin-gated route are not information. Twenty-eight keys are gone: the privacy page's intro, which was a table of contents for the four cards under it; two About descriptions that listed verbatim the labels and the buttons beneath them; a card description that repeated its own title; the API-token sentence that said what the paragraph below it said with the actual instruction; and the eight integration secondary sentences. Six descriptions were rewritten shorter in all six languages where trimming was honest rather than lossy. On the strings that changed: 4391 characters of English down to 2290, and 32 multi-sentence descriptions down to zero. The rule is now a gate. `card-description-length.test.ts` reads the keys that actually reach a card header's description slot — statically, from the JSX — and checks them in EN and DE, because a rule that only holds in English produces a slot that wraps to two lines in half the locales. Its exception list is empty and carries a reason requirement plus a test that removes a stale entry. Verified by putting a second sentence back: it fails.
103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import Link from "next/link";
|
|
import { CalendarHeart } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { SettingsCard } from "@/components/settings/settings-card";
|
|
import { SettingsCardHeader } from "@/components/settings/_card-header";
|
|
import { useTranslations } from "@/lib/i18n/context";
|
|
import { queryKeys } from "@/lib/query-keys";
|
|
import { apiGet, apiPatch } from "@/lib/api/api-fetch";
|
|
|
|
/**
|
|
* v1.15.0 — the cycle-tracking enable on-ramp.
|
|
*
|
|
* The cycle vertical auto-enables for accounts set to female (gender-derived
|
|
* default), but everyone else needs a way IN: the gated `/cycle` page bounces
|
|
* them home and the in-page settings (where the goal/prefs live) sit behind
|
|
* that same gate. This card reads the UNGATED `/api/auth/me/cycle-prefs` so any
|
|
* account can flip `cycleTrackingEnabled` on (or a female account can opt out)
|
|
* before the gated page is reachable. PATCHes the same prefs route the iOS app
|
|
* uses; invalidates the nav gate so the sidebar/bottom-nav entry appears.
|
|
*/
|
|
|
|
interface CyclePrefsShape {
|
|
cycleTrackingEnabled: boolean;
|
|
}
|
|
|
|
export function CycleTrackingCard({
|
|
isAuthenticated,
|
|
}: {
|
|
isAuthenticated: boolean;
|
|
}) {
|
|
const { t } = useTranslations();
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data } = useQuery({
|
|
queryKey: queryKeys.cyclePrefs(),
|
|
enabled: isAuthenticated,
|
|
queryFn: async () => {
|
|
return apiGet<CyclePrefsShape>("/api/auth/me/cycle-prefs");
|
|
},
|
|
});
|
|
|
|
const toggle = useMutation({
|
|
mutationFn: async (enabled: boolean) => {
|
|
return apiPatch<CyclePrefsShape>("/api/auth/me/cycle-prefs", { enabled });
|
|
},
|
|
onSuccess: () => {
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.cyclePrefs() });
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.cycle() });
|
|
// The nav gate reads the resolved enable state off /auth/me.
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.authMe() });
|
|
},
|
|
});
|
|
|
|
const enabled = data?.cycleTrackingEnabled ?? false;
|
|
|
|
return (
|
|
<SettingsCard>
|
|
<SettingsCardHeader
|
|
icon={CalendarHeart}
|
|
title={t("settings.cycleTracking.title")}
|
|
description={t("settings.cycleTracking.description")}
|
|
/>
|
|
<p className="text-sm">{t("settings.cycleTracking.detail")}</p>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<Label htmlFor="cycle-tracking-enable" className="text-sm">
|
|
{t("settings.cycleTracking.enable")}
|
|
</Label>
|
|
<Switch
|
|
id="cycle-tracking-enable"
|
|
checked={enabled}
|
|
disabled={toggle.isPending || data == null}
|
|
onCheckedChange={(v) => toggle.mutate(v)}
|
|
className="mt-0.5 shrink-0"
|
|
/>
|
|
</div>
|
|
{enabled ? (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="min-h-11 sm:min-h-9"
|
|
asChild
|
|
>
|
|
<Link href="/cycle">{t("settings.cycleTracking.manage")}</Link>
|
|
</Button>
|
|
) : null}
|
|
{toggle.isError ? (
|
|
<p className="text-destructive text-sm" role="alert">
|
|
{t("settings.cycleTracking.error")}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</SettingsCard>
|
|
);
|
|
}
|