Refactor app layout structure

src/hooks/use-app-navigation.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import { useRouterNavigation } from '@/hooks/use-router-navigation'
+
+export default function useAppNavigation() {
+  const location = useLocation()
+  const { currentPage, navigateToPage } = useRouterNavigation()
+
+  useEffect(() => {
+    console.log('[APP_ROUTER] 📍 Route changed to:', location.pathname, '- Page:', currentPage)
+  }, [currentPage, location.pathname])
+
+  return { currentPage, navigateToPage }
+}

src/hooks/use-app-project.ts

@@ -0,0 +1,147 @@
+import { useMemo } from 'react'
+import { toast } from 'sonner'
+import appStrings from '@/data/app-shortcuts.json'
+import { useFileOperations } from '@/hooks/use-file-operations'
+import { useProjectState } from '@/hooks/use-project-state'
+import type { Project } from '@/types/project'
+export default function useAppProject() {
+  const projectState = useProjectState()
+  const {
+    files,
+    models,
+    components,
+    componentTrees,
+    workflows,
+    lambdas,
+    theme,
+    playwrightTests,
+    storybookStories,
+    unitTests,
+    flaskConfig,
+    nextjsConfig,
+    npmSettings,
+    featureToggles,
+    setFiles,
+    setModels,
+    setComponents,
+    setComponentTrees,
+    setWorkflows,
+    setLambdas,
+    setTheme,
+    setPlaywrightTests,
+    setStorybookStories,
+    setUnitTests,
+    setFlaskConfig,
+    setNextjsConfig,
+    setNpmSettings,
+    setFeatureToggles,
+  } = projectState
+
+  const fileOps = useFileOperations(files, setFiles)
+  const currentProject = useMemo<Project>(
+    () => ({
+      name: nextjsConfig.appName,
+      files,
+      models,
+      components,
+      componentTrees,
+      workflows,
+      lambdas,
+      theme,
+      playwrightTests,
+      storybookStories,
+      unitTests,
+      flaskConfig,
+      nextjsConfig,
+      npmSettings,
+      featureToggles,
+    }),
+    [
+      componentTrees,
+      components,
+      featureToggles,
+      files,
+      flaskConfig,
+      lambdas,
+      models,
+      nextjsConfig,
+      npmSettings,
+      playwrightTests,
+      storybookStories,
+      theme,
+      unitTests,
+      workflows,
+    ]
+  )
+  const handleProjectLoad = (project: Project) => {
+    if (project.files) setFiles(project.files)
+    if (project.models) setModels(project.models)
+    if (project.components) setComponents(project.components)
+    if (project.componentTrees) setComponentTrees(project.componentTrees)
+    if (project.workflows) setWorkflows(project.workflows)
+    if (project.lambdas) setLambdas(project.lambdas)
+    if (project.theme) setTheme(project.theme)
+    if (project.playwrightTests) setPlaywrightTests(project.playwrightTests)
+    if (project.storybookStories) setStorybookStories(project.storybookStories)
+    if (project.unitTests) setUnitTests(project.unitTests)
+    if (project.flaskConfig) setFlaskConfig(project.flaskConfig)
+    if (project.nextjsConfig) setNextjsConfig(project.nextjsConfig)
+    if (project.npmSettings) setNpmSettings(project.npmSettings)
+    if (project.featureToggles) setFeatureToggles(project.featureToggles)
+    toast.success(appStrings.messages.projectLoaded)
+  }
+  const stateContext = {
+    files,
+    models,
+    components,
+    componentTrees,
+    workflows,
+    lambdas,
+    theme,
+    playwrightTests,
+    storybookStories,
+    unitTests,
+    flaskConfig,
+    nextjsConfig,
+    npmSettings,
+    featureToggles,
+    activeFileId: fileOps.activeFileId,
+  }
+  const actionContext = {
+    handleFileChange: fileOps.handleFileChange,
+    setActiveFileId: fileOps.setActiveFileId,
+    handleFileClose: fileOps.handleFileClose,
+    handleFileAdd: fileOps.handleFileAdd,
+    setModels,
+    setComponents,
+    setComponentTrees,
+    setWorkflows,
+    setLambdas,
+    setTheme,
+    setPlaywrightTests,
+    setStorybookStories,
+    setUnitTests,
+    setFlaskConfig,
+    setNextjsConfig,
+    setNpmSettings,
+    setFeatureToggles,
+  }
+
+  return {
+    files,
+    models,
+    components,
+    componentTrees,
+    workflows,
+    lambdas,
+    playwrightTests,
+    storybookStories,
+    unitTests,
+    featureToggles,
+    fileOps,
+    currentProject,
+    handleProjectLoad,
+    stateContext,
+    actionContext,
+  }
+}

src/hooks/use-app-shortcuts.ts

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+
+import appStrings from '@/data/app-shortcuts.json'
+import { getPageShortcuts } from '@/config/page-loader'
+import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts'
+import type { FeatureToggles } from '@/types/project'
+
+interface UseAppShortcutsParams {
+  featureToggles: FeatureToggles
+  navigateToPage: (page: string) => void
+}
+
+export default function useAppShortcuts({
+  featureToggles,
+  navigateToPage,
+}: UseAppShortcutsParams) {
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [shortcutsOpen, setShortcutsOpen] = useState(false)
+  const [previewOpen, setPreviewOpen] = useState(false)
+
+  const shortcuts = getPageShortcuts(featureToggles)
+
+  useKeyboardShortcuts([
+    ...shortcuts.map(s => ({
+      key: s.key,
+      ctrl: s.ctrl,
+      shift: s.shift,
+      description: s.description,
+      action: () => {
+        console.log('[APP_ROUTER] ⌨️ Shortcut triggered, navigating to:', s.action)
+        navigateToPage(s.action)
+      },
+    })),
+    {
+      key: 'k',
+      ctrl: true,
+      description: appStrings.shortcuts.search,
+      action: () => {
+        console.log('[APP_ROUTER] ⌨️ Search shortcut triggered')
+        setSearchOpen(true)
+      },
+    },
+    {
+      key: '/',
+      ctrl: true,
+      description: appStrings.shortcuts.shortcuts,
+      action: () => {
+        console.log('[APP_ROUTER] ⌨️ Shortcuts dialog triggered')
+        setShortcutsOpen(true)
+      },
+    },
+    {
+      key: 'p',
+      ctrl: true,
+      description: appStrings.shortcuts.preview,
+      action: () => {
+        console.log('[APP_ROUTER] ⌨️ Preview shortcut triggered')
+        setPreviewOpen(true)
+      },
+    },
+  ])
+
+  return {
+    searchOpen,
+    setSearchOpen,
+    shortcutsOpen,
+    setShortcutsOpen,
+    previewOpen,
+    setPreviewOpen,
+  }
+}