0adfa5fe5e
Add a Settings page with about card (app name + version) and an update section that uses the Tauri v2 updater plugin to check GitHub Releases, download signed installers, and relaunch. Includes full state machine (idle/checking/available/downloading/readyToInstall/installing/error) with progress bar and retry. Database in %APPDATA% is never touched. - Add tauri-plugin-updater and tauri-plugin-process (Rust + npm) - Configure updater endpoint, pubkey placeholder, and passive install mode - Add signing env vars and updaterJsonPreferNsis to release workflow - Add Settings nav item, route, and fr/en translations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { NavLink } from "react-router-dom";
|
|
import {
|
|
LayoutDashboard,
|
|
Upload,
|
|
ArrowLeftRight,
|
|
Tags,
|
|
SlidersHorizontal,
|
|
PiggyBank,
|
|
BarChart3,
|
|
Settings,
|
|
Languages,
|
|
} from "lucide-react";
|
|
import { NAV_ITEMS, APP_NAME } from "../../shared/constants";
|
|
|
|
const iconMap: Record<string, React.ComponentType<{ size?: number }>> = {
|
|
LayoutDashboard,
|
|
Upload,
|
|
ArrowLeftRight,
|
|
Tags,
|
|
SlidersHorizontal,
|
|
PiggyBank,
|
|
BarChart3,
|
|
Settings,
|
|
};
|
|
|
|
export default function Sidebar() {
|
|
const { t, i18n } = useTranslation();
|
|
|
|
const toggleLanguage = () => {
|
|
const next = i18n.language === "fr" ? "en" : "fr";
|
|
i18n.changeLanguage(next);
|
|
};
|
|
|
|
return (
|
|
<aside className="flex flex-col w-60 h-screen bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)]">
|
|
<div className="p-5 border-b border-white/10">
|
|
<h1 className="text-lg font-bold tracking-tight">{APP_NAME}</h1>
|
|
</div>
|
|
|
|
<nav className="flex-1 py-4 space-y-1 px-3">
|
|
{NAV_ITEMS.map((item) => {
|
|
const Icon = iconMap[item.icon];
|
|
return (
|
|
<NavLink
|
|
key={item.key}
|
|
to={item.path}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
|
isActive
|
|
? "bg-[var(--sidebar-active)] text-white"
|
|
: "text-[var(--sidebar-fg)] hover:bg-[var(--sidebar-hover)]"
|
|
}`
|
|
}
|
|
>
|
|
{Icon && <Icon size={18} />}
|
|
<span>{t(item.labelKey)}</span>
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-3 border-t border-white/10">
|
|
<button
|
|
onClick={toggleLanguage}
|
|
className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm hover:bg-[var(--sidebar-hover)] transition-colors"
|
|
>
|
|
<Languages size={18} />
|
|
<span>{i18n.language === "fr" ? "English" : "Français"}</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|