feat: UX overhaul + keyboard shortcuts, monthly charts, reports UI

package.json

@@ -16,6 +16,7 @@
     "@tauri-apps/plugin-notification": "^2",
     "@tauri-apps/plugin-shell": "^2",
     "@tauri-apps/plugin-sql": "^2",
+    "lucide-react": "^1.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1"

src/App.jsx

@@ -1,41 +1,81 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { Toaster } from 'react-hot-toast'
 import { AppProvider } from './context/AppContext'
 import Navigation from './components/Navigation'
 import Timer from './components/Timer'
 import Dashboard from './components/Dashboard'
 import SettingsScreen from './components/SettingsScreen'
 import TagManager from './components/TagManager'
+import KeyboardHelpModal from './components/KeyboardHelpModal'
+import useKeyboardShortcuts from './hooks/useKeyboardShortcuts'
 
-const VIEWS = { timer: Timer, dashboard: Dashboard, tasks: TagManager }
+const NON_TIMER_VIEWS = { dashboard: Dashboard, tasks: TagManager }
 
-export default function App() {
+function AppInner() {
   const [view, setView] = useState('timer')
   const [showSettings, setShowSettings] = useState(false)
+  const [showKeyboardHelp, setShowKeyboardHelp] = useState(false)
+  const timerRef = useRef(null)
+
+  useKeyboardShortcuts({
+    ' ':       () => timerRef.current?.toggleTimer(),
+    'r':       () => timerRef.current?.resetTimer(),
+    'f':       () => timerRef.current?.startFocus(),
+    'b':       () => timerRef.current?.startShortBreak(),
+    'l':       () => timerRef.current?.startLongBreak(),
+    'ctrl+d':  () => setView('dashboard'),
+    'ctrl+t':  () => setView('timer'),
+    'ctrl+s':  () => setShowSettings(true),
+    '?':       () => setShowKeyboardHelp((v) => !v),
+    'escape':  () => {
+      if (showKeyboardHelp) { setShowKeyboardHelp(false); return }
+      if (showSettings) { setShowSettings(false) }
+    },
+  })
+
+  const ActiveNonTimer = NON_TIMER_VIEWS[view]
+
+  return (
+    <div className="min-h-screen flex" style={{ background: 'var(--surface-0)' }}>
+      <Navigation
+        activeView={view}
+        onViewChange={(id) => {
+          if (id === 'settings') setShowSettings(true)
+          else setView(id)
+        }}
+        onShowKeyboardHelp={() => setShowKeyboardHelp(true)}
+      />
+
+      <main className="flex-1 pl-16 overflow-auto min-h-screen">
+        {/* Timer is always mounted to preserve state and allow keyboard shortcuts */}
+        <div className={view === 'timer' ? 'p-6' : 'hidden'}>
+          <Timer ref={timerRef} />
+        </div>
 
-  const ActiveView = VIEWS[view] || Timer
+        {view !== 'timer' && ActiveNonTimer && (
+          <div key={view} className="p-6 animate-fade-in">
+            <ActiveNonTimer />
+          </div>
+        )}
+      </main>
 
+      {showSettings && <SettingsScreen onClose={() => setShowSettings(false)} />}
+      <KeyboardHelpModal isOpen={showKeyboardHelp} onClose={() => setShowKeyboardHelp(false)} />
+
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          style: { background: '#1f2937', color: '#fff', border: '1px solid rgba(255,255,255,0.1)' },
+        }}
+      />
+    </div>
+  )
+}
+
+export default function App() {
   return (
     <AppProvider>
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-gray-900 flex">
-        <Navigation
-          activeView={view}
-          onViewChange={(id) => {
-            if (id === 'settings') { setShowSettings(true) }
-            else { setView(id) }
-          }}
-        />
-        <main className="flex-1 pl-20 p-6 overflow-auto min-h-screen">
-          <ActiveView />
-        </main>
-        {showSettings && <SettingsScreen onClose={() => setShowSettings(false)} />}
-        <Toaster
-          position="bottom-right"
-          toastOptions={{
-            style: { background: '#1f2937', color: '#fff', border: '1px solid rgba(255,255,255,0.1)' },
-          }}
-        />
-      </div>
+      <AppInner />
     </AppProvider>
   )
 }