add forum link

package.json

@@ -13,25 +13,26 @@
     "blur": "yarn dlx tsx ./processImages.ts"
   },
   "dependencies": {
-    "@mdx-js/loader": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.0.0",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.36.0",
     "jose": "^5.6.3",
-    "lucide-react": "^0.427.0",
+    "lucide-react": "^0.454.0",
     "next": "^15.0.2",
-    "next-themes": "^0.3.0",
+    "next-themes": "^0.4.1",
     "postgres": "^3.4.5",
     "react": "19.0.0-rc-7c8e5e7a-20241101",
     "react-dom": "19.0.0-rc-7c8e5e7a-20241101",
@@ -41,7 +42,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.0",
-    "@tailwindcss/postcss": "^4.0.0-alpha.17",
+    "@tailwindcss/postcss": "^4.0.0-alpha.31",
     "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/react": "npm:[email protected]",
@@ -53,7 +54,7 @@
     "eslint-plugin-react-compiler": "19.0.0-beta-8a03594-20241020",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "tailwindcss": "^4.0.0-alpha.17",
+    "tailwindcss": "^4.0.0-alpha.31",
     "tsx": "^4.19.2",
     "typescript": "^5.5.3"
   },

src/app/forum/components/Header.tsx

@@ -0,0 +1,10 @@
+import Auth from "@/components/auth";
+
+export default async function Header() {
+  return (
+    <div className="flex w-full justify-between p-4">
+      <h1 className="text-2xl font-bold">Forum</h1>
+      <Auth app={"/forum"} />
+    </div>
+  );
+}

src/app/forum/components/SidePanel.tsx

@@ -0,0 +1,67 @@
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+
+// Menu items.
+const items = [
+  {
+    title: "Home",
+    url: "#",
+    icon: Home,
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: Inbox,
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: Calendar,
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: Search,
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: Settings,
+  },
+];
+
+export function SidePanel() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

src/app/forum/error.tsx

@@ -0,0 +1,30 @@
+"use client"; // Error components must be Client Components
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

src/app/forum/home/page.tsx

@@ -1,3 +1,23 @@
-export default function Home() {
-  return null;
+import { dbClient } from "@/db/forum/db";
+import { messages } from "@/db/forum/schema";
+import { desc, isNull } from "drizzle-orm";
+
+export default async function Home() {
+  const posts = await dbClient()
+    .db.select()
+    .from(messages)
+    .where(isNull(messages.parent_id))
+    .orderBy(desc(messages.createdAt));
+  return (
+    <div>
+      {posts.map((post) => (
+        <div key={post.id}>
+          {post.message}
+          <div>
+            <br />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
 }

src/app/forum/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
-
+import Header from "./components/Header";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { SidePanel } from "./components/SidePanel";
 export const metadata: Metadata = {
   title: "Forum",
   description: "Created by DJ Sisson",
@@ -10,5 +12,21 @@ export default function AsteroidzLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return children;
+  return (
+    <div className="relative flex min-h-screen flex-col">
+      <SidebarProvider>
+        <SidePanel />
+        <div className="relative min-h-svh w-full text-base md:text-lg lg:text-lg xl:text-xl">
+          <div className="bg-background sticky top-0 flex">
+            <SidebarTrigger />
+            <Header></Header>
+          </div>
+
+          <main className="flex h-full flex-1 flex-col items-center gap-4 pt-4">
+            <div className="h-full w-full max-w-prose">{children}</div>
+          </main>
+        </div>
+      </SidebarProvider>
+    </div>
+  );
 }

src/app/forum/page.tsx

@@ -1,3 +1,5 @@
-export default function Forum() {
-  return null;
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  return <main>{redirect("/home")}</main>;
 }

src/app/forum/template.tsx

@@ -0,0 +1,3 @@
+export default function Template({ children }: { children: React.ReactNode }) {
+  return <div className="animate-appear-up">{children}</div>;
+}

src/app/global.css

@@ -28,8 +28,15 @@
   --animate-appear-up: animate-appear-up 500ms ease-in-out;
   --animate-slide-in: animate-slide-in 500ms ease-in-out;
   --font-family-sans: var(--font-inter), sans-serif;
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
 }
-
 :root {
   color-scheme: light dark;
   --clr-1: #0e4b50;
@@ -71,6 +78,14 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
@@ -98,6 +113,14 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 
@@ -109,6 +132,7 @@
     @apply bg-background text-foreground;
   }
 }
+
 @keyframes rainbow-scroll {
   0% {
     background-position: 0% 50%;

src/app/page.tsx

@@ -23,6 +23,11 @@ export default function Home() {
             Tilez
           </a>
         </li>
+        <li>
+          <a className="hover:underline" href="/forum">
+            Forum
+          </a>
+        </li>
       </ul>
     </main>
   );