@nextclaw/ui 0.15.4 → 0.15.6

package/src/shared/components/path-picker/server-path-picker-dialog.tsx

@@ -1,23 +1,27 @@
-import { useEffect, useMemo, useState } from 'react';
-import { ChevronRight, Folder, FolderUp, Home, RefreshCcw, Search } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Search } from 'lucide-react';
 import { useServerPathBrowse } from '@/shared/hooks/use-server-path-browse';
-import { Button } from '@/shared/components/ui/button';
+import { useServerPathCreateDirectory } from '@/shared/hooks/use-server-path-create-directory';
+import { ServerPathPickerDirectoryList } from '@/shared/components/path-picker/server-path-picker-directory-list';
+import { ServerPathPickerFooter } from '@/shared/components/path-picker/server-path-picker-footer';
+import { ServerPathPickerLocations } from '@/shared/components/path-picker/server-path-picker-locations';
+import { ServerPathPickerNavigationBar } from '@/shared/components/path-picker/server-path-picker-navigation-bar';
+import { ServerPathPickerNewFolder } from '@/shared/components/path-picker/server-path-picker-new-folder';
+import { ServerPathPickerToolbar } from '@/shared/components/path-picker/server-path-picker-toolbar';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/shared/components/ui/dialog';
 import { Input } from '@/shared/components/ui/input';
-import { Label } from '@/shared/components/ui/label';
-import { ScrollArea } from '@/shared/components/ui/scroll-area';
 import { t } from '@/shared/lib/i18n';
 
 type ServerPathPickerDialogProps = {
   open: boolean;
   currentPath?: string | null;
+  defaultWorkspacePath?: string | null;
   isSaving: boolean;
   onOpenChange: (open: boolean) => void;
   onConfirm: (path: string) => Promise<void> | void;
@@ -29,9 +33,26 @@ type ServerPathPickerDialogProps = {
   hint?: string;
 };
 
+function resolveHomeRelativePath(path: string, homePath?: string | null): string {
+  if (!homePath) {
+    return path;
+  }
+  if (path === '~') {
+    return homePath;
+  }
+  const windowsHome = homePath.includes('\\');
+  if (path.startsWith('~/') || (windowsHome && path.startsWith('~\\'))) {
+    const separator = windowsHome ? '\\' : '/';
+    const relativePath = path.slice(2).replaceAll(separator === '\\' ? '/' : '\\', separator);
+    return `${homePath.replace(/[\\/]+$/, '')}${separator}${relativePath}`;
+  }
+  return path;
+}
+
 export function ServerPathPickerDialog({
   open,
   currentPath,
+  defaultWorkspacePath,
   isSaving,
   onOpenChange,
   onConfirm,
@@ -42,36 +63,101 @@ export function ServerPathPickerDialog({
   confirmLabel,
   hint,
 }: ServerPathPickerDialogProps) {
-  const [draftPath, setDraftPath] = useState('');
-  const [browsePath, setBrowsePath] = useState<string | null>(null);
-  const [searchText, setSearchText] = useState('');
+  const normalizedCurrentPath = currentPath?.trim() ?? '';
+  const normalizedDefaultWorkspacePath = defaultWorkspacePath?.trim() ?? '';
+  const sessionKey = `${normalizedCurrentPath}\u0000${normalizedDefaultWorkspacePath}`;
 
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const nextPath = currentPath?.trim() || null;
-    setDraftPath(nextPath ?? '');
-    setBrowsePath(nextPath);
-    setSearchText('');
-  }, [currentPath, open]);
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (isSaving) {
+          return;
+        }
+        onOpenChange(nextOpen);
+      }}
+    >
+      <DialogContent className="max-h-[92vh] overflow-hidden p-0 sm:h-[44rem] sm:max-w-5xl sm:grid-rows-[auto_minmax(0,1fr)]">
+        <DialogHeader className="border-b border-border px-5 py-4 pr-12">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className={description ? undefined : 'sr-only'}>
+            {description ?? title}
+          </DialogDescription>
+        </DialogHeader>
+
+        {open ? (
+          <ServerPathPickerSession
+            key={sessionKey}
+            currentPath={normalizedCurrentPath}
+            defaultWorkspacePath={normalizedDefaultWorkspacePath}
+            isSaving={isSaving}
+            onCancel={() => onOpenChange(false)}
+            onConfirm={onConfirm}
+            pathLabel={pathLabel}
+            pathPlaceholder={pathPlaceholder}
+            confirmLabel={confirmLabel}
+            hint={hint}
+          />
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+type ServerPathPickerSessionProps = {
+  currentPath: string;
+  defaultWorkspacePath: string;
+  isSaving: boolean;
+  onCancel: () => void;
+  onConfirm: (path: string) => Promise<void> | void;
+  pathLabel: string;
+  pathPlaceholder?: string;
+  confirmLabel: string;
+  hint?: string;
+};
+
+function ServerPathPickerSession({
+  currentPath,
+  defaultWorkspacePath,
+  isSaving,
+  onCancel,
+  onConfirm,
+  pathLabel,
+  pathPlaceholder,
+  confirmLabel,
+  hint,
+}: ServerPathPickerSessionProps) {
+  const initialPath = currentPath || defaultWorkspacePath;
+  const [selectedPath, setSelectedPath] = useState<string | null>(initialPath || null);
+  const [browsePath, setBrowsePath] = useState<string | null>(initialPath || null);
+  const [backPaths, setBackPaths] = useState<string[]>([]);
+  const [forwardPaths, setForwardPaths] = useState<string[]>([]);
+  const [newFolderName, setNewFolderName] = useState('');
+  const [newFolderVisible, setNewFolderVisible] = useState(false);
+  const [searchText, setSearchText] = useState('');
 
   const browseQuery = useServerPathBrowse({
     path: browsePath,
-    enabled: open,
+    enabled: true,
   });
-
-  useEffect(() => {
-    if (!open || !browseQuery.data) {
-      return;
-    }
-    if (draftPath.trim().length === 0) {
-      setDraftPath(browseQuery.data.currentPath);
-    }
-  }, [browseQuery.data, draftPath, open]);
-
-  const normalizedDraftPath = draftPath.trim();
-  const submitDisabled = normalizedDraftPath.length === 0 || isSaving;
+  const createDirectoryMutation = useServerPathCreateDirectory();
+  const resolvedBrowsePath = resolveHomeRelativePath(
+    browsePath?.trim() ?? '',
+    browseQuery.data?.homePath,
+  );
+  const canonicalSelectedPath =
+    selectedPath === null
+      ? (browseQuery.data?.currentPath ?? '')
+      : selectedPath === browsePath && browseQuery.data?.currentPath === resolvedBrowsePath
+        ? browseQuery.data.currentPath
+        : selectedPath;
+  const normalizedSelectedPath = canonicalSelectedPath.trim();
+  const submitDisabled = normalizedSelectedPath.length === 0 || isSaving;
+  const addressPath = resolvedBrowsePath || browseQuery.data?.currentPath || '';
+  const visibleBreadcrumbs =
+    !browsePath || browseQuery.data?.currentPath === addressPath
+      ? (browseQuery.data?.breadcrumbs ?? [])
+      : [];
   const errorMessage = useMemo(() => {
     if (!browseQuery.error) {
       return null;
@@ -80,14 +166,25 @@ export function ServerPathPickerDialog({
       ? browseQuery.error.message
       : String(browseQuery.error);
   }, [browseQuery.error]);
+  const createDirectoryErrorMessage = useMemo(() => {
+    if (!createDirectoryMutation.error) {
+      return null;
+    }
+    return createDirectoryMutation.error instanceof Error
+      ? createDirectoryMutation.error.message
+      : String(createDirectoryMutation.error);
+  }, [createDirectoryMutation.error]);
 
   const normalizedSearchText = searchText.trim().toLowerCase();
+  const directoryEntries = useMemo(
+    () => (browseQuery.data?.entries ?? []).filter((entry) => entry.kind === 'directory'),
+    [browseQuery.data?.entries],
+  );
   const filteredEntries = useMemo(() => {
-    const entries = browseQuery.data?.entries ?? [];
     if (normalizedSearchText.length === 0) {
-      return entries;
+      return directoryEntries;
     }
-    return entries.filter((entry) => {
+    return directoryEntries.filter((entry) => {
       const normalizedName = entry.name.toLowerCase();
       const normalizedPath = entry.path.toLowerCase();
       return (
@@ -95,188 +192,182 @@ export function ServerPathPickerDialog({
         normalizedPath.includes(normalizedSearchText)
       );
     });
-  }, [browseQuery.data?.entries, normalizedSearchText]);
+  }, [directoryEntries, normalizedSearchText]);
 
-  const navigateTo = (path: string | null) => {
+  const showPath = (path: string) => {
     setBrowsePath(path);
+    setSelectedPath(path);
     setSearchText('');
-    if (path) {
-      setDraftPath(path);
+    setNewFolderVisible(false);
+    setNewFolderName('');
+    createDirectoryMutation.reset();
+  };
+
+  const navigateTo = (path: string) => {
+    const nextPath = path.trim();
+    if (!nextPath) {
+      return;
+    }
+    const visiblePath = addressPath;
+    if (visiblePath && visiblePath !== nextPath) {
+      setBackPaths((paths) => [...paths, visiblePath].slice(-50));
+    }
+    setForwardPaths([]);
+    showPath(nextPath);
+  };
+
+  const navigateBack = () => {
+    const targetPath = backPaths.at(-1);
+    if (!targetPath) {
+      return;
+    }
+    const visiblePath = addressPath;
+    setBackPaths((paths) => paths.slice(0, -1));
+    if (visiblePath) {
+      setForwardPaths((paths) => [visiblePath, ...paths].slice(0, 50));
+    }
+    showPath(targetPath);
+  };
+
+  const navigateForward = () => {
+    const targetPath = forwardPaths[0];
+    if (!targetPath) {
+      return;
+    }
+    const visiblePath = addressPath;
+    setForwardPaths((paths) => paths.slice(1));
+    if (visiblePath) {
+      setBackPaths((paths) => [...paths, visiblePath].slice(-50));
     }
+    showPath(targetPath);
   };
 
+  const createDirectory = async () => {
+    const parentPath = browseQuery.data?.currentPath;
+    const name = newFolderName.trim();
+    if (!parentPath || !name || createDirectoryMutation.isPending) {
+      return;
+    }
+    try {
+      const created = await createDirectoryMutation.mutateAsync({ parentPath, name });
+      await browseQuery.refetch();
+      setSelectedPath(created.path);
+      setNewFolderName('');
+      setNewFolderVisible(false);
+    } catch {
+      // The mutation owns the user-visible error state rendered below the input.
+    }
+  };
+
+  const emptyMessage = browseQuery.isLoading
+    ? t('loading')
+    : errorMessage
+      ? `${t('pathBrowseFailed')}: ${errorMessage}`
+      : directoryEntries.length > 0
+        ? t('pathPickerSearchEmpty')
+        : t('emptyDirectory');
+  const navigationDisabled = isSaving || browseQuery.isLoading;
+
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(nextOpen) => {
-        if (isSaving) {
+    <form
+      className="flex min-h-0 min-w-0 flex-col overflow-hidden"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (submitDisabled) {
           return;
         }
-        onOpenChange(nextOpen);
+        void onConfirm(normalizedSelectedPath);
       }}
     >
-      <DialogContent className="max-h-[85vh] overflow-hidden sm:h-[42rem] sm:max-w-2xl sm:grid-rows-[auto_minmax(0,1fr)]">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          {description ? (
-            <DialogDescription>{description}</DialogDescription>
-          ) : null}
-        </DialogHeader>
-        <form
-          className="flex min-h-0 flex-col gap-4"
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (submitDisabled) {
-              return;
-            }
-            void onConfirm(normalizedDraftPath);
-          }}
-        >
-          <div className="space-y-2">
-            <Label htmlFor="server-path-picker-input">{pathLabel}</Label>
-            <div className="flex gap-2">
-              <Input
-                id="server-path-picker-input"
-                value={draftPath}
-                onChange={(event) => setDraftPath(event.target.value)}
-                placeholder={pathPlaceholder}
-                autoFocus
-                disabled={isSaving}
-              />
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => navigateTo(normalizedDraftPath || null)}
-                disabled={isSaving}
-              >
-                {t('openPath')}
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-gray-200 bg-gray-50/70">
-            <div className="flex flex-wrap items-center gap-2 border-b border-gray-200 px-3 py-2">
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => navigateTo(browseQuery.data?.homePath ?? null)}
-                disabled={isSaving || browseQuery.isLoading}
-              >
-                <Home className="mr-1 h-4 w-4" />
-                {t('homeDirectory')}
-              </Button>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => navigateTo(browseQuery.data?.parentPath ?? null)}
-                disabled={!browseQuery.data?.parentPath || isSaving || browseQuery.isLoading}
-              >
-                <FolderUp className="mr-1 h-4 w-4" />
-                {t('parentDirectory')}
-              </Button>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  void browseQuery.refetch();
-                }}
-                disabled={isSaving || browseQuery.isLoading}
-              >
-                <RefreshCcw className="mr-1 h-4 w-4" />
-                {t('chatRefresh')}
-              </Button>
-            </div>
+          <ServerPathPickerNavigationBar
+            addressPath={addressPath}
+            breadcrumbs={visibleBreadcrumbs}
+            canGoBack={backPaths.length > 0}
+            canGoForward={forwardPaths.length > 0}
+            canGoUp={Boolean(browseQuery.data?.parentPath)}
+            disabled={navigationDisabled}
+            onBack={navigateBack}
+            onForward={navigateForward}
+            onNavigate={navigateTo}
+            onRefresh={() => void browseQuery.refetch()}
+            onSearchChange={setSearchText}
+            onUp={() => {
+              const parentPath = browseQuery.data?.parentPath;
+              if (parentPath) {
+                navigateTo(parentPath);
+              }
+            }}
+            searchText={searchText}
+          />
 
-            <div className="border-b border-gray-200 px-3 py-2">
-              <div className="mb-2 text-xs font-medium text-gray-500">
-                {t('currentDirectory')}
-              </div>
-              <div className="flex flex-wrap items-center gap-1 text-xs text-gray-600">
-                {browseQuery.data?.breadcrumbs.map((breadcrumb, index) => (
-                  <div key={breadcrumb.path} className="flex items-center gap-1">
-                    <button
-                      type="button"
-                      className="rounded px-1.5 py-0.5 hover:bg-gray-200"
-                      onClick={() => navigateTo(breadcrumb.path)}
-                      disabled={isSaving}
-                    >
-                      {breadcrumb.label}
-                    </button>
-                    {index < browseQuery.data.breadcrumbs.length - 1 ? (
-                      <ChevronRight className="h-3 w-3 text-gray-400" />
-                    ) : null}
-                  </div>
-                ))}
-              </div>
-            </div>
+          <ServerPathPickerToolbar
+            disabled={navigationDisabled || !browseQuery.data?.currentPath}
+            onNewFolder={() => {
+              setNewFolderVisible(true);
+              setNewFolderName('');
+              createDirectoryMutation.reset();
+            }}
+          />
 
-            <div className="border-b border-gray-200 px-3 py-2">
-              <div className="relative">
-                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-                <Input
-                  value={searchText}
-                  onChange={(event) => setSearchText(event.target.value)}
-                  placeholder={t('pathPickerSearchPlaceholder')}
-                  disabled={isSaving || browseQuery.isLoading}
-                  className="pl-9"
-                />
-              </div>
-            </div>
-
-            <ScrollArea className="min-h-0 flex-1 px-2 py-2">
-              {browseQuery.isLoading ? (
-                <div className="px-2 py-6 text-sm text-gray-500">{t('loading')}</div>
-              ) : errorMessage ? (
-                <div className="px-2 py-4 text-sm text-destructive">
-                  {t('pathBrowseFailed')}: {errorMessage}
-                </div>
-              ) : browseQuery.data && filteredEntries.length > 0 ? (
-                <div className="space-y-1">
-                  {filteredEntries.map((entry) => (
-                    <button
-                      key={entry.path}
-                      type="button"
-                      className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-gray-700 transition-colors hover:bg-white"
-                      onClick={() => navigateTo(entry.path)}
-                      disabled={isSaving}
-                    >
-                      <Folder className="h-4 w-4 shrink-0 text-emerald-600" />
-                      <span className="truncate">{entry.name}</span>
-                    </button>
-                  ))}
-                </div>
-              ) : browseQuery.data && browseQuery.data.entries.length > 0 ? (
-                <div className="px-2 py-6 text-sm text-gray-500">
-                  {t('pathPickerSearchEmpty')}
-                </div>
-              ) : (
-                <div className="px-2 py-6 text-sm text-gray-500">{t('emptyDirectory')}</div>
-              )}
-            </ScrollArea>
+          <div className="relative border-b border-border p-2 sm:hidden">
+            <Search className="pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={searchText}
+              onChange={(event) => setSearchText(event.target.value)}
+              placeholder={t('pathPickerSearchPlaceholder')}
+              disabled={navigationDisabled}
+              className="h-9 pl-9"
+            />
           </div>
 
-          {hint ? (
-            <p className="text-xs leading-relaxed text-gray-500">{hint}</p>
+          {newFolderVisible ? (
+            <ServerPathPickerNewFolder
+              errorMessage={createDirectoryErrorMessage}
+              isCreating={createDirectoryMutation.isPending}
+              name={newFolderName}
+              onCancel={() => setNewFolderVisible(false)}
+              onCreate={() => void createDirectory()}
+              onNameChange={(name) => {
+                setNewFolderName(name);
+                createDirectoryMutation.reset();
+              }}
+            />
           ) : null}
 
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
+          <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden">
+            <ServerPathPickerLocations
+              currentPath={addressPath}
+              defaultWorkspacePath={
+                resolveHomeRelativePath(defaultWorkspacePath, browseQuery.data?.homePath) ||
+                null
+              }
+              disabled={navigationDisabled}
+              homePath={browseQuery.data?.homePath}
+              locations={browseQuery.data?.locations ?? []}
+              rootPath={browseQuery.data?.breadcrumbs[0]?.path}
+              onNavigate={navigateTo}
+            />
+            <ServerPathPickerDirectoryList
+              entries={filteredEntries}
+              emptyMessage={emptyMessage}
               disabled={isSaving}
-            >
-              {t('cancel')}
-            </Button>
-            <Button type="submit" disabled={submitDisabled}>
-              {isSaving ? t('saving') : confirmLabel}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+              onOpen={navigateTo}
+              onSelect={setSelectedPath}
+              selectedPath={normalizedSelectedPath}
+            />
+          </div>
+
+          <ServerPathPickerFooter
+            confirmLabel={confirmLabel}
+            disabled={submitDisabled}
+            hint={hint}
+            isSaving={isSaving}
+            onCancel={onCancel}
+            onSelectedPathChange={setSelectedPath}
+            pathLabel={pathLabel}
+            pathPlaceholder={pathPlaceholder}
+            selectedPath={canonicalSelectedPath}
+          />
+    </form>
   );
 }

package/src/shared/components/path-picker/server-path-picker-directory-list.tsx

@@ -0,0 +1,103 @@
+import type { KeyboardEvent } from 'react';
+import { Folder } from 'lucide-react';
+import type { ServerPathEntryView } from '@/shared/lib/api';
+import { ScrollArea } from '@/shared/components/ui/scroll-area';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
+
+type ServerPathPickerDirectoryListProps = {
+  entries: readonly ServerPathEntryView[];
+  emptyMessage: string;
+  disabled: boolean;
+  onOpen: (path: string) => void;
+  onSelect: (path: string) => void;
+  selectedPath: string;
+};
+
+export function ServerPathPickerDirectoryList({
+  entries,
+  emptyMessage,
+  disabled,
+  onOpen,
+  onSelect,
+  selectedPath,
+}: ServerPathPickerDirectoryListProps) {
+  const moveSelection = (
+    event: KeyboardEvent<HTMLButtonElement>,
+    direction: -1 | 1,
+  ) => {
+    event.preventDefault();
+    const rows = Array.from(
+      event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(
+        '[data-server-path-row]',
+      ) ?? [],
+    );
+    const currentIndex = rows.indexOf(event.currentTarget);
+    const nextRow = rows[currentIndex + direction];
+    if (!nextRow) {
+      return;
+    }
+    nextRow.focus();
+    nextRow.click();
+  };
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col bg-background">
+      <div className="grid grid-cols-[minmax(0,1fr)_8rem] border-b border-border bg-muted/20 px-3 py-1.5 text-xs text-muted-foreground">
+        <span>{t('pathPickerNameColumn')}</span>
+        <span>{t('pathPickerTypeColumn')}</span>
+      </div>
+      <ScrollArea className="min-h-0 flex-1">
+        {entries.length > 0 ? (
+          <div role="listbox" aria-label={t('pathPickerDirectoryList')} className="p-1.5">
+            {entries.map((entry) => {
+              const selected = selectedPath === entry.path;
+              return (
+                <button
+                  key={entry.path}
+                  type="button"
+                  role="option"
+                  aria-selected={selected}
+                  data-server-path-row
+                  className={cn(
+                    'grid w-full grid-cols-[minmax(0,1fr)_8rem] items-center rounded-sm border border-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors',
+                    selected
+                      ? 'border-primary/25 bg-primary/15'
+                      : 'hover:bg-accent/70 focus-visible:border-primary/35 focus-visible:bg-accent/70',
+                  )}
+                  onClick={() => onSelect(entry.path)}
+                  onDoubleClick={() => onOpen(entry.path)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      onOpen(entry.path);
+                    }
+                    if (event.key === 'ArrowDown') {
+                      moveSelection(event, 1);
+                    }
+                    if (event.key === 'ArrowUp') {
+                      moveSelection(event, -1);
+                    }
+                  }}
+                  disabled={disabled}
+                >
+                  <span className="flex min-w-0 items-center gap-2">
+                    <Folder className="h-4 w-4 shrink-0 fill-amber-300 text-amber-500" />
+                    <span className="truncate">{entry.name}</span>
+                  </span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {t('pathPickerDirectoryType')}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="grid h-full min-h-48 place-items-center px-6 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}