adjust dashboard for real features

Author: Alex Patterson

…n)/(user)/dashboard/browse/bookmarks.tsx …(user)/dashboard/bookmarks/bookmarks.tsxapp/(main)/(user)/dashboard/browse/bookmarks.tsx renamed to app/(main)/(user)/dashboard/bookmarks/bookmarks.tsx app/(main)/(user)/dashboard/browse/bookmarks.tsx renamed to app/(main)/(user)/dashboard/bookmarks/bookmarks.tsx

@@ -5,7 +5,7 @@ import Bookmarks from "./bookmarks";
 export default function DashboardPage() {
   return (
     <main className="flex-1 overflow-auto flex flex-col">
-      <h1>Bookmarks</h1>
+      <h1 className="text-2xl font-bold text-start">Bookmarks</h1>
 
       <div className="grid grid-cols-1 gap-4 p-4 md:gap-8 md:p-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         <Suspense fallback={<div>Loading...</div>}>

…/(main)/(user)/dashboard/browse/page.tsx …ain)/(user)/dashboard/bookmarks/page.tsxapp/(main)/(user)/dashboard/browse/page.tsx renamed to app/(main)/(user)/dashboard/bookmarks/page.tsx app/(main)/(user)/dashboard/browse/page.tsx renamed to app/(main)/(user)/dashboard/bookmarks/page.tsx

@@ -7,7 +7,7 @@ export default function SettingsLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const paths = ["/dashboard/browse"];
+  const paths = ["/dashboard/bookmarks"];
   return (
     <div className="grid h-full w-full lg:grid-cols-[280px_1fr]">
       <div className="hidden border-r bg-gray-100/40 lg:block dark:bg-gray-800/40">

app/(main)/(user)/dashboard/layout.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
 
 export default async function SettingsPage() {
-  redirect("/dashboard/browse");
+  redirect("/dashboard/bookmarks");
 }

app/(main)/(user)/dashboard/page.tsx

@@ -165,7 +165,7 @@ export default function Component() {
         </CardContent>
       </Card>
 
-      <Card>
+      {/* <Card>
         <CardHeader>
           <CardTitle>The Danger Zone</CardTitle>
         </CardHeader>
@@ -179,7 +179,7 @@ export default function Component() {
             </div>
           </form>
         </CardContent>
-      </Card>
+      </Card> */}
     </div>
   );
 }

app/(main)/(user)/settings/account/page.tsx

@@ -1,3 +1,4 @@
+"use client"
 import {
   Card,
   CardHeader,
@@ -14,8 +15,17 @@ import {
   SelectItem,
 } from "@/components/ui/select";
 import { Slider } from "@/components/ui/slider";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 export default function Component() {
+  const { setTheme, theme } = useTheme();
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   return (
     <div className="grid gap-6">
       <Card>
@@ -26,31 +36,25 @@ export default function Component() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form className="grid gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="theme">Theme</Label>
-              <Select name="theme">
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a theme" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="light">Light</SelectItem>
-                  <SelectItem value="dark">Dark</SelectItem>
-                  <SelectItem value="system">System</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="font-size">Font Size</Label>
-              <Slider
-                id="font-size"
-                defaultValue={[16]}
-                min={12}
-                max={24}
-                step={2}
-              />
-            </div>
-          </form>
+          {!isClient ? (
+            <>Loading...</>
+          ) :
+            <form className="grid gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor="theme">Theme</Label>
+                <Select name="theme" value={theme} onValueChange={(v) => setTheme(v)}>
+                  <SelectTrigger >
+                    <SelectValue placeholder="Select a theme" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="light">Light</SelectItem>
+                    <SelectItem value="dark">Dark</SelectItem>
+                    <SelectItem value="system">System</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </form>
+          }
         </CardContent>
       </Card>
     </div>

app/(main)/(user)/settings/appearance/page.tsx

@@ -12,8 +12,8 @@ export default function SettingsLayout({
     "/settings/profile",
     "/settings/account",
     "/settings/appearance",
-    "/settings/notifications",
-    "/settings/display",
+    // "/settings/notifications",
+    // "/settings/display",
   ];
   return (
     <div className="grid h-full w-full lg:grid-cols-[280px_1fr]">