@evolve.labs/devflow 0.8.0

package/web/components/modals/RecentFiles.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { useEffect, useRef, useMemo } from 'react';
+import { useUIStore } from '@/lib/stores/uiStore';
+import { useFileStore } from '@/lib/stores/fileStore';
+import { useProjectStore } from '@/lib/stores/projectStore';
+import { useFocusTrap } from '@/hooks/useFocusTrap';
+import { useListNavigation } from '@/hooks/useListNavigation';
+import { File, FileText, FileCode, FileJson, Clock, Pin } from 'lucide-react';
+import { cn, getFileName } from '@/lib/utils';
+
+interface RecentFileItem {
+  path: string;
+  name: string;
+  relativePath: string;
+  extension: string;
+  isOpen: boolean;
+  isPinned: boolean;
+}
+
+const getFileIcon = (extension: string) => {
+  switch (extension) {
+    case 'md':
+      return <FileText className="w-4 h-4 text-blue-400" aria-hidden="true" />;
+    case 'json':
+    case 'yaml':
+    case 'yml':
+      return <FileJson className="w-4 h-4 text-yellow-400" aria-hidden="true" />;
+    case 'ts':
+    case 'tsx':
+    case 'js':
+    case 'jsx':
+      return <FileCode className="w-4 h-4 text-green-400" aria-hidden="true" />;
+    default:
+      return <File className="w-4 h-4 text-gray-400" aria-hidden="true" />;
+  }
+};
+
+/**
+ * Recent Files modal (Ctrl+Tab).
+ * Shows recently opened files for quick navigation.
+ */
+export function RecentFiles() {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const { activeModal, closeModal } = useUIStore();
+  const { recentFiles, openFiles, pinnedFiles, openFile, activeFile } = useFileStore();
+  const { currentProject } = useProjectStore();
+
+  const isOpen = activeModal === 'recentFiles';
+
+  // Build list of recent files with metadata
+  const fileItems = useMemo((): RecentFileItem[] => {
+    const projectPath = currentProject?.path || '';
+
+    return recentFiles.map((path) => {
+      let relativePath = path;
+      if (projectPath && path.startsWith(projectPath)) {
+        relativePath = path.slice(projectPath.length);
+        if (relativePath.startsWith('/')) {
+          relativePath = relativePath.slice(1);
+        }
+      }
+
+      const name = getFileName(path);
+      const extension = name.includes('.') ? name.split('.').pop() || '' : '';
+
+      return {
+        path,
+        name,
+        relativePath,
+        extension,
+        isOpen: openFiles.some((f) => f.path === path),
+        isPinned: pinnedFiles.includes(path),
+      };
+    });
+  }, [recentFiles, openFiles, pinnedFiles, currentProject]);
+
+  // Keyboard navigation
+  const { selectedIndex, setSelectedIndex, handleKeyDown, isSelected } = useListNavigation({
+    items: fileItems,
+    onSelect: (item) => {
+      openFile(item.path);
+      closeModal();
+    },
+    onEscape: closeModal,
+  });
+
+  // Focus trap
+  useFocusTrap(modalRef, isOpen, {
+    onEscape: closeModal,
+  });
+
+  // Reset selection when opened
+  useEffect(() => {
+    if (isOpen) {
+      // Find current active file in the list and select it, or default to 0
+      const activeIndex = fileItems.findIndex((f) => f.path === activeFile);
+      setSelectedIndex(activeIndex >= 0 ? activeIndex : 0);
+    }
+  }, [isOpen, fileItems, activeFile, setSelectedIndex]);
+
+  // Scroll selected into view
+  useEffect(() => {
+    if (!listRef.current || !isOpen) return;
+    const selectedEl = listRef.current.children[selectedIndex] as HTMLElement;
+    selectedEl?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex, isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={closeModal}
+        aria-hidden="true"
+      />
+
+      {/* Modal */}
+      <div
+        ref={modalRef}
+        className={cn(
+          'relative w-full max-w-lg bg-[#12121a] border border-white/10 rounded-xl shadow-2xl overflow-hidden',
+          'animate-in fade-in-0 zoom-in-95 duration-150'
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Recent files"
+        onKeyDown={handleKeyDown}
+      >
+        {/* Header */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-white/10">
+          <Clock className="w-5 h-5 text-purple-400" aria-hidden="true" />
+          <h2 className="text-sm font-medium text-white">Recent Files</h2>
+          <div className="flex-1" />
+          <div className="text-xs text-gray-600 border border-white/10 px-1.5 py-0.5 rounded">
+            esc
+          </div>
+        </div>
+
+        {/* File List */}
+        <div
+          ref={listRef}
+          className="max-h-[50vh] overflow-y-auto"
+          role="listbox"
+          aria-label="Recent files list"
+        >
+          {fileItems.length === 0 ? (
+            <div className="px-4 py-8 text-center text-gray-500 text-sm">
+              No recent files
+            </div>
+          ) : (
+            fileItems.map((file, index) => (
+              <button
+                key={file.path}
+                onClick={() => {
+                  openFile(file.path);
+                  closeModal();
+                }}
+                onMouseEnter={() => setSelectedIndex(index)}
+                className={cn(
+                  'w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors',
+                  isSelected(index)
+                    ? 'bg-purple-500/20 border-l-2 border-purple-500'
+                    : 'hover:bg-white/5 border-l-2 border-transparent'
+                )}
+                role="option"
+                aria-selected={isSelected(index)}
+                tabIndex={isSelected(index) ? 0 : -1}
+              >
+                {getFileIcon(file.extension)}
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-white truncate">{file.name}</span>
+                    {file.isPinned && (
+                      <Pin className="w-3 h-3 text-purple-400 flex-shrink-0" aria-label="Pinned" />
+                    )}
+                    {file.isOpen && (
+                      <span className="text-xs text-gray-500 flex-shrink-0">• open</span>
+                    )}
+                  </div>
+                  <div className="text-xs text-gray-500 truncate">{file.relativePath}</div>
+                </div>
+
+                {file.path === activeFile && (
+                  <span className="text-xs text-purple-400 flex-shrink-0">current</span>
+                )}
+              </button>
+            ))
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-2 border-t border-white/10 text-xs text-gray-500">
+          <div className="flex items-center gap-4">
+            <span>↑↓ navigate</span>
+            <span>↵ open</span>
+          </div>
+          <div>{fileItems.length} files</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/components/projects/ProjectSelector.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { FolderPlus, X, Check, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useProjectStore } from '@/lib/stores/projectStore';
+
+export function ProjectSelector() {
+  const { projects, activeProjectPath, addProject, removeProject, setActiveProject } = useProjectStore();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showAddInput, setShowAddInput] = useState(false);
+  const [newPath, setNewPath] = useState('');
+  const [isAdding, setIsAdding] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const activeProject = projects.find(p => p.path === activeProjectPath) || projects[0];
+
+  useEffect(() => {
+    if (showAddInput && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [showAddInput]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+        setShowAddInput(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleAddProject = async () => {
+    if (!newPath.trim()) return;
+    setIsAdding(true);
+    await addProject(newPath.trim());
+    setIsAdding(false);
+    setNewPath('');
+    setShowAddInput(false);
+  };
+
+  const getProjectName = (path: string) => path.split('/').pop() || path;
+
+  if (projects.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 rounded-lg transition-colors text-sm w-full"
+      >
+        <div className="w-2 h-2 rounded-full bg-green-400 flex-shrink-0" />
+        <span className="truncate text-white font-medium">
+          {activeProject ? getProjectName(activeProject.path) : 'No project'}
+        </span>
+        {projects.length > 1 && (
+          <span className="text-[10px] text-gray-500 flex-shrink-0">+{projects.length - 1}</span>
+        )}
+        <ChevronDown className={cn('w-3.5 h-3.5 text-gray-400 ml-auto flex-shrink-0 transition-transform', isOpen && 'rotate-180')} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 right-0 mt-1 bg-[#1a1a24] border border-white/10 rounded-lg shadow-xl z-50 overflow-hidden">
+          {/* Project list */}
+          <div className="max-h-48 overflow-y-auto">
+            {projects.map((project) => (
+              <div
+                key={project.path}
+                className={cn(
+                  'flex items-center gap-2 px-3 py-2 hover:bg-white/5 cursor-pointer group',
+                  project.path === activeProjectPath && 'bg-purple-500/10'
+                )}
+                onClick={() => {
+                  setActiveProject(project.path);
+                  setIsOpen(false);
+                }}
+              >
+                {project.path === activeProjectPath ? (
+                  <Check className="w-3.5 h-3.5 text-purple-400 flex-shrink-0" />
+                ) : (
+                  <div className="w-3.5 h-3.5 flex-shrink-0" />
+                )}
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm text-white truncate">{getProjectName(project.path)}</div>
+                  <div className="text-[10px] text-gray-500 truncate">{project.path}</div>
+                </div>
+                {projects.length > 1 && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeProject(project.path);
+                    }}
+                    className="p-1 opacity-0 group-hover:opacity-100 hover:bg-white/10 rounded transition-all text-gray-400 hover:text-red-400"
+                    title="Remove project"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Add project */}
+          <div className="border-t border-white/10">
+            {showAddInput ? (
+              <div className="p-2 flex gap-1">
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={newPath}
+                  onChange={(e) => setNewPath(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleAddProject();
+                    if (e.key === 'Escape') setShowAddInput(false);
+                  }}
+                  placeholder="/path/to/project"
+                  className="flex-1 px-2 py-1.5 bg-white/5 border border-white/10 rounded text-sm text-white placeholder-gray-500 focus:outline-none focus:border-purple-500"
+                  disabled={isAdding}
+                />
+                <button
+                  onClick={handleAddProject}
+                  disabled={isAdding || !newPath.trim()}
+                  className="px-2 py-1.5 bg-purple-600 hover:bg-purple-500 text-white text-xs rounded transition-colors disabled:opacity-50"
+                >
+                  {isAdding ? '...' : 'Add'}
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={() => setShowAddInput(true)}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors"
+              >
+                <FolderPlus className="w-3.5 h-3.5" />
+                Add Project
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/web/components/settings/SettingItem.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface BaseSettingProps {
+  label: string;
+  description?: string;
+}
+
+interface ToggleSettingProps extends BaseSettingProps {
+  type: 'toggle';
+  value: boolean;
+  onChange: (value: boolean) => void;
+}
+
+interface SliderSettingProps extends BaseSettingProps {
+  type: 'slider';
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+}
+
+interface SelectSettingProps<T extends string | number> extends BaseSettingProps {
+  type: 'select';
+  value: T;
+  onChange: (value: T) => void;
+  options: { label: string; value: T; disabled?: boolean }[];
+}
+
+type SettingItemProps =
+  | ToggleSettingProps
+  | SliderSettingProps
+  | SelectSettingProps<string | number>;
+
+export function SettingItem(props: SettingItemProps) {
+  const { label, description, type } = props;
+
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-white/5 last:border-0">
+      <div className="flex-1 pr-4">
+        <h4 className="text-sm font-medium text-white">{label}</h4>
+        {description && (
+          <p className="text-xs text-gray-400 mt-0.5">{description}</p>
+        )}
+      </div>
+
+      <div className="flex-shrink-0">
+        {type === 'toggle' && <ToggleControl {...props} />}
+        {type === 'slider' && <SliderControl {...props} />}
+        {type === 'select' && <SelectControl {...props} />}
+      </div>
+    </div>
+  );
+}
+
+function ToggleControl({ value, onChange }: ToggleSettingProps) {
+  return (
+    <button
+      onClick={() => onChange(!value)}
+      className={cn(
+        'relative w-10 h-5 rounded-full transition-colors duration-200',
+        value ? 'bg-purple-500' : 'bg-gray-600'
+      )}
+    >
+      <span
+        className={cn(
+          'absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform duration-200',
+          value && 'translate-x-5'
+        )}
+      />
+    </button>
+  );
+}
+
+function SliderControl({ value, onChange, min, max, step = 1, unit }: SliderSettingProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <input
+        type="range"
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        min={min}
+        max={max}
+        step={step}
+        className="w-24 h-1.5 bg-gray-600 rounded-full appearance-none cursor-pointer
+          [&::-webkit-slider-thumb]:appearance-none
+          [&::-webkit-slider-thumb]:w-3.5
+          [&::-webkit-slider-thumb]:h-3.5
+          [&::-webkit-slider-thumb]:rounded-full
+          [&::-webkit-slider-thumb]:bg-purple-500
+          [&::-webkit-slider-thumb]:cursor-pointer
+          [&::-webkit-slider-thumb]:transition-transform
+          [&::-webkit-slider-thumb]:hover:scale-110"
+      />
+      <span className="text-xs text-gray-400 w-12 text-right tabular-nums">
+        {value}{unit}
+      </span>
+    </div>
+  );
+}
+
+function SelectControl<T extends string | number>({
+  value,
+  onChange,
+  options,
+}: SelectSettingProps<T>) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => {
+        const newValue = typeof value === 'number'
+          ? Number(e.target.value)
+          : e.target.value;
+        onChange(newValue as T);
+      }}
+      className="bg-[#1a1a24] border border-white/10 rounded px-2 py-1 text-sm text-white
+        focus:outline-none focus:ring-1 focus:ring-purple-500 cursor-pointer
+        [&>option]:bg-[#1a1a24] [&>option]:text-white"
+    >
+      {options.map((opt) => (
+        <option key={String(opt.value)} value={opt.value} disabled={opt.disabled}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+// Section header component
+export function SettingSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="mb-6">
+      <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
+        {title}
+      </h3>
+      <div className="bg-[#12121a] rounded-lg p-4 border border-white/5">
+        {children}
+      </div>
+    </div>
+  );
+}