@leanspec/ui 0.2.14 → 0.2.15-dev.21025278490

package/src/components/metadata-editors/StatusEditor.tsx

@@ -1,85 +0,0 @@
-import { useState } from 'react';
-import { Archive, CheckCircle2, Clock, Loader2, PlayCircle } from 'lucide-react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
-import { api } from '../../lib/api';
-import type { Spec } from '../../types/api';
-import { useTranslation } from 'react-i18next';
-
-const STATUS_OPTIONS: Array<{ value: NonNullable<Spec['status']>; labelKey: `status.${string}`; className: string; Icon: React.ComponentType<{ className?: string }> }> = [
-  { value: 'planned', labelKey: 'status.planned', className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400', Icon: Clock },
-  { value: 'in-progress', labelKey: 'status.inProgress', className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400', Icon: PlayCircle },
-  { value: 'complete', labelKey: 'status.complete', className: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400', Icon: CheckCircle2 },
-  { value: 'archived', labelKey: 'status.archived', className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400', Icon: Archive },
-];
-
-interface StatusEditorProps {
-  specName: string;
-  value: Spec['status'];
-  onChange?: (status: NonNullable<Spec['status']>) => void;
-  disabled?: boolean;
-  className?: string;
-}
-
-export function StatusEditor({ specName, value, onChange, disabled = false, className }: StatusEditorProps) {
-  const initial = value || 'planned';
-  const [status, setStatus] = useState<NonNullable<Spec['status']>>(initial as NonNullable<Spec['status']>);
-  const [updating, setUpdating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const { t } = useTranslation('common');
-
-  const option = STATUS_OPTIONS.find((opt) => opt.value === status) || STATUS_OPTIONS[0];
-
-  const handleChange = async (next: NonNullable<Spec['status']>) => {
-    if (next === status) return;
-    const previous = status;
-    setStatus(next);
-    setUpdating(true);
-    setError(null);
-
-    try {
-      await api.updateSpec(specName, { status: next });
-      onChange?.(next);
-    } catch (err) {
-      setStatus(previous);
-      const message = err instanceof Error ? err.message : t('editors.statusError');
-      setError(message);
-    } finally {
-      setUpdating(false);
-    }
-  };
-
-  return (
-    <div className="space-y-1">
-      <Select value={status} onValueChange={(value) => handleChange(value as NonNullable<Spec['status']>)} disabled={disabled || updating}>
-        <SelectTrigger
-          className={cn(
-            'h-7 w-fit min-w-[120px] border-0 px-2 text-xs font-medium justify-start',
-            option.className,
-            className,
-            updating && 'opacity-70'
-          )}
-          aria-label={t('editors.changeStatus')}
-        >
-          <div className="flex items-center gap-1.5">
-            {updating ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <option.Icon className="h-3.5 w-3.5" />}
-            <SelectValue placeholder={t('specsPage.filters.status')}>
-              {t(option.labelKey)}
-            </SelectValue>
-          </div>
-        </SelectTrigger>
-        <SelectContent>
-          {STATUS_OPTIONS.map((opt) => (
-            <SelectItem key={opt.value} value={opt.value} className="flex items-center gap-2">
-              <div className="flex items-center gap-2">
-                <opt.Icon className="h-4 w-4" />
-                <span>{t(opt.labelKey)}</span>
-              </div>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      {error && <p className="text-xs text-destructive">{error}</p>}
-    </div>
-  );
-}

package/src/components/metadata-editors/TagsEditor.tsx

@@ -1,207 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import { Loader2, Plus, X } from 'lucide-react';
-import {
-  Badge,
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
-import { api } from '../../lib/api';
-import type { Spec } from '../../types/api';
-import { useTranslation } from 'react-i18next';
-
-interface TagsEditorProps {
-  specName: string;
-  value: Spec['tags'];
-  onChange?: (tags: string[]) => void;
-  disabled?: boolean;
-  className?: string;
-}
-
-export function TagsEditor({ specName, value, onChange, disabled = false, className }: TagsEditorProps) {
-  const [tags, setTags] = useState<string[]>(value || []);
-  const [allTags, setAllTags] = useState<string[]>([]);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
-  const { t } = useTranslation('common');
-
-  // Fetch all available tags for autocomplete when popover opens
-  useEffect(() => {
-    if (isOpen && allTags.length === 0) {
-      const fetchTags = async () => {
-        try {
-          const specs = await api.getSpecs();
-          const uniqueTags = new Set<string>();
-          specs.forEach(s => s.tags?.forEach(t => uniqueTags.add(t)));
-          setAllTags(Array.from(uniqueTags).sort());
-        } catch (err) {
-          console.error('Failed to fetch tags:', err);
-        }
-      };
-      void fetchTags();
-    }
-  }, [isOpen, allTags.length]);
-
-  const updateTags = async (newTags: string[]) => {
-    const previousTags = tags;
-    setTags(newTags); // Optimistic update
-    setIsUpdating(true);
-    setError(null);
-
-    try {
-      await api.updateSpec(specName, { tags: newTags });
-      onChange?.(newTags);
-    } catch (err) {
-      setTags(previousTags); // Rollback
-      const errorMessage = err instanceof Error ? err.message : t('editors.tagsError');
-      setError(errorMessage);
-    } finally {
-      setIsUpdating(false);
-    }
-  };
-
-  const handleAddTag = (tag: string) => {
-    const trimmedTag = tag.trim(); // Don't lowercase automatically to preserve user intent, or follow project convention
-    if (!trimmedTag) return;
-    if (tags.includes(trimmedTag)) {
-      setError(t('editors.tagExists'));
-      return;
-    }
-
-    const newTags = [...tags, trimmedTag];
-    void updateTags(newTags);
-    setSearchValue('');
-    setIsOpen(false);
-  };
-
-  const handleRemoveTag = (tagToRemove: string) => {
-    const newTags = tags.filter(t => t !== tagToRemove);
-    void updateTags(newTags);
-  };
-
-  // Filter available tags: show tags that aren't already added and match search
-  const availableTags = useMemo(() => {
-    const lowercaseSearch = searchValue.toLowerCase();
-    return allTags
-      .filter(tag => !tags.includes(tag))
-      .filter(tag => !lowercaseSearch || tag.toLowerCase().includes(lowercaseSearch));
-  }, [allTags, tags, searchValue]);
-
-  // Check if search value could be a new tag (not in available tags)
-  const canCreateNewTag = searchValue.trim() &&
-    !tags.includes(searchValue.trim()) &&
-    !allTags.includes(searchValue.trim());
-
-  return (
-    <div className={cn("relative", className)}>
-      <div className="flex gap-1 flex-wrap items-center">
-        {tags.map((tag) => (
-          <Badge
-            key={tag}
-            variant="outline"
-            className={cn(
-              "text-xs pr-1 gap-1",
-              disabled && "opacity-50"
-            )}
-          >
-            {tag}
-            {!disabled && (
-              <button
-                onClick={() => handleRemoveTag(tag)}
-                disabled={isUpdating}
-                className="ml-1 rounded-full hover:bg-muted p-0.5 transition-colors"
-                aria-label={t('editors.removeTag', { tag })}
-              >
-                <X className="h-3 w-3" />
-              </button>
-            )}
-          </Badge>
-        ))}
-
-        {!disabled && (
-          <Popover open={isOpen} onOpenChange={setIsOpen}>
-            <PopoverTrigger asChild>
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 text-xs"
-                disabled={isUpdating}
-                aria-label={t('editors.addTag')}
-              >
-                {isUpdating ? (
-                  <Loader2 className="h-3 w-3 animate-spin" />
-                ) : (
-                  <Plus className="h-3 w-3" />
-                )}
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-56 p-0" align="start">
-              <Command>
-                <CommandInput
-                  placeholder={t('editors.searchTag')}
-                  value={searchValue}
-                  onValueChange={setSearchValue}
-                />
-                <CommandList>
-                  <CommandEmpty>
-                    {canCreateNewTag ? (
-                      <CommandItem
-                        onSelect={() => handleAddTag(searchValue)}
-                        className="cursor-pointer"
-                      >
-                        <Plus className="mr-2 h-4 w-4" />
-                        {t('editors.createTag', { tag: searchValue.trim() })}
-                      </CommandItem>
-                    ) : (
-                      <span className="text-muted-foreground px-2 py-1.5 text-sm">
-                        {t('editors.noTagResults')}
-                      </span>
-                    )}
-                  </CommandEmpty>
-                  {availableTags.length > 0 && (
-                    <CommandGroup heading={t('editors.existingTags')}>
-                      {availableTags.slice(0, 10).map((tag) => (
-                        <CommandItem
-                          key={tag}
-                          value={tag}
-                          onSelect={() => handleAddTag(tag)}
-                          className="cursor-pointer"
-                        >
-                          {tag}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  )}
-                  {canCreateNewTag && availableTags.length > 0 && (
-                    <CommandGroup heading={t('editors.createSection')}>
-                      <CommandItem
-                        onSelect={() => handleAddTag(searchValue)}
-                        className="cursor-pointer"
-                      >
-                        <Plus className="mr-2 h-4 w-4" />
-                        {t('editors.createTag', { tag: searchValue.trim() })}
-                      </CommandItem>
-                    </CommandGroup>
-                  )}
-                </CommandList>
-              </Command>
-              {error && (
-                <p className="text-xs text-destructive px-2 pb-2">{error}</p>
-              )}
-            </PopoverContent>
-          </Popover>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/projects/CreateProjectDialog.tsx

@@ -1,162 +0,0 @@
-import { useEffect, useState } from 'react';
-import { FolderOpen } from 'lucide-react';
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Input,
-} from '@leanspec/ui-components';
-import { useProject } from '../../contexts';
-import { DirectoryPicker } from './DirectoryPicker';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-
-interface CreateProjectDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogProps) {
-  const { addProject } = useProject();
-  const navigate = useNavigate();
-  const [path, setPath] = useState('');
-  const [mode, setMode] = useState<'picker' | 'manual'>('picker');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const { t } = useTranslation('common');
-
-  useEffect(() => {
-    if (open) {
-      setMode('picker');
-      setPath('');
-      setError(null);
-    }
-  }, [open]);
-
-  const handleAddProject = async (projectPath: string) => {
-    try {
-      setIsLoading(true);
-      setError(null);
-      const project = await addProject(projectPath);
-      onOpenChange(false);
-      if (project?.id) {
-        navigate(`/projects/${project.id}/specs`);
-      } else {
-        navigate('/');
-      }
-      return project;
-    } catch (err) {
-      const message = err instanceof Error ? err.message : t('createProject.toastError');
-      setError(message);
-      return null;
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    if (!path.trim()) {
-      setError(t('createProject.pathRequired'));
-      return;
-    }
-    void handleAddProject(path.trim());
-  };
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(next) => {
-        onOpenChange(next);
-        if (!next) setError(null);
-      }}
-    >
-      <DialogContent className="sm:max-w-[600px]">
-        <DialogHeader>
-          <DialogTitle>{t('createProject.title')}</DialogTitle>
-          <DialogDescription>
-            {mode === 'picker'
-              ? t('createProject.descriptionPicker')
-              : t('createProject.descriptionManual')}
-          </DialogDescription>
-        </DialogHeader>
-
-        {mode === 'picker' ? (
-          <div className="space-y-2 min-w-0 overflow-hidden">
-            <DirectoryPicker
-              onSelect={handleAddProject}
-              onCancel={() => onOpenChange(false)}
-              initialPath={path}
-              actionLabel={isLoading ? t('createProject.adding') : t('createProject.action')}
-              isLoading={isLoading}
-            />
-            <div className="flex justify-center">
-              <Button
-                variant="link"
-                size="sm"
-                onClick={() => setMode('manual')}
-                className="text-muted-foreground"
-              >
-                {t('createProject.enterManually')}
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="grid gap-2">
-              <label
-                htmlFor="project-path"
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                {t('createProject.pathLabel')}
-              </label>
-              <div className="flex gap-2">
-                <Input
-                  id="project-path"
-                  value={path}
-                  onChange={(event) => setPath(event.target.value)}
-                  placeholder={t('createProject.pathPlaceholder')}
-                  className="flex-1"
-                  disabled={isLoading}
-                />
-              </div>
-              <p className="text-xs text-muted-foreground">
-                {t('createProject.pathHelp')}
-              </p>
-            </div>
-            {error && <p className="text-sm text-destructive">{error}</p>}
-            <DialogFooter className="flex-col sm:flex-row gap-2">
-              <div className="flex-1 flex justify-start">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setMode('picker')}
-                >
-                  <FolderOpen className="h-4 w-4 mr-2" />
-                  {t('createProject.browseFolders')}
-                </Button>
-              </div>
-              <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
-                {t('actions.cancel')}
-              </Button>
-              <Button type="submit" disabled={isLoading || !path.trim()}>
-                {isLoading ? t('createProject.adding') : t('createProject.action')}
-              </Button>
-            </DialogFooter>
-          </form>
-        )}
-
-        {error && (
-          <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
-            {error}
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/projects/DirectoryPicker.tsx

@@ -1,182 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { ArrowLeft, ChevronRight, Folder, Home, Loader2 } from 'lucide-react';
-import { Button } from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
-import { api } from '../../lib/api';
-import type { DirectoryListResponse } from '../../types/api';
-import { useTranslation } from 'react-i18next';
-
-interface DirectoryPickerProps {
-  onSelect: (path: string) => void;
-  onCancel: () => void;
-  initialPath?: string;
-  actionLabel?: string;
-  isLoading?: boolean;
-}
-
-export function DirectoryPicker({
-  onSelect,
-  onCancel,
-  initialPath,
-  actionLabel,
-  isLoading: externalLoading,
-}: DirectoryPickerProps) {
-  const [currentPath, setCurrentPath] = useState(initialPath || '');
-  const [items, setItems] = useState<DirectoryListResponse['items']>([]);
-  const [internalLoading, setInternalLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const { t } = useTranslation('common');
-
-  const isLoading = externalLoading || internalLoading;
-
-  useEffect(() => {
-    void fetchDirectory(currentPath);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentPath]);
-
-  useEffect(() => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
-    }
-  }, [currentPath]);
-
-  const fetchDirectory = async (path: string) => {
-    try {
-      setInternalLoading(true);
-      setError(null);
-      const data = await api.listDirectory(path);
-      setItems(data.items || []);
-      if (!path && data.path) {
-        setCurrentPath(data.path);
-      }
-    } catch (err) {
-      const message = err instanceof Error ? err.message : t('directoryPicker.error');
-      setError(message);
-    } finally {
-      setInternalLoading(false);
-    }
-  };
-
-  const handleNavigate = (path: string) => {
-    setCurrentPath(path);
-  };
-
-  const parentItem = items.find((item: DirectoryListResponse['items'][number]) => item.name === '..');
-  const displayItems = items.filter((item: DirectoryListResponse['items'][number]) => item.name !== '..');
-
-  const getPathSegments = (path: string) => {
-    if (!path) return [];
-    const separator = path.includes('\\') ? '\\' : '/';
-    const parts = path.split(separator).filter(Boolean);
-    const isUnixRoot = path.startsWith('/');
-
-    return parts.map((part, index) => {
-      let segmentPath = parts.slice(0, index + 1).join(separator);
-      if (isUnixRoot) segmentPath = '/' + segmentPath;
-      return { name: part, path: segmentPath };
-    });
-  };
-
-  const segments = getPathSegments(currentPath);
-  const resolvedActionLabel = actionLabel ?? t('directoryPicker.action');
-
-  return (
-    <div className="flex flex-col h-[400px] gap-4 min-w-0 overflow-hidden">
-      <div className="flex items-center border rounded-md p-1 gap-1 bg-muted/30 min-w-0 overflow-hidden">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8 shrink-0"
-          disabled={!parentItem || isLoading}
-          onClick={() => parentItem && handleNavigate(parentItem.path)}
-          title={t('directoryPicker.parent')}
-        >
-          <ArrowLeft className="h-4 w-4" />
-        </Button>
-
-        <div className="w-px h-5 bg-border mx-1 shrink-0" />
-
-        <div
-          ref={scrollContainerRef}
-          className="flex-1 overflow-x-auto whitespace-nowrap flex items-center scrollbar-hide px-1 min-w-0"
-          title={currentPath}
-        >
-          <Button
-            onClick={() => handleNavigate('/')}
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7 shrink-0"
-            title={t('directoryPicker.rootAction')}
-          >
-            <Home className="h-4 w-4 text-muted-foreground" />
-          </Button>
-
-          {segments.map((segment, index) => (
-            <div key={segment.path} className="flex items-center shrink-0">
-              <ChevronRight className="h-3 w-3 text-muted-foreground mx-0.5 shrink-0" />
-              <Button
-                onClick={() => handleNavigate(segment.path)}
-                variant="ghost"
-                size="sm"
-                className={cn(
-                  'h-7 text-sm',
-                  index === segments.length - 1 ? 'font-medium text-foreground' : 'text-muted-foreground'
-                )}
-              >
-                {segment.name}
-              </Button>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="flex-1 border rounded-md overflow-hidden relative bg-background min-h-0">
-        {isLoading && (
-          <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-10">
-            <Loader2 className="h-6 w-6 animate-spin" />
-          </div>
-        )}
-
-        {error ? (
-          <div className="p-4 text-destructive text-sm text-center">
-            {error}
-            <Button variant="link" onClick={() => fetchDirectory(currentPath)} className="block mx-auto mt-2">
-              {t('actions.retry')}
-            </Button>
-          </div>
-        ) : (
-          <div className="h-full overflow-auto">
-            <div className="p-1">
-              {displayItems.length === 0 && !isLoading ? (
-                <div className="p-4 text-center text-sm text-muted-foreground">{t('directoryPicker.empty')}</div>
-              ) : (
-                displayItems.map((item: DirectoryListResponse['items'][number]) => (
-                  <Button
-                    key={item.path}
-                    onClick={() => handleNavigate(item.path)}
-                    variant="ghost"
-                    size="sm"
-                    className="w-full justify-start gap-3 h-9 group"
-                  >
-                    <Folder className="h-4 w-4 text-blue-500 fill-blue-500/20 group-hover:fill-blue-500/30 transition-colors shrink-0" />
-                    <span className="truncate">{item.name}</span>
-                  </Button>
-                ))
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="flex justify-end gap-2">
-        <Button variant="outline" onClick={onCancel} disabled={isLoading}>
-          {t('actions.cancel')}
-        </Button>
-        <Button onClick={() => onSelect(currentPath)} disabled={isLoading || !currentPath}>
-          {resolvedActionLabel}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/shared/BackToTop.tsx

@@ -1,39 +0,0 @@
-import { useEffect, useState } from 'react';
-import { ArrowUp } from 'lucide-react';
-import { Button } from '@leanspec/ui-components';
-import { useTranslation } from 'react-i18next';
-
-export function BackToTop() {
-  const [isVisible, setIsVisible] = useState(false);
-  const { t } = useTranslation('common');
-
-  useEffect(() => {
-    const toggleVisibility = () => {
-      if (window.pageYOffset > 300) {
-        setIsVisible(true);
-      } else {
-        setIsVisible(false);
-      }
-    };
-
-    window.addEventListener('scroll', toggleVisibility);
-    return () => window.removeEventListener('scroll', toggleVisibility);
-  }, []);
-
-  const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-
-  if (!isVisible) return null;
-
-  return (
-    <Button
-      onClick={scrollToTop}
-      size="icon"
-      className="fixed bottom-6 right-6 h-12 w-12 rounded-full shadow-lg z-40 hover:scale-110 transition-transform"
-      aria-label={t('actions.backToTop')}
-    >
-      <ArrowUp className="h-5 w-5" />
-    </Button>
-  );
-}