first commit

frontend/.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+.next
+.env
+.env.*
+*.log
+.git
+.gitignore
+README.md

frontend/.gitignore

@@ -0,0 +1 @@
+.next

frontend/Dockerfile

@@ -0,0 +1,45 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# 构建参数（NEXT_PUBLIC_* 变量需要在构建时注入）
+ARG NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build Next.js app
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+# Create non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy necessary files from builder
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

frontend/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

frontend/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  output: 'standalone'
+};
+
+module.exports = nextConfig;

frontend/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "notify-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tailwindcss/postcss": "^4.1.18",
+    "autoprefixer": "^10.4.23",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.562.0",
+    "next": "^14.2.5",
+    "next-themes": "^0.4.6",
+    "postcss": "^8.5.6",
+    "react": "^18.3.1",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.71.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "typescript": "^5.5.2"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};

frontend/src/app/globals.css

@@ -0,0 +1,182 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  :root {
+    --background: 220 20% 97%;
+    --foreground: 220 20% 10%;
+    --card: 0 0% 100%;
+    --card-foreground: 220 20% 10%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 220 20% 10%;
+    --primary: 220 80% 55%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 220 15% 94%;
+    --secondary-foreground: 220 20% 20%;
+    --muted: 220 15% 94%;
+    --muted-foreground: 220 10% 50%;
+    --accent: 220 15% 94%;
+    --accent-foreground: 220 20% 20%;
+    --destructive: 0 72% 55%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 15% 92%;
+    --input: 220 15% 90%;
+    --ring: 220 80% 55%;
+    --radius: 0.5rem;
+    --sidebar: 0 0% 100%;
+    --sidebar-foreground: 220 20% 20%;
+    --sidebar-primary: 220 80% 55%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 220 15% 96%;
+    --sidebar-accent-foreground: 220 20% 20%;
+    --sidebar-border: 220 15% 94%;
+    --sidebar-ring: 220 80% 55%;
+  }
+
+  html {
+    font-size: 28px;
+  }
+
+  * {
+    border-color: hsl(var(--border) / 0.6);
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}

frontend/src/app/invites/page.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import AppShell from "@/components/AppShell";
+import Avatar from "@/components/ui/avatar";
+import { Check, Copy, Eye, Users } from "lucide-react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { api } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
+
+type RegisteredUser = {
+  id: string;
+  username: string;
+  avatar?: string | null;
+  createdAt: string;
+};
+
+type Invite = {
+  id: string;
+  code: string;
+  creator_id: string;
+  max_uses: number;
+  used_count: number;
+  expires_at: string;
+  revoked_at: string | null;
+  created_at: string;
+};
+
+type InviteWithUsers = {
+  id: string;
+  code: string;
+  creatorId: string;
+  maxUses: number;
+  usedCount: number;
+  expiresAt: string;
+  revokedAt: string | null;
+  createdAt: string;
+  registeredUsers: RegisteredUser[];
+};
+
+const InvitesPage = () => {
+  const t = useTranslation();
+  const [invites, setInvites] = useState<Invite[]>([]);
+  const [maxUses, setMaxUses] = useState(5);
+  const [expiresInDays, setExpiresInDays] = useState(7);
+  const [selectedInvite, setSelectedInvite] = useState<InviteWithUsers | null>(null);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const load = async () => {
+    const data = await api.getInvites();
+    setInvites(data as Invite[]);
+  };
+
+  useEffect(() => {
+    load().catch(() => null);
+  }, []);
+
+  const createInvite = async (event: React.FormEvent) => {
+    event.preventDefault();
+    await api.createInvite({ maxUses, expiresInDays });
+    setMaxUses(5);
+    setExpiresInDays(7);
+    await load();
+  };
+
+  const revokeInvite = async (id: string) => {
+    await api.revokeInvite(id);
+    await load();
+  };
+
+  const viewDetails = async (id: string) => {
+    const data = await api.getInvite(id);
+    setSelectedInvite(data as InviteWithUsers);
+    setDetailsOpen(true);
+  };
+
+  const copyCode = async (code: string, id: string) => {
+    await navigator.clipboard.writeText(code);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  const formatDateTime = (dateStr: string): string => {
+    const d = new Date(dateStr);
+    const pad = (n: number) => n.toString().padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  };
+
+  const getInviteStatus = (invite: Invite): { key: string; color: string } => {
+    if (invite.revoked_at) {
+      return { key: "statusRevoked", color: "bg-red-100 text-red-700" };
+    }
+    if (new Date(invite.expires_at) < new Date()) {
+      return { key: "statusExpired", color: "bg-slate-100 text-slate-700" };
+    }
+    if (invite.used_count >= invite.max_uses) {
+      return { key: "statusExhausted", color: "bg-amber-100 text-amber-700" };
+    }
+    return { key: "statusActive", color: "bg-green-100 text-green-700" };
+  };
+
+  return (
+    <AppShell>
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card className="bg-white">
+          <CardHeader>
+            <CardTitle>{t("createInvite")}</CardTitle>
+            <CardDescription>{t("createInviteDesc")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="space-y-4" onSubmit={createInvite}>
+              <div className="space-y-2">
+                <Label htmlFor="maxUses">{t("maxUses")}</Label>
+                <Input
+                  id="maxUses"
+                  type="number"
+                  min={1}
+                  max={20}
+                  value={maxUses}
+                  onChange={(event) => setMaxUses(Number(event.target.value))}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="expiresInDays">{t("expiresInDays")}</Label>
+                <Input
+                  id="expiresInDays"
+                  type="number"
+                  min={1}
+                  max={30}
+                  value={expiresInDays}
+                  onChange={(event) => setExpiresInDays(Number(event.target.value))}
+                />
+              </div>
+              <Button type="submit">{t("generateInvite")}</Button>
+            </form>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-white">
+          <CardHeader>
+            <CardTitle>{t("myInvites")}</CardTitle>
+            <CardDescription>{t("myInvitesDesc")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-3">
+              {invites.map((invite) => {
+                const status = getInviteStatus(invite);
+                const isActive = status.key === "statusActive";
+                return (
+                  <div
+                    key={invite.id}
+                    className="flex items-center justify-between rounded-lg bg-slate-50/80 px-4 py-3 transition-colors hover:bg-slate-100/80"
+                  >
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <code className="rounded bg-slate-200 px-2 py-0.5 text-sm font-semibold text-slate-800">
+                          {invite.code}
+                        </code>
+                        <button
+                          type="button"
+                          onClick={() => copyCode(invite.code, invite.id)}
+                          className="rounded p-1 text-slate-400 hover:bg-slate-200 hover:text-slate-600"
+                          title={t("copyCode")}
+                        >
+                          {copiedId === invite.id ? (
+                            <Check className="h-4 w-4 text-green-500" />
+                          ) : (
+                            <Copy className="h-4 w-4" />
+                          )}
+                        </button>
+                        <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${status.color}`}>
+                          {t(status.key as keyof ReturnType<typeof useTranslation>)}
+                        </span>
+                      </div>
+                      <div className="mt-1 flex items-center gap-3 text-xs text-slate-500">
+                        <span className="flex items-center gap-1">
+                          <Users className="h-3 w-3" />
+                          {invite.used_count}/{invite.max_uses}
+                        </span>
+                        <span>{t("expiresAt")}: {formatDateTime(invite.expires_at)}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => viewDetails(invite.id)}
+                        className="text-slate-400 hover:text-blue-500"
+                      >
+                        <Eye className="h-4 w-4" />
+                      </Button>
+                      {isActive && (
+                        <AlertDialog>
+                          <AlertDialogTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-slate-400 hover:text-red-500"
+                            >
+                              {t("revoke")}
+                            </Button>
+                          </AlertDialogTrigger>
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>{t("revokeInvite")}</AlertDialogTitle>
+                              <AlertDialogDescription>
+                                {t("revokeInviteDesc", { code: invite.code })}
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                              <AlertDialogAction
+                                className="bg-red-500 hover:bg-red-600"
+                                onClick={() => revokeInvite(invite.id)}
+                              >
+                                {t("revoke")}
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+              {invites.length === 0 && (
+                <div className="rounded-lg bg-slate-50/80 p-6 text-center text-sm text-slate-400">
+                  {t("noInvites")}
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Details Dialog */}
+      <Dialog open={detailsOpen} onOpenChange={setDetailsOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <code className="rounded bg-slate-200 px-2 py-0.5 text-base">
+                {selectedInvite?.code}
+              </code>
+            </DialogTitle>
+            <DialogDescription>
+              {t("registeredUsers")}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            {selectedInvite?.registeredUsers && selectedInvite.registeredUsers.length > 0 ? (
+              selectedInvite.registeredUsers.map((user) => (
+                <div
+                  key={user.id}
+                  className="flex items-center gap-3 rounded-lg bg-slate-50 p-3"
+                >
+                  <Avatar username={user.username} src={user.avatar} size="sm" />
+                  <div className="min-w-0 flex-1">
+                    <div className="font-medium text-slate-800">{user.username}</div>
+                    <div className="text-xs text-slate-500">
+                      {formatDateTime(user.createdAt)}
+                    </div>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="rounded-lg bg-slate-50 p-6 text-center text-sm text-slate-400">
+                {t("noRegisteredUsers")}
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </AppShell>
+  );
+};
+
+export default InvitesPage;

frontend/src/app/layout.tsx

@@ -0,0 +1,20 @@
+import "./globals.css";
+
+import { I18nProvider } from "@/lib/i18n";
+
+export const metadata = {
+  title: "Notify",
+  description: "简洁提醒应用",
+};
+
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html lang="zh" suppressHydrationWarning>
+      <body className="min-h-screen bg-background font-sans antialiased">
+        <I18nProvider>{children}</I18nProvider>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;

frontend/src/app/login/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+import LanguageSwitcher from "@/components/LanguageSwitcher";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { api } from "@/lib/api";
+import { setToken } from "@/lib/auth";
+import { useTranslation } from "@/lib/i18n";
+
+const LoginPage = () => {
+  const t = useTranslation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError("");
+    try {
+      const result = await api.login({ username, password });
+      setToken(result.token);
+      window.location.href = "/todos";
+    } catch (err) {
+      setError(t("loginFailed"));
+    }
+  };
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-10">
+      <div className="absolute right-4 top-4">
+        <LanguageSwitcher />
+      </div>
+      <Card className="w-full max-w-md border-slate-200/80 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-2xl">{t("login")}</CardTitle>
+          <CardDescription>{t("loginWelcome")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className="space-y-4" onSubmit={onSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="username">{t("username")}</Label>
+              <Input
+                id="username"
+                placeholder={t("enterUsername")}
+                value={username}
+                onChange={(event) => setUsername(event.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">{t("password")}</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder={t("enterPassword")}
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+              />
+            </div>
+            {error && <div className="text-sm text-destructive">{error}</div>}
+            <Button className="w-full" type="submit">
+              {t("login")}
+            </Button>
+            <Link
+              className="block text-center text-sm text-slate-500 transition hover:text-slate-900"
+              href="/register"
+            >
+              {t("noAccount")}
+            </Link>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default LoginPage;

frontend/src/app/notifications/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import AppShell from "@/components/AppShell";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
+import { useNotification } from "@/lib/notification-context";
+
+type Notification = {
+  id: string;
+  triggerAt: string;
+  status: string;
+  channel: string;
+  readAt?: string | null;
+};
+
+const NotificationsPage = () => {
+  const t = useTranslation();
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const { refreshUnreadCount } = useNotification();
+
+  const load = async () => {
+    const data = (await api.getNotifications()) as Notification[];
+    setNotifications(data);
+  };
+
+  useEffect(() => {
+    load().catch(() => null);
+  }, []);
+
+  const markRead = async (id: string) => {
+    await api.markNotificationRead(id);
+    await load();
+    await refreshUnreadCount();
+  };
+
+  const markAllRead = async () => {
+    await api.markAllNotificationsRead();
+    await load();
+    await refreshUnreadCount();
+  };
+
+  return (
+    <AppShell>
+      <Card className="bg-white">
+        <CardHeader className="flex-row items-center justify-between space-y-0">
+          <div>
+            <CardTitle>{t("notifications")}</CardTitle>
+            <CardDescription>{t("notificationsDesc")}</CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Input className="max-w-xs" placeholder={t("searchNotifications")} />
+            {notifications.length > 0 && (
+              <Button variant="outline" size="sm" onClick={markAllRead}>
+                {t("markAllRead")}
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-3">
+            {notifications.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-center justify-between rounded-lg bg-slate-50/80 px-4 py-3 transition-colors hover:bg-slate-100/80"
+              >
+                <div>
+                  <div className="text-sm font-semibold text-slate-800">
+                    {t("triggerTime")}：{new Date(item.triggerAt).toLocaleString()}
+                  </div>
+                  <div className="text-xs text-slate-500">{t("channel")}：{item.channel}</div>
+                </div>
+                <Button variant="outline" size="sm" onClick={() => markRead(item.id)}>
+                  {t("markRead")}
+                </Button>
+              </div>
+            ))}
+            {notifications.length === 0 && (
+              <div className="rounded-lg bg-slate-50/80 p-6 text-center text-sm text-slate-400">
+                {t("noNotification")}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </AppShell>
+  );
+};
+
+export default NotificationsPage;

frontend/src/app/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { getToken } from "@/lib/auth";
+import { useTranslation } from "@/lib/i18n";
+
+const HomePage = () => {
+  const t = useTranslation();
+
+  useEffect(() => {
+    const token = getToken();
+    window.location.href = token ? "/todos" : "/login";
+  }, []);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
+      {t("loading")}
+    </div>
+  );
+};
+
+export default HomePage;

frontend/src/app/register/page.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+import LanguageSwitcher from "@/components/LanguageSwitcher";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { api } from "@/lib/api";
+import { setToken } from "@/lib/auth";
+import { useTranslation } from "@/lib/i18n";
+
+const RegisterPage = () => {
+  const t = useTranslation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [inviteCode, setInviteCode] = useState("");
+  const [error, setError] = useState("");
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError("");
+    try {
+      const result = await api.register({ username, password, inviteCode });
+      setToken(result.token);
+      window.location.href = "/todos";
+    } catch (err) {
+      setError(t("registerFailed"));
+    }
+  };
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-10">
+      <div className="absolute right-4 top-4">
+        <LanguageSwitcher />
+      </div>
+      <Card className="w-full max-w-md border-slate-200/80 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-2xl">{t("registerTitle")}</CardTitle>
+          <CardDescription>{t("registerDesc")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className="space-y-4" onSubmit={onSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="invite">{t("inviteCode")}</Label>
+              <Input
+                id="invite"
+                placeholder={t("enterInviteCode")}
+                value={inviteCode}
+                onChange={(event) => setInviteCode(event.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="username">{t("username")}</Label>
+              <Input
+                id="username"
+                placeholder={t("enterUsername")}
+                value={username}
+                onChange={(event) => setUsername(event.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">{t("password")}</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder={t("enterPassword")}
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+              />
+            </div>
+            {error && <div className="text-sm text-destructive">{error}</div>}
+            <Button className="w-full" type="submit">
+              {t("register")}
+            </Button>
+            <Link
+              className="block text-center text-sm text-slate-500 transition hover:text-slate-900"
+              href="/login"
+            >
+              {t("hasAccount")}
+            </Link>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default RegisterPage;

frontend/src/app/reminders/page.tsx

@@ -0,0 +1,467 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import AppShell from "@/components/AppShell";
+import Avatar from "@/components/ui/avatar";
+import { X } from "lucide-react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DateTimePicker } from "@/components/ui/datetime-picker";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RecurrencePicker, type RecurrenceRule as RecurrenceRuleInput } from "@/components/ui/recurrence-picker";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
+
+type RecurrenceType = "hourly" | "daily" | "weekly" | "monthly" | "yearly";
+
+type RecurrenceRule = {
+  id: string;
+  type: RecurrenceType;
+  interval: number;
+  byWeekday?: number | null;
+  byMonthday?: number | null;
+};
+
+type User = { id: string; username: string; avatar?: string | null };
+type Task = { id: string; title: string; dueAt: string; recurrenceRule?: RecurrenceRule | null };
+
+const RemindersPage = () => {
+  const t = useTranslation();
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [dueAt, setDueAt] = useState<Date | undefined>(undefined);
+  const [offsetMinutes, setOffsetMinutes] = useState(0);
+  const [showAdvanceReminder, setShowAdvanceReminder] = useState(false);
+  const [recipientIds, setRecipientIds] = useState<string[]>([]);
+  const [isRecurring, setIsRecurring] = useState(false);
+  const [recurrenceRule, setRecurrenceRule] = useState<RecurrenceRuleInput>({ type: "daily", interval: 1 });
+
+  // Bark settings
+  const [showBarkSettings, setShowBarkSettings] = useState(false);
+  const [barkTitle, setBarkTitle] = useState("");
+  const [barkSubtitle, setBarkSubtitle] = useState("");
+  const [barkUseMarkdown, setBarkUseMarkdown] = useState(false);
+  const [barkMarkdownContent, setBarkMarkdownContent] = useState("");
+  const [barkLevel, setBarkLevel] = useState<string>("");
+  const [barkIcon, setBarkIcon] = useState("");
+
+  const load = async () => {
+    const [tasksData, usersData] = await Promise.all([api.getReminderTasks(), api.getUsers()]);
+    setTasks(tasksData as Task[]);
+    setUsers(usersData as User[]);
+  };
+
+  useEffect(() => {
+    load().catch(() => null);
+  }, []);
+
+  const addRecipient = (id: string) => {
+    setRecipientIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
+  };
+
+  const removeRecipient = (id: string) => {
+    setRecipientIds((prev) => prev.filter((item) => item !== id));
+  };
+
+  const createTask = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!dueAt || recipientIds.length === 0) return;
+    await api.createReminderTask({
+      title,
+      content: barkUseMarkdown && barkMarkdownContent ? barkMarkdownContent : content,
+      dueAt: dueAt.toISOString(),
+      recipientIds,
+      offsets: [{
+        offsetMinutes,
+        channelInapp: true,
+        channelBark: true,
+        ...(barkTitle && { barkTitle }),
+        ...(barkSubtitle && { barkSubtitle }),
+        ...(barkUseMarkdown && barkMarkdownContent && { barkBodyMarkdown: barkMarkdownContent }),
+        ...(barkLevel && { barkLevel }),
+        ...(barkIcon && { barkIcon }),
+      }],
+      ...(isRecurring && {
+        recurrenceRule: {
+          type: recurrenceRule.type,
+          interval: recurrenceRule.interval,
+          by_weekday: recurrenceRule.byWeekday,
+          by_monthday: recurrenceRule.byMonthday,
+        },
+      }),
+    });
+    setTitle("");
+    setContent("");
+    setDueAt(undefined);
+    setOffsetMinutes(0);
+    setShowAdvanceReminder(false);
+    setRecipientIds([]);
+    setIsRecurring(false);
+    setRecurrenceRule({ type: "daily", interval: 1 });
+    // Reset Bark settings
+    setShowBarkSettings(false);
+    setBarkTitle("");
+    setBarkSubtitle("");
+    setBarkUseMarkdown(false);
+    setBarkMarkdownContent("");
+    setBarkLevel("");
+    setBarkIcon("");
+    await load();
+  };
+
+  const deleteTask = async (id: string) => {
+    await api.deleteReminderTask(id);
+    await load();
+  };
+
+  const formatDateTime = (dateStr: string): string => {
+    const d = new Date(dateStr);
+    const pad = (n: number) => n.toString().padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  };
+
+  const getRecurrenceLabel = (rule: RecurrenceRule): string => {
+    const interval = rule.interval || 1;
+    if (rule.type === "weekly" && interval === 2) {
+      return t("modeBiweekly");
+    }
+    switch (rule.type) {
+      case "daily": return t("modeDaily");
+      case "weekly": return t("modeWeekly");
+      case "monthly": return t("modeMonthly");
+      case "yearly": return t("modeYearly");
+      default: return rule.type;
+    }
+  };
+
+  return (
+    <AppShell>
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card className="bg-white">
+          <CardHeader>
+            <CardTitle>{t("createReminder")}</CardTitle>
+            <CardDescription>{t("createReminderDesc")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="space-y-4" onSubmit={createTask}>
+              <div className="space-y-2">
+                <Label htmlFor="title">{t("taskTitle")}</Label>
+                <Input
+                  id="title"
+                  placeholder={t("enterTaskTitle")}
+                  value={title}
+                  onChange={(event) => setTitle(event.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="content">{t("reminderContent")}</Label>
+                <textarea
+                  id="content"
+                  className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  placeholder={t("enterReminderContent")}
+                  value={content}
+                  onChange={(event) => setContent(event.target.value)}
+                  disabled={barkUseMarkdown && !!barkMarkdownContent}
+                />
+                {barkUseMarkdown && barkMarkdownContent && (
+                  <p className="text-xs text-amber-600">{t("contentReplacedByMarkdown")}</p>
+                )}
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="dueAt">
+                  {t("reminderTime")}
+                  <span className="ml-1 text-red-500">*</span>
+                </Label>
+                <DateTimePicker
+                  value={dueAt}
+                  onChange={setDueAt}
+                  placeholder={t("selectReminderTime")}
+                />
+              </div>
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="showAdvanceReminder"
+                    checked={showAdvanceReminder}
+                    onCheckedChange={(checked) => {
+                      setShowAdvanceReminder(checked === true);
+                      if (!checked) setOffsetMinutes(0);
+                    }}
+                  />
+                  <Label htmlFor="showAdvanceReminder">{t("enableAdvanceReminder")}</Label>
+                </div>
+                {showAdvanceReminder && (
+                  <div className="ml-6 space-y-2">
+                    <Label htmlFor="offset">{t("advanceReminder")}</Label>
+                    <Input
+                      id="offset"
+                      type="number"
+                      min={0}
+                      value={offsetMinutes}
+                      onChange={(event) => setOffsetMinutes(Number(event.target.value))}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="recurring"
+                    checked={isRecurring}
+                    onCheckedChange={(checked) => setIsRecurring(checked === true)}
+                  />
+                  <Label htmlFor="recurring">{t("setRecurringReminder")}</Label>
+                </div>
+                {isRecurring && (
+                  <div className="mt-3">
+                    <RecurrencePicker
+                      value={recurrenceRule}
+                      onChange={setRecurrenceRule}
+                      dueDate={dueAt}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="space-y-3">
+                <Label>
+                  {t("reminderFor")}
+                  <span className="ml-1 text-red-500">*</span>
+                </Label>
+                <Select
+                  value=""
+                  onValueChange={(value) => addRecipient(value)}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder={t("selectUser")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {users
+                      .filter((user) => !recipientIds.includes(user.id))
+                      .map((user) => (
+                        <SelectItem key={user.id} value={user.id}>
+                          <div className="flex items-center gap-2">
+                            <Avatar username={user.username} src={user.avatar} size="sm" className="h-5 w-5 text-xs" />
+                            <span>{user.username}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+                {recipientIds.length > 0 && (
+                  <div className="flex flex-wrap gap-2">
+                    {recipientIds.map((id) => {
+                      const user = users.find((u) => u.id === id);
+                      if (!user) return null;
+                      return (
+                        <span
+                          key={id}
+                          className="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2 py-1 text-sm text-slate-700"
+                        >
+                          <Avatar username={user.username} src={user.avatar} size="sm" className="h-5 w-5 text-xs" />
+                          {user.username}
+                          <button
+                            type="button"
+                            onClick={() => removeRecipient(id)}
+                            className="rounded-full p-0.5 hover:bg-slate-200"
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </span>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+              {/* Bark Settings */}
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="showBarkSettings"
+                    checked={showBarkSettings}
+                    onCheckedChange={(checked) => setShowBarkSettings(checked === true)}
+                  />
+                  <Label htmlFor="showBarkSettings">{t("barkSettings")}</Label>
+                </div>
+                {showBarkSettings && (
+                  <div className="ml-6 space-y-4 rounded-lg border border-slate-200 bg-slate-50/50 p-4">
+                    <p className="text-sm text-slate-500">{t("barkSettingsDesc")}</p>
+                    
+                    <div className="space-y-2">
+                      <Label htmlFor="barkTitle">{t("barkTitle")}</Label>
+                      <Input
+                        id="barkTitle"
+                        placeholder={t("barkTitlePlaceholder")}
+                        value={barkTitle}
+                        onChange={(e) => setBarkTitle(e.target.value)}
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="barkSubtitle">{t("barkSubtitle")}</Label>
+                      <Input
+                        id="barkSubtitle"
+                        placeholder={t("barkSubtitlePlaceholder")}
+                        value={barkSubtitle}
+                        onChange={(e) => setBarkSubtitle(e.target.value)}
+                      />
+                    </div>
+
+                    <div className="space-y-3">
+                      <div className="flex items-center space-x-2">
+                        <Checkbox
+                          id="barkUseMarkdown"
+                          checked={barkUseMarkdown}
+                          onCheckedChange={(checked) => setBarkUseMarkdown(checked === true)}
+                        />
+                        <Label htmlFor="barkUseMarkdown">{t("barkUseMarkdown")}</Label>
+                      </div>
+                      {barkUseMarkdown && (
+                        <div className="space-y-2">
+                          <p className="text-xs text-amber-600">{t("markdownWillReplaceContent")}</p>
+                          <Label htmlFor="barkMarkdown">{t("barkMarkdownContent")}</Label>
+                          <textarea
+                            id="barkMarkdown"
+                            className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                            placeholder={t("barkMarkdownPlaceholder")}
+                            value={barkMarkdownContent}
+                            onChange={(e) => setBarkMarkdownContent(e.target.value)}
+                          />
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="barkLevel">{t("barkLevel")}</Label>
+                      <Select value={barkLevel} onValueChange={setBarkLevel}>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t("barkLevelActive")} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="active">{t("barkLevelActive")}</SelectItem>
+                          <SelectItem value="timeSensitive">{t("barkLevelTimeSensitive")}</SelectItem>
+                          <SelectItem value="passive">{t("barkLevelPassive")}</SelectItem>
+                          <SelectItem value="critical">{t("barkLevelCritical")}</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="barkIcon">{t("barkIcon")}</Label>
+                      <Input
+                        id="barkIcon"
+                        placeholder={t("barkIconPlaceholder")}
+                        value={barkIcon}
+                        onChange={(e) => setBarkIcon(e.target.value)}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Button type="submit" disabled={!dueAt || recipientIds.length === 0}>
+                  {t("save")}
+                </Button>
+                <Button type="button" variant="outline">
+                  {t("cancel")}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+        <Card className="bg-white">
+          <CardHeader>
+            <CardTitle>{t("reminderList")}</CardTitle>
+            <CardDescription>{t("reminderListDesc")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-3">
+              {tasks.map((task) => (
+                <div
+                  key={task.id}
+                  className="flex items-center justify-between rounded-lg bg-slate-50/80 px-4 py-3 transition-colors hover:bg-slate-100/80"
+                >
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-semibold text-slate-800">{task.title}</span>
+                      {task.recurrenceRule && (
+                        <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">
+                          {getRecurrenceLabel(task.recurrenceRule)}
+                        </span>
+                      )}
+                    </div>
+                    <div className="text-xs text-slate-500">
+                      {formatDateTime(task.dueAt)}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium text-slate-500">{t("reminder")}</span>
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="text-slate-400 hover:text-red-500"
+                        >
+                          {t("delete")}
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>{t("confirmDelete")}</AlertDialogTitle>
+                          <AlertDialogDescription>
+                            {t("confirmDeleteDesc", { title: task.title })}
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                          <AlertDialogAction
+                            className="bg-red-500 hover:bg-red-600"
+                            onClick={() => deleteTask(task.id)}
+                          >
+                            {t("delete")}
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  </div>
+                </div>
+              ))}
+              {tasks.length === 0 && (
+                <div className="rounded-lg bg-slate-50/80 p-6 text-center text-sm text-slate-400">
+                  {t("noReminder")}
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </AppShell>
+  );
+};
+
+export default RemindersPage;

frontend/src/app/settings/page.tsx

@@ -0,0 +1,14 @@
+import AppShell from "@/components/AppShell";
+import SettingsPanel from "@/components/SettingsPanel";
+
+const SettingsPage = () => {
+  return (
+    <AppShell>
+      <div className="max-w-xl">
+        <SettingsPanel />
+      </div>
+    </AppShell>
+  );
+};
+
+export default SettingsPage;

frontend/src/app/todos/page.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import AppShell from "@/components/AppShell";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DateTimePicker } from "@/components/ui/datetime-picker";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RecurrencePicker, type RecurrenceRule as RecurrenceRuleInput } from "@/components/ui/recurrence-picker";
+import { api } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
+
+type RecurrenceType = "hourly" | "daily" | "weekly" | "monthly" | "yearly";
+
+type RecurrenceRule = {
+  id: string;
+  type: RecurrenceType;
+  interval: number;
+  byWeekday?: number | null;
+  byMonthday?: number | null;
+};
+
+type Todo = {
+  id: string;
+  title: string;
+  description?: string | null;
+  dueAt: string;
+  recurrenceRule?: RecurrenceRule | null;
+  isCheckedIn: boolean;
+  checkInCount: number;
+  checkInAt?: string | null;
+};
+
+const TodosPage = () => {
+  const t = useTranslation();
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [title, setTitle] = useState("");
+  const [dueAt, setDueAt] = useState<Date | undefined>(undefined);
+  const [offsetMinutes, setOffsetMinutes] = useState(10);
+  const [isRecurring, setIsRecurring] = useState(false);
+  const [recurrenceRule, setRecurrenceRule] = useState<RecurrenceRuleInput>({ type: "daily", interval: 1 });
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [checkingIn, setCheckingIn] = useState<string | null>(null);
+
+  const loadTodos = async () => {
+    const data = (await api.getTodos()) as Todo[];
+    setTodos(data);
+  };
+
+  useEffect(() => {
+    loadTodos().catch(() => null);
+  }, []);
+
+  const resetForm = () => {
+    setTitle("");
+    setDueAt(undefined);
+    setIsRecurring(false);
+    setRecurrenceRule({ type: "daily", interval: 1 });
+    setOffsetMinutes(10);
+  };
+
+  const createTodo = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!dueAt) return;
+    await api.createTodo({
+      title,
+      dueAt: dueAt.toISOString(),
+      offsets: [{ offsetMinutes, channelInapp: true, channelBark: true }],
+      ...(isRecurring && {
+        recurrenceRule: {
+          type: recurrenceRule.type,
+          interval: recurrenceRule.interval,
+          by_weekday: recurrenceRule.byWeekday,
+          by_monthday: recurrenceRule.byMonthday,
+        },
+      }),
+    });
+    resetForm();
+    setIsDialogOpen(false);
+    await loadTodos();
+  };
+
+  const deleteTodo = async (id: string) => {
+    await api.deleteTodo(id);
+    await loadTodos();
+  };
+
+  const checkInTodo = async (id: string) => {
+    setCheckingIn(id);
+    try {
+      await api.checkInTodo(id);
+      await loadTodos();
+    } finally {
+      setCheckingIn(null);
+    }
+  };
+
+  const colorDots = ["bg-emerald-500", "bg-amber-500", "bg-blue-500", "bg-rose-500"];
+
+  const getRecurrenceLabel = (rule: RecurrenceRule): string => {
+    const interval = rule.interval || 1;
+    if (rule.type === "weekly" && interval === 2) {
+      return t("modeBiweekly");
+    }
+    switch (rule.type) {
+      case "daily": return t("modeDaily");
+      case "weekly": return t("modeWeekly");
+      case "monthly": return t("modeMonthly");
+      case "yearly": return t("modeYearly");
+      default: return rule.type;
+    }
+  };
+
+  return (
+    <AppShell>
+      <Card className="bg-white">
+        <CardHeader className="flex-row items-center justify-between space-y-0">
+          <div>
+            <CardTitle>{t("myTodoList")}</CardTitle>
+            <CardDescription>{t("myTodoListDesc")}</CardDescription>
+          </div>
+          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" type="button">
+                {t("addTask")}
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="w-[90vw] max-w-[90vw] sm:w-[40vw] sm:max-w-[40vw]">
+              <form onSubmit={createTodo}>
+                <DialogHeader>
+                  <DialogTitle>{t("createTask")}</DialogTitle>
+                  <DialogDescription>{t("createTaskDesc")}</DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="title">{t("title")}</Label>
+                    <Input
+                      id="title"
+                      placeholder={t("enterTodoTitle")}
+                      value={title}
+                      onChange={(event) => setTitle(event.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="dueAt">{t("dueTime")}</Label>
+                    <DateTimePicker
+                      value={dueAt}
+                      onChange={setDueAt}
+                      placeholder="选择截止日期和时间"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="offset">{t("advanceReminder")}</Label>
+                    <Input
+                      id="offset"
+                      type="number"
+                      min={0}
+                      value={offsetMinutes}
+                      onChange={(event) => setOffsetMinutes(Number(event.target.value))}
+                    />
+                  </div>
+                  <div className="space-y-3">
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id="recurring"
+                        checked={isRecurring}
+                        onCheckedChange={(checked) => setIsRecurring(checked === true)}
+                      />
+                      <Label htmlFor="recurring">{t("setRecurring")}</Label>
+                    </div>
+                    {isRecurring && (
+                      <div className="mt-3">
+                        <RecurrencePicker
+                          value={recurrenceRule}
+                          onChange={setRecurrenceRule}
+                          dueDate={dueAt}
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button type="submit" disabled={!title || !dueAt}>
+                    {t("save")}
+                  </Button>
+                </DialogFooter>
+              </form>
+            </DialogContent>
+          </Dialog>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-3">
+            {todos.map((todo, index) => (
+              <div
+                key={todo.id}
+                className="flex items-center gap-3 rounded-lg bg-slate-50/80 px-4 py-3 transition-colors hover:bg-slate-100/80"
+              >
+                <span
+                  className={`h-3 w-3 rounded-sm ${colorDots[index % colorDots.length]}`}
+                />
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold text-slate-800">{todo.title}</span>
+                    {todo.recurrenceRule && (
+                      <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">
+                        {getRecurrenceLabel(todo.recurrenceRule)}
+                      </span>
+                    )}
+                    {todo.checkInCount > 0 && (
+                      <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">
+                        {todo.checkInCount}x
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    {t("due")} {new Date(todo.dueAt).toLocaleString()}
+                  </div>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className={
+                    todo.isCheckedIn
+                      ? "bg-emerald-50 text-emerald-600"
+                      : "text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700"
+                  }
+                  onClick={() => checkInTodo(todo.id)}
+                  disabled={checkingIn === todo.id || todo.isCheckedIn}
+                >
+                  {checkingIn === todo.id
+                    ? "..."
+                    : todo.isCheckedIn
+                      ? t("checkInSuccess")
+                      : t("checkIn")}
+                </Button>
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-slate-400 hover:text-red-500"
+                    >
+                      {t("delete")}
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>{t("confirmDelete")}</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        {t("confirmDeleteDesc", { title: todo.title })}
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                      <AlertDialogAction
+                        className="bg-red-500 hover:bg-red-600"
+                        onClick={() => deleteTodo(todo.id)}
+                      >
+                        {t("delete")}
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            ))}
+            {todos.length === 0 && (
+              <div className="rounded-lg bg-slate-50/80 p-6 text-center text-sm text-slate-400">
+                {t("noTodo")}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </AppShell>
+  );
+};
+
+export default TodosPage;

frontend/src/components/AppShell.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import AppSidebar from "@/components/AppSidebar";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
+import { clearToken } from "@/lib/auth";
+import { useTranslation } from "@/lib/i18n";
+import { NotificationProvider } from "@/lib/notification-context";
+import { UserProvider } from "@/lib/user-context";
+
+const AppShellContent = ({ children }: { children: ReactNode }) => {
+  const t = useTranslation();
+
+  return (
+    <SidebarProvider defaultOpen>
+      <div className="flex min-h-screen bg-slate-100 p-6">
+        <AppSidebar />
+        <SidebarInset>
+          <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6">
+            <div className="rounded-xl bg-white p-4 shadow-sm">
+              <div className="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                  <h1 className="text-xl font-semibold leading-tight text-slate-900">Notify</h1>
+                  <p className="text-sm text-slate-500">{t("appDesc")}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <LanguageSwitcher />
+                  <Button variant="outline" onClick={() => clearToken()}>
+                    {t("logout")}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="grid gap-5">{children}</div>
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  );
+};
+
+const AppShell = ({ children }: { children: ReactNode }) => {
+  return (
+    <UserProvider>
+      <NotificationProvider>
+        <AppShellContent>{children}</AppShellContent>
+      </NotificationProvider>
+    </UserProvider>
+  );
+};
+
+export default AppShell;

frontend/src/components/AppSidebar.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Bell, BellDot, ListTodo, Settings, UserPlus } from "lucide-react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "@/components/ui/sidebar";
+import Avatar from "@/components/ui/avatar";
+import { useTranslation, type TranslationKey } from "@/lib/i18n";
+import { useNotification } from "@/lib/notification-context";
+import { useUser } from "@/lib/user-context";
+
+const navItems: { href: string; labelKey: TranslationKey; icon: typeof ListTodo }[] = [
+  { href: "/todos", labelKey: "navTodo", icon: ListTodo },
+  { href: "/reminders", labelKey: "navReminder", icon: Bell },
+  { href: "/invites", labelKey: "navInvites", icon: UserPlus },
+  { href: "/settings", labelKey: "navSettings", icon: Settings },
+  { href: "/notifications", labelKey: "navNotifications", icon: BellDot },
+];
+
+const AppSidebar = () => {
+  const pathname = usePathname();
+  const { unreadCount } = useNotification();
+  const { user } = useUser();
+  const t = useTranslation();
+
+  return (
+    <Sidebar variant="inset" className="h-[calc(100vh-3rem)] self-start bg-white">
+      <SidebarHeader className="gap-2 px-3 py-4">
+        <div className="flex items-center gap-2">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500/10 text-blue-600">
+            <span className="text-base font-semibold">◎</span>
+          </span>
+          <span className="text-base font-semibold group-data-[state=collapsed]/sidebar:hidden">
+            notify
+          </span>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel className="group-data-[state=collapsed]/sidebar:hidden">
+            {t("navigation")}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => {
+                const isActive = pathname?.startsWith(item.href);
+                const isNotifications = item.href === "/notifications";
+                return (
+                  <SidebarMenuItem key={item.href}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={isActive}
+                      className="group-data-[state=collapsed]/sidebar:justify-center group-data-[state=collapsed]/sidebar:px-2"
+                    >
+                      <Link href={item.href}>
+                        <span className="relative">
+                          <item.icon className="h-4 w-4" />
+                          {isNotifications && unreadCount > 0 && (
+                            <span className="absolute -right-1 -top-1 hidden h-2 w-2 rounded-full bg-red-500 group-data-[state=collapsed]/sidebar:inline-flex" />
+                          )}
+                        </span>
+                        <span className="group-data-[state=collapsed]/sidebar:hidden">
+                          {t(item.labelKey)}
+                        </span>
+                        {isNotifications && unreadCount > 0 && (
+                          <span className="ml-auto rounded-full bg-red-500 px-2 py-0.5 text-xs font-semibold text-white group-data-[state=collapsed]/sidebar:hidden">
+                            {unreadCount}
+                          </span>
+                        )}
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarSeparator />
+      <SidebarFooter className="px-3 py-4">
+        <div className="flex items-center gap-2 group-data-[state=collapsed]/sidebar:justify-center">
+          <Avatar username={user?.username} src={user?.avatar} size="sm" />
+          <span className="text-sm font-medium text-slate-700 group-data-[state=collapsed]/sidebar:hidden">
+            {user?.username}
+          </span>
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  );
+};
+
+export default AppSidebar;

frontend/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useState } from "react";
+import { Globe } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useI18n, type Locale } from "@/lib/i18n";
+
+const languages: { value: Locale; label: string }[] = [
+  { value: "zh", label: "中文" },
+  { value: "en", label: "English" },
+];
+
+const LanguageSwitcher = () => {
+  const { locale, setLocale, t } = useI18n();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Globe className="h-4 w-4" />
+          <span className="hidden sm:inline">
+            {languages.find((l) => l.value === locale)?.label}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-32 p-1" align="end">
+        <div className="flex flex-col gap-1">
+          {languages.map((lang) => (
+            <button
+              key={lang.value}
+              className={`w-full rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-slate-100 ${
+                locale === lang.value
+                  ? "bg-slate-100 font-medium text-slate-900"
+                  : "text-slate-600"
+              }`}
+              onClick={() => {
+                setLocale(lang.value);
+                setOpen(false);
+              }}
+            >
+              {lang.label}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default LanguageSwitcher;

frontend/src/components/SettingsPanel.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import Avatar from "@/components/ui/avatar";
+import { api } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
+import { useUser } from "@/lib/user-context";
+
+type Me = {
+  username?: string;
+  avatar?: string | null;
+  timezone: string;
+  barkUrl?: string | null;
+  inappEnabled: boolean;
+  barkEnabled: boolean;
+};
+
+const SettingsPanel = () => {
+  const t = useTranslation();
+  const { refreshUser } = useUser();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [form, setForm] = useState<Me>({
+    timezone: "Asia/Shanghai",
+    barkUrl: "",
+    avatar: null,
+    inappEnabled: true,
+    barkEnabled: false,
+  });
+  const [saved, setSaved] = useState(false);
+  const [uploading, setUploading] = useState(false);
+
+  useEffect(() => {
+    api
+      .getMe()
+      .then((data) => setForm(data as Me))
+      .catch(() => null);
+  }, []);
+
+  const save = async () => {
+    await api.updateSettings({
+      avatar: form.avatar || null,
+      timezone: form.timezone,
+      barkUrl: form.barkUrl || null,
+      inappEnabled: form.inappEnabled,
+      barkEnabled: form.barkEnabled,
+    });
+    await refreshUser();
+    setSaved(true);
+    setTimeout(() => setSaved(false), 1500);
+  };
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // 验证文件类型
+    const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+    if (!allowedTypes.includes(file.type)) {
+      alert("不支持的文件格式，请上传 jpg、png、gif 或 webp 格式的图片");
+      return;
+    }
+
+    // 验证文件大小 (5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      alert("文件大小不能超过 5MB");
+      return;
+    }
+
+    try {
+      setUploading(true);
+      const result = await api.uploadAvatar(file);
+      setForm({ ...form, avatar: result.avatarUrl });
+      await refreshUser();
+    } catch (error) {
+      console.error("上传头像失败:", error);
+      alert("上传头像失败，请重试");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleRemoveAvatar = () => {
+    setForm({ ...form, avatar: null });
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <Card className="bg-white">
+      <CardHeader>
+        <CardTitle>{t("settings")}</CardTitle>
+        <CardDescription>{t("settingsDesc")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {/* Avatar Section */}
+          <div className="space-y-2">
+            <Label>{t("avatar")}</Label>
+            <div className="flex items-center gap-4">
+              <Avatar username={form.username} src={form.avatar} size="lg" />
+              <div className="flex flex-col gap-2">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  onChange={handleFileChange}
+                  className="hidden"
+                  id="avatar-upload"
+                />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={uploading}
+                >
+                  {uploading ? t("uploading") : t("uploadAvatar")}
+                </Button>
+                {form.avatar && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleRemoveAvatar}
+                  >
+                    {t("removeAvatar")}
+                  </Button>
+                )}
+                <p className="text-xs text-slate-500">{t("avatarHint")}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="barkUrl">{t("barkPushUrl")}</Label>
+            <Input
+              id="barkUrl"
+              value={form.barkUrl ?? ""}
+              onChange={(event) => setForm({ ...form, barkUrl: event.target.value })}
+              placeholder="https://your.bark.server"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="timezone">{t("timezone")}</Label>
+            <Input
+              id="timezone"
+              value={form.timezone}
+              onChange={(event) => setForm({ ...form, timezone: event.target.value })}
+              placeholder="Asia/Shanghai"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>{t("notificationChannels")}</Label>
+            <div className="rounded-lg bg-slate-50/80">
+              <div className="flex items-center justify-between px-4 py-3">
+                <div>
+                  <div className="text-sm font-medium text-slate-800">{t("webNotifications")}</div>
+                  <div className="text-xs text-slate-500">{t("webNotificationsDesc")}</div>
+                </div>
+                <Checkbox
+                  id="inapp"
+                  checked={form.inappEnabled}
+                  onCheckedChange={(checked) =>
+                    setForm({ ...form, inappEnabled: checked === true })
+                  }
+                />
+              </div>
+              <div className="mx-4 h-px bg-slate-200/50" />
+              <div className="flex items-center justify-between px-4 py-3">
+                <div>
+                  <div className="text-sm font-medium text-slate-800">{t("barkAlerts")}</div>
+                  <div className="text-xs text-slate-500">{t("barkAlertsDesc")}</div>
+                </div>
+                <Checkbox
+                  id="bark"
+                  checked={form.barkEnabled}
+                  onCheckedChange={(checked) =>
+                    setForm({ ...form, barkEnabled: checked === true })
+                  }
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button variant="outline" onClick={save}>
+              {t("save")}
+            </Button>
+            <Button variant="outline" type="button">
+              {t("cancel")}
+            </Button>
+            {saved && <div className="text-sm text-primary">{t("saved")}</div>}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SettingsPanel;

frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-slate-900", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-slate-500", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

frontend/src/components/ui/avatar.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useMemo } from "react";
+import { cn } from "@/lib/utils";
+
+type AvatarProps = {
+  username?: string | null;
+  src?: string | null;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+};
+
+const sizeClasses = {
+  sm: "h-8 w-8 text-sm",
+  md: "h-10 w-10 text-base",
+  lg: "h-12 w-12 text-lg",
+};
+
+// Generate a consistent color based on username
+const getAvatarColor = (username: string): string => {
+  const colors = [
+    "bg-blue-500",
+    "bg-green-500",
+    "bg-purple-500",
+    "bg-orange-500",
+    "bg-pink-500",
+    "bg-teal-500",
+    "bg-indigo-500",
+    "bg-cyan-500",
+  ];
+  
+  let hash = 0;
+  for (let i = 0; i < username.length; i++) {
+    hash = username.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  
+  return colors[Math.abs(hash) % colors.length];
+};
+
+const Avatar = ({ username, src, size = "md", className }: AvatarProps) => {
+  const initial = useMemo(() => {
+    if (!username) return "?";
+    // Get the first character, handling unicode properly
+    const firstChar = [...username][0];
+    return firstChar?.toUpperCase() || "?";
+  }, [username]);
+
+  const bgColor = useMemo(() => {
+    return username ? getAvatarColor(username) : "bg-slate-400";
+  }, [username]);
+
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={username || "Avatar"}
+        className={cn(
+          "rounded-full object-cover",
+          sizeClasses[size],
+          className
+        )}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center rounded-full font-semibold text-white",
+        sizeClasses[size],
+        bgColor,
+        className
+      )}
+      title={username || undefined}
+    >
+      {initial}
+    </div>
+  );
+};
+
+export default Avatar;

frontend/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

frontend/src/components/ui/calendar.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-2",
+        month: "flex flex-col gap-4",
+        month_caption: "flex justify-center pt-1 relative items-center w-full",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        button_previous: cn(
+          "absolute left-1 top-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 inline-flex items-center justify-center rounded-md hover:bg-slate-100"
+        ),
+        button_next: cn(
+          "absolute right-1 top-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 inline-flex items-center justify-center rounded-md hover:bg-slate-100"
+        ),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday:
+          "text-slate-500 rounded-md w-8 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        day: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-slate-100 [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-slate-100/50",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day_button: cn(
+          "h-8 w-8 p-0 font-normal rounded-md text-sm transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 aria-selected:opacity-100"
+        ),
+        range_start: "day-range-start",
+        range_end: "day-range-end",
+        selected:
+          "bg-slate-900 text-white rounded-md hover:bg-slate-800 hover:text-white focus:bg-slate-900 focus:text-white",
+        today: "bg-slate-100 text-slate-900",
+        outside:
+          "day-outside text-slate-500 aria-selected:bg-slate-100/50 aria-selected:text-slate-500",
+        disabled: "text-slate-500 opacity-50",
+        range_middle:
+          "aria-selected:bg-slate-100 aria-selected:text-slate-900",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
+          return <Icon className="h-4 w-4" />;
+        },
+        DayButton: ({ day, modifiers, className, ...buttonProps }) => (
+          <button
+            type="button"
+            className={className}
+            {...buttonProps}
+          />
+        ),
+        PreviousMonthButton: ({ className, ...buttonProps }) => (
+          <button type="button" className={className} {...buttonProps}>
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+        ),
+        NextMonthButton: ({ className, ...buttonProps }) => (
+          <button type="button" className={className} {...buttonProps}>
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

frontend/src/components/ui/card.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-xl bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-3.5 w-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

frontend/src/components/ui/datetime-picker.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { format, parse, isValid } from "date-fns";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+interface DateTimePickerProps {
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+function DateTimePicker({
+  value,
+  onChange,
+  placeholder = "选择日期和时间",
+  disabled = false,
+  className,
+}: DateTimePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  
+  // 获取初始默认时间
+  const getDefaultDate = React.useCallback(() => {
+    const now = new Date();
+    now.setSeconds(0);
+    now.setMilliseconds(0);
+    return now;
+  }, []);
+
+  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(() => {
+    return value ?? getDefaultDate();
+  });
+  const [inputValue, setInputValue] = React.useState(() => {
+    return format(value ?? getDefaultDate(), "yyyy-MM-dd HH:mm");
+  });
+
+  // 组件挂载时，如果没有外部值，设置当前时间为默认值
+  const initialized = React.useRef(false);
+  React.useEffect(() => {
+    if (!initialized.current && !value && onChange) {
+      initialized.current = true;
+      const defaultDate = getDefaultDate();
+      onChange(defaultDate);
+    }
+  }, [value, onChange, getDefaultDate]);
+
+  // Sync with external value
+  React.useEffect(() => {
+    if (value) {
+      setSelectedDate(value);
+      setInputValue(format(value, "yyyy-MM-dd HH:mm"));
+    }
+  }, [value]);
+
+  const handleDateSelect = (date: Date | undefined) => {
+    setSelectedDate(date);
+    if (date && onChange) {
+      const newDate = new Date(date);
+      // 如果已有时间值，保留原来的时分；否则使用当前时间
+      if (value) {
+        newDate.setHours(value.getHours());
+        newDate.setMinutes(value.getMinutes());
+      } else {
+        const now = new Date();
+        newDate.setHours(now.getHours());
+        newDate.setMinutes(now.getMinutes());
+      }
+      newDate.setSeconds(0);
+      newDate.setMilliseconds(0);
+      onChange(newDate);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+  };
+
+  const handleInputBlur = () => {
+    if (!inputValue.trim()) {
+      onChange?.(undefined);
+      setSelectedDate(undefined);
+      return;
+    }
+    // Try to parse the input value with time
+    const parsed = parse(inputValue, "yyyy-MM-dd HH:mm", new Date());
+    if (isValid(parsed)) {
+      setSelectedDate(parsed);
+      parsed.setSeconds(0);
+      parsed.setMilliseconds(0);
+      onChange?.(parsed);
+    } else {
+      // If invalid, reset to the current value
+      if (value) {
+        setInputValue(format(value, "yyyy-MM-dd HH:mm"));
+      } else {
+        setInputValue("");
+      }
+    }
+  };
+
+  return (
+    <div className={cn("relative flex items-center", className)}>
+      <Input
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={handleInputBlur}
+        placeholder={placeholder}
+        disabled={disabled}
+        className="pr-10"
+      />
+      <Popover open={open} onOpenChange={setOpen} modal={true}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            disabled={disabled}
+            className="absolute right-0 h-full px-3 hover:bg-transparent"
+          >
+            <CalendarIcon className="h-4 w-4 text-slate-500" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto p-0"
+          align="end"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        >
+          <div
+            onClick={(e) => {
+              // 阻止点击事件冒泡到 Dialog
+              e.stopPropagation();
+            }}
+            onPointerDown={(e) => {
+              // 阻止指针按下事件冒泡
+              e.stopPropagation();
+            }}
+          >
+            <Calendar
+              mode="single"
+              selected={selectedDate}
+              onSelect={handleDateSelect}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export { DateTimePicker };

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight text-slate-900", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-slate-500", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

frontend/src/components/ui/field.tsx

@@ -0,0 +1,244 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
+        ],
+        responsive: [
+          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors) {
+      return null
+    }
+
+    if (errors?.length === 1 && errors[0]?.message) {
+      return errors[0].message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {errors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

frontend/src/components/ui/form.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>")
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

frontend/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-lg border border-input/60 bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

frontend/src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

frontend/src/components/ui/popover.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

frontend/src/components/ui/recurrence-picker.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { useI18n, type TranslationKey } from "@/lib/i18n";
+
+export type RecurrenceMode = "daily" | "weekly" | "biweekly" | "monthly" | "yearly";
+
+export type RecurrenceRule = {
+  type: "hourly" | "daily" | "weekly" | "monthly" | "yearly";
+  interval?: number;
+  byWeekday?: number;
+  byMonthday?: number;
+};
+
+interface RecurrencePickerProps {
+  value?: RecurrenceRule;
+  onChange?: (rule: RecurrenceRule) => void;
+  dueDate?: Date;
+  className?: string;
+}
+
+const WEEKDAYS = [
+  { value: 0, labelKey: "sun" },
+  { value: 1, labelKey: "mon" },
+  { value: 2, labelKey: "tue" },
+  { value: 3, labelKey: "wed" },
+  { value: 4, labelKey: "thu" },
+  { value: 5, labelKey: "fri" },
+  { value: 6, labelKey: "sat" },
+] as const;
+
+const MONTHS = [
+  { value: 1, labelKey: "jan" },
+  { value: 2, labelKey: "feb" },
+  { value: 3, labelKey: "mar" },
+  { value: 4, labelKey: "apr" },
+  { value: 5, labelKey: "may" },
+  { value: 6, labelKey: "jun" },
+  { value: 7, labelKey: "jul" },
+  { value: 8, labelKey: "aug" },
+  { value: 9, labelKey: "sep" },
+  { value: 10, labelKey: "oct" },
+  { value: 11, labelKey: "nov" },
+  { value: 12, labelKey: "dec" },
+] as const;
+
+export function RecurrencePicker({
+  value,
+  onChange,
+  dueDate,
+  className,
+}: RecurrencePickerProps) {
+  const { t } = useI18n();
+  
+  // Derive mode from value
+  const getMode = (): RecurrenceMode => {
+    if (!value) return "daily";
+    if (value.type === "weekly" && value.interval === 2) return "biweekly";
+    if (value.type === "weekly") return "weekly";
+    if (value.type === "monthly") return "monthly";
+    if (value.type === "yearly") return "yearly";
+    return "daily";
+  };
+  
+  const [mode, setMode] = React.useState<RecurrenceMode>(getMode);
+  const [selectedWeekday, setSelectedWeekday] = React.useState<number>(
+    value?.byWeekday ?? (dueDate ? dueDate.getDay() : new Date().getDay())
+  );
+  const [selectedMonthday, setSelectedMonthday] = React.useState<number>(
+    value?.byMonthday ?? (dueDate ? dueDate.getDate() : new Date().getDate())
+  );
+  const [selectedMonth, setSelectedMonth] = React.useState<number>(
+    dueDate ? dueDate.getMonth() + 1 : new Date().getMonth() + 1
+  );
+  const [selectedYearDay, setSelectedYearDay] = React.useState<number>(
+    dueDate ? dueDate.getDate() : new Date().getDate()
+  );
+
+  // Sync internal state when value changes from parent
+  React.useEffect(() => {
+    setMode(getMode());
+    if (value?.byWeekday !== undefined) {
+      setSelectedWeekday(value.byWeekday);
+    }
+    if (value?.byMonthday !== undefined) {
+      setSelectedMonthday(value.byMonthday);
+      setSelectedYearDay(value.byMonthday);
+    }
+  }, [value]);
+
+  // Build rule and call onChange
+  const buildRule = React.useCallback((
+    newMode: RecurrenceMode,
+    weekday: number,
+    monthday: number,
+    month: number,
+    yearDay: number
+  ): RecurrenceRule => {
+    switch (newMode) {
+      case "daily":
+        return { type: "daily", interval: 1 };
+      case "weekly":
+        return { type: "weekly", interval: 1, byWeekday: weekday };
+      case "biweekly":
+        return { type: "weekly", interval: 2, byWeekday: weekday };
+      case "monthly":
+        return { type: "monthly", interval: 1, byMonthday: monthday };
+      case "yearly":
+        // For yearly, we store the day in byMonthday
+        // The month is derived from the dueDate which user sets separately
+        return { type: "yearly", interval: 1, byMonthday: yearDay };
+      default:
+        return { type: "daily", interval: 1 };
+    }
+  }, []);
+
+  const handleModeChange = (newMode: RecurrenceMode) => {
+    setMode(newMode);
+    onChange?.(buildRule(newMode, selectedWeekday, selectedMonthday, selectedMonth, selectedYearDay));
+  };
+
+  const handleWeekdayChange = (weekday: number) => {
+    setSelectedWeekday(weekday);
+    onChange?.(buildRule(mode, weekday, selectedMonthday, selectedMonth, selectedYearDay));
+  };
+
+  const handleMonthdayChange = (day: number) => {
+    setSelectedMonthday(day);
+    onChange?.(buildRule(mode, selectedWeekday, day, selectedMonth, selectedYearDay));
+  };
+
+  const handleYearDayChange = (day: number) => {
+    setSelectedYearDay(day);
+    onChange?.(buildRule(mode, selectedWeekday, selectedMonthday, selectedMonth, day));
+  };
+
+  const handleMonthChange = (month: number) => {
+    setSelectedMonth(month);
+    // When month changes, also update yearDay if it exceeds the month's days
+    const maxDays = getDaysInMonth(month);
+    const newDay = Math.min(selectedYearDay, maxDays);
+    setSelectedYearDay(newDay);
+    onChange?.(buildRule(mode, selectedWeekday, selectedMonthday, month, newDay));
+  };
+
+  // Get days in a specific month (for year 2024 as reference)
+  const getDaysInMonth = (month: number): number => {
+    const daysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+    return daysInMonth[month - 1] || 31;
+  };
+
+  // Generate preview text
+  const getPreviewText = (): string => {
+    const time = dueDate 
+      ? `${dueDate.getHours().toString().padStart(2, "0")}:${dueDate.getMinutes().toString().padStart(2, "0")}`
+      : "";
+    
+    switch (mode) {
+      case "daily":
+        return t("recurrencePreviewDaily" as TranslationKey, { time });
+      case "weekly":
+        return t("recurrencePreviewWeekly" as TranslationKey, { 
+          weekday: t(WEEKDAYS[selectedWeekday].labelKey as TranslationKey),
+          time 
+        });
+      case "biweekly":
+        return t("recurrencePreviewBiweekly" as TranslationKey, { 
+          weekday: t(WEEKDAYS[selectedWeekday].labelKey as TranslationKey),
+          time 
+        });
+      case "monthly":
+        return t("recurrencePreviewMonthly" as TranslationKey, { day: selectedMonthday, time });
+      case "yearly":
+        return t("recurrencePreviewYearly" as TranslationKey, { 
+          month: t(MONTHS[selectedMonth - 1].labelKey as TranslationKey),
+          day: selectedYearDay,
+          time 
+        });
+      default:
+        return "";
+    }
+  };
+
+  const modes: { value: RecurrenceMode; labelKey: string }[] = [
+    { value: "daily", labelKey: "modeDaily" },
+    { value: "weekly", labelKey: "modeWeekly" },
+    { value: "biweekly", labelKey: "modeBiweekly" },
+    { value: "monthly", labelKey: "modeMonthly" },
+    { value: "yearly", labelKey: "modeYearly" },
+  ];
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Mode Selector - Segmented Control */}
+      <div className="flex rounded-lg bg-slate-100/80 p-1">
+        {modes.map((m) => (
+          <button
+            key={m.value}
+            type="button"
+            onClick={() => handleModeChange(m.value)}
+            className={cn(
+              "flex-1 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+              mode === m.value
+                ? "bg-white text-slate-900 shadow-sm"
+                : "text-slate-600 hover:text-slate-900"
+            )}
+          >
+            {t(m.labelKey as TranslationKey)}
+          </button>
+        ))}
+      </div>
+
+      {/* Mode-specific Options */}
+      <div className="min-h-[60px]">
+        {/* Weekly / Biweekly - Weekday Selector */}
+        {(mode === "weekly" || mode === "biweekly") && (
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-slate-500">
+              {t("selectWeekday")}
+            </label>
+            <div className="flex gap-1.5">
+              {WEEKDAYS.map((day) => (
+                <button
+                  key={day.value}
+                  type="button"
+                  onClick={() => handleWeekdayChange(day.value)}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium transition-all",
+                    selectedWeekday === day.value
+                      ? "bg-blue-500 text-white shadow-sm"
+                      : "bg-slate-100 text-slate-600 hover:bg-slate-200"
+                  )}
+                >
+                  {t(day.labelKey as TranslationKey)}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Monthly - Day of Month Selector */}
+        {mode === "monthly" && (
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-slate-500">
+              {t("selectMonthday")}
+            </label>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-slate-600">{t("everyMonth")}</span>
+              <select
+                value={selectedMonthday}
+                onChange={(e) => handleMonthdayChange(Number(e.target.value))}
+                className="h-9 rounded-lg border border-slate-200/60 bg-white px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
+              >
+                {Array.from({ length: 31 }, (_, i) => i + 1).map((day) => (
+                  <option key={day} value={day}>
+                    {day}
+                  </option>
+                ))}
+              </select>
+              <span className="text-sm text-slate-600">{t("dayUnit")}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Yearly - Month and Day Selector */}
+        {mode === "yearly" && (
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-slate-500">
+              {t("selectYearlyDate")}
+            </label>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-slate-600">{t("everyYear")}</span>
+              <select
+                value={selectedMonth}
+                onChange={(e) => handleMonthChange(Number(e.target.value))}
+                className="h-9 rounded-lg border border-slate-200/60 bg-white px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
+              >
+                {MONTHS.map((month) => (
+                  <option key={month.value} value={month.value}>
+                    {t(month.labelKey as TranslationKey)}
+                  </option>
+                ))}
+              </select>
+              <select
+                value={selectedYearDay}
+                onChange={(e) => handleYearDayChange(Number(e.target.value))}
+                className="h-9 rounded-lg border border-slate-200/60 bg-white px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
+              >
+                {Array.from({ length: getDaysInMonth(selectedMonth) }, (_, i) => i + 1).map((day) => (
+                  <option key={day} value={day}>
+                    {day}
+                  </option>
+                ))}
+              </select>
+              <span className="text-sm text-slate-600">{t("dayUnit")}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Daily - No additional options needed */}
+        {mode === "daily" && (
+          <div className="flex items-center justify-center py-2 text-sm text-slate-500">
+            {t("dailyNoOptions")}
+          </div>
+        )}
+      </div>
+
+      {/* Preview */}
+      <div className="rounded-lg bg-blue-50 px-3 py-2">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium text-blue-600/70">{t("willRepeat")}</span>
+          <span className="text-sm font-medium text-blue-600">{getPreviewText()}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

frontend/src/components/ui/select.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-lg border border-slate-200/60 bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg bg-white text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-slate-100", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

frontend/src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

frontend/src/components/ui/sidebar.tsx

@@ -0,0 +1,222 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+type SidebarContextValue = {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+  toggle: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null);
+
+const useSidebar = () => {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+};
+
+const SidebarProvider = ({
+  children,
+  defaultOpen = true,
+}: {
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}) => {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const toggle = React.useCallback(() => setOpen((prev) => !prev), []);
+  return (
+    <SidebarContext.Provider value={{ open, setOpen, toggle }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+const sidebarVariants = cva(
+  "group/sidebar relative flex h-full flex-col bg-sidebar text-sidebar-foreground transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        sidebar: "w-[--sidebar-width] data-[state=collapsed]:w-[--sidebar-width-collapsed]",
+        inset:
+          "w-[--sidebar-width] rounded-2xl shadow-sm data-[state=collapsed]:w-[--sidebar-width-collapsed]",
+        floating:
+          "w-[--sidebar-width] rounded-2xl shadow-md data-[state=collapsed]:w-[--sidebar-width-collapsed]",
+      },
+    },
+    defaultVariants: {
+      variant: "sidebar",
+    },
+  }
+);
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof sidebarVariants>
+>(({ className, variant, style, ...props }, ref) => {
+  const { open } = useSidebar();
+  return (
+    <div
+      ref={ref}
+      className={cn(sidebarVariants({ variant }), className)}
+      data-state={open ? "expanded" : "collapsed"}
+      style={
+        {
+          "--sidebar-width": "16rem",
+          "--sidebar-width-collapsed": "4.25rem",
+          ...style,
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+});
+Sidebar.displayName = "Sidebar";
+
+const SidebarInset = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("min-h-screen flex-1", className)} {...props} />
+  )
+);
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex h-14 items-center px-4", className)} {...props} />
+  )
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex-1 overflow-auto p-2", className)} {...props} />
+  )
+);
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-2", className)} {...props} />
+  )
+);
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("space-y-2 px-2 py-2", className)} {...props} />
+  )
+);
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("px-2 text-xs font-medium uppercase text-sidebar-foreground/60", className)}
+      {...props}
+    />
+  )
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("space-y-1", className)} {...props} />
+  )
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("space-y-1", className)} {...props} />
+  )
+);
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("list-none", className)} {...props} />
+  )
+);
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+  {
+    variants: {
+      isActive: {
+        true: "bg-sidebar-accent text-sidebar-primary font-semibold",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isActive: false,
+    },
+  }
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+    VariantProps<typeof sidebarMenuButtonVariants> & { asChild?: boolean }
+>(({ className, isActive, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      ref={ref}
+      className={cn(sidebarMenuButtonVariants({ isActive }), className)}
+      {...props}
+    />
+  );
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("mx-3 my-2 h-px bg-sidebar-border/50", className)} {...props} />
+  )
+);
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarTrigger = React.forwardRef<HTMLButtonElement, React.HTMLAttributes<HTMLButtonElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { toggle } = useSidebar();
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          "inline-flex h-10 w-10 items-center justify-center rounded-md border bg-background text-foreground shadow-sm transition-colors hover:bg-accent",
+          className
+        )}
+        onClick={toggle}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+
+export {
+  SidebarProvider,
+  Sidebar,
+  SidebarInset,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};

frontend/src/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

frontend/src/components/ui/users/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import AppShell from "@/components/AppShell";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api";
+
+type User = { id: string; username: string };
+
+const UsersPage = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [query, setQuery] = useState("");
+
+  const search = async () => {
+    const data = (await api.getUsers(query)) as User[];
+    setUsers(data);
+  };
+
+  useEffect(() => {
+    search().catch(() => null);
+  }, []);
+
+  return (
+    <AppShell>
+      <Card className="border-slate-200/80 shadow-sm">
+        <CardHeader className="gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle>用户列表</CardTitle>
+            <CardDescription>搜索并查看账号信息</CardDescription>
+          </div>
+          <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+            <Input
+              placeholder="搜索用户名"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+            <Button onClick={search}>搜索</Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {users.map((user) => (
+              <Card key={user.id} className="border-slate-200/70 bg-white/70 shadow-sm">
+                <CardContent className="p-4 font-medium text-slate-700">
+                  {user.username}
+                </CardContent>
+              </Card>
+            ))}
+            {users.length === 0 && (
+              <div className="rounded-xl border border-dashed border-slate-200 bg-white/60 p-6 text-center text-sm text-slate-500">
+                暂无用户
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </AppShell>
+  );
+};
+
+export default UsersPage;

frontend/src/lib/api.ts

@@ -0,0 +1,77 @@
+import { getToken } from "./auth";
+
+const API_BASE = process.env.NEXT_PUBLIC_API_BASE || "http://localhost:4000";
+
+const request = async <T>(path: string, options: RequestInit = {}) => {
+  const token = getToken();
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(options.headers || {}),
+    },
+  });
+  if (!res.ok) {
+    throw new Error(await res.text());
+  }
+  return (await res.json()) as T;
+};
+
+export const api = {
+  login: (payload: { username: string; password: string }) =>
+    request<{ token: string; user: { id: string; username: string } }>("/api/auth/login", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    }),
+  register: (payload: { username: string; password: string; inviteCode: string }) =>
+    request<{ token: string; user: { id: string; username: string } }>("/api/auth/register", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    }),
+  getTodos: () => request("/api/todos"),
+  createTodo: (payload: unknown) =>
+    request("/api/todos", { method: "POST", body: JSON.stringify(payload) }),
+  deleteTodo: (id: string) => request(`/api/todos/${id}`, { method: "DELETE" }),
+  checkInTodo: (id: string) => request(`/api/todos/${id}/check-in`, { method: "POST" }),
+  getReminderTasks: () => request("/api/reminder-tasks"),
+  createReminderTask: (payload: unknown) =>
+    request("/api/reminder-tasks", { method: "POST", body: JSON.stringify(payload) }),
+  deleteReminderTask: (id: string) =>
+    request(`/api/reminder-tasks/${id}`, { method: "DELETE" }),
+  getUsers: (query?: string) =>
+    request(`/api/users${query ? `?query=${encodeURIComponent(query)}` : ""}`),
+  getNotifications: () => request("/api/notifications?status=unread"),
+  markNotificationRead: (id: string) =>
+    request(`/api/notifications/${id}/read`, { method: "POST" }),
+  markAllNotificationsRead: () =>
+    request("/api/notifications/read-all", { method: "POST" }),
+  getMe: () => request("/api/me"),
+  updateSettings: (payload: unknown) =>
+    request("/api/me/settings", { method: "PUT", body: JSON.stringify(payload) }),
+  uploadAvatar: async (file: File): Promise<{ avatarUrl: string }> => {
+    const token = getToken();
+    const formData = new FormData();
+    formData.append("avatar", file);
+
+    const res = await fetch(`${API_BASE}/api/me/avatar`, {
+      method: "POST",
+      headers: {
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: formData,
+    });
+
+    if (!res.ok) {
+      throw new Error(await res.text());
+    }
+    return res.json();
+  },
+  // Invite management
+  getInvites: () => request("/api/invites"),
+  createInvite: (payload: { maxUses?: number; expiresInDays?: number }) =>
+    request("/api/invites", { method: "POST", body: JSON.stringify(payload) }),
+  getInvite: (id: string) => request(`/api/invites/${id}`),
+  revokeInvite: (id: string) =>
+    request(`/api/invites/${id}/revoke`, { method: "POST" }),
+};

frontend/src/lib/auth.ts

@@ -0,0 +1,19 @@
+const TOKEN_KEY = "notify_token";
+
+export const setToken = (token: string) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(TOKEN_KEY, token);
+  }
+};
+
+export const getToken = () => {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(TOKEN_KEY);
+};
+
+export const clearToken = () => {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(TOKEN_KEY);
+    window.location.href = "/login";
+  }
+};

frontend/src/lib/i18n/context.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+import { translations, type Locale, type TranslationKey } from "./translations";
+
+type I18nContextType = {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+  t: (key: TranslationKey, params?: Record<string, string | number>) => string;
+};
+
+const I18nContext = createContext<I18nContextType | null>(null);
+
+const LOCALE_STORAGE_KEY = "notify-locale";
+
+export const I18nProvider = ({ children }: { children: ReactNode }) => {
+  const [locale, setLocaleState] = useState<Locale>("zh");
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(LOCALE_STORAGE_KEY) as Locale | null;
+    if (stored && (stored === "zh" || stored === "en")) {
+      setLocaleState(stored);
+    }
+    setIsHydrated(true);
+  }, []);
+
+  const setLocale = useCallback((newLocale: Locale) => {
+    setLocaleState(newLocale);
+    localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
+  }, []);
+
+  const t = useCallback(
+    (key: TranslationKey, params?: Record<string, string | number>): string => {
+      let text = translations[locale][key] || translations.zh[key] || key;
+      if (params) {
+        Object.entries(params).forEach(([paramKey, value]) => {
+          text = text.replace(`{${paramKey}}`, String(value));
+        });
+      }
+      return text;
+    },
+    [locale]
+  );
+
+  // Prevent hydration mismatch by rendering with default locale until hydrated
+  if (!isHydrated) {
+    return null;
+  }
+
+  return (
+    <I18nContext.Provider value={{ locale, setLocale, t }}>
+      {children}
+    </I18nContext.Provider>
+  );
+};
+
+export const useI18n = (): I18nContextType => {
+  const context = useContext(I18nContext);
+  if (!context) {
+    throw new Error("useI18n must be used within an I18nProvider");
+  }
+  return context;
+};
+
+export const useTranslation = () => {
+  const { t } = useI18n();
+  return t;
+};

frontend/src/lib/i18n/index.ts

@@ -0,0 +1,2 @@
+export { I18nProvider, useI18n, useTranslation } from "./context";
+export { translations, type Locale, type TranslationKey } from "./translations";

frontend/src/lib/i18n/translations.ts

@@ -0,0 +1,431 @@
+export const translations = {
+  zh: {
+    // Common
+    loading: "加载中...",
+    save: "保存",
+    cancel: "取消",
+    delete: "删除",
+    saved: "已保存",
+
+    // Auth
+    login: "登录",
+    register: "注册",
+    logout: "退出登录",
+    username: "用户名",
+    password: "密码",
+    inviteCode: "邀请码",
+    loginWelcome: "欢迎回来，继续管理提醒与通知",
+    loginFailed: "登录失败，请检查用户名与密码",
+    registerTitle: "邀请码注册",
+    registerDesc: "只需几步即可开启高效提醒",
+    registerFailed: "注册失败，请检查邀请码与输入内容",
+    noAccount: "没有账号？去注册（邀请码）",
+    hasAccount: "已有账号？去登录",
+    enterUsername: "请输入用户名",
+    enterPassword: "请输入密码",
+    enterInviteCode: "请输入邀请码",
+
+    // App Shell
+    appDesc: "轻量好用的提醒与通知管理中心",
+
+    // Sidebar
+    navigation: "功能导航",
+    navTodo: "Todo",
+    navReminder: "提醒",
+    navSettings: "设置",
+    navNotifications: "未读提醒消息",
+
+    // Todo Page
+    createTask: "创建任务",
+    createTaskDesc: "记录需要提醒的事项与截止时间",
+    title: "标题",
+    enterTodoTitle: "输入待办标题",
+    dueTime: "截止时间",
+    selectDueTime: "选择截止时间",
+    enableAdvanceReminder: "设置提前提醒",
+    advanceReminder: "提前提醒（分钟）",
+    setRecurring: "设为周期性任务",
+    recurrenceCycle: "重复周期",
+    myTodoList: "我的 Todo 列表",
+    myTodoListDesc: "保持任务清单清晰可见",
+    addTask: "+ 添加任务",
+    due: "截止",
+    noTodo: "暂无 Todo",
+    confirmDelete: "确认删除",
+    confirmDeleteDesc: "确定要删除「{title}」吗？此操作无法撤销。",
+    checkIn: "打卡",
+    checkInSuccess: "打卡成功",
+    checkInDesc: "本周期内已完成，不会再提醒",
+
+    // Reminder Page
+    createReminder: "创建提醒",
+    createReminderDesc: "为团队或成员分配提醒事项",
+    taskTitle: "任务标题",
+    enterTaskTitle: "输入任务标题",
+    reminderContent: "提醒内容",
+    enterReminderContent: "输入提醒的具体内容",
+    contentReplacedByMarkdown: "已启用 Markdown 格式，此内容将被下方 Markdown 内容替换",
+    reminderTime: "提醒时间",
+    selectReminderTime: "选择提醒时间",
+    setRecurringReminder: "设为周期性提醒",
+    reminderFor: "提醒对象",
+    selectUser: "选择用户",
+    reminderList: "提醒列表",
+    reminderListDesc: "查看待执行的提醒任务",
+    reminder: "提醒",
+    noReminder: "暂无提醒任务",
+
+    // Bark Settings
+    barkSettings: "Bark 推送设置",
+    barkSettingsDesc: "自定义 Bark 推送的标题、内容和样式",
+    barkTitle: "推送标题",
+    barkTitlePlaceholder: "自定义推送标题（留空使用默认）",
+    barkSubtitle: "推送副标题",
+    barkSubtitlePlaceholder: "可选的副标题",
+    barkUseMarkdown: "使用 Markdown 格式",
+    markdownWillReplaceContent: "此内容将替换上方的「提醒内容」",
+    barkMarkdownContent: "Markdown 内容",
+    barkMarkdownPlaceholder: "支持基础 Markdown 格式",
+    barkLevel: "推送级别",
+    barkLevelActive: "默认",
+    barkLevelTimeSensitive: "时效性通知",
+    barkLevelPassive: "静默通知",
+    barkLevelCritical: "重要警告",
+    barkIcon: "自定义图标",
+    barkIconPlaceholder: "图标 URL（留空使用用户头像）",
+
+    // Notifications Page
+    notifications: "通知",
+    notificationsDesc: "快速处理待查看的提醒通知",
+    searchNotifications: "搜索通知...",
+    markAllRead: "全部已读",
+    markRead: "标记已读",
+    triggerTime: "触发时间",
+    channel: "渠道",
+    noNotification: "暂无未读通知",
+
+    // Settings Page
+    settings: "设置",
+    settingsDesc: "自定义提醒方式与通知渠道",
+    avatar: "头像",
+    uploadAvatar: "上传头像",
+    uploading: "上传中...",
+    removeAvatar: "移除头像",
+    avatarHint: "支持 JPG、PNG、GIF、WebP 格式，最大 5MB",
+    barkPushUrl: "Bark 推送地址",
+    timezone: "时区",
+    notificationChannels: "通知渠道",
+    webNotifications: "站内通知",
+    webNotificationsDesc: "站内通知开关",
+    barkAlerts: "Bark 推送",
+    barkAlertsDesc: "Bark 推送开关",
+
+    // Recurrence
+    hourly: "每小时",
+    daily: "每天",
+    weekly: "每周",
+    monthly: "每月",
+    yearly: "每年",
+
+    // Recurrence Picker - Modes
+    modeDaily: "每天",
+    modeWeekly: "每周",
+    modeBiweekly: "每两周",
+    modeMonthly: "每月",
+    modeYearly: "每年",
+
+    // Recurrence Picker - Weekdays
+    sun: "日",
+    mon: "一",
+    tue: "二",
+    wed: "三",
+    thu: "四",
+    fri: "五",
+    sat: "六",
+
+    // Recurrence Picker - Months
+    jan: "1月",
+    feb: "2月",
+    mar: "3月",
+    apr: "4月",
+    may: "5月",
+    jun: "6月",
+    jul: "7月",
+    aug: "8月",
+    sep: "9月",
+    oct: "10月",
+    nov: "11月",
+    dec: "12月",
+
+    // Recurrence Picker - UI
+    selectWeekday: "选择星期几",
+    selectMonthday: "选择日期",
+    selectYearlyDate: "选择日期",
+    everyMonth: "每月",
+    everyYear: "每年",
+    dayUnit: "日",
+    dailyNoOptions: "将按当前时间每天重复",
+    willRepeat: "重复规则：",
+    recurrencePreviewDaily: "每天 {time}",
+    recurrencePreviewWeekly: "每周{weekday} {time}",
+    recurrencePreviewBiweekly: "每两周的周{weekday} {time}",
+    recurrencePreviewMonthly: "每月 {day} 日 {time}",
+    recurrencePreviewYearly: "每年 {month} {day} 日 {time}",
+
+    // DateTime Picker
+    selectDateTime: "选择日期和时间",
+    time: "时间",
+    hour: "时",
+    minute: "分",
+    now: "现在",
+
+    // Language
+    language: "语言",
+    chinese: "中文",
+    english: "English",
+
+    // Invite Management
+    navInvites: "邀请管理",
+    inviteManagement: "邀请管理",
+    inviteManagementDesc: "生成邀请码，追踪注册用户",
+    createInvite: "生成邀请码",
+    createInviteDesc: "创建新的邀请码分享给他人注册",
+    maxUses: "最大使用次数",
+    expiresInDays: "有效期（天）",
+    generateInvite: "生成邀请码",
+    myInvites: "我的邀请码",
+    myInvitesDesc: "查看已生成的邀请码及注册情况",
+    noInvites: "暂无邀请码",
+    usage: "使用情况",
+    expiresAt: "过期时间",
+    status: "状态",
+    statusActive: "有效",
+    statusExpired: "已过期",
+    statusRevoked: "已撤销",
+    statusExhausted: "已用完",
+    revoke: "撤销",
+    revokeInvite: "撤销邀请码",
+    revokeInviteDesc: "确定要撤销邀请码「{code}」吗？撤销后将无法使用。",
+    registeredUsers: "注册用户",
+    noRegisteredUsers: "暂无用户通过此邀请码注册",
+    viewDetails: "查看详情",
+    copyCode: "复制邀请码",
+    copied: "已复制",
+  },
+  en: {
+    // Common
+    loading: "Loading...",
+    save: "Save",
+    cancel: "Cancel",
+    delete: "Delete",
+    saved: "Saved",
+
+    // Auth
+    login: "Login",
+    register: "Register",
+    logout: "Logout",
+    username: "Username",
+    password: "Password",
+    inviteCode: "Invite Code",
+    loginWelcome: "Welcome back, manage your reminders and notifications",
+    loginFailed: "Login failed, please check your username and password",
+    registerTitle: "Register with Invite Code",
+    registerDesc: "Get started with efficient reminders in just a few steps",
+    registerFailed: "Registration failed, please check your invite code",
+    noAccount: "No account? Register with invite code",
+    hasAccount: "Already have an account? Login",
+    enterUsername: "Enter username",
+    enterPassword: "Enter password",
+    enterInviteCode: "Enter invite code",
+
+    // App Shell
+    appDesc: "A lightweight reminder and notification management center",
+
+    // Sidebar
+    navigation: "Navigation",
+    navTodo: "Todo",
+    navReminder: "Reminders",
+    navSettings: "Settings",
+    navNotifications: "Unread Notifications",
+
+    // Todo Page
+    createTask: "Create Task",
+    createTaskDesc: "Record tasks and their due times",
+    title: "Title",
+    enterTodoTitle: "Enter todo title",
+    dueTime: "Due Time",
+    selectDueTime: "Select due time",
+    enableAdvanceReminder: "Enable Advance Reminder",
+    advanceReminder: "Advance Reminder (minutes)",
+    setRecurring: "Set as recurring task",
+    recurrenceCycle: "Recurrence Cycle",
+    myTodoList: "My Todo List",
+    myTodoListDesc: "Keep your task list clear and visible",
+    addTask: "+ Add Task",
+    due: "Due",
+    noTodo: "No Todo items",
+    confirmDelete: "Confirm Delete",
+    confirmDeleteDesc: "Are you sure you want to delete \"{title}\"? This action cannot be undone.",
+    checkIn: "Check In",
+    checkInSuccess: "Checked In",
+    checkInDesc: "Completed for this cycle, no more reminders",
+
+    // Reminder Page
+    createReminder: "Create Reminder",
+    createReminderDesc: "Assign reminders to team members",
+    taskTitle: "Task Title",
+    enterTaskTitle: "Enter task title",
+    reminderContent: "Reminder Content",
+    enterReminderContent: "Enter reminder content",
+    contentReplacedByMarkdown: "Markdown enabled, this content will be replaced by Markdown content below",
+    reminderTime: "Reminder Time",
+    selectReminderTime: "Select reminder time",
+    setRecurringReminder: "Set as recurring reminder",
+    reminderFor: "Reminder For",
+    selectUser: "Select user",
+    reminderList: "Reminder List",
+    reminderListDesc: "View pending reminder tasks",
+    reminder: "Reminder",
+    noReminder: "No reminder tasks",
+
+    // Bark Settings
+    barkSettings: "Bark Push Settings",
+    barkSettingsDesc: "Customize Bark push title, content and style",
+    barkTitle: "Push Title",
+    barkTitlePlaceholder: "Custom push title (leave empty for default)",
+    barkSubtitle: "Push Subtitle",
+    barkSubtitlePlaceholder: "Optional subtitle",
+    barkUseMarkdown: "Use Markdown Format",
+    markdownWillReplaceContent: "This content will replace the reminder content above",
+    barkMarkdownContent: "Markdown Content",
+    barkMarkdownPlaceholder: "Supports basic Markdown format",
+    barkLevel: "Push Level",
+    barkLevelActive: "Default",
+    barkLevelTimeSensitive: "Time Sensitive",
+    barkLevelPassive: "Passive",
+    barkLevelCritical: "Critical",
+    barkIcon: "Custom Icon",
+    barkIconPlaceholder: "Icon URL (leave empty to use avatar)",
+
+    // Notifications Page
+    notifications: "Notifications",
+    notificationsDesc: "Quickly handle pending notifications",
+    searchNotifications: "Search notifications...",
+    markAllRead: "Mark All Read",
+    markRead: "Mark Read",
+    triggerTime: "Trigger Time",
+    channel: "Channel",
+    noNotification: "No unread notifications",
+
+    // Settings Page
+    settings: "Settings",
+    settingsDesc: "Customize reminder methods and notification channels",
+    avatar: "Avatar",
+    uploadAvatar: "Upload Avatar",
+    uploading: "Uploading...",
+    removeAvatar: "Remove Avatar",
+    avatarHint: "Supports JPG, PNG, GIF, WebP formats. Max 5MB",
+    barkPushUrl: "Bark Push URL",
+    timezone: "Timezone",
+    notificationChannels: "Notification Channels",
+    webNotifications: "Web Notifications",
+    webNotificationsDesc: "Web notification toggle",
+    barkAlerts: "Bark Alerts",
+    barkAlertsDesc: "Bark push notification toggle",
+
+    // Recurrence
+    hourly: "Hourly",
+    daily: "Daily",
+    weekly: "Weekly",
+    monthly: "Monthly",
+    yearly: "Yearly",
+
+    // Recurrence Picker - Modes
+    modeDaily: "Daily",
+    modeWeekly: "Weekly",
+    modeBiweekly: "Biweekly",
+    modeMonthly: "Monthly",
+    modeYearly: "Yearly",
+
+    // Recurrence Picker - Weekdays
+    sun: "Su",
+    mon: "Mo",
+    tue: "Tu",
+    wed: "We",
+    thu: "Th",
+    fri: "Fr",
+    sat: "Sa",
+
+    // Recurrence Picker - Months
+    jan: "Jan",
+    feb: "Feb",
+    mar: "Mar",
+    apr: "Apr",
+    may: "May",
+    jun: "Jun",
+    jul: "Jul",
+    aug: "Aug",
+    sep: "Sep",
+    oct: "Oct",
+    nov: "Nov",
+    dec: "Dec",
+
+    // Recurrence Picker - UI
+    selectWeekday: "Select weekday",
+    selectMonthday: "Select day",
+    selectYearlyDate: "Select date",
+    everyMonth: "Every month on",
+    everyYear: "Every year on",
+    dayUnit: "",
+    dailyNoOptions: "Will repeat daily at the selected time",
+    willRepeat: "Will repeat:",
+    recurrencePreviewDaily: "Every day at {time}",
+    recurrencePreviewWeekly: "Every {weekday} at {time}",
+    recurrencePreviewBiweekly: "Every other {weekday} at {time}",
+    recurrencePreviewMonthly: "Every month on day {day} at {time}",
+    recurrencePreviewYearly: "Every year on {month} {day} at {time}",
+
+    // DateTime Picker
+    selectDateTime: "Select date and time",
+    time: "Time",
+    hour: "Hour",
+    minute: "Min",
+    now: "Now",
+
+    // Language
+    language: "Language",
+    chinese: "中文",
+    english: "English",
+
+    // Invite Management
+    navInvites: "Invites",
+    inviteManagement: "Invite Management",
+    inviteManagementDesc: "Generate invite codes and track registrations",
+    createInvite: "Create Invite",
+    createInviteDesc: "Generate a new invite code to share with others",
+    maxUses: "Max Uses",
+    expiresInDays: "Expires In (days)",
+    generateInvite: "Generate Invite",
+    myInvites: "My Invites",
+    myInvitesDesc: "View your invite codes and registration status",
+    noInvites: "No invite codes yet",
+    usage: "Usage",
+    expiresAt: "Expires At",
+    status: "Status",
+    statusActive: "Active",
+    statusExpired: "Expired",
+    statusRevoked: "Revoked",
+    statusExhausted: "Exhausted",
+    revoke: "Revoke",
+    revokeInvite: "Revoke Invite",
+    revokeInviteDesc: "Are you sure you want to revoke invite code \"{code}\"? It will no longer be usable.",
+    registeredUsers: "Registered Users",
+    noRegisteredUsers: "No users have registered with this invite code",
+    viewDetails: "View Details",
+    copyCode: "Copy Code",
+    copied: "Copied",
+  },
+} as const;
+
+export type Locale = keyof typeof translations;
+export type TranslationKey = keyof typeof translations.zh;

frontend/src/lib/notification-context.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react";
+import { api } from "./api";
+
+type NotificationContextType = {
+  unreadCount: number;
+  refreshUnreadCount: () => Promise<void>;
+};
+
+const NotificationContext = createContext<NotificationContextType | null>(null);
+
+export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  const refreshUnreadCount = useCallback(async () => {
+    try {
+      const data = await api.getNotifications();
+      setUnreadCount((data as unknown[]).length);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshUnreadCount();
+  }, [refreshUnreadCount]);
+
+  return (
+    <NotificationContext.Provider value={{ unreadCount, refreshUnreadCount }}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotification = () => {
+  const context = useContext(NotificationContext);
+  // Return a no-op fallback for SSR/static generation
+  if (!context) {
+    return {
+      unreadCount: 0,
+      refreshUnreadCount: async () => {},
+    };
+  }
+  return context;
+};

frontend/src/lib/user-context.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react";
+import { api } from "./api";
+
+type User = {
+  id: string;
+  username: string;
+  avatar?: string | null;
+  timezone: string;
+  barkUrl?: string | null;
+  inappEnabled: boolean;
+  barkEnabled: boolean;
+};
+
+type UserContextType = {
+  user: User | null;
+  loading: boolean;
+  refreshUser: () => Promise<void>;
+};
+
+const UserContext = createContext<UserContextType | null>(null);
+
+export const UserProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refreshUser = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await api.getMe();
+      setUser(data as User);
+    } catch {
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshUser();
+  }, [refreshUser]);
+
+  return (
+    <UserContext.Provider value={{ user, loading, refreshUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export const useUser = () => {
+  const context = useContext(UserContext);
+  if (!context) {
+    return {
+      user: null,
+      loading: false,
+      refreshUser: async () => {},
+    };
+  }
+  return context;
+};

frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/tailwind.config.ts

@@ -0,0 +1,68 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: ["./src/app/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}", "./src/lib/**/*.{ts,tsx}"],
+  theme: {
+    container: {
+      center: true,
+      padding: "1rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        sidebar: "hsl(var(--sidebar))",
+        "sidebar-foreground": "hsl(var(--sidebar-foreground))",
+        "sidebar-primary": "hsl(var(--sidebar-primary))",
+        "sidebar-primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+        "sidebar-accent": "hsl(var(--sidebar-accent))",
+        "sidebar-accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+        "sidebar-border": "hsl(var(--sidebar-border))",
+        "sidebar-ring": "hsl(var(--sidebar-ring))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

frontend/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "esModuleInterop": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}