feat: Implement new settings pages and refactor application layout and navigation with new components and hooks.

web/src/components/navigation/mobile-nav.tsx

@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom"
+import { useNavigation } from "@/contexts/navigation-context"
+import { cn } from "@/lib/utils"
+
+export function MobileNav() {
+  const { navItems } = useNavigation()
+
+  return (
+    <nav className="fixed bottom-4 left-4 right-4 z-50 rounded-2xl border border-border/40 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 md:hidden shadow-lg shadow-black/5">
+      <div className="flex h-16 items-center justify-around px-2">
+        {navItems.map((item) => (
+          <Link
+            key={item.title}
+            to={item.url}
+            className={cn(
+              "flex flex-col items-center justify-center gap-1 rounded-xl px-4 py-2 text-xs font-medium transition-all duration-200",
+              "min-w-[48px] min-h-[48px]",
+              item.isActive
+                ? "text-primary bg-primary/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]"
+                : "text-muted-foreground/80 hover:text-foreground hover:bg-white/5"
+            )}
+          >
+            <item.icon className={cn(
+              "size-5 transition-transform duration-200",
+              item.isActive && "scale-110 fill-primary/20"
+            )} />
+            <span className={cn(
+              "truncate max-w-[60px] text-[10px]",
+              item.isActive && "font-bold"
+            )}>
+              {item.title}
+            </span>
+            {item.isActive && (
+              <span className="absolute bottom-1 h-0.5 w-4 rounded-full bg-primary/50 blur-[1px]" />
+            )}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  )
+}