refactor: move components in src/components/ui to src/shared/view/ui

src/components/ProjectCreationWizard.jsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle, FolderOpen, Eye, EyeOff, Plus } from 'lucide-react';
-import { Button } from './ui/button';
+import { Button, Input } from '../shared/view/ui';
-import { Input } from './ui/input';
 import { api } from '../utils/api';
 import { useTranslation } from 'react-i18next';
 

src/components/chat/tools/components/ContentRenderers/TodoList.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
 import { CheckCircle2, Circle, Clock, type LucideIcon } from 'lucide-react';
-import { Badge } from '../../../../ui/badge';
+import { Badge } from '../../../../../shared/view/ui';
 
 type TodoStatus = 'completed' | 'in_progress' | 'pending';
 type TodoPriority = 'high' | 'medium' | 'low';

src/components/file-tree/view/FileTreeBody.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode, RefObject } from 'react';
 import { Folder, Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { ScrollArea } from '../../../shared/view/ui';
 import type { FileTreeNode, FileTreeViewMode } from '../types/types';
 import FileTreeEmptyState from './FileTreeEmptyState';
 import FileTreeList from './FileTreeList';

src/components/file-tree/view/FileTreeHeader.tsx

@@ -1,7 +1,6 @@
 import { ChevronDown, Eye, FileText, FolderPlus, List, RefreshCw, Search, TableProperties, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '../../ui/button';
+import { Button, Input } from '../../../shared/view/ui';
-import { Input } from '../../ui/input';
 import { cn } from '../../../lib/utils';
 import type { FileTreeViewMode } from '../types/types';
 

src/components/file-tree/view/ImageViewer.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
-import { Button } from '../../ui/button';
+import { Button } from '../../../shared/view/ui';
 import { authenticatedFetch } from '../../../utils/api';
 import type { FileTreeImageSelection } from '../types/types';
 

src/components/settings/view/Settings.tsx

@@ -1,7 +1,7 @@
 import { Settings as SettingsIcon, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import LoginModal from '../../LoginModal';
-import { Button } from '../../ui/button';
+import { Button } from '../../../shared/view/ui';
 import ClaudeMcpFormModal from '../view/modals/ClaudeMcpFormModal';
 import CodexMcpFormModal from '../view/modals/CodexMcpFormModal';
 import SettingsMainTabs from '../view/SettingsMainTabs';

src/components/settings/view/modals/ClaudeMcpFormModal.tsx

@@ -2,8 +2,7 @@ import { FolderOpen, Globe, X } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import type { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '../../../ui/input';
+import { Button, Input } from '../../../../shared/view/ui';
-import { Button } from '../../../ui/button';
 import { DEFAULT_CLAUDE_MCP_FORM } from '../../constants/constants';
 import type { ClaudeMcpFormState, McpServer, McpScope, McpTransportType, SettingsProject } from '../../types/types';
 

src/components/settings/view/modals/CodexMcpFormModal.tsx

@@ -2,8 +2,7 @@ import { useEffect, useState } from 'react';
 import type { FormEvent } from 'react';
 import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '../../../ui/button';
+import { Button, Input } from '../../../../shared/view/ui';
-import { Input } from '../../../ui/input';
 import { DEFAULT_CODEX_MCP_FORM } from '../../constants/constants';
 import type { CodexMcpFormState, McpServer } from '../../types/types';
 

src/components/settings/view/tabs/agents-settings/sections/content/AccountContent.tsx

@@ -1,7 +1,6 @@
 import { LogIn } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge } from '../../../../../../ui/badge';
+import { Badge, Button } from '../../../../../../../shared/view/ui';
-import { Button } from '../../../../../../ui/button';
 import SessionProviderLogo from '../../../../../../llm-logo-provider/SessionProviderLogo';
 import type { AgentProvider, AuthStatus } from '../../../../../types/types';
 

src/components/settings/view/tabs/agents-settings/sections/content/McpServersContent.tsx

@@ -1,7 +1,6 @@
 import { Edit3, Globe, Plus, Server, Terminal, Trash2, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge } from '../../../../../../ui/badge';
+import { Badge, Button } from '../../../../../../../shared/view/ui';
-import { Button } from '../../../../../../ui/button';
 import type { McpServer, McpToolsResult, McpTestResult } from '../../../../../types/types';
 
 const getTransportIcon = (type: string | undefined) => {

src/components/settings/view/tabs/agents-settings/sections/content/PermissionsContent.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { AlertTriangle, Plus, Shield, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '../../../../../../ui/button';
+import { Button, Input } from '../../../../../../../shared/view/ui';
-import { Input } from '../../../../../../ui/input';
 import type { CodexPermissionMode, GeminiPermissionMode } from '../../../../../types/types';
 
 const COMMON_CLAUDE_TOOLS = [

src/components/settings/view/tabs/api-settings/sections/ApiKeysSection.tsx

@@ -1,7 +1,6 @@
 import { ExternalLink, Key, Plus, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '../../../../../ui/button';
+import { Button, Input } from '../../../../../../shared/view/ui';
-import { Input } from '../../../../../ui/input';
 import type { ApiKeyItem } from '../types';
 
 type ApiKeysSectionProps = {

src/components/settings/view/tabs/api-settings/sections/GithubCredentialsSection.tsx

@@ -1,7 +1,6 @@
 import { Eye, EyeOff, Github, Plus, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '../../../../../ui/button';
+import { Button, Input } from '../../../../../../shared/view/ui';
-import { Input } from '../../../../../ui/input';
 import type { GithubCredentialItem } from '../types';
 
 type GithubCredentialsSectionProps = {

src/components/settings/view/tabs/api-settings/sections/NewApiKeyAlert.tsx

@@ -1,6 +1,6 @@
 import { Check, Copy } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '../../../../../ui/button';
+import { Button } from '../../../../../../shared/view/ui';
 import type { CreatedApiKey } from '../types';
 
 type NewApiKeyAlertProps = {

src/components/settings/view/tabs/git-settings/GitSettingsTab.tsx

@@ -1,8 +1,7 @@
 import { Check, GitBranch } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useGitSettings } from '../../../hooks/useGitSettings';
-import { Button } from '../../../../ui/button';
+import { Button, Input } from '../../../../../shared/view/ui';
-import { Input } from '../../../../ui/input';
 
 export default function GitSettingsTab() {
   const { t } = useTranslation('settings');

src/components/sidebar/view/subcomponents/SidebarContent.tsx

@@ -1,4 +1,4 @@
-import { ScrollArea } from '../../../ui/scroll-area';
+import { ScrollArea } from '../../../../shared/view/ui';
 import type { TFunction } from 'i18next';
 import type { Project } from '../../../../types/app';
 import type { ReleaseInfo } from '../../../../types/sharedTypes';

src/components/sidebar/view/subcomponents/SidebarHeader.tsx

@@ -1,7 +1,6 @@
 import { FolderPlus, Plus, RefreshCw, Search, X, PanelLeftClose } from 'lucide-react';
 import type { TFunction } from 'i18next';
-import { Button } from '../../../ui/button';
+import { Button, Input } from '../../../../shared/view/ui';
-import { Input } from '../../../ui/input';
 import { IS_PLATFORM } from '../../../../constants/config';
 
 type SidebarHeaderProps = {

src/components/sidebar/view/subcomponents/SidebarModals.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { AlertTriangle, Trash2 } from 'lucide-react';
 import type { TFunction } from 'i18next';
-import { Button } from '../../../ui/button';
+import { Button } from '../../../../shared/view/ui';
 import ProjectCreationWizard from '../../../ProjectCreationWizard';
 import Settings from '../../../settings/view/Settings';
 import VersionUpgradeModal from '../modals/VersionUpgradeModal';

src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx

@@ -1,4 +1,4 @@
-import { Button } from '../../../ui/button';
+import { Button } from '../../../../shared/view/ui';
 import { Check, ChevronDown, ChevronRight, Edit3, Folder, FolderOpen, Star, Trash2, X } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { cn } from '../../../../lib/utils';

src/components/sidebar/view/subcomponents/SidebarProjectSessions.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown, Plus } from 'lucide-react';
 import type { TFunction } from 'i18next';
-import { Button } from '../../../ui/button';
+import { Button } from '../../../../shared/view/ui';
 import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
 import type { SessionWithProvider, TouchHandlerFactory } from '../../types/types';
 import SidebarSessionItem from './SidebarSessionItem';

src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx

@@ -1,5 +1,4 @@
-import { Badge } from '../../../ui/badge';
+import { Badge, Button } from '../../../../shared/view/ui';
-import { Button } from '../../../ui/button';
 import { Check, Clock, Edit2, Trash2, X } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { cn } from '../../../../lib/utils';

src/shared/view/ui/badge/Badge.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../../lib/utils';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
@@ -17,12 +17,10 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: 'default',
     },
-  },
+  }
 );
 
-export interface BadgeProps
+type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;

src/shared/view/ui/badge/index.ts

@@ -0,0 +1 @@
+export { Badge, badgeVariants } from './Badge';

src/shared/view/ui/button/Button.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../../lib/utils';
 
+// Keep visual variants centralized so all button usages stay consistent.
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
@@ -27,24 +28,20 @@ const buttonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  },
+  }
 );
 
-export interface ButtonProps
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants>;
-    VariantProps<typeof buttonVariants> {}
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, ...props }, ref) => {
     return (
-      <button
+      <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
     );
-  },
+  }
 );
+
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };

src/shared/view/ui/button/index.ts

@@ -0,0 +1 @@
+export { Button, buttonVariants } from './Button';

src/shared/view/ui/index.ts

@@ -1,2 +1,6 @@
+export { Badge, badgeVariants } from './badge';
+export { Button, buttonVariants } from './button';
 export { DarkModeToggle } from './dark-mode-toggle';
+export { Input } from './input';
+export { ScrollArea } from './scroll-area';
 export { Tooltip } from './tooltip';

src/shared/view/ui/input/Input.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../../lib/utils';
 
-export interface InputProps
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -11,14 +10,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          className,
+          className
         )}
         ref={ref}
         {...props}
       />
     );
-  },
+  }
 );
+
 Input.displayName = 'Input';
 
 export { Input };

src/shared/view/ui/input/index.ts

@@ -0,0 +1 @@
+export { Input } from './Input';

src/shared/view/ui/scroll-area/ScrollArea.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../../lib/utils';
 
-export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {}
+type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement>;
 
 const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
   ({ className, children, ...props }, ref) => (
-    <div
+    <div className={cn(className, 'relative overflow-hidden')} {...props}>
-      className={cn(className, 'relative overflow-hidden')}
+      {/* Inner container keeps border radius while allowing momentum scrolling on touch devices. */}
-      {...props}
-    >
       <div
         ref={ref}
         className="h-full w-full rounded-[inherit] overflow-auto"
@@ -20,8 +18,9 @@ const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
         {children}
       </div>
     </div>
-  ),
+  )
 );
+
 ScrollArea.displayName = 'ScrollArea';
 
 export { ScrollArea };

src/shared/view/ui/scroll-area/index.ts

@@ -0,0 +1 @@
+export { ScrollArea } from './ScrollArea';