Add settings page for alert preferences

This commit is contained in:
zv
2026-06-11 18:39:01 +02:00
parent 68fd967f88
commit 531e678922
9 changed files with 344 additions and 10 deletions

View File

@@ -2,15 +2,13 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { CloudSun, Droplets, TriangleAlert } from "lucide-react";
import { CloudSun, Droplets, Settings, TriangleAlert } from "lucide-react";
import { NAV_ITEMS } from "@/lib/constants";
import { cn } from "@/lib/utils";
import { InstallPWAButton } from "@/components/ui/install-pwa-button";
import { ThemeToggle } from "@/components/ui/theme-toggle";
import { LanguageToggle } from "@/components/ui/language-toggle";
import { useI18n } from "@/lib/i18n";
const icons = [CloudSun, TriangleAlert, Droplets];
const icons = [CloudSun, TriangleAlert, Droplets, Settings];
export function AppShell({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
@@ -34,8 +32,6 @@ export function AppShell({ children }: { children: React.ReactNode }) {
</nav>
<div className="flex items-center gap-2">
<InstallPWAButton />
<LanguageToggle />
<ThemeToggle />
</div>
</div>
</header>
@@ -45,9 +41,9 @@ export function AppShell({ children }: { children: React.ReactNode }) {
const Icon = icons[index];
const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
return (
<Link key={item.href} href={item.href} className={cn("flex min-w-[5rem] flex-col items-center gap-1 rounded-card px-3 py-2 text-[0.68rem] font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent", active ? "bg-foreground text-background" : "text-muted")}>
<Link key={item.href} href={item.href} className={cn("flex min-w-0 flex-1 flex-col items-center gap-1 rounded-card px-2 py-2 text-[0.68rem] font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent", active ? "bg-foreground text-background" : "text-muted")}>
<Icon className="size-4" />
{t(item.labelKey)}
<span className="max-w-full truncate">{t(item.labelKey)}</span>
</Link>
);
})}