tower-studio 0.1.3 → 0.1.5

package/src/components/layout/folder-browser-dialog.tsx

@@ -1,273 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback, useRef } from "react";
-import { Folder, FolderGit2, Home, ChevronUp, Search, HardDrive } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useI18n } from "@/lib/i18n";
-import { ScrollArea } from "@/components/ui/scroll-area";
-
-interface FolderEntry {
-  name: string;
-  path: string;
-  isGit: boolean;
-}
-
-interface BrowseResult {
-  currentPath: string;
-  parentPath: string;
-  homePath: string;
-  folders: FolderEntry[];
-  drives?: FolderEntry[];
-}
-
-interface FolderBrowserDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSelect: (path: string) => void;
-  gitOnly?: boolean;
-}
-
-export function FolderBrowserDialog({
-  open,
-  onOpenChange,
-  onSelect,
-  gitOnly = false,
-}: FolderBrowserDialogProps) {
-  const { t } = useI18n();
-  const [data, setData] = useState<BrowseResult | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [manualPath, setManualPath] = useState("");
-  const [filterText, setFilterText] = useState("");
-  const [showDrives, setShowDrives] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const browse = useCallback(async (dirPath?: string) => {
-    setLoading(true);
-    setError(null);
-    setFilterText("");
-    setShowDrives(false);
-    try {
-      const url = dirPath
-        ? `/api/browse-fs?path=${encodeURIComponent(dirPath)}`
-        : "/api/browse-fs";
-      const res = await fetch(url);
-      if (!res.ok) {
-        const err = await res.json();
-        setError(err.error || "Failed");
-        return;
-      }
-      const result: BrowseResult = await res.json();
-      setData(result);
-      setManualPath(result.currentPath);
-    } catch {
-      setError("Failed to browse filesystem");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (open) {
-      browse();
-      setTimeout(() => inputRef.current?.focus(), 200);
-    }
-  }, [open, browse]);
-
-  const handleGoTo = () => {
-    if (manualPath.trim()) browse(manualPath.trim());
-  };
-
-  const handleSelectCurrent = () => {
-    if (data?.currentPath) {
-      onSelect(data.currentPath);
-      onOpenChange(false);
-    }
-  };
-
-  const handleSelectFolder = (folder: FolderEntry) => {
-    if (folder.isGit || gitOnly) {
-      // If it's a git repo or we're in gitOnly mode, select it directly
-      onSelect(folder.path);
-      onOpenChange(false);
-    } else {
-      // Navigate into the folder
-      browse(folder.path);
-    }
-  };
-
-  const handleGoUp = () => {
-    if (!data) return;
-    if (data.parentPath === "__DRIVES__") {
-      // At drive root on Windows — show drives list
-      setShowDrives(true);
-    } else {
-      setShowDrives(false);
-      browse(data.parentPath);
-    }
-  };
-
-  const handleDriveSelect = (drivePath: string) => {
-    setShowDrives(false);
-    browse(drivePath);
-  };
-
-  const filtered = data?.folders.filter((f) =>
-    f.name.toLowerCase().includes(filterText.toLowerCase())
-  ) ?? [];
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="p-0 gap-0" style={{ maxWidth: '36rem', overflow: 'hidden' }}>
-        <div className="flex flex-col max-h-[60vh] overflow-hidden">
-          <div className="px-5 pt-5 pb-3 shrink-0">
-            <DialogTitle>{gitOnly ? t("folder.selectGitRepo") : t("folder.selectFolder")}</DialogTitle>
-            <p className="text-xs text-muted-foreground mt-1">{t("folder.hint")}</p>
-          </div>
-
-          {/* Manual path input */}
-          <div className="border-t border-border px-4 pt-3 pb-2 shrink-0">
-            <label className="text-xs font-medium text-muted-foreground">{t("folder.manualInput")}</label>
-            <div className="mt-1.5 flex gap-2">
-              <Input
-                ref={inputRef}
-                value={manualPath}
-                onChange={(e) => setManualPath(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleGoTo()}
-                placeholder="/path/to/your/project"
-                title={manualPath}
-                className="flex-1 min-w-0"
-              />
-              <Button
-                variant="outline"
-               
-                onClick={handleGoTo}
-                className="h-8 px-3 shrink-0"
-              >
-                {t("folder.goTo")}
-              </Button>
-            </div>
-          </div>
-
-          {/* Filter */}
-          <div className="px-4 py-2 shrink-0">
-            <label className="text-xs font-medium text-muted-foreground">{t("folder.searchDir")}</label>
-            <div className="relative mt-1.5">
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-              <input
-                value={filterText}
-                onChange={(e) => setFilterText(e.target.value)}
-                placeholder="Filter folders and files..."
-                className="h-8 w-full rounded-md border border-border bg-background pl-8 pr-3 text-sm text-foreground placeholder-muted-foreground outline-none focus:border-ring focus:ring-1 focus:ring-ring"
-              />
-            </div>
-          </div>
-
-          {/* Navigation bar */}
-          <div className="flex items-center gap-1.5 border-y border-border px-4 py-2 shrink-0 min-w-0">
-            <Button
-              variant="outline"
-              size="icon-sm"
-              onClick={() => data?.homePath && browse(data.homePath)}
-              className="shrink-0 text-muted-foreground"
-              title="Home"
-            >
-              <Home className="h-3.5 w-3.5" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon-sm"
-              onClick={handleGoUp}
-              className="shrink-0 text-muted-foreground"
-              title="Parent"
-            >
-              <ChevronUp className="h-3.5 w-3.5" />
-            </Button>
-            {data?.drives && data.drives.length > 0 && (
-              <Button
-                variant={showDrives ? "default" : "outline"}
-                size="icon-sm"
-                onClick={() => setShowDrives((v) => !v)}
-                className="shrink-0 text-muted-foreground"
-                title="Drives"
-              >
-                <HardDrive className="h-3.5 w-3.5" />
-              </Button>
-            )}
-            <div className="min-w-0 flex-1 truncate text-sm text-foreground font-mono" title={data?.currentPath ?? ""}>
-              {data?.currentPath ?? "..."}
-            </div>
-          </div>
-
-          {/* Folder list */}
-          <ScrollArea className="min-h-0 flex-1">
-            {loading && (
-              <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
-                Loading...
-              </div>
-            )}
-            {error && (
-              <div className="flex items-center justify-center py-8 text-sm text-rose-400">
-                {error}
-              </div>
-            )}
-            {/* Windows drive list */}
-            {showDrives && data?.drives && data.drives.map((drive) => (
-              <button
-                key={drive.path}
-                onClick={() => handleDriveSelect(drive.path)}
-                className="flex w-full items-center gap-3 border-b border-border/30 px-4 py-2.5 text-left transition-colors hover:bg-accent last:border-b-0"
-              >
-                <HardDrive className="h-4 w-4 text-blue-400 shrink-0" />
-                <span className="flex-1 text-sm text-foreground truncate">{drive.name}</span>
-                <span className="shrink-0 text-xs text-muted-foreground">{drive.path}</span>
-              </button>
-            ))}
-            {!showDrives && !loading && !error && filtered.length === 0 && (
-              <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
-                {t("folder.empty")}
-              </div>
-            )}
-            {!showDrives && !loading && !error && filtered.map((folder) => (
-              <button
-                key={folder.path}
-                onClick={() => handleSelectFolder(folder)}
-                onDoubleClick={() => browse(folder.path)}
-                className="flex w-full items-center gap-3 border-b border-border/30 px-4 py-2.5 text-left transition-colors hover:bg-accent last:border-b-0"
-              >
-                {folder.isGit ? (
-                  <FolderGit2 className="h-4 w-4 text-emerald-400 shrink-0" />
-                ) : (
-                  <Folder className="h-4 w-4 text-primary/70 shrink-0" />
-                )}
-                <span className="flex-1 text-sm text-foreground truncate">{folder.name}</span>
-                {folder.isGit && (
-                  <span className="shrink-0 rounded-md bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-400 ring-1 ring-emerald-500/20">
-                    git
-                  </span>
-                )}
-              </button>
-            ))}
-          </ScrollArea>
-
-          {/* Footer */}
-          <div className="flex justify-end gap-2 px-5 py-3 shrink-0 border-t border-border">
-            <Button variant="outline" onClick={() => onOpenChange(false)}>{t("common.cancel")}</Button>
-            <Button
-              onClick={handleSelectCurrent}
-              className="bg-primary/10 text-primary ring-1 ring-primary/20 hover:bg-primary/15"
-            >
-              {t("folder.selectPath")}
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/layout/layout-client.tsx

@@ -1,198 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useRouter, usePathname } from "next/navigation";
-import { AppSidebar } from "./app-sidebar";
-import { TopBar } from "./top-bar";
-import { TerminalPortalProvider } from "@/components/task/terminal-portal";
-import { ErrorBoundary } from "@/components/ui/error-boundary";
-import { createProject, createWorkspace } from "@/actions/workspace-actions";
-import { AssistantProvider, useAssistant } from "@/components/assistant/assistant-provider";
-import { AssistantPanel } from "@/components/assistant/assistant-panel";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { NotificationPermissionBanner } from "@/components/notifications/notification-permission-banner";
-import { useNotificationListener } from "@/components/notifications/use-notification-listener";
-import { getConfigValue } from "@/actions/config-actions";
-import { GuidedTour } from "@/components/onboarding/guided-tour";
-
-interface CreateProjectData {
-  name: string;
-  alias?: string;
-  description?: string;
-  gitUrl?: string;
-  localPath?: string;
-  projectType?: "FRONTEND" | "BACKEND";
-}
-
-interface LayoutClientProps {
-  workspaces: Array<{ id: string; name: string; description: string | null; updatedAt: Date }>;
-  isFirstRun: boolean;
-  username: string | null;
-  children: React.ReactNode;
-}
-
-function LayoutInner({
-  workspaces,
-  isFirstRun,
-  username,
-  children,
-  handleCreateProject,
-}: {
-  workspaces: LayoutClientProps["workspaces"];
-  isFirstRun: boolean;
-  username: string | null;
-  children: React.ReactNode;
-  handleCreateProject: (data: CreateProjectData) => Promise<{ id: string } | void>;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const { isOpen, displayMode, closeAssistant } = useAssistant();
-
-  // Redirect to onboarding page on first run
-  useEffect(() => {
-    if (isFirstRun && !pathname.startsWith("/onboarding")) {
-      router.replace("/onboarding");
-    }
-  }, [isFirstRun, pathname, router]);
-
-  const [showTour, setShowTour] = useState(false);
-  const [showNotifBanner, setShowNotifBanner] = useState(false);
-
-  // Show guided tour after onboarding is completed but tour not yet done
-  useEffect(() => {
-    if (!isFirstRun && !pathname.startsWith("/onboarding")) {
-      getConfigValue<boolean>("onboarding.tourCompleted", false).then((done) => {
-        if (!done) {
-          setShowTour(true);
-        } else {
-          // Tour already done — show banner if permission not yet decided
-          setShowNotifBanner(true);
-        }
-      });
-    }
-  }, [isFirstRun, pathname]);
-
-  const handleTourComplete = () => {
-    setShowTour(false);
-    setShowNotifBanner(true);
-  };
-
-  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
-  useEffect(() => {
-    getConfigValue<boolean>("notification.enabled", true).then(setNotificationsEnabled);
-  }, []);
-  const isOnboarding = pathname.startsWith("/onboarding");
-  useNotificationListener(notificationsEnabled && !isOnboarding);
-
-  // Onboarding page — render without sidebar/topbar
-  if (isOnboarding) {
-    return <>{children}</>;
-  }
-
-  const isTaskDetailPage = /\/workspaces\/[^/]+\/tasks\/[^/]+/.test(pathname);
-  const isSubPage = /\/workspaces\/[^/]+\/(notes|assets|archive)/.test(pathname);
-
-  // Sidebar panel — rendered as flex sibling of main for push layout (UX-02)
-  const sidebarPanel =
-    isOpen && displayMode === "sidebar" ? <AssistantPanel mode="sidebar" /> : null;
-
-  // Dialog panel — rendered in Dialog component for modal mode (UI-04)
-  const dialogPanel =
-    displayMode === "dialog" ? (
-      <Dialog
-        open={isOpen}
-        onOpenChange={(open) => {
-          if (!open) closeAssistant();
-        }}
-      >
-        <DialogContent
-          showCloseButton={false}
-          style={{
-            width: "90vw",
-            minWidth: "360px",
-            maxWidth: "600px",
-            height: "70vh",
-            minHeight: "480px",
-            maxHeight: "800px",
-            padding: 0,
-          }}
-        >
-          <AssistantPanel mode="dialog" />
-        </DialogContent>
-      </Dialog>
-    ) : null;
-
-  if (isTaskDetailPage || isSubPage) {
-    return (
-      <>
-        {showNotifBanner && <NotificationPermissionBanner onDismiss={() => setShowNotifBanner(false)} />}
-        <div className="flex h-screen overflow-hidden">
-          <div className="flex flex-1 flex-col overflow-hidden">
-            <TopBar onCreateProject={handleCreateProject} username={username} />
-            <div className="flex flex-1 overflow-hidden">
-              {/* Push sidebar: flex sibling of main, inside content area below TopBar */}
-              {sidebarPanel}
-              <main className="flex-1 overflow-hidden bg-background">
-                <ErrorBoundary>{children}</ErrorBoundary>
-              </main>
-            </div>
-          </div>
-        </div>
-        {dialogPanel}
-        {showTour && <GuidedTour onComplete={handleTourComplete} />}
-      </>
-    );
-  }
-
-  return (
-    <>
-      {showNotifBanner && <NotificationPermissionBanner onDismiss={() => setShowNotifBanner(false)} />}
-      <div className="flex h-screen overflow-hidden">
-        <AppSidebar workspaces={workspaces} />
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <TopBar onCreateProject={handleCreateProject} username={username} />
-          <div className="flex flex-1 overflow-hidden">
-            {/* Push sidebar: flex sibling of main, inside content area below TopBar (per RESEARCH.md Pattern 2) */}
-            {sidebarPanel}
-            <main className="flex-1 overflow-auto bg-background">
-              <ErrorBoundary>{children}</ErrorBoundary>
-            </main>
-          </div>
-        </div>
-      </div>
-      {dialogPanel}
-      {showTour && <GuidedTour onComplete={handleTourComplete} />}
-    </>
-  );
-}
-
-export function LayoutClient({ workspaces, isFirstRun, username, children }: LayoutClientProps) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const activeWorkspaceId = pathname.split("/workspaces/")[1]?.split("/")[0];
-
-  const handleCreateProject = async (data: CreateProjectData): Promise<{ id: string } | void> => {
-    const workspaceId = activeWorkspaceId || (workspaces.length > 0 ? workspaces[0].id : null);
-    if (!workspaceId) {
-      const ws = await createWorkspace({ name: "Default Workspace" });
-      const project = await createProject({ ...data, workspaceId: ws.id });
-      router.refresh();
-      router.push(`/workspaces/${ws.id}`);
-      return { id: project.id };
-    }
-    const project = await createProject({ ...data, workspaceId });
-    router.refresh();
-    router.push(`/workspaces/${workspaceId}`);
-    return { id: project.id };
-  };
-
-  return (
-    <AssistantProvider>
-      <TerminalPortalProvider>
-        <LayoutInner workspaces={workspaces} isFirstRun={isFirstRun} username={username} handleCreateProject={handleCreateProject}>
-          {children}
-        </LayoutInner>
-      </TerminalPortalProvider>
-    </AssistantProvider>
-  );
-}

package/src/components/layout/search-dialog.tsx

@@ -1,196 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { Search, FileText, FolderKanban, GitBranch, StickyNote, Package2, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { globalSearch } from "@/actions/search-actions";
-import type { SearchResult, SearchResultType, SearchCategory } from "@/lib/search";
-import { getConfigValue } from "@/actions/config-actions";
-import { useI18n } from "@/lib/i18n";
-import { ScrollArea } from "@/components/ui/scroll-area";
-
-type CategoryKey =
-  | "search.all"
-  | "search.task"
-  | "search.project"
-  | "search.repository"
-  | "search.note"
-  | "search.asset";
-
-const CATEGORY_DEFS: { id: SearchCategory; key: CategoryKey; icon: typeof FileText }[] = [
-  { id: "all",        key: "search.all",        icon: Search },
-  { id: "task",       key: "search.task",        icon: FileText },
-  { id: "project",    key: "search.project",     icon: FolderKanban },
-  { id: "repository", key: "search.repository",  icon: GitBranch },
-  { id: "note",       key: "search.note",        icon: StickyNote },
-  { id: "asset",      key: "search.asset",       icon: Package2 },
-];
-
-const SECTION_ORDER: SearchResultType[] = ["task", "project", "repository", "note", "asset"];
-
-const SECTION_KEY_MAP: Record<SearchResultType, CategoryKey> = {
-  task:       "search.task",
-  project:    "search.project",
-  repository: "search.repository",
-  note:       "search.note",
-  asset:      "search.asset",
-};
-
-interface SearchDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-function ResultRow({ result, onSelect }: { result: SearchResult; onSelect: (r: SearchResult) => void }) {
-  const Icon = CATEGORY_DEFS.find((c) => c.id === result.type)?.icon ?? FileText;
-  return (
-    <button
-      onClick={() => onSelect(result)}
-      className="flex w-full items-center gap-3 border-b border-border/30 px-4 py-3 text-left transition-colors hover:bg-accent last:border-b-0"
-    >
-      <div className="rounded-md bg-muted p-1.5">
-        <Icon className="h-3.5 w-3.5 text-muted-foreground" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="text-sm font-medium text-foreground truncate">{result.title}</div>
-        <div className="text-xs text-muted-foreground truncate">{result.subtitle}</div>
-        {result.snippet && (
-          <div className="text-xs text-muted-foreground/70 truncate mt-0.5">{result.snippet}</div>
-        )}
-      </div>
-    </button>
-  );
-}
-
-export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
-  const { t } = useI18n();
-  const router = useRouter();
-  const [query, setQuery] = useState("");
-  const [category, setCategory] = useState<SearchCategory>("all");
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
-  const [debounceMs, setDebounceMs] = useState(250);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Reload config and reset state on dialog open
-  useEffect(() => {
-    if (open) {
-      getConfigValue<number>("search.debounceMs", 250).then(setDebounceMs);
-      setTimeout(() => inputRef.current?.focus(), 100);
-      setQuery("");
-      setResults([]);
-    }
-  }, [open]);
-
-  // Debounced search with race condition fix
-  useEffect(() => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    if (!query.trim()) { setResults([]); setIsSearching(false); return; }
-    setIsSearching(true);
-
-    let cancelled = false;
-
-    timerRef.current = setTimeout(async () => {
-      const r = await globalSearch(query, category);
-      if (!cancelled) {
-        setResults(r);
-        setIsSearching(false);
-      }
-    }, debounceMs);
-
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      cancelled = true;
-    };
-  }, [query, category, debounceMs]);
-
-  const handleSelect = useCallback((result: SearchResult) => {
-    router.push(result.navigateTo);
-    onOpenChange(false);
-  }, [router, onOpenChange]);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-lg p-0 gap-0 overflow-hidden !top-[10vh] !-translate-y-0" showCloseButton={false}>
-        {/* Search input */}
-        <div className="flex items-center border-b border-border px-4">
-          <Search className="h-4 w-4 text-muted-foreground" />
-          <input
-            ref={inputRef}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder={t("search.placeholder")}
-            className="flex-1 bg-transparent px-3 py-3.5 text-sm text-foreground placeholder-muted-foreground outline-none"
-          />
-          {query && (
-            <Button variant="ghost" size="icon" onClick={() => { setQuery(""); setResults([]); }} className="text-muted-foreground">
-              <X className="h-3.5 w-3.5" />
-            </Button>
-          )}
-        </div>
-
-        {/* Category tabs */}
-        <div className="flex items-center gap-1 border-b border-border px-4 py-2">
-          {CATEGORY_DEFS.map((cat) => {
-            const Icon = cat.icon;
-            return (
-              <button
-                key={cat.id}
-                onClick={() => setCategory(cat.id)}
-                className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-all ${
-                  category === cat.id
-                    ? "bg-primary/10 text-primary ring-1 ring-primary/20"
-                    : "text-muted-foreground hover:bg-accent hover:text-foreground"
-                }`}
-              >
-                <Icon className="h-3 w-3" />
-                {t(cat.key)}
-              </button>
-            );
-          })}
-        </div>
-
-        {/* Results */}
-        <ScrollArea className="max-h-80">
-          {!query.trim() && (
-            <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
-              {t("search.typeToSearch")}
-            </div>
-          )}
-
-          {query.trim() && results.length === 0 && !isSearching && (
-            <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
-              {t("search.noResults")}
-            </div>
-          )}
-
-          {/* Grouped rendering for All tab */}
-          {category === "all" && results.length > 0 && (() => {
-            const grouped = results.reduce<Record<string, SearchResult[]>>((acc, r) => {
-              (acc[r.type] ??= []).push(r);
-              return acc;
-            }, {});
-            return SECTION_ORDER.filter((type) => grouped[type]?.length).map((type) => (
-              <div key={type}>
-                <div className="px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground bg-muted/50">
-                  {t(SECTION_KEY_MAP[type])}
-                </div>
-                {grouped[type].map((result) => (
-                  <ResultRow key={`${result.type}-${result.id}`} result={result} onSelect={handleSelect} />
-                ))}
-              </div>
-            ));
-          })()}
-
-          {/* Flat rendering for specific category tabs */}
-          {category !== "all" && results.map((result) => (
-            <ResultRow key={`${result.type}-${result.id}`} result={result} onSelect={handleSelect} />
-          ))}
-        </ScrollArea>
-      </DialogContent>
-    </Dialog>
-  );
-}