feat(renderer): wire App.tsx shell with theme provider and top-bar

src/renderer/App.tsx

@@ -1,45 +1,24 @@
-import React from 'react';
+import { ThemeToggle } from './components/theme-toggle';
-import { AppHeader } from './components/layout/AppHeader';
+import { Button } from './components/ui/button';
-import { TabBar } from './components/layout/TabBar';
-import { Toolbar } from './components/layout/Toolbar';
-import { Breadcrumb } from './components/layout/Breadcrumb';
-import { Sidebar } from './components/sidebar/Sidebar';
-import { EditorPane } from './components/editor/EditorPane';
-import { PreviewPane } from './components/preview/PreviewPane';
-import { StatusBar } from './components/layout/StatusBar';
-import { CommandPalette } from './components/modals/CommandPalette';
-import { ExportDialog } from './components/modals/ExportDialog';
-import { SettingsDialog } from './components/modals/SettingsDialog';
-import { useAppStore } from './stores/appStore';
 
 function App() {
-  const { sidebarVisible, previewVisible, activeTabId } = useAppStore();
-
   return (
-    <div className="flex flex-col h-screen bg-background text-foreground overflow-hidden">
+    <div className="flex h-screen flex-col bg-background text-foreground">
-      <AppHeader />
+      <header className="flex h-14 items-center justify-between border-b border-border px-4">
-      <TabBar />
+        <div className="flex items-center gap-3">
-      <Toolbar />
+          <div className="h-7 w-7 rounded-md bg-brand" aria-label="MarkdownConverter logo" />
-      <Breadcrumb />
+          <h1 className="text-sm font-semibold">MarkdownConverter</h1>
-
-      <main className="flex flex-1 overflow-hidden">
-        {sidebarVisible && <Sidebar />}
-
-        <div className="flex flex-1 overflow-hidden">
-          <EditorPane className={previewVisible ? 'flex-1' : 'flex-1'} />
-          {previewVisible && (
-            <>
-              <div className="w-px bg-border cursor-col-resize hover:bg-brand transition-colors" />
-              <PreviewPane className="flex-1" />
-            </>
-          )}
         </div>
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm">File</Button>
+          <Button variant="ghost" size="sm">Edit</Button>
+          <Button variant="ghost" size="sm">View</Button>
+          <ThemeToggle />
+        </div>
+      </header>
+      <main className="flex flex-1 items-center justify-center text-muted-foreground">
+        <p>Shell skeleton — implementation phases in progress.</p>
       </main>
-
-      <StatusBar />
-      <CommandPalette />
-      <ExportDialog />
-      <SettingsDialog />
     </div>
   );
 }

src/renderer/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { ThemeProvider } from './components/theme-provider';
 import './styles/globals.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <ThemeProvider defaultTheme="dark" attribute="class" enableSystem>
       <App />
+    </ThemeProvider>
   </React.StrictMode>
 );