From f5544e328df2cbc3846078d2f5bd7ca80fa9b48a Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Fri, 3 Jul 2026 17:55:33 +0700
Subject: [PATCH] feat: add theme toggle to admin sidebars and update form list
 to use full-row navigation links

---
 app/admin/form/[id]/client.tsx |  8 +++++---
 app/admin/form/[id]/layout.tsx |  2 +-
 app/admin/form/page.tsx        | 33 +++++++++++++++++++--------------
 components/admin-shell.tsx     |  4 +++-
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/app/admin/form/[id]/client.tsx b/app/admin/form/[id]/client.tsx
index 70da940..470471f 100644
--- a/app/admin/form/[id]/client.tsx
+++ b/app/admin/form/[id]/client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useTransition, useRef, useCallback, useEffect } from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import Link from "next/link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -33,10 +33,11 @@ import {
   SidebarHeader,
   SidebarFooter,
 } from "@/components/ui/sidebar";
-import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Save, Image as ImageIcon, X, Check, LayoutDashboard, ClipboardList, ArrowLeft, Webhook } from "lucide-react";
+import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Image as ImageIcon, X, Check, LayoutDashboard, ClipboardList, ArrowLeft, Webhook } from "lucide-react";
 import Image from 'next/image';
 import { RichTextEditor } from "@/components/rich-text-editor";
 import { FormattedText } from "@/components/formatted-text";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 interface Question {
   id: string;
@@ -613,10 +614,11 @@ export function AdminSidebar({ formId }: { formId: string }) {
 
   return (
     <Sidebar variant="sidebar" collapsible="icon">
-      <SidebarHeader className="border-b border-border py-4 px-4 flex items-center justify-between">
+      <SidebarHeader className="border-b border-border py-4 px-4 flex flex-row items-center justify-between">
         <span className="font-bold tracking-wider text-primary text-sm uppercase">
           Form Admin
         </span>
+        <ThemeToggle />
       </SidebarHeader>
 
       <SidebarContent>
diff --git a/app/admin/form/[id]/layout.tsx b/app/admin/form/[id]/layout.tsx
index 8595305..303b634 100644
--- a/app/admin/form/[id]/layout.tsx
+++ b/app/admin/form/[id]/layout.tsx
@@ -19,7 +19,7 @@ export default async function AdminFormLayout(
 
   return (
     <SidebarProvider>
-      <div className="flex w-full bg-background text-foreground dark">
+      <div className="flex w-full bg-background text-foreground">
         <AdminSidebar formId={params.id} />
         <div className="flex-1 overflow-hidden">
           <div className="md:hidden p-2">
diff --git a/app/admin/form/page.tsx b/app/admin/form/page.tsx
index c7e0936..ca87caa 100644
--- a/app/admin/form/page.tsx
+++ b/app/admin/form/page.tsx
@@ -67,22 +67,27 @@ export default async function AdminFormsPage() {
                 </TableRow>
               ) : (
                 formsList.map((form) => (
-                  <TableRow key={form.id}>
-                    <TableCell className="font-medium">{form.title}</TableCell>
-                    <TableCell>
-                      {form.isOpen ? (
-                        <Badge variant="default">Open</Badge>
-                      ) : (
-                        <Badge variant="secondary">Closed</Badge>
-                      )}
+                  <TableRow key={form.id} className="group hover:bg-muted/50 transition-colors">
+                    <TableCell className="p-0 align-middle">
+                      <Link href={`/admin/form/${form.id}`} className="flex items-center p-3 font-medium h-full w-full">
+                        {form.title}
+                      </Link>
                     </TableCell>
-                    <TableCell>
-                      {form.createdAt ? new Date(form.createdAt).toLocaleDateString() : 'N/A'}
+                    <TableCell className="p-0 align-middle">
+                      <Link href={`/admin/form/${form.id}`} className="flex items-center p-3 h-full w-full">
+                        {form.isOpen ? (
+                          <Badge variant="default">Open</Badge>
+                        ) : (
+                          <Badge variant="secondary">Closed</Badge>
+                        )}
+                      </Link>
                     </TableCell>
-                    <TableCell className="text-right space-x-2">
-                      <Button variant="outline" asChild size="sm">
-                        <Link href={`/admin/form/${form.id}`}>Edit</Link>
-                      </Button>
+                    <TableCell className="p-0 align-middle">
+                      <Link href={`/admin/form/${form.id}`} className="flex items-center p-3 h-full w-full">
+                        {form.createdAt ? new Date(form.createdAt).toLocaleDateString() : 'N/A'}
+                      </Link>
+                    </TableCell>
+                    <TableCell className="text-right space-x-2 p-3">
                       <Button variant="outline" asChild size="sm">
                         <Link href={`/admin/form/${form.id}/result`}>Results</Link>
                       </Button>
diff --git a/components/admin-shell.tsx b/components/admin-shell.tsx
index 9f77d2c..c13ce3a 100644
--- a/components/admin-shell.tsx
+++ b/components/admin-shell.tsx
@@ -17,6 +17,7 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { ClipboardList, Server, LayoutDashboard } from "lucide-react";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 export function AdminShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
@@ -25,10 +26,11 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
     <SidebarProvider>
       <div className="flex w-full min-h-screen bg-background text-foreground">
         <Sidebar variant="sidebar" collapsible="icon">
-          <SidebarHeader className="border-b border-border py-4 px-4">
+          <SidebarHeader className="border-b border-border py-4 px-4 flex flex-row items-center justify-between">
             <span className="font-bold tracking-wider text-primary text-sm uppercase">
               Admin
             </span>
+            <ThemeToggle />
           </SidebarHeader>
 
           <SidebarContent>