refactor: Decentralize data fetching and add axis initialization

Refactor data fetching architecture from centralized App state to
component-local data management for improved maintainability and
data freshness guarantees.

Changes:
- SettingsModal: Fetch config data on modal open
- RecipePanel: Fetch recipe list on panel open
- IOMonitorPage: Fetch IO list on page mount with real-time updates
- Remove unnecessary props drilling through component hierarchy
- Simplify App.tsx by removing centralized config/recipes state

New feature:
- Add InitializeModal for sequential axis initialization (X, Y, Z)
- Each axis initializes with 3-second staggered start
- Progress bar animation for each axis
- Auto-close on completion

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/components/layout/Header.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Activity, Settings, Move, Camera, Layers, Cpu } from 'lucide-react';
+import { Activity, Settings, Move, Camera, Layers, Cpu, Target } from 'lucide-react';
 
 interface HeaderProps {
     currentTime: Date;
-    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | null) => void;
-    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | null;
+    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null) => void;
+    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null;
 
 }
 
@@ -53,7 +53,8 @@ export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, active
                         { id: 'io', icon: Activity, label: 'I/O MONITOR', path: '/io-monitor' },
                         { id: 'motion', icon: Move, label: 'MOTION', path: '/' },
                         { id: 'camera', icon: Camera, label: 'VISION', path: '/' },
-                        { id: 'setting', icon: Settings, label: 'CONFIG', path: '/' }
+                        { id: 'setting', icon: Settings, label: 'CONFIG', path: '/' },
+                        { id: 'initialize', icon: Target, label: 'INITIALIZE', path: '/' }
                     ].map(item => {
                         const isActive = item.id === 'io'
                             ? location.pathname === '/io-monitor'