feat(playground): restructure sidebar components and implement Playground layout

src/app/dashboard/components/dashboard-sidebar.tsx

@@ -24,12 +24,14 @@ import {
 } from "@/components/ui/sidebar";
 import { siteConfig } from "@/config/site";
 import { useTranslations } from "next-intl";
-import { NavMain } from "@/components/nav-main";
+import { NavMain } from "@/app/dashboard/components/nav-main";
-import { NavUser } from "@/components/nav-user";
+import { NavUser } from "@/app/dashboard/components/nav-user";
-import { NavProjects } from "@/components/nav-projects";
+import { NavProjects } from "@/app/dashboard/components/nav-projects";
-import { NavSecondary } from "@/components/nav-secondary";
+import { NavSecondary } from "@/app/dashboard/components/nav-secondary";
 
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+export function DashboardSidebar({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
   const t = useTranslations();
 
   const data = {
@@ -41,7 +43,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     navMain: [
       {
         title: "Playground",
-        url: "/dashboard/playground",
+        url: "/playground",
         icon: SquareTerminal,
         isActive: true,
         items: [

src/app/dashboard/layout.tsx

@@ -10,11 +10,11 @@ import {
   BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
 import { SessionProvider } from "next-auth/react";
-import { AppSidebar } from "@/components/app-sidebar";
 import { Separator } from "@/components/ui/separator";
 import { ModeSwitcher } from "@/components/mode-switcher";
 import ConfirmationDialog from "@/dialogs/ConfirmationDialog";
 import LanguageSwitcher from "@/components/language-switcher";
+import { DashboardSidebar } from "@/app/dashboard/components/dashboard-sidebar";
 
 export default function DashboardLayout({
   children,
@@ -22,7 +22,7 @@ export default function DashboardLayout({
   return (
     <SessionProvider>
       <SidebarProvider>
-        <AppSidebar />
+        <DashboardSidebar />
         <SidebarInset>
           <header className="flex h-14 shrink-0 items-center gap-2">
             <div className="flex flex-1 items-center gap-2 px-3">

src/app/dashboard/playground/page.tsx

@@ -1,56 +0,0 @@
-import { Bot, Columns2, FileCode } from "lucide-react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
-export default function PlaygroundPage() {
-  return (
-    <div className="flex h-full flex-col w-full">
-      <Tabs defaultValue="split" className="flex-1">
-        <div className="h-full w-full px-3">
-          <div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
-            <div className="hidden flex-col space-y-4 sm:flex md:order-2">
-              <div className="grid gap-2">
-                <TabsList className="grid grid-cols-3">
-                  <TabsTrigger value="split">
-                    <span className="sr-only">Split</span>
-                    <Columns2 className="h-5 w-auto" />
-                  </TabsTrigger>
-                  <TabsTrigger value="editor">
-                    <span className="sr-only">Editor</span>
-                    <FileCode className="h-5 w-auto" />
-                  </TabsTrigger>
-                  <TabsTrigger value="diff">
-                    <span className="sr-only">Diff</span>
-                    <Bot className="h-5 w-auto" />
-                  </TabsTrigger>
-                </TabsList>
-              </div>
-            </div>
-            <div className="md:order-1">
-              <TabsContent value="split" className="h-full mt-0 border-0 p-0">
-                <div className="h-full flex flex-col space-y-4 pb-3">
-                  <div className="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1">
-                    <div className="h-full min-h-[300px] lg:min-h-[700px] xl:min-h-[700px] bg-muted/50" />
-                    <div className="rounded-md border bg-muted"></div>
-                  </div>
-                </div>
-              </TabsContent>
-              <TabsContent value="editor" className="h-full mt-0 border-0 p-0">
-                <div className="h-full flex flex-col space-y-4 pb-3">
-                  <div className="h-full min-h-[400px] flex-1 p-4 md:min-h-[700px] lg:min-h-[700px] bg-muted/50" />
-                </div>
-              </TabsContent>
-              <TabsContent value="diff" className="h-full mt-0 border-0 p-0">
-                <div className="h-full flex flex-col space-y-4 pb-3">
-                  <div className="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1">
-                    <div className="h-full min-h-[300px] lg:min-h-[700px] xl:min-h-[700px] bg-muted/50" />
-                    <div className="rounded-md border bg-muted"></div>
-                  </div>
-                </div>
-              </TabsContent>
-            </div>
-          </div>
-        </div>
-      </Tabs>
-    </div>
-  );
-}

src/app/playground/components/playground-sidebar.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { ChevronRight, File, Folder } from "lucide-react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+// This is sample data.
+const data = {
+  changes: [
+    {
+      file: "README.md",
+      state: "M",
+    },
+    {
+      file: "api/hello/route.ts",
+      state: "U",
+    },
+    {
+      file: "app/layout.tsx",
+      state: "M",
+    },
+  ],
+  tree: [
+    [
+      "app",
+      [
+        "api",
+        ["hello", ["route.ts"]],
+        "page.tsx",
+        "layout.tsx",
+        ["blog", ["page.tsx"]],
+      ],
+    ],
+    [
+      "components",
+      ["ui", "button.tsx", "card.tsx"],
+      "header.tsx",
+      "footer.tsx",
+    ],
+    ["lib", ["util.ts"]],
+    ["public", "favicon.ico", "vercel.svg"],
+    ".eslintrc.json",
+    ".gitignore",
+    "next.config.js",
+    "tailwind.config.js",
+    "package.json",
+    "README.md",
+  ],
+};
+export function PlaygroundSidebar({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Changes</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.changes.map((item, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuButton>
+                    <File />
+                    {item.file}
+                  </SidebarMenuButton>
+                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Files</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.tree.map((item, index) => (
+                <Tree key={index} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  );
+}
+function Tree({ item }: { item: string | any[] }) {
+  const [name, ...items] = Array.isArray(item) ? item : [item];
+  if (!items.length) {
+    return (
+      <SidebarMenuButton
+        isActive={name === "button.tsx"}
+        className="data-[active=true]:bg-transparent"
+      >
+        <File />
+        {name}
+      </SidebarMenuButton>
+    );
+  }
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "components" || name === "ui"}
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton>
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  );
+}

src/app/playground/layout.tsx

@@ -0,0 +1,47 @@
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import { ModeSwitcher } from "@/components/mode-switcher";
+import LanguageSwitcher from "@/components/language-switcher";
+import { PlaygroundSidebar } from "@/app/playground/components/playground-sidebar";
+
+export default function PlaygroundLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <SidebarProvider>
+      <PlaygroundSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <ModeSwitcher />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="ml-auto px-3">
+            <LanguageSwitcher />
+          </div>
+        </header>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

src/app/playground/page.tsx

@@ -0,0 +1,12 @@
+export default function PlaygroundPage() {
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-4">
+      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+      </div>
+      <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+    </div>
+  );
+}