feat(layout): implement navbar, routing (/summary, /board), layout enhancements and JSDoc

README.md

@@ -8,7 +8,7 @@ A modern, high-performance Kanban & Workflow web application designed to help yo
 ![Tailwind CSS](https://img.shields.io/badge/Tailwind-v4-38bdf8?style=flat-square&logo=tailwind-css)
 ![Auth.js](https://img.shields.io/badge/Auth.js-v5-purple?style=flat-square)
 ![Drizzle ORM](https://img.shields.io/badge/Drizzle-ORM-C5F74F?style=flat-square&logo=drizzle)
-![PostgreSQL](https://img.shields.io/badge/PostgreSQL-16-4169E1?style=flat-square&logo=postgresql)
+![PostgreSQL](https://img.shields.io/badge/PostgreSQL-18-4169E1?style=flat-square&logo=postgresql)
 
 ## 🛠️ Tech Stack
 

app/(app)/board/page.tsx

@@ -1,6 +0,0 @@
-/**
- * Landing page
- */
-export default function Home() {
-  return <div className="space-y-6">Home</div>;
-}

app/(app)/dashboard/page.tsx

@@ -0,0 +1,6 @@
+/**
+ * Dashboard
+ */
+export default function Dashboard() {
+  return <div className="space-y-6">Dashboard</div>;
+}

app/(app)/layout.tsx

@@ -1,9 +1,23 @@
+/**
+ * @file layout.tsx
+ * @description Server component layout protecting authenticated routes, verifying user session status, and rendering the responsive application shell structure.
+ */
+
 import { auth } from "@/auth";
 import { redirect } from "next/navigation";
 import Sidebar from "@/app/components/layout/Sidebar";
 import Header from "@/app/components/layout/Header";
 import Navbar from "@/app/components/layout/Navbar";
 
+/**
+ * Renders the protected application layout wrapper.
+ * Checks for an active user session and redirects to the login page if unauthenticated.
+ *
+ * @async
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The child components or pages to render within the layout.
+ * @returns {Promise<JSX.Element>} The rendered application layout structure.
+ */
 export default async function AppLayout({
   children,
 }: {

app/(app)/summary/page.tsx

@@ -0,0 +1,6 @@
+/**
+ * Summary
+ */
+export default function Summary() {
+  return <div className="space-y-6">Summary</div>;
+}

app/(auth)/layout.tsx

@@ -1,3 +1,17 @@
+/**
+ * @file AuthLayout.tsx
+ * @description Layout component wrapping authentication views with a centered container structure.
+ */
+
+import React from "react";
+
+/**
+ * Renders a centered layout wrapper optimized for authentication pages (login, registration, etc.).
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The inner child components/pages to render inside the layout.
+ * @returns {JSX.Element} The rendered authentication layout component.
+ */
 export default function AuthLayout({
   children,
 }: {

app/(auth)/login/page.tsx

@@ -55,9 +55,8 @@ export default function LoginPage() {
           setError(defaultErrorMessage);
         }
       } else {
-        // Redirect user and refresh router cache on success
+        // Redirect user
-        router.push("/");
+        router.push("/summary");
-        router.refresh();
         return;
       }
     } catch (err: any) {
@@ -79,7 +78,7 @@ export default function LoginPage() {
         {/* Header Section */}
         <div className="space-y-2 text-center">
           <h1 className="text-2xl font-bold tracking-tight">Flowstate Login</h1>
-          <p className="text-sm text-muted">Sign in to continue.</p>
+          <p className="text-sm text-foreground-muted">Sign in to continue.</p>
         </div>
 
         {/* Error Notification Banner */}
@@ -95,7 +94,9 @@ export default function LoginPage() {
         {/* Credentials Form */}
         <form onSubmit={handleSubmit} className="space-y-4">
           <label className="block space-y-2">
-            <span className="text-xs font-medium text-muted">E-Mail</span>
+            <span className="text-xs font-medium text-foreground-muted">
+              E-Mail
+            </span>
             <input
               name="email"
               type="email"
@@ -107,7 +108,9 @@ export default function LoginPage() {
           </label>
 
           <label className="block space-y-2">
-            <span className="text-xs font-medium text-muted">Passwort</span>
+            <span className="text-xs font-medium text-foreground-muted">
+              Passwort
+            </span>
             <input
               name="password"
               type="password"
@@ -128,7 +131,7 @@ export default function LoginPage() {
         </form>
 
         {/* Registration Link Footer */}
-        <div className="text-center text-xs text-muted">
+        <div className="text-center text-xs text-foreground-muted">
           Don't have an account yet?{" "}
           <Link href="/register/" className="text-foreground hover:underline">
             Register

app/(auth)/register/page.tsx

@@ -59,9 +59,9 @@ export default function RegisterPage() {
         throw new Error(data.message || "Something went wrong.");
       }
 
-      // Redirect user and refresh router cache on success
+      // Redirect user
-      router.push("/");
+      router.push("/summary");
-      router.refresh();
+      return;
     } catch (err: any) {
       setError(err.message);
     } finally {
@@ -78,7 +78,7 @@ export default function RegisterPage() {
           <h1 className="text-2xl font-bold tracking-tight">
             Create an Account
           </h1>
-          <p className="text-sm text-muted">
+          <p className="text-sm text-foreground-muted">
             Get started with your Flowstate Workspace.
           </p>
         </div>
@@ -119,7 +119,7 @@ export default function RegisterPage() {
         </form>
 
         {/* Back Link Footer */}
-        <div className="text-center text-xs text-muted">
+        <div className="text-center text-xs text-foreground-muted">
           Already have an account?{" "}
           <Link href="/login" className="text-foreground hover:underline">
             Sign In

app/api/auth/[...nextauth]/route.ts

@@ -1,2 +1,11 @@
+/**
+ * @file route.ts
+ * @description API route handler exporting NextAuth authentication request handlers (GET and POST).
+ */
+
 import { handlers } from "@/auth";
+
+/**
+ * Exports NextAuth route handlers for processing authentication endpoints.
+ */
 export const { GET, POST } = handlers;

app/components/layout/BrandLogo.tsx

@@ -1,6 +1,18 @@
+/**
+ * @file BrandLogo.tsx
+ * @description Client/Server component rendering the application brand logo and title header.
+ */
+
+import React from "react";
+
+/**
+ * Renders the brand logo image along with the application name and edition subtitle.
+ *
+ * @returns {JSX.Element} The rendered brand logo component.
+ */
 export default function BrandLogo() {
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-3 mr-2">
       <div className="w-9 h-9">
         <img
           src="/logo.png"
@@ -12,7 +24,7 @@ export default function BrandLogo() {
         <h1 className="text-lg font-bold tracking-widest flex items-center gap-1.5">
           Flowstate
         </h1>
-        <p className="text-xs text-muted font-medium tracking-widest">
+        <p className="text-xs text-foreground-muted font-medium tracking-widest">
           Workspace Edition
         </p>
       </div>

app/components/layout/Header.tsx

@@ -1,6 +1,17 @@
-import BrandLogo from "./BrandLogo";
+/**
-import Image from "next/image";
+ * @file Header.tsx
+ * @description Application header component containing the mobile brand logo and the user badge navigation.
+ */
 
+import BrandLogo from "./BrandLogo";
+import UserBadge from "./UserBadge";
+
+/**
+ * Renders the sticky top navigation header, displaying the brand logo on mobile views
+ * and the user profile badge on the right side.
+ *
+ * @returns {JSX.Element} The rendered header component.
+ */
 export default function Header() {
   return (
     <header className="h-20 border-b border-border backdrop-blur-md p-4 flex items-center md:justify-end justify-between sticky top-0 z-50">
@@ -8,21 +19,9 @@ export default function Header() {
       <div className="md:hidden flex items-center gap-3">
         <BrandLogo />
       </div>
-      {/* User Profil */}
+
-      <div className="flex items-center gap-3">
+      {/* User Badge */}
-        <div className="w-12 h-12 rounded-full relative overflow-hidden border border-border">
+      <UserBadge />
-          <Image
-            src="https://randomuser.me/api/portraits/women/1.jpg"
-            alt="User Avatar"
-            fill
-            className="object-cover"
-          />
-        </div>
-        <div className="hidden sm:block text-left">
-          <p className="text-sm">Charlotte W.</p>
-          <p className=" text-muted text-xs">Online</p>
-        </div>
-      </div>
     </header>
   );
 }

app/components/layout/Navbar.tsx

@@ -1,14 +1,78 @@
+/**
+ * @file Navbar.tsx
+ * @description Client component providing responsive navigation for desktop and mobile views with active route indicators.
+ */
+
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { LayoutDashboard, FileText } from "lucide-react";
+
+/**
+ * Array of navigation items containing their name, route path, and corresponding icon.
+ */
+const navItems = [
+  { name: "Summary", href: "/summary", icon: FileText },
+  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+];
+
+/**
+ * Renders the responsive navigation bar featuring desktop sidebar layout
+ * and mobile bottom bar layout with active state styling.
+ *
+ * @returns {JSX.Element} The rendered navigation component.
+ */
 export default function Navbar() {
+  const pathname = usePathname();
+
+  // Shared function to render navigation links to avoid code duplication
+  const renderNavLinks = (isMobile = false) =>
+    navItems.map((item) => {
+      const Icon = item.icon;
+      const isActive =
+        pathname === item.href ||
+        (item.href !== "/" && pathname.startsWith(item.href));
+
+      return (
+        <Link
+          key={item.href}
+          href={item.href}
+          aria-current={isActive ? "page" : undefined}
+          className={
+            isMobile
+              ? `flex flex-col items-center justify-center gap-1 transition-colors ${
+                  isActive
+                    ? " cursor-default pointer-events-none"
+                    : "text-foreground-muted hover:text-foreground"
+                }`
+              : `flex items-center gap-3 px-3 py-2 rounded-lg font-medium transition-colors ${
+                  isActive
+                    ? "bg-foreground/10 cursor-default pointer-events-none"
+                    : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
+                }`
+          }
+        >
+          <Icon
+            className={`${isMobile ? "w-5 h-5" : "w-4 h-4"} ${isActive ? "text-primary" : ""}`}
+          />
+          <span className={isMobile ? "text-xs font-medium" : ""}>
+            {item.name}
+          </span>
+        </Link>
+      );
+    });
+
   return (
     <>
       {/* Desktop Navigation */}
       <nav className="hidden md:flex flex-col mt-6 space-y-1">
-        <span className="text-sm text-muted">Desktop Navigation</span>
+        {renderNavLinks(false)}
       </nav>
 
       {/* Mobile Navigation */}
-      <nav className="md:hidden h-16 border-t border-border backdrop-blur-lg px-6 flex items-center justify-between fixed bottom-0 left-0 right-0 z-50">
+      <nav className="md:hidden h-16 border-t border-border backdrop-blur-xl px-6 flex items-center justify-around fixed bottom-0 left-0 right-0 z-50 bg-background-muted">
-        <span className="text-xs text-muted">Mobile Navigation</span>
+        {renderNavLinks(true)}
       </nav>
     </>
   );

app/components/layout/Sidebar.tsx

@@ -1,10 +1,21 @@
+/**
+ * @file Sidebar.tsx
+ * @description Server/Client component rendering the desktop application sidebar layout including the brand logo, navigation links, and sign-out option.
+ */
+
 import BrandLogo from "./BrandLogo";
 import Navbar from "./Navbar";
-import SignOutButton from "./buttons/SignOutButton";
+import SignOutButton from "../ui/buttons/SignOutButton";
 
+/**
+ * Renders the responsive desktop sidebar containing top navigation elements
+ * and a bottom sign-out action button.
+ *
+ * @returns {JSX.Element} The rendered sidebar component.
+ */
 export default function Sidebar() {
   return (
-    <aside className="hidden md:flex flex-col justify-between h-full w-64 p-6 select-none border-r border-border shrink-0">
+    <aside className="hidden md:flex flex-col justify-between h-full p-4 select-none border-r border-border shrink-0">
       {/* Upper Section */}
       <div className="flex flex-col">
         <BrandLogo />

app/components/layout/UserBadge.jsx

@@ -0,0 +1,30 @@
+/**
+ * @file UserBadge.tsx
+ * @description Component rendering a user avatar badge with name and online status indicator.
+ */
+
+import Image from "next/image";
+
+/**
+ * Renders a user profile badge including an avatar image, name, and current status.
+ *
+ * @returns {JSX.Element} The rendered user badge component.
+ */
+export default function UserBadge() {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="w-12 h-12 rounded-full relative overflow-hidden border border-border">
+        <Image
+          src="https://randomuser.me/api/portraits/women/1.jpg"
+          alt="User Avatar"
+          fill
+          className="object-cover"
+        />
+      </div>
+      <div className="hidden sm:block text-left">
+        <p className="text-sm">Charlotte W.</p>
+        <p className="text-foreground-muted text-xs">Online</p>
+      </div>
+    </div>
+  );
+}

app/components/ui/buttons/SignOutButton.tsx

@@ -1,6 +1,16 @@
+/**
+ * @file SignOutButton.tsx
+ * @description Server Action-powered client component that allows users to sign out and redirect to the home page.
+ */
+
 import { signOut } from "@/auth";
 import { LogOut } from "lucide-react";
 
+/**
+ * Renders a sign-out button using a Server Action to securely terminate the user session.
+ *
+ * @returns {JSX.Element} The rendered sign-out button component.
+ */
 export default function SignOutButton() {
   return (
     <form
@@ -11,7 +21,7 @@ export default function SignOutButton() {
     >
       <button
         type="submit"
-        className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-muted hover:text-foreground transition-colors w-full cursor-pointer"
+        className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium hover:text-primary-hover transition-colors w-full cursor-pointer"
       >
         <LogOut className="w-4 h-4" />
         <span>Sign out</span>

app/globals.css

@@ -1,11 +1,18 @@
 @import "tailwindcss";
 
 @theme {
-  --color-background: hsl(0 0% 5%);
+  --color-background: hsl(200 6% 10%);
-  --color-foreground: hsl(0 0% 100%);
+  --color-background-muted: hsl(200 7% 8%);
-  --color-muted: hsl(0 0% 63%);
+  --color-foreground: hsl(210 5% 86%);
-  --color-border: hsl(0 0% 15%);
+  --color-foreground-muted: hsl(205 6% 63%);
-  --color-card: hsl(0 0% 8%);
+  --color-border: hsl(200 6% 18%);
+  --color-card: hsl(200 6% 14%);
+
+  --color-primary: hsl(204 97% 64%);
+  --color-primary-hover: hsl(205 84% 56%);
+
+  --color-accent: hsl(271 91% 65%);
+  --color-accent-hover: hsl(271 70% 56%);
 
   --color-destructive: hsl(0 84% 60%);
   --color-destructive-bg: hsl(0 84% 10% / 0.4);

app/layout.tsx

@@ -1,11 +1,26 @@
+/**
+ * @file layout.tsx
+ * @description Root layout component defining global HTML structure, metadata, and Tailwind styling for the application.
+ */
+
 import type { Metadata } from "next";
 import "./globals.css";
 
+/**
+ * Global application metadata configuration for SEO and browser tabs.
+ */
 export const metadata: Metadata = {
   title: "Flowstate - Modern Kanban",
   description: "Dein High-Performance Workflow Dashboard",
 };
 
+/**
+ * Renders the root HTML layout wrapping all pages with global settings, styles, and themes.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The child components/pages to render within the layout.
+ * @returns {JSX.Element} The rendered root layout component.
+ */
 export default function RootLayout({
   children,
 }: {

app/page.tsx

@@ -1,18 +1,30 @@
+/**
+ * @file page.tsx
+ * @description Server component acting as the welcome landing page, redirecting authenticated users to the summary view or presenting sign-in and register options.
+ */
+
 import { auth } from "@/auth";
 import { redirect } from "next/navigation";
 import Link from "next/link";
 
+/**
+ * Renders the welcome landing page. Checks for an active session and redirects
+ * if logged in; otherwise, provides navigation links to sign in or register.
+ *
+ * @async
+ * @returns {Promise<JSX.Element>} The rendered welcome page component.
+ */
 export default async function WelcomePage() {
   const session = typeof auth === "function" ? await auth() : null;
   if (session) {
-    redirect("/board");
+    redirect("/summary");
   }
 
   return (
     <div className="flex h-dvh w-full flex-col items-center justify-center p-6 text-center">
       <div className="max-w-md space-y-6">
         <h1 className="text-4xl font-extrabold tracking-tight">Flowstate</h1>
-        <p className="text-muted">Welcome Page</p>
+        <p className="text-foreground-muted">Welcome Page</p>
         <div className="flex items-center justify-center gap-4">
           <Link
             href="/login/"