App.tsx

src/App.tsx

1. import { useEffect, useRef, useState } from 'react'
3. import { ChatHeader } from './components/ChatHeader'
4. import { ChatView } from './components/ChatView'
5. import { Composer, type ComposerHandle } from './components/Composer'
6. import { SearchPalette } from './components/SearchPalette'
7. import { SettingsPanel } from './components/SettingsPanel'
8. import { Sidebar } from './components/Sidebar'
9. import { BudgetBanner, Toasts } from './components/Toasts'
10. import { UsagePanel } from './components/UsagePanel'
11. import { ipc } from './ipc'
12. import { useTheme } from './lib/theme'
13. import { useStore } from './state/store'
15. export function App() {
16. const [ready, setReady] = useState(false)
17. const [error, setError] = useState<string | null>(null)
18. const settings = useStore((s) => s.settings)
19. const info = useStore((s) => s.info)
20. const panel = useStore((s) => s.panel)
21. const composer = useRef<ComposerHandle>(null)
22. useTheme(settings, !!info?.vibrancy)
24. useEffect(() => {
25. ipc()
26. .then(async (client) => {
27. await useStore.getState().init(client)
28. setReady(true)
29. // Show the window after the first paint. A hidden page gets no
30. // animation frames, so a timer backs it up (or it would never show).
31. let shown = false
32. const show = () => {
33. if (!shown) {
34. shown = true
35. void client.windowReady()
36. }
37. }
38. requestAnimationFrame(show)
39. setTimeout(show, 100)
40. })
41. .catch((e) => {
42. setError(String(e))
43. void ipc().then((c) => c.windowReady())
44. })
45. }, [])
47. useEffect(() => {
48. const onKey = (e: KeyboardEvent) => {
49. const mod = e.metaKey || e.ctrlKey
50. const s = useStore.getState()
51. if (mod && e.key.toLowerCase() === 'k') {
52. e.preventDefault()
53. s.setPanel(s.panel === 'search' ? null : 'search')
54. } else if (mod && e.key.toLowerCase() === 'n') {
55. e.preventDefault()
56. s.newChat()
57. composer.current?.focus()
58. } else if (mod && e.key === ',') {
59. e.preventDefault()
60. s.setPanel('settings')
61. } else if (e.key === 'Escape' && s.panel) {
62. s.setPanel(null)
63. }
64. }
65. window.addEventListener('keydown', onKey)
66. return () => window.removeEventListener('keydown', onKey)
67. }, [])
69. if (error) return <div className="fatal">Cortex could not start: {error}</div>
70. if (!ready) return <div className="app loading" aria-busy />
71. return (
72. <div className="app">
73. <Sidebar />
74. <main className="main">
75. <ChatHeader />
76. <BudgetBanner />
77. <ChatView onSuggest={(t) => composer.current?.setText(t)} />
78. <div className="composer-wrap">
79. <Composer ref={composer} />
80. </div>
81. </main>
82. {panel === 'search' && <SearchPalette />}
83. {panel === 'settings' && <SettingsPanel />}
84. {panel === 'usage' && <UsagePanel />}
85. <Toasts />
86. </div>
87. )
88. }