f02fd95ab1
The single 12-card SettingsPage is replaced by a hub at /settings linking
to three thematic sub-pages mounted via a shared SettingsLayout (Outlet):
/settings SettingsHomePage (3 cards-cluster + PageHelp)
/settings/users UsersSettingsPage (Account, License, DocsContent)
/settings/data DataSettingsPage (Categories, DataManagement,
PriceFetchConsentToggle)
/settings/systems SystemsSettingsPage (Version, UpdateCard,
ChangelogContent, LogViewer)
DocsPage and ChangelogPage are extracted into reusable DocsContent /
ChangelogContent components and the standalone /docs and /changelog
routes become Navigate redirects to preserve external bookmarks and
release-note links. UpdateCard is extracted from the inline updater
block for symmetry and testability.
TokenStoreFallbackBanner is mounted once in SettingsLayout, surfacing
the OS-keychain-fallback warning across the four main routes only.
The two existing /settings/categories/{standard,migrate} sub-routes
stay flat (siblings of SettingsLayout) to keep their focused flows
free of the banner — their internal back-links now point to
/settings/data.
i18n FR/EN gain settings.{home, users, data, systems, backToHome};
docs/architecture.md and CHANGELOG{,.fr}.md updated. Pure refactor of
presentation: no new business logic, no Tauri commands, no SQL
migrations.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router-dom";
|
|
import { ArrowLeft, ShieldCheck } from "lucide-react";
|
|
import { getVersion } from "@tauri-apps/api/app";
|
|
import { APP_NAME } from "../../shared/constants";
|
|
import UpdateCard from "../../components/settings/UpdateCard";
|
|
import ChangelogContent from "../../components/settings/ChangelogContent";
|
|
import LogViewerCard from "../../components/settings/LogViewerCard";
|
|
|
|
export default function SystemsSettingsPage() {
|
|
const { t } = useTranslation();
|
|
const [version, setVersion] = useState("");
|
|
|
|
useEffect(() => {
|
|
getVersion().then(setVersion);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Link
|
|
to="/settings"
|
|
className="inline-flex items-center gap-2 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
{t("settings.backToHome")}
|
|
</Link>
|
|
|
|
<h1 className="text-2xl font-bold">{t("settings.systems.title")}</h1>
|
|
|
|
<section className="space-y-3">
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
|
|
{t("settings.systems.sections.version")}
|
|
</h2>
|
|
<div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-xl bg-[var(--primary)] flex items-center justify-center text-white font-bold text-lg">
|
|
S
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold">{APP_NAME}</h3>
|
|
<p className="text-sm text-[var(--muted-foreground)]">
|
|
{t("settings.version", { version })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-3">
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
|
|
{t("settings.systems.sections.update")}
|
|
</h2>
|
|
<UpdateCard />
|
|
</section>
|
|
|
|
<section className="space-y-3">
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
|
|
{t("settings.systems.sections.changelog")}
|
|
</h2>
|
|
<ChangelogContent />
|
|
</section>
|
|
|
|
<section className="space-y-3">
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
|
|
{t("settings.systems.sections.logs")}
|
|
</h2>
|
|
<LogViewerCard />
|
|
</section>
|
|
|
|
<div className="flex items-start gap-2 text-sm text-[var(--muted-foreground)]">
|
|
<ShieldCheck size={16} className="mt-0.5 shrink-0" />
|
|
<p>{t("settings.dataSafeNotice")}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|