MuyueWorkspace/cmd/muyue-desktop/frontend/src/components/App.jsx

import { useState, useEffect, useCallback } from 'react'
import { useAPI } from '../hooks/useAPI'
import { getTheme, getThemeNames, applyTheme } from '../themes'
import Dashboard from './Dashboard'
import Studio from './Studio'
import Shell from './Shell'
import Config from './Config'

const TABS = [
  { id: 'dash', label: 'DASH', icon: '[■]' },
  { id: 'studio', label: 'STUDIO', icon: '[<>]' },
  { id: 'shell', label: 'SHELL', icon: '[$]' },
  { id: 'config', label: 'CONFIG', icon: '[//]' },
]

export default function App() {
  const [activeTab, setActiveTab] = useState('dash')
  const [info, setInfo] = useState({})
  const [clock, setClock] = useState(new Date())
  const [updates, setUpdates] = useState([])
  const [tools, setTools] = useState([])
  const [transition, setTransition] = useState(false)
  const [currentTheme, setCurrentTheme] = useState('cyberpunk-red')
  const api = useAPI()

  useEffect(() => {
    api.getInfo().then(setInfo).catch(() => {})
    api.getTools().then(d => setTools(d.tools || [])).catch(() => {})
    api.getUpdates().then(d => setUpdates(d.updates || [])).catch(() => {})

    const theme = getTheme(currentTheme)
    applyTheme(theme)
  }, [])

  useEffect(() => {
    const timer = setInterval(() => setClock(new Date()), 1000)
    return () => clearInterval(timer)
  }, [])

  const switchTab = useCallback((tabId) => {
    if (tabId === activeTab) return
    setTransition(true)
    setTimeout(() => {
      setActiveTab(tabId)
      setTimeout(() => setTransition(false), 150)
    }, 100)
  }, [activeTab])

  const hasUpdates = updates.some(u => u.needsUpdate)

  const renderContent = () => {
    switch (activeTab) {
      case 'dash': return <Dashboard tools={tools} updates={updates} api={api} onRescan={(t) => setTools(t)} />
      case 'studio': return <Studio api={api} />
      case 'shell': return <Shell api={api} />
      case 'config': return <Config api={api} theme={currentTheme} onThemeChange={setCurrentTheme} />
      default: return null
    }
  }

  return (
    <div className="app-layout">
      <header className="header">
        <span className="header-logo">MUYUE</span>
        <span className="header-version">v{info.version || '...'}</span>

        <div className="header-tabs">
          {TABS.map(tab => (
            <div
              key={tab.id}
              className={`header-tab ${activeTab === tab.id ? 'active' : ''}`}
              onClick={() => switchTab(tab.id)}
            >
              {tab.icon} {tab.label}
            </div>
          ))}
        </div>

        <div className="header-spacer" />

        <div className="header-status">
          <span className={`status-dot ${tools.length > 0 ? 'ok' : 'off'}`} title="System" />
          <span className={`status-dot ${hasUpdates ? 'warn' : 'ok'}`} title="Updates" />
        </div>

        <span className="header-date">{clock.toLocaleDateString('fr-FR')}</span>
        <span className="header-clock">{clock.toLocaleTimeString('fr-FR')}</span>
      </header>

      <div className={`content ${transition ? 'glitch-text' : 'fade-in tab-transition'}`}>
        {renderContent()}
      </div>

      <footer className="footer">
        <span className="footer-shortcuts">
          <kbd>1-4</kbd> tabs · <kbd>Ctrl+T</kbd> switcher · <kbd>Ctrl+C</kbd> quit
        </span>
        <span className={`footer-update ${hasUpdates ? 'available' : 'uptodate'}`}>
          {hasUpdates ? '[UPD] Updates available' : '[OK] Up to date'}
        </span>
        <span className="footer-version">v{info.version || '...'}</span>
      </footer>
    </div>
  )
}