From 31e3d66436f8571e513214ff8afb714bd59bf433 Mon Sep 17 00:00:00 2001 From: haikdc Date: Sat, 18 Apr 2026 13:43:48 -0700 Subject: [PATCH] =?UTF-8?q?[Haik]:=20refactor:=20restructure=20frontend=20?= =?UTF-8?q?component=20hierarchy=20=E2=80=94=20move=20CommandPicker,=20Ric?= =?UTF-8?q?hPromptEditor,=20and=20related=20hooks/types=20out=20of=20globa?= =?UTF-8?q?l=20components/=20into=20Modes/ModeFormDialog/components/=20wit?= =?UTF-8?q?h=20nested=20subdirectories;=20relocate=20ToolsSelector=20into?= =?UTF-8?q?=20ModeFormDialog/components/;=20extract=20getToolGroupIcon=20t?= =?UTF-8?q?o=20pages/=5Fshared/=20for=20cross-page=20reuse;=20update=20imp?= =?UTF-8?q?orts=20in=20Modes.tsx=20and=20useCommands.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/pages/Commands/hooks/useCommands.tsx | 2 +- .../pages/Modes/{ => ModeFormDialog}/ModeFormDialog.tsx | 6 +++--- .../RichPromptEditor/CommandPicker}/CommandPicker.tsx | 7 ++----- .../CommandPicker}/components/commandPickerTypes.tsx | 0 .../CommandPicker}/components/useCommandPickerItems.tsx | 2 +- .../components/RichPromptEditor}/RichPromptEditor.tsx | 2 +- .../components/RichPromptEditor}/richPromptEditorTypes.ts | 0 .../components/RichPromptEditor}/useRichPromptEditor.ts | 0 .../{ => ModeFormDialog/components}/ToolsSelector.tsx | 2 +- frontend/src/app/pages/Modes/Modes.tsx | 2 +- .../_shared/getToolGroupIcon.tsx} | 0 11 files changed, 10 insertions(+), 13 deletions(-) rename frontend/src/app/pages/Modes/{ => ModeFormDialog}/ModeFormDialog.tsx (97%) rename frontend/src/app/{components => pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker}/CommandPicker.tsx (97%) rename frontend/src/app/{ => pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker}/components/commandPickerTypes.tsx (100%) rename frontend/src/app/{ => pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker}/components/useCommandPickerItems.tsx (99%) rename frontend/src/app/{components => pages/Modes/ModeFormDialog/components/RichPromptEditor}/RichPromptEditor.tsx (98%) rename frontend/src/app/{components => pages/Modes/ModeFormDialog/components/RichPromptEditor}/richPromptEditorTypes.ts (100%) rename frontend/src/app/{components => pages/Modes/ModeFormDialog/components/RichPromptEditor}/useRichPromptEditor.ts (100%) rename frontend/src/app/pages/Modes/{ => ModeFormDialog/components}/ToolsSelector.tsx (97%) rename frontend/src/app/{components/CommandPickerIcons.tsx => pages/_shared/getToolGroupIcon.tsx} (100%) diff --git a/frontend/src/app/pages/Commands/hooks/useCommands.tsx b/frontend/src/app/pages/Commands/hooks/useCommands.tsx index f9e1365d..07e932ac 100644 --- a/frontend/src/app/pages/Commands/hooks/useCommands.tsx +++ b/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'; diff --git a/frontend/src/app/pages/Modes/ModeFormDialog.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/ModeFormDialog.tsx similarity index 97% rename from frontend/src/app/pages/Modes/ModeFormDialog.tsx rename to frontend/src/app/pages/Modes/ModeFormDialog/ModeFormDialog.tsx index bd1b850a..ec2d02fa 100644 --- a/frontend/src/app/pages/Modes/ModeFormDialog.tsx +++ b/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; diff --git a/frontend/src/app/components/CommandPicker.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/CommandPicker.tsx similarity index 97% rename from frontend/src/app/components/CommandPicker.tsx rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/CommandPicker.tsx index c6b15cb5..1b66a560 100644 --- a/frontend/src/app/components/CommandPicker.tsx +++ b/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 = ({ trigger, filter, onSelect, onClose, visible }) => { const c = useClaudeTokens(); diff --git a/frontend/src/app/components/commandPickerTypes.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/commandPickerTypes.tsx similarity index 100% rename from frontend/src/app/components/commandPickerTypes.tsx rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/commandPickerTypes.tsx diff --git a/frontend/src/app/components/useCommandPickerItems.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/useCommandPickerItems.tsx similarity index 99% rename from frontend/src/app/components/useCommandPickerItems.tsx rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/useCommandPickerItems.tsx index 48735f0a..6c8767d6 100644 --- a/frontend/src/app/components/useCommandPickerItems.tsx +++ b/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(); diff --git a/frontend/src/app/components/RichPromptEditor.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/RichPromptEditor.tsx similarity index 98% rename from frontend/src/app/components/RichPromptEditor.tsx rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/RichPromptEditor.tsx index 12d3f478..bd95ea1b 100644 --- a/frontend/src/app/components/RichPromptEditor.tsx +++ b/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'; diff --git a/frontend/src/app/components/richPromptEditorTypes.ts b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/richPromptEditorTypes.ts similarity index 100% rename from frontend/src/app/components/richPromptEditorTypes.ts rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/richPromptEditorTypes.ts diff --git a/frontend/src/app/components/useRichPromptEditor.ts b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/useRichPromptEditor.ts similarity index 100% rename from frontend/src/app/components/useRichPromptEditor.ts rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/useRichPromptEditor.ts diff --git a/frontend/src/app/pages/Modes/ToolsSelector.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/ToolsSelector.tsx similarity index 97% rename from frontend/src/app/pages/Modes/ToolsSelector.tsx rename to frontend/src/app/pages/Modes/ModeFormDialog/components/ToolsSelector.tsx index d4a55326..de9a4232 100644 --- a/frontend/src/app/pages/Modes/ToolsSelector.tsx +++ b/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; diff --git a/frontend/src/app/pages/Modes/Modes.tsx b/frontend/src/app/pages/Modes/Modes.tsx index 2202d3d8..c75ca23b 100644 --- a/frontend/src/app/pages/Modes/Modes.tsx +++ b/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(); diff --git a/frontend/src/app/components/CommandPickerIcons.tsx b/frontend/src/app/pages/_shared/getToolGroupIcon.tsx similarity index 100% rename from frontend/src/app/components/CommandPickerIcons.tsx rename to frontend/src/app/pages/_shared/getToolGroupIcon.tsx