[Haik]: refactor: restructure frontend component hierarchy — move CommandPicker, RichPromptEditor, and related hooks/types out of global components/ into Modes/ModeFormDialog/components/ with nested subdirectories; relocate ToolsSelector into ModeFormDialog/components/; extract getToolGroupIcon to pages/_shared/ for cross-page reuse; update imports in Modes.tsx and useCommands.tsx

frontend/src/app/pages/Commands/hooks/useCommands.tsx

@@ -5,7 +5,7 @@ import BuildOutlinedIcon from '@mui/icons-material/BuildOutlined';
 import ViewQuiltOutlinedIcon from '@mui/icons-material/ViewQuiltOutlined';
 import { useAppSelector, useAppDispatch } from '@/shared/hooks';
 import { LIST_BUILTIN_TOOLS, LIST_TOOLS } from '@/shared/backend-bridge/apps/tools';
-import { getToolGroupIcon } from '@/app/components/CommandPicker';
+import { getToolGroupIcon } from '@/app/pages/_shared/getToolGroupIcon';
 import { LIST_APPS } from '@/shared/backend-bridge/apps/app_builder';
 import { LIST_SKILLS } from '@/shared/backend-bridge/apps/skills';
 import { LIST_MODES } from '@/shared/state/modesSlice';

frontend/src/app/pages/Modes/ModeFormDialog/ModeFormDialog.tsx

@@ -15,9 +15,9 @@ import Tooltip from '@mui/material/Tooltip';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import RestoreIcon from '@mui/icons-material/Restore';
 import { Mode } from '@/shared/state/modesSlice';
-import RichPromptEditor from '@/app/components/RichPromptEditor';
-import { ModeForm, ICON_MAP, ICON_OPTIONS, COLOR_OPTIONS } from './modesConstants';
-import ToolsSelector from './ToolsSelector';
+import RichPromptEditor from './components/RichPromptEditor/RichPromptEditor';
+import { ModeForm, ICON_MAP, ICON_OPTIONS, COLOR_OPTIONS } from '@/app/pages/Modes/modesConstants';
+import ToolsSelector from './components/ToolsSelector';
 
 interface ModeFormDialogProps {
   open: boolean;

frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/CommandPicker.tsx

@@ -3,11 +3,8 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { CommandPickerItem, CommandPickerProps, highlightMatch } from './commandPickerTypes';
-import { useCommandPickerItems } from './useCommandPickerItems';
-
-export { getToolGroupIcon } from './CommandPickerIcons';
-export type { CommandPickerItem } from './commandPickerTypes';
+import { CommandPickerItem, CommandPickerProps, highlightMatch } from './components/commandPickerTypes';
+import { useCommandPickerItems } from './components/useCommandPickerItems';
 
 const CommandPicker: React.FC<CommandPickerProps> = ({ trigger, filter, onSelect, onClose, visible }) => {
   const c = useClaudeTokens();

frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/useCommandPickerItems.tsx

@@ -9,7 +9,7 @@ import { useAppSelector, useAppDispatch } from '@/shared/hooks';
 import { LIST_BUILTIN_TOOLS, LIST_TOOLS } from '@/shared/backend-bridge/apps/tools';
 import { LIST_APPS } from '@/shared/backend-bridge/apps/app_builder';
 import { CommandPickerItem, MODE_ICON_MAP } from './commandPickerTypes';
-import { getToolGroupIcon } from './CommandPickerIcons';
+import { getToolGroupIcon } from '@/app/pages/_shared/getToolGroupIcon';
 
 export function useCommandPickerItems(trigger: '/' | '@', filter: string) {
   const dispatch = useAppDispatch();

frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/RichPromptEditor.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import CommandPicker from '@/app/components/CommandPicker';
+import CommandPicker from './CommandPicker/CommandPicker';
 import { RichPromptEditorProps, LINE_HEIGHT, FONT_SIZE } from './richPromptEditorTypes';
 import { useRichPromptEditor } from './useRichPromptEditor';
 

frontend/src/app/pages/Modes/ModeFormDialog/components/ToolsSelector.tsx

@@ -10,7 +10,7 @@ import ListItemText from '@mui/material/ListItemText';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import ListSubheader from '@mui/material/ListSubheader';
 import ExtensionIcon from '@mui/icons-material/Extension';
-import { ModeForm, ALL_BUILTIN_TOOL_NAMES } from './modesConstants';
+import { ModeForm, ALL_BUILTIN_TOOL_NAMES } from '@/app/pages/Modes/modesConstants';
 
 interface ToolsSelectorProps {
   form: ModeForm;

frontend/src/app/pages/Modes/Modes.tsx

@@ -8,7 +8,7 @@ import TuneIcon from '@mui/icons-material/Tune';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { useModes } from './hooks/useModes';
 import ModeCard from './ModeCard';
-import ModeFormDialog from './ModeFormDialog';
+import ModeFormDialog from './ModeFormDialog/ModeFormDialog';
 
 const Modes: React.FC = () => {
   const c = useClaudeTokens();