Redesign frontend UI with premium SaaS styling and app icon

- Restyle design system: refined color palette, 16px base font, antialiased
  text rendering, improved typography hierarchy across all pages
- Update base components (button, input, card, checkbox, dialog, sidebar)
  with modern rounded corners, subtle shadows, and smooth transitions
- Redesign layout: remove header bar, move controls to sidebar footer,
  add two-column todo dashboard with stats and upcoming reminders
- Replace hardcoded slate colors with design token system throughout
- Add app icon (favicon, apple-icon, sidebar logo) from notify_icon.png
- Improve typography: page titles 20px, section titles 18px, sidebar
  nav 14px, stats 24px semibold, body text with proper line-height

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/AppSidebar.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Bell, BellDot, ListTodo, Settings, UserPlus } from "lucide-react";
+import { Bell, BellDot, ListTodo, LogOut, Settings, UserPlus } from "lucide-react";
 
 import {
   Sidebar,
@@ -10,7 +11,6 @@ import {
   SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
@@ -18,9 +18,11 @@ import {
   SidebarSeparator,
 } from "@/components/ui/sidebar";
 import Avatar from "@/components/ui/avatar";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 import { useTranslation, type TranslationKey } from "@/lib/i18n";
 import { useNotification } from "@/lib/notification-context";
 import { useUser } from "@/lib/user-context";
+import { clearToken } from "@/lib/auth";
 
 const navItems: { href: string; labelKey: TranslationKey; icon: typeof ListTodo }[] = [
   { href: "/todos", labelKey: "navTodo", icon: ListTodo },
@@ -40,19 +42,14 @@ const AppSidebar = () => {
     <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">
+          <Image src="/notify_icon.png" alt="Notify" width={28} height={28} className="h-7 w-7 rounded-lg" />
+          <span className="text-[15px] font-semibold tracking-tight text-foreground 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) => {
@@ -67,7 +64,7 @@ const AppSidebar = () => {
                     >
                       <Link href={item.href}>
                         <span className="relative">
-                          <item.icon className="h-4 w-4" />
+                          <item.icon className={`h-[18px] w-[18px] ${isActive ? "text-sidebar-primary" : "text-muted-foreground"}`} />
                           {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" />
                           )}
@@ -90,12 +87,25 @@ const AppSidebar = () => {
         </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>
+      <SidebarFooter className="px-3 py-3">
+        <div className="flex items-center justify-between group-data-[state=collapsed]/sidebar:justify-center">
+          <div className="flex items-center gap-2 min-w-0">
+            <Avatar username={user?.username} src={user?.avatar} size="sm" />
+            <span className="truncate text-sm font-medium text-foreground/80 group-data-[state=collapsed]/sidebar:hidden">
+              {user?.username}
+            </span>
+          </div>
+          <div className="flex items-center gap-1 group-data-[state=collapsed]/sidebar:hidden">
+            <LanguageSwitcher />
+            <button
+              type="button"
+              onClick={() => clearToken()}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              title={t("logout")}
+            >
+              <LogOut className="h-4 w-4" />
+            </button>
+          </div>
         </div>
       </SidebarFooter>
     </Sidebar>