@nextclaw/ui 0.15.5 → 0.15.7

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

@@ -0,0 +1,58 @@
+import { Button } from '@/shared/components/ui/button';
+import { DialogFooter } from '@/shared/components/ui/dialog';
+import { Input } from '@/shared/components/ui/input';
+import { Label } from '@/shared/components/ui/label';
+import { t } from '@/shared/lib/i18n';
+
+type ServerPathPickerFooterProps = {
+  confirmLabel: string;
+  disabled: boolean;
+  hint?: string;
+  isSaving: boolean;
+  onCancel: () => void;
+  onSelectedPathChange: (path: string) => void;
+  pathLabel: string;
+  pathPlaceholder?: string;
+  selectedPath: string;
+};
+
+export function ServerPathPickerFooter({
+  confirmLabel,
+  disabled,
+  hint,
+  isSaving,
+  onCancel,
+  onSelectedPathChange,
+  pathLabel,
+  pathPlaceholder,
+  selectedPath,
+}: ServerPathPickerFooterProps) {
+  return (
+    <div className="min-w-0 border-t border-border bg-muted/20 px-4 py-3">
+      <div className="flex min-w-0 items-center gap-3">
+        <Label htmlFor="server-path-picker-selection" className="shrink-0 text-sm">
+          {pathLabel}
+        </Label>
+        <Input
+          id="server-path-picker-selection"
+          value={selectedPath}
+          onChange={(event) => onSelectedPathChange(event.target.value)}
+          placeholder={pathPlaceholder}
+          disabled={isSaving}
+          className="h-9 min-w-0 flex-1 bg-background"
+        />
+        <DialogFooter className="shrink-0 flex-row gap-2">
+          <Button type="button" variant="outline" onClick={onCancel} disabled={isSaving}>
+            {t('cancel')}
+          </Button>
+          <Button type="submit" disabled={disabled}>
+            {isSaving ? t('saving') : confirmLabel}
+          </Button>
+        </DialogFooter>
+      </div>
+      {hint ? (
+        <p className="mt-2 text-xs leading-relaxed text-muted-foreground">{hint}</p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,148 @@
+import {
+  AppWindow,
+  Cloud,
+  Download,
+  FileText,
+  FolderKanban,
+  HardDrive,
+  Home,
+  Monitor,
+  Star,
+} from 'lucide-react';
+import type { ServerPathLocationView } from '@/shared/lib/api';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
+
+type ServerPathPickerLocationItem = {
+  icon: 'applications' | 'desktop' | 'documents' | 'downloads' | 'home' | 'icloud-drive' | 'root' | 'volumes' | 'workspace';
+  label: string;
+  path: string;
+};
+
+type ServerPathPickerLocationsProps = {
+  currentPath: string;
+  defaultWorkspacePath?: string | null;
+  disabled: boolean;
+  homePath?: string | null;
+  locations: readonly ServerPathLocationView[];
+  rootPath?: string | null;
+  onNavigate: (path: string) => void;
+};
+
+const locationIcons = {
+  applications: AppWindow,
+  desktop: Monitor,
+  documents: FileText,
+  downloads: Download,
+  home: Home,
+  'icloud-drive': Cloud,
+  workspace: FolderKanban,
+  root: HardDrive,
+  volumes: HardDrive,
+};
+
+const locationLabelKeys: Record<ServerPathLocationView['kind'], string> = {
+  applications: 'pathPickerApplications',
+  desktop: 'pathPickerDesktop',
+  documents: 'pathPickerDocuments',
+  downloads: 'pathPickerDownloads',
+  'icloud-drive': 'pathPickerICloudDrive',
+  volumes: 'pathPickerVolumes',
+};
+
+export function ServerPathPickerLocations({
+  currentPath,
+  defaultWorkspacePath,
+  disabled,
+  homePath,
+  locations,
+  rootPath,
+  onNavigate,
+}: ServerPathPickerLocationsProps) {
+  const favoriteItems: ServerPathPickerLocationItem[] = [];
+  const locationItems: ServerPathPickerLocationItem[] = [];
+  const knownPaths = new Set<string>();
+  const appendLocation = (
+    target: ServerPathPickerLocationItem[],
+    item: ServerPathPickerLocationItem,
+  ) => {
+    const path = item.path.trim();
+    if (!path || knownPaths.has(path)) {
+      return;
+    }
+    knownPaths.add(path);
+    target.push({ ...item, path });
+  };
+
+  if (defaultWorkspacePath) {
+    appendLocation(favoriteItems, {
+      icon: 'workspace',
+      label: t('pathPickerDefaultWorkspace'),
+      path: defaultWorkspacePath,
+    });
+  }
+  if (homePath) {
+    appendLocation(favoriteItems, {
+      icon: 'home',
+      label: t('homeDirectory'),
+      path: homePath,
+    });
+  }
+  for (const location of locations) {
+    appendLocation(location.kind === 'volumes' ? locationItems : favoriteItems, {
+      icon: location.kind,
+      label: t(locationLabelKeys[location.kind]),
+      path: location.path,
+    });
+  }
+  if (rootPath) {
+    appendLocation(locationItems, {
+      icon: 'root',
+      label: t('pathPickerFileSystem'),
+      path: rootPath,
+    });
+  }
+
+  const renderItems = (items: ServerPathPickerLocationItem[]) => items.map((item) => {
+    const Icon = locationIcons[item.icon];
+    const active = currentPath === item.path;
+    return (
+      <button
+        key={item.path}
+        type="button"
+        className={cn(
+          'flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
+          active ? 'bg-primary/12 text-primary' : 'text-foreground hover:bg-accent',
+        )}
+        aria-current={active ? 'location' : undefined}
+        onClick={() => onNavigate(item.path)}
+        disabled={disabled}
+      >
+        <Icon className={cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-amber-500')} />
+        <span className="truncate">{item.label}</span>
+      </button>
+    );
+  });
+
+  return (
+    <aside className="hidden min-h-0 w-48 shrink-0 overflow-y-auto border-r border-border bg-muted/20 p-2 sm:block">
+      <div className="mb-1 flex items-center gap-2 px-2 py-1.5 text-xs font-medium text-muted-foreground">
+        <Star className="h-3.5 w-3.5" />
+        {t('pathPickerQuickAccess')}
+      </div>
+      <nav aria-label={t('pathPickerQuickAccess')} className="space-y-0.5">
+        {renderItems(favoriteItems)}
+      </nav>
+      {locationItems.length > 0 ? (
+        <>
+          <div className="mb-1 mt-3 px-2 py-1.5 text-xs font-medium text-muted-foreground">
+            {t('pathPickerLocations')}
+          </div>
+          <nav aria-label={t('pathPickerLocations')} className="space-y-0.5">
+            {renderItems(locationItems)}
+          </nav>
+        </>
+      ) : null}
+    </aside>
+  );
+}

package/src/shared/components/path-picker/server-path-picker-navigation-bar.tsx

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+import {
+  ArrowLeft,
+  ArrowRight,
+  ChevronRight,
+  Folder,
+  FolderUp,
+  Pencil,
+  RefreshCcw,
+  Search,
+} from 'lucide-react';
+import type { ServerPathBreadcrumbView } from '@/shared/lib/api';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { Input } from '@/shared/components/ui/input';
+import { t } from '@/shared/lib/i18n';
+
+type ServerPathPickerNavigationBarProps = {
+  addressPath: string;
+  breadcrumbs: readonly ServerPathBreadcrumbView[];
+  canGoBack: boolean;
+  canGoForward: boolean;
+  canGoUp: boolean;
+  disabled: boolean;
+  onBack: () => void;
+  onForward: () => void;
+  onNavigate: (path: string) => void;
+  onRefresh: () => void;
+  onSearchChange: (value: string) => void;
+  onUp: () => void;
+  searchText: string;
+};
+
+export function ServerPathPickerNavigationBar({
+  addressPath,
+  breadcrumbs,
+  canGoBack,
+  canGoForward,
+  canGoUp,
+  disabled,
+  onBack,
+  onForward,
+  onNavigate,
+  onRefresh,
+  onSearchChange,
+  onUp,
+  searchText,
+}: ServerPathPickerNavigationBarProps) {
+  const [editingAddress, setEditingAddress] = useState(false);
+  const [addressDraft, setAddressDraft] = useState('');
+  const addressBreadcrumbs =
+    breadcrumbs.length > 5
+      ? [breadcrumbs[0], ...breadcrumbs.slice(-4)]
+      : breadcrumbs;
+  const breadcrumbsCollapsed = addressBreadcrumbs.length < breadcrumbs.length;
+
+  const beginAddressEdit = () => {
+    if (disabled) {
+      return;
+    }
+    setAddressDraft(addressPath);
+    setEditingAddress(true);
+  };
+
+  const cancelAddressEdit = () => {
+    setAddressDraft('');
+    setEditingAddress(false);
+  };
+
+  const openAddress = () => {
+    const nextPath = addressDraft.trim();
+    if (!nextPath) {
+      return;
+    }
+    setEditingAddress(false);
+    onNavigate(nextPath);
+  };
+
+  return (
+    <div className="flex min-w-0 items-center gap-1.5 overflow-hidden border-b border-border bg-muted/25 px-3 py-2">
+      <IconActionButton
+        icon={<ArrowLeft className="h-4 w-4" />}
+        label={t('pathPickerBack')}
+        size="lg"
+        onClick={onBack}
+        disabled={!canGoBack || disabled}
+      />
+      <IconActionButton
+        icon={<ArrowRight className="h-4 w-4" />}
+        label={t('pathPickerForward')}
+        size="lg"
+        onClick={onForward}
+        disabled={!canGoForward || disabled}
+      />
+      <IconActionButton
+        icon={<FolderUp className="h-4 w-4" />}
+        label={t('parentDirectory')}
+        size="lg"
+        onClick={onUp}
+        disabled={!canGoUp || disabled}
+      />
+
+      <div className="ml-1 flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-border bg-background shadow-sm focus-within:ring-1 focus-within:ring-primary/50">
+        {editingAddress ? (
+          <Input
+            value={addressDraft}
+            onChange={(event) => setAddressDraft(event.target.value)}
+            onBlur={cancelAddressEdit}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault();
+                openAddress();
+              }
+              if (event.key === 'Escape') {
+                event.preventDefault();
+                cancelAddressEdit();
+              }
+            }}
+            aria-label={t('pathPickerAddressLabel')}
+            className="h-full rounded-none border-0 bg-transparent px-3 shadow-none focus-visible:ring-0"
+            autoFocus
+          />
+        ) : (
+          <>
+            <Folder className="ml-3 h-4 w-4 shrink-0 text-amber-500" />
+            <div
+              className="flex min-w-0 flex-1 items-center overflow-hidden pl-2"
+              onDoubleClick={beginAddressEdit}
+            >
+              {addressBreadcrumbs.length > 0 ? (
+                addressBreadcrumbs.map((breadcrumb, index) => (
+                  <div key={breadcrumb.path} className="flex min-w-0 items-center">
+                    {index > 0 ? (
+                      <>
+                        <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                        {breadcrumbsCollapsed && index === 1 ? (
+                          <>
+                            <button
+                              type="button"
+                              className="rounded px-1.5 py-1 text-sm text-muted-foreground hover:bg-accent"
+                              aria-label={t('pathPickerShowFullAddress')}
+                              onClick={beginAddressEdit}
+                            >
+                              …
+                            </button>
+                            <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                          </>
+                        ) : null}
+                      </>
+                    ) : null}
+                    <button
+                      type="button"
+                      className="max-w-40 truncate rounded px-1.5 py-1 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                      onClick={() => onNavigate(breadcrumb.path)}
+                      disabled={disabled}
+                    >
+                      {breadcrumb.label}
+                    </button>
+                  </div>
+                ))
+              ) : (
+                <span className="truncate text-sm text-foreground">{addressPath}</span>
+              )}
+              <span className="h-full min-w-2 flex-1 cursor-text" aria-hidden="true" />
+              <IconActionButton
+                icon={<Pencil className="h-3.5 w-3.5" />}
+                label={t('pathPickerEditAddress')}
+                size="md"
+                tooltipSide="bottom"
+                onClick={beginAddressEdit}
+                disabled={disabled}
+                className="mr-1"
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      <IconActionButton
+        icon={<RefreshCcw className="h-4 w-4" />}
+        label={t('chatRefresh')}
+        size="lg"
+        onClick={onRefresh}
+        disabled={disabled}
+      />
+
+      <div className="relative hidden w-56 shrink-0 sm:block">
+        <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={searchText}
+          onChange={(event) => onSearchChange(event.target.value)}
+          placeholder={t('pathPickerSearchPlaceholder')}
+          disabled={disabled}
+          className="h-9 rounded-md bg-background pl-9"
+        />
+      </div>
+    </div>
+  );
+}

package/src/shared/components/path-picker/server-path-picker-new-folder.tsx

@@ -0,0 +1,59 @@
+import type { KeyboardEvent } from 'react';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { t } from '@/shared/lib/i18n';
+
+type ServerPathPickerNewFolderProps = {
+  errorMessage: string | null;
+  isCreating: boolean;
+  name: string;
+  onCancel: () => void;
+  onCreate: () => void;
+  onNameChange: (name: string) => void;
+};
+
+export function ServerPathPickerNewFolder({
+  errorMessage,
+  isCreating,
+  name,
+  onCancel,
+  onCreate,
+  onNameChange,
+}: ServerPathPickerNewFolderProps) {
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      onCreate();
+    }
+    if (event.key === 'Escape') {
+      onCancel();
+    }
+  };
+
+  return (
+    <div className="border-b border-gray-200 bg-white px-3 py-2">
+      <div className="flex gap-2">
+        <Input
+          value={name}
+          onChange={(event) => onNameChange(event.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t('pathPickerNewFolderPlaceholder')}
+          aria-label={t('pathPickerNewFolderName')}
+          autoFocus
+          disabled={isCreating}
+        />
+        <Button type="button" onClick={onCreate} disabled={!name.trim() || isCreating}>
+          {isCreating ? t('saving') : t('pathPickerCreateFolder')}
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel} disabled={isCreating}>
+          {t('cancel')}
+        </Button>
+      </div>
+      {errorMessage ? (
+        <p role="alert" className="mt-2 text-sm text-destructive">
+          {t('pathPickerCreateFolderFailed')}: {errorMessage}
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { FolderPlus } from 'lucide-react';
+import { Button } from '@/shared/components/ui/button';
+import { t } from '@/shared/lib/i18n';
+
+type ServerPathPickerToolbarProps = {
+  disabled: boolean;
+  onNewFolder: () => void;
+};
+
+export function ServerPathPickerToolbar({
+  disabled,
+  onNewFolder,
+}: ServerPathPickerToolbarProps) {
+  return (
+    <div className="flex items-center border-b border-border bg-background px-3 py-1.5">
+      <Button type="button" variant="ghost" size="sm" onClick={onNewFolder} disabled={disabled}>
+        <FolderPlus className="mr-1 h-4 w-4" />
+        {t('pathPickerNewFolder')}
+      </Button>
+      <span className="ml-auto text-xs text-muted-foreground">
+        {t('pathPickerDoubleClickHint')}
+      </span>
+    </div>
+  );
+}

package/src/shared/hooks/use-projects.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { createProject, fetchProjects } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
+
+const PROJECTS_QUERY_KEY = ["projects"] as const;
+
+export function useProjects() {
+  return useQuery({
+    queryKey: PROJECTS_QUERY_KEY,
+    queryFn: fetchProjects,
+    staleTime: 30_000,
+  });
+}
+
+export function useCreateProject() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createProject,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: PROJECTS_QUERY_KEY });
+      toast.success(t("chatProjectCreated"));
+    },
+    onError: (error: Error) => {
+      toast.error(`${t("chatProjectCreateFailed")}: ${error.message}`);
+    },
+  });
+}

package/src/shared/hooks/use-server-path-create-directory.ts

@@ -0,0 +1,6 @@
+import { useMutation } from '@tanstack/react-query';
+import { createServerPathDirectory } from '@/shared/lib/api';
+
+export function useServerPathCreateDirectory() {
+  return useMutation({ mutationFn: createServerPathDirectory });
+}

package/src/shared/hooks/use-server-path-search.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchServerPathSearch } from '@/shared/lib/api';
+
+export function buildServerPathSearchQueryKey(params: {
+  basePath: string;
+  query?: string | null;
+  limit?: number | null;
+}) {
+  return [
+    'server-path-search',
+    params.basePath.trim(),
+    params.query?.trim() ?? '',
+    params.limit ?? null,
+  ] as const;
+}
+
+export function useServerPathSearch(params: {
+  basePath: string;
+  query?: string | null;
+  limit?: number | null;
+  enabled?: boolean;
+}) {
+  const { enabled, limit } = params;
+  const basePath = params.basePath.trim();
+  const query = params.query?.trim() ?? '';
+  return useQuery({
+    queryKey: buildServerPathSearchQueryKey({
+      basePath,
+      query,
+      limit,
+    }),
+    queryFn: () => fetchServerPathSearch({
+      basePath,
+      query,
+      limit,
+    }),
+    enabled: (enabled ?? true) && Boolean(basePath),
+    staleTime: 5_000,
+  });
+}

package/src/shared/lib/api/index.ts

@@ -10,6 +10,7 @@ export * from './utils/marketplace.utils';
 export * from './utils/mcp-marketplace.utils';
 export * from './utils/ncp-attachments.utils';
 export * from './utils/ncp-session.utils';
+export * from './projects/project.utils';
 export * from './preferences/preference.utils';
 export * from './preferences/preference.types';
 export * from './preferences/preference-keys.config';

package/src/shared/lib/api/projects/project.utils.ts

@@ -0,0 +1,14 @@
+import { nextclawClient } from "@/shared/lib/api/managers/client.manager";
+import type {
+  ProjectCreateRequest,
+  ProjectListView,
+  ProjectView,
+} from "@nextclaw/client-sdk";
+
+export async function fetchProjects(): Promise<ProjectListView> {
+  return await nextclawClient.projects.list();
+}
+
+export async function createProject(input: ProjectCreateRequest): Promise<ProjectView> {
+  return await nextclawClient.projects.create(input);
+}

package/src/shared/lib/api/types.ts

@@ -1,5 +1,6 @@
 import type { NcpSessionStatus } from '@nextclaw/ncp';
 import type { RuntimeEntryView, NcpSessionSummaryView } from './ncp-session.types';
+export type { ProjectCreateRequest, ProjectListView, ProjectTemplateView, ProjectView } from '@nextclaw/client-sdk';
 export type { SessionEntryView, RuntimeEntryView, SessionTypeIconView, SessionMessageView, SessionEventView, NcpSessionSummaryView, NcpSessionsListView, NcpMessageView, NcpSessionMessagesView, SessionContextWindowView } from './ncp-session.types';
 
 // API Types - matching backend response format
@@ -359,14 +360,40 @@ export type ServerPathEntryView = { name: string; path: string; kind: "directory
 
 export type ServerPathBreadcrumbView = { label: string; path: string };
 
+export type ServerPathLocationView = {
+  kind: "desktop" | "documents" | "downloads" | "icloud-drive" | "applications" | "volumes";
+  path: string;
+};
+
 export type ServerPathBrowseView = {
   currentPath: string;
   parentPath: string | null;
   homePath: string;
   breadcrumbs: ServerPathBreadcrumbView[];
   entries: ServerPathEntryView[];
+  locations: ServerPathLocationView[];
 };
 
+export type ServerPathSearchEntryView = {
+  name: string;
+  path: string;
+  relativePath: string;
+  parentRelativePath: string;
+  kind: "directory" | "file";
+  hidden: boolean;
+};
+
+export type ServerPathSearchView = {
+  basePath: string;
+  query: string;
+  entries: ServerPathSearchEntryView[];
+  truncated: boolean;
+};
+
+export type ServerPathDirectoryCreateRequest = { parentPath: string; name: string };
+
+export type ServerPathDirectoryCreateView = { path: string };
+
 export type ServerPathReadView = { requestedPath: string; resolvedPath: string; kind: "text" | "markdown" | "binary"; sizeBytes: number; startLine?: number; truncated: boolean; text?: string; languageHint?: string | null };
 
 export type PanelAppEntryView = {

package/src/shared/lib/api/utils/server-path.utils.ts

@@ -1,6 +1,12 @@
 import { API_BASE } from '@/shared/lib/api/api-base';
 import { nextclawClient } from '@/shared/lib/api/managers/client.manager';
-import type { ServerPathBrowseView, ServerPathReadView } from '@/shared/lib/api/types';
+import type {
+  ServerPathBrowseView,
+  ServerPathDirectoryCreateRequest,
+  ServerPathDirectoryCreateView,
+  ServerPathReadView,
+  ServerPathSearchView,
+} from '@/shared/lib/api/types';
 
 const SERVER_PATH_CONTENT_BASE_PATH = '/api/server-paths/content';
 
@@ -12,6 +18,12 @@ export async function fetchServerPathBrowse(params?: {
   return await nextclawClient.serverPaths.browse(params);
 }
 
+export async function createServerPathDirectory(
+  input: ServerPathDirectoryCreateRequest,
+): Promise<ServerPathDirectoryCreateView> {
+  return await nextclawClient.serverPaths.createDirectory(input);
+}
+
 export async function fetchServerPathRead(params: {
   path: string;
   basePath?: string | null;
@@ -20,6 +32,14 @@ export async function fetchServerPathRead(params: {
   return await nextclawClient.serverPaths.read(params);
 }
 
+export async function fetchServerPathSearch(params: {
+  basePath: string;
+  query?: string | null;
+  limit?: number | null;
+}): Promise<ServerPathSearchView> {
+  return await nextclawClient.serverPaths.search(params);
+}
+
 export function buildServerPathContentUrl(path: string): string;
 export function buildServerPathContentUrl(
   path: string,