Update Next.js to v15.5.6 and upgrade dependencies

Bump Next.js from 15.4.5 to 15.5.6 and update related dependencies. Also upgrade other packages to latest compatible versions including: - Radix UI components (all minor version updates) - Tiptap editor (3.0.7 → 3.11.0) - React and React DOM (19.1.1 → 19.2.0) - TanStack Query (5.84.0 → 5.90.10) - TypeScript and ESLint ecosystem - Tailwind CSS (4.1.11 → 4.1.17) - Various other patch and minor updates Additionally add theme support with next-themes and multiple color schemes (light, dark, sunset, forest).
2025-11-25 01:54:23 -05:00
parent a69b8f029b
commit 75ce36cf9c
31 changed files with 974 additions and 1085 deletions
@@ -0,0 +1,56 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Check, Palette } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+
+export function ThemeSelector() {
+  const { theme, setTheme } = useTheme();
+
+  const themes = [
+    { name: "light", label: "Light" },
+    { name: "dark", label: "Dark" },
+    { name: "theme-sunset", label: "Sunset" },
+    { name: "theme-forest", label: "Forest" },
+  ];
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="space-y-1.5">
+        <label className="font-medium">Theme</label>
+        <p className="text-muted-foreground text-xs leading-snug">
+          Select a theme for the application.
+        </p>
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="w-40 justify-between">
+            <span>
+              {themes.find((t) => t.name === theme)?.label ?? "Light"}
+            </span>
+            <Palette className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {themes.map((t) => (
+            <DropdownMenuItem
+              key={t.name}
+              className="flex justify-between"
+              onClick={() => setTheme(t.name)}
+            >
+              <span>{t.label}</span>
+              {theme === t.name && <Check className="h-4 w-4" />}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}