reui-blocks/blocks/application-shell9.tsx

"use client";

import {
  ChevronRight,
  File,
  Folder,
  GitBranch,
  History,
  MessageSquare,
  PanelRight,
  Play,
  Plus,
  Search,
  Settings,
  User,
} from "lucide-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarProvider,
} from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";

type SidebarModule = {
  id: string;
  label: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
};

const sidebarModules: SidebarModule[] = [
  { id: "search", label: "جستجو", icon: Search },
  { id: "explorer", label: "مرورگر", icon: File },
  { id: "git", label: "کنترل منبع", icon: GitBranch },
];

const changesData = [
  { file: "README.md", state: "M" },
  { file: "api/hello/route.ts", state: "U" },
  { file: "app/layout.tsx", state: "M" },
];

type TreeItem = string | TreeItem[];

const fileTreeData: TreeItem[] = [
  [
    "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",
];

function Logo({ className }: { className?: string }) {
  return (
    <img
      src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
      alt="شاد‌سی‌ان بلاکس"
      className={cn("size-5 dark:invert", className)}
    />
  );
}

function Tree({ item }: { item: TreeItem }) {
  const [name, ...items] = Array.isArray(item) ? item : [item];

  if (!items.length) {
    return (
      <SidebarMenuButton className="data-[active=true]:bg-transparent">
        <File className="size-4" />
        {name}
      </SidebarMenuButton>
    );
  }

  return (
    <SidebarMenuItem>
      <Collapsible
        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
        defaultOpen={name === "app" || name === "components"}
      >
        <CollapsibleTrigger asChild>
          <SidebarMenuButton>
            <ChevronRight className="size-4 transition-transform rtl:rotate-180" />
            <Folder className="size-4" />
            {name}
          </SidebarMenuButton>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <SidebarMenuSub>
            {items.map((subItem, index) => (
              <Tree key={index} item={subItem} />
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </Collapsible>
    </SidebarMenuItem>
  );
}

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
  activeModule: string;
  onModuleChange: (moduleId: string) => void;
}

export function AppSidebar({
  activeModule,
  onModuleChange,
  ...props
}: AppSidebarProps) {
  return (
    <Sidebar side="right" collapsible="icon" {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
              <a href="#">
                <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
                  <img
                    src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
                    alt="شاد‌سی‌ان بلاکس"
                    className="size-5 invert dark:invert-0"
                  />
                </div>
                <div className="grid flex-1 text-start text-sm leading-tight">
                  <span className="truncate font-medium">ری یو آی</span>
                  <span className="truncate text-xs">پروژه من</span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent className="px-1.5 md:px-0">
            <SidebarMenu>
              {sidebarModules.map((module) => (
                <SidebarMenuItem key={module.id}>
                  <SidebarMenuButton
                    tooltip={{
                      children: module.label,
                      hidden: false,
                    }}
                    onClick={() => onModuleChange(module.id)}
                    isActive={activeModule === module.id}
                    className="px-2.5 md:px-2"
                  >
                    <module.icon />
                    <span>{module.label}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              tooltip={{
                children: "تنظیمات",
                hidden: false,
              }}
              className="px-2.5 md:px-2"
              aria-label="تنظیمات"
            >
              <Settings />
              <span>تنظیمات</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton
              tooltip={{
                children: "پروفایل",
                hidden: false,
              }}
              className="px-2.5 md:px-2"
              aria-label="پروفایل"
            >
              <User />
              <span>پروفایل</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );
}

function ExplorerSidebar() {
  return (
    <Sidebar
      collapsible="none"
      className="w-full shrink-0 border-e md:flex md:w-[280px]"
    >
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>تغییرات</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {changesData.map((item, index) => (
                <SidebarMenuItem key={index}>
                  <SidebarMenuButton>
                    <File className="size-4" />
                    <span className="truncate">{item.file}</span>
                  </SidebarMenuButton>
                  <SidebarMenuBadge
                    className={cn(
                      "text-[10px] font-medium",
                      item.state === "M" && "text-yellow-500",
                      item.state === "U" && "text-green-500",
                      item.state === "D" && "text-red-500",
                    )}
                  >
                    {item.state}
                  </SidebarMenuBadge>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel>فایل‌ها</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {fileTreeData.map((item, index) => (
                <Tree key={index} item={item} />
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}

function SearchSidebar() {
  return (
    <Sidebar
      collapsible="none"
      className="w-full shrink-0 border-e md:flex md:w-[280px]"
    >
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>جستجو</SidebarGroupLabel>
          <SidebarGroupContent className="px-2">
            <div className="flex items-center rounded-md border bg-background px-3 py-2">
              <Search className="me-2 size-4 shrink-0 text-muted-foreground" />
              <input
                type="search"
                placeholder="جستجوی فایل‌ها..."
                aria-label="جستجوی فایل‌ها"
                className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
              />
            </div>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}

function GitSidebar() {
  return (
    <Sidebar
      collapsible="none"
      className="w-full shrink-0 border-e md:flex md:w-[280px]"
    >
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>تغییرات</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {changesData.map((item, index) => (
                <SidebarMenuItem key={index}>
                  <SidebarMenuButton>
                    <File className="size-4" />
                    <span className="truncate">{item.file}</span>
                  </SidebarMenuButton>
                  <SidebarMenuBadge
                    className={cn(
                      "text-[10px] font-medium",
                      item.state === "M" && "text-yellow-500",
                      item.state === "U" && "text-green-500",
                      item.state === "D" && "text-red-500",
                    )}
                  >
                    {item.state}
                  </SidebarMenuBadge>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}

type MobileDrawer = "search" | "explorer" | "git" | "chat" | null;

export function ApplicationShell9() {
  const [activeModule, setActiveModule] = React.useState("explorer");
  const [isChatOpen, setIsChatOpen] = React.useState(false);
  const [mobileDrawer, setMobileDrawer] = React.useState<MobileDrawer>(null);

  const handleModuleChange = (moduleId: string) => {
    setActiveModule(moduleId);
  };

  const renderSidebar = () => {
    switch (activeModule) {
      case "search":
        return <SearchSidebar />;
      case "explorer":
        return <ExplorerSidebar />;
      case "کنترل نسخه":
        return <GitSidebar />;
      default:
        return <ExplorerSidebar />;
    }
  };

  return (
    <SidebarProvider
      dir="rtl"
      lang="fa"
      className="h-svh overflow-hidden"
      style={
        {
          "--sidebar-width": "var(--sidebar-width-icon)",
        } as React.CSSProperties
      }
    >
      <AppSidebar
        activeModule={activeModule}
        onModuleChange={handleModuleChange}
        className="hidden md:flex"
      />

      <div className="flex h-full w-full flex-col md:hidden">
        <header className="flex h-12 shrink-0 items-center justify-between border-b bg-background px-3">
          <div className="flex items-center gap-2">
            <div className="flex aspect-square size-7 items-center justify-center rounded-sm bg-primary">
              <img
                src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
                alt="شاد‌سی‌ان بلاکس"
                className="size-4 invert dark:invert-0"
              />
            </div>
            <span className="text-sm font-medium">پروژه من</span>
          </div>
          <div className="flex items-center gap-1">
            <Button
              variant="ghost"
              size="icon"
              className="size-8"
              aria-label="افزودن"
            >
              <Plus className="size-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className="size-8"
              aria-label="تنظیمات"
            >
              <Settings className="size-4" />
            </Button>
          </div>
        </header>

        <div className="flex flex-1 items-center justify-center bg-muted/30">
          <Logo className="size-16 opacity-30" />
        </div>

        <div className="flex h-14 shrink-0 items-center justify-around border-t bg-background">
          <button
            type="button"
            onClick={() => setMobileDrawer("search")}
            className={cn(
              "flex items-center justify-center rounded-md p-2",
              mobileDrawer === "search"
                ? "text-foreground"
                : "text-muted-foreground",
            )}
            aria-label="جستجو"
          >
            <Search className="size-5" />
            <span className="sr-only">جستجو</span>
          </button>
          <button
            type="button"
            onClick={() => setMobileDrawer("explorer")}
            className={cn(
              "flex items-center justify-center rounded-md p-2",
              mobileDrawer === "explorer"
                ? "text-foreground"
                : "text-muted-foreground",
            )}
            aria-label="مرورگر"
          >
            <File className="size-5" />
            <span className="sr-only">مرورگر</span>
          </button>
          <button
            type="button"
            onClick={() => setMobileDrawer("git")}
            className={cn(
              "flex items-center justify-center rounded-md p-2",
              mobileDrawer === "git"
                ? "text-foreground"
                : "text-muted-foreground",
            )}
            aria-label="کنترل منبع"
          >
            <GitBranch className="size-5" />
            <span className="sr-only">کنترل منبع</span>
          </button>
          <button
            type="button"
            onClick={() => setMobileDrawer("chat")}
            className={cn(
              "flex items-center justify-center rounded-md p-2",
              mobileDrawer === "chat"
                ? "text-foreground"
                : "text-muted-foreground",
            )}
            aria-label="گفتگو"
          >
            <MessageSquare className="size-5" />
            <span className="sr-only">گفتگو</span>
          </button>
        </div>

        <Drawer
          open={mobileDrawer === "search"}
          onOpenChange={(open) => setMobileDrawer(open ? "search" : null)}
        >
          <DrawerContent dir="rtl" className="text-start">
            <DrawerHeader>
              <DrawerTitle className="text-start">جستجو</DrawerTitle>
            </DrawerHeader>
            <div className="p-4">
              <div className="flex items-center rounded-md border bg-background px-3 py-2">
                <Search className="me-2 size-4 shrink-0 text-muted-foreground" />
                <input
                  type="search"
                  placeholder="جستجوی فایل‌ها..."
                  aria-label="جستجوی فایل‌ها"
                  className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
                />
              </div>
            </div>
          </DrawerContent>
        </Drawer>

        <Drawer
          open={mobileDrawer === "explorer"}
          onOpenChange={(open) => setMobileDrawer(open ? "explorer" : null)}
        >
          <DrawerContent dir="rtl" className="max-h-[85vh] text-start">
            <DrawerHeader>
              <DrawerTitle className="text-start">فایل‌ها</DrawerTitle>
            </DrawerHeader>
            <ScrollArea className="h-[60vh] [&>[data-slot=scroll-area-viewport]>div]:!block">
              <SidebarContent>
                <SidebarGroup>
                  <SidebarGroupLabel>تغییرات</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      {changesData.map((item, index) => (
                        <SidebarMenuItem key={index}>
                          <SidebarMenuButton>
                            <File className="size-4" />
                            <span className="truncate">{item.file}</span>
                          </SidebarMenuButton>
                          <SidebarMenuBadge
                            className={cn(
                              "text-[10px] font-medium",
                              item.state === "M" && "text-yellow-500",
                              item.state === "U" && "text-green-500",
                              item.state === "D" && "text-red-500",
                            )}
                          >
                            {item.state}
                          </SidebarMenuBadge>
                        </SidebarMenuItem>
                      ))}
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
                <SidebarGroup>
                  <SidebarGroupLabel>فایل‌ها</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      {fileTreeData.map((item, index) => (
                        <Tree key={index} item={item} />
                      ))}
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
              </SidebarContent>
            </ScrollArea>
          </DrawerContent>
        </Drawer>

        <Drawer
          open={mobileDrawer === "git"}
          onOpenChange={(open) => setMobileDrawer(open ? "git" : null)}
        >
          <DrawerContent dir="rtl" className="max-h-[85vh] text-start">
            <DrawerHeader>
              <DrawerTitle className="text-start">کنترل منبع</DrawerTitle>
            </DrawerHeader>
            <ScrollArea className="h-[60vh] [&>[data-slot=scroll-area-viewport]>div]:!block">
              <SidebarContent>
                <SidebarGroup>
                  <SidebarGroupLabel>تغییرات</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      {changesData.map((item, index) => (
                        <SidebarMenuItem key={index}>
                          <SidebarMenuButton>
                            <File className="size-4" />
                            <span className="truncate">{item.file}</span>
                          </SidebarMenuButton>
                          <SidebarMenuBadge
                            className={cn(
                              "text-[10px] font-medium",
                              item.state === "M" && "text-yellow-500",
                              item.state === "U" && "text-green-500",
                              item.state === "D" && "text-red-500",
                            )}
                          >
                            {item.state}
                          </SidebarMenuBadge>
                        </SidebarMenuItem>
                      ))}
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
              </SidebarContent>
            </ScrollArea>
          </DrawerContent>
        </Drawer>

        <Drawer
          open={mobileDrawer === "chat"}
          onOpenChange={(open) => setMobileDrawer(open ? "chat" : null)}
        >
          <DrawerContent dir="rtl" className="max-h-[85vh] text-start">
            <DrawerHeader>
              <DrawerTitle className="text-start">گفتگو</DrawerTitle>
            </DrawerHeader>
            <div className="flex h-[60vh] flex-col">
              <ScrollArea className="flex-1 p-4">
                <div className="flex justify-end">
                  <div className="max-w-[85%] rounded-2xl rounded-ee-sm bg-primary px-4 py-3 text-sm text-primary-foreground">
                    یک لندینگ برای ری یو آی با بخش قهرمان، شبکه
                    ویژگی‌ها و جدول قیمت‌گذاری بساز
                  </div>
                </div>
              </ScrollArea>
              <div className="border-t p-3">
                <div className="rounded-lg border bg-background">
                  <textarea
                    placeholder="توضیح دهید چه چیزی می‌خواهید بسازید..."
                    rows={3}
                    className="w-full resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
                  />
                  <div className="flex items-center justify-between border-t px-3 py-2">
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <span>اینتر برای ارسال</span>
                    </div>
                    <Button size="sm" className="h-7 gap-1.5 px-3">
                      <span>ارسال</span>
                      <ChevronRight className="size-3 rtl:rotate-180" />
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </DrawerContent>
        </Drawer>
      </div>

      <div className="hidden min-w-0 flex-1 flex-col overflow-hidden md:flex">
        <header className="flex h-12 shrink-0 items-center justify-between border-b bg-background px-4">
          <nav className="flex items-center gap-1 text-sm">
            <span className="font-medium">ری یو آی</span>
            <ChevronRight className="size-4 text-muted-foreground rtl:rotate-180" />
            <span className="text-muted-foreground">پروژه من</span>
          </nav>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="sm" className="h-8 gap-1.5">
              <Play className="size-4" />
              <span>پیش‌نمایش</span>
            </Button>
            <Button variant="ghost" size="icon" className="size-8">
              <Plus className="size-4" />
            </Button>
            <Button variant="ghost" size="icon" className="size-8">
              <History className="size-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className={cn("size-8", isChatOpen && "bg-muted")}
              onClick={() => setIsChatOpen(!isChatOpen)}
            >
              <PanelRight className="size-4" />
            </Button>
          </div>
        </header>

        <div className="flex min-h-0 flex-1 overflow-hidden">
          {renderSidebar()}

          <SidebarInset className="min-h-0 flex-col overflow-hidden">
            <div className="flex flex-1 overflow-hidden">
              <div
                className={cn(
                  "flex flex-1 items-center justify-center bg-muted/30",
                )}
              >
                {!isChatOpen ? (
                  <div className="flex flex-col items-center gap-4 text-center">
                    <Logo className="size-16 opacity-30" />
                    <div className="space-y-2">
                      <h3 className="text-lg font-medium">شروع ساخت</h3>
                      <p className="max-w-sm text-sm text-muted-foreground">
                        توضیح دهید چه چیزی می‌خواهید بسازید تا هوش مصنوعی
                        کمک کند
                      </p>
                    </div>
                    <Button
                      onClick={() => setIsChatOpen(true)}
                      className="gap-2"
                    >
                      <MessageSquare className="size-4" />
                      باز کردن گفتگو
                    </Button>
                  </div>
                ) : (
                  <Logo className="size-16 opacity-30" />
                )}
              </div>

              {isChatOpen && (
                <div className="flex w-[400px] shrink-0 flex-col border-s">
                  <div className="flex h-10 items-center justify-between border-b px-4">
                    <div className="flex items-center gap-2">
                      <MessageSquare className="size-4" />
                      <span className="text-sm font-medium">گفتگو</span>
                    </div>
                  </div>
                  <ScrollArea className="flex-1 p-4">
                    <div className="flex justify-end">
                      <div className="max-w-[85%] rounded-2xl rounded-ee-sm bg-primary px-4 py-3 text-sm text-primary-foreground">
                        یک لندینگ برای ری یو آی با بخش قهرمان، شبکه
                        ویژگی‌ها و جدول قیمت‌گذاری بساز
                      </div>
                    </div>
                  </ScrollArea>

                  <div className="border-t p-3">
                    <div className="rounded-lg border bg-background">
                      <textarea
                        placeholder="توضیح دهید چه چیزی می‌خواهید بسازید..."
                        rows={3}
                        className="w-full resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
                      />
                      <div className="flex items-center justify-between border-t px-3 py-2">
                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
                          <span>اینتر برای ارسال</span>
                        </div>
                        <Button size="sm" className="h-7 gap-1.5 px-3">
                          <span>ارسال</span>
                          <ChevronRight className="size-3 rtl:rotate-180" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </SidebarInset>
        </div>
      </div>
    </SidebarProvider>
  );
}