feat(renderer): App.tsx renders AppShell

src/renderer/App.tsx

@@ -1,26 +1,7 @@
-import { ThemeToggle } from './components/theme-toggle';
-import { Button } from './components/ui/button';
+import { AppShell } from './components/layout/AppShell';
 
 function App() {
-  return (
-    <div className="flex h-screen flex-col bg-background text-foreground">
-      <header className="flex h-14 items-center justify-between border-b border-border px-4">
-        <div className="flex items-center gap-3">
-          <div className="h-7 w-7 rounded-md bg-brand" aria-label="MarkdownConverter logo" />
-          <h1 className="text-sm font-semibold">MarkdownConverter</h1>
-        </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>
-    </div>
-  );
+  return <AppShell />;
 }
 
 export default App;

src/renderer/components/layout/AppHeader.tsx

@@ -0,0 +1,41 @@
+import { PanelLeft, PanelRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { useAppStore } from '@/stores/app-store';
+
+export function AppHeader() {
+  const { sidebarVisible, previewVisible, toggleSidebar, togglePreview } = useAppStore();
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-border bg-card/40 px-4 backdrop-blur">
+      <div className="flex items-center gap-3">
+        <div
+          className="h-7 w-7 rounded-md bg-gradient-to-br from-brand to-brand-dark shadow-[var(--shadow-glow-brand)]"
+          aria-label="MarkdownConverter logo"
+        />
+        <h1 className="font-display text-lg font-bold tracking-tight">MarkdownConverter</h1>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Toggle sidebar"
+          aria-pressed={sidebarVisible}
+          onClick={toggleSidebar}
+        >
+          <PanelLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Toggle preview"
+          aria-pressed={previewVisible}
+          onClick={togglePreview}
+        >
+          <PanelRight className="h-4 w-4" />
+        </Button>
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}

src/renderer/components/layout/AppShell.tsx

@@ -0,0 +1,53 @@
+import { AppHeader } from './AppHeader';
+import { TabBar } from './TabBar';
+import { Toolbar } from './Toolbar';
+import { Breadcrumb } from './Breadcrumb';
+import { StatusBar } from './StatusBar';
+import { useAppStore } from '@/stores/app-store';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
+
+export function AppShell() {
+  const { sidebarVisible, previewVisible, paneSizes, setPaneSizes } = useAppStore();
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <AppHeader />
+      <TabBar />
+      <Toolbar />
+      <Breadcrumb />
+      <main className="flex-1 overflow-hidden">
+        <ResizablePanelGroup
+          direction="horizontal"
+          onLayout={(sizes) => setPaneSizes({ sidebar: sizes[0], editor: sizes[1], preview: sizes[2] })}
+        >
+          {sidebarVisible && (
+            <>
+              <ResizablePanel defaultSize={paneSizes.sidebar} minSize={15} maxSize={40}>
+                <aside className="h-full border-r border-border bg-card/10 p-3 text-sm text-muted-foreground">
+                  File tree placeholder
+                </aside>
+              </ResizablePanel>
+              <ResizableHandle />
+            </>
+          )}
+          <ResizablePanel defaultSize={previewVisible ? paneSizes.editor : 100} minSize={20}>
+            <section className="h-full bg-background p-4 text-sm text-muted-foreground">
+              Editor placeholder
+            </section>
+          </ResizablePanel>
+          {previewVisible && (
+            <>
+              <ResizableHandle />
+              <ResizablePanel defaultSize={paneSizes.preview} minSize={20}>
+                <section className="h-full border-l border-border bg-card/10 p-4 text-sm text-muted-foreground">
+                  Preview placeholder
+                </section>
+              </ResizablePanel>
+            </>
+          )}
+        </ResizablePanelGroup>
+      </main>
+      <StatusBar />
+    </div>
+  );
+}

src/renderer/components/layout/Breadcrumb.tsx

@@ -0,0 +1,7 @@
+export function Breadcrumb() {
+  return (
+    <nav aria-label="File path" className="flex h-7 items-center border-b border-border bg-card/10 px-3 text-xs text-muted-foreground">
+      <span>No file selected</span>
+    </nav>
+  );
+}

src/renderer/components/layout/StatusBar.tsx

@@ -0,0 +1,14 @@
+export function StatusBar() {
+  return (
+    <footer className="flex h-7 items-center justify-between border-t border-border bg-card/20 px-3 text-xs text-muted-foreground">
+      <div className="flex items-center gap-4">
+        <span>0 words</span>
+        <span>UTF-8</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <span>Ln 1, Col 1</span>
+        <span>Markdown</span>
+      </div>
+    </footer>
+  );
+}

src/renderer/components/layout/TabBar.tsx

@@ -0,0 +1,7 @@
+export function TabBar() {
+  return (
+    <div className="flex h-9 items-center border-b border-border bg-card/20 px-3 text-xs text-muted-foreground">
+      <span>No files open</span>
+    </div>
+  );
+}

src/renderer/components/layout/Toolbar.tsx

@@ -0,0 +1,15 @@
+import { Bold, Italic, List, ListOrdered, Code, Link as LinkIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export function Toolbar() {
+  return (
+    <div className="flex h-10 items-center gap-1 border-b border-border bg-card/10 px-3">
+      <Button variant="ghost" size="icon" aria-label="Bold"><Bold className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Italic"><Italic className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Unordered list"><List className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Ordered list"><ListOrdered className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Code"><Code className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Link"><LinkIcon className="h-4 w-4" /></Button>
+    </div>
+  );
+}

src/renderer/components/ui/resizable.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <ResizablePrimitive.Group
+    ref={ref}
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+))
+ResizablePanelGroup.displayName = "ResizablePanelGroup"
+
+const ResizablePanel = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive.Panel>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>
+>(({ className, ...props }, ref) => (
+  <ResizablePrimitive.Panel
+    ref={ref}
+    className={cn(
+      "h-full w-full overflow-hidden",
+      className
+    )}
+    {...props}
+  />
+))
+ResizablePanel.displayName = "ResizablePanel"
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Separator> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.Separator
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.Separator>
+)
+ResizableHandle.displayName = "ResizableHandle"
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

src/renderer/stores/app-store.ts

@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface PaneSizes {
+  sidebar: number;
+  editor: number;
+  preview: number;
+}
+
+interface AppState {
+  sidebarVisible: boolean;
+  previewVisible: boolean;
+  zenMode: boolean;
+  paneSizes: PaneSizes;
+  toggleSidebar: () => void;
+  togglePreview: () => void;
+  setZenMode: (value: boolean) => void;
+  setPaneSizes: (sizes: PaneSizes) => void;
+}
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      sidebarVisible: true,
+      previewVisible: true,
+      zenMode: false,
+      paneSizes: { sidebar: 20, editor: 50, preview: 30 },
+      toggleSidebar: () => set((s) => ({ sidebarVisible: !s.sidebarVisible })),
+      togglePreview: () => set((s) => ({ previewVisible: !s.previewVisible })),
+      setZenMode: (value) => set({ zenMode: value }),
+      setPaneSizes: (sizes) => set({ paneSizes: sizes }),
+    }),
+    { name: 'mc-app-store' }
+  )
+);

src/renderer/test/setup.ts

@@ -10,3 +10,26 @@ declare global {
 if (typeof window !== 'undefined' && !window.electronAPI) {
   window.electronAPI = {};
 }
+
+// Mock matchMedia for next-themes (jsdom doesn't have it)
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => true,
+    }),
+  });
+}
+
+// Mock react-resizable-panels for jsdom environment
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'innerWidth', { writable: true, value: 1920 });
+  Object.defineProperty(window, 'innerHeight', { writable: true, value: 1080 });
+}

tests/component/layout/AppHeader.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '@/components/theme-provider';
+import { AppHeader } from '@/components/layout/AppHeader';
+import { useAppStore } from '@/stores/app-store';
+
+describe('AppHeader', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useAppStore.setState({ sidebarVisible: true, previewVisible: true, zenMode: false });
+  });
+
+  it('renders the app title', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppHeader />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/markdownconverter/i)).toBeInTheDocument();
+  });
+
+  it('toggles sidebar when sidebar button clicked', async () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppHeader />
+      </ThemeProvider>
+    );
+    const btn = screen.getByRole('button', { name: /toggle sidebar/i });
+    await userEvent.click(btn);
+    expect(useAppStore.getState().sidebarVisible).toBe(false);
+  });
+});

tests/component/layout/AppShell.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { AppShell } from '@/components/layout/AppShell';
+import { useAppStore } from '@/stores/app-store';
+
+// Mock react-resizable-panels for jsdom environment
+vi.mock('@/components/ui/resizable', () => ({
+  ResizablePanelGroup: ({ children, direction, onLayout }: any) => (
+    <div data-testid="resizable-panel-group" data-direction={direction}>
+      {children}
+    </div>
+  ),
+  ResizablePanel: ({ children, defaultSize, minSize, maxSize }: any) => (
+    <div data-testid="resizable-panel" data-size={defaultSize} data-min={minSize} data-max={maxSize}>
+      {children}
+    </div>
+  ),
+  ResizableHandle: () => <div data-testid="resizable-handle" />,
+}));
+
+describe('AppShell', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useAppStore.setState({ sidebarVisible: true, previewVisible: true, zenMode: false });
+  });
+
+  it('renders all shell surfaces when sidebar and preview are visible', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppShell />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/markdownconverter/i)).toBeInTheDocument();
+    expect(screen.getByText(/no files open/i)).toBeInTheDocument();
+    expect(screen.getByText(/no file selected/i)).toBeInTheDocument();
+    expect(screen.getByText(/0 words/i)).toBeInTheDocument();
+  });
+
+  it('hides sidebar when sidebarVisible is false', () => {
+    useAppStore.setState({ sidebarVisible: false });
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppShell />
+      </ThemeProvider>
+    );
+    expect(screen.queryByText(/file tree placeholder/i)).not.toBeInTheDocument();
+  });
+});

tests/component/layout/StatusBar.test.tsx

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { StatusBar } from '@/components/layout/StatusBar';
+
+describe('StatusBar', () => {
+  it('renders zero word count when no file is open', () => {
+    render(<StatusBar />);
+    expect(screen.getByText(/0 words/i)).toBeInTheDocument();
+  });
+});

tests/component/layout/TabBar.test.tsx

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { TabBar } from '@/components/layout/TabBar';
+
+describe('TabBar', () => {
+  it('renders an empty state when no tabs are open', () => {
+    render(<TabBar />);
+    expect(screen.getByText(/no files open/i)).toBeInTheDocument();
+  });
+});

tests/component/layout/Toolbar.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Toolbar } from '@/components/layout/Toolbar';
+
+describe('Toolbar', () => {
+  it('renders formatting buttons', () => {
+    render(<Toolbar />);
+    expect(screen.getByRole('button', { name: /bold/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /italic/i })).toBeInTheDocument();
+  });
+});

tests/unit/stores/app-store.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useAppStore } from '@/stores/app-store';
+
+describe('useAppStore', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useAppStore.setState({
+      sidebarVisible: true,
+      previewVisible: true,
+      zenMode: false,
+      paneSizes: { sidebar: 20, editor: 50, preview: 30 },
+    });
+  });
+
+  it('toggles sidebar visibility', () => {
+    expect(useAppStore.getState().sidebarVisible).toBe(true);
+    useAppStore.getState().toggleSidebar();
+    expect(useAppStore.getState().sidebarVisible).toBe(false);
+  });
+
+  it('toggles preview visibility', () => {
+    useAppStore.getState().togglePreview();
+    expect(useAppStore.getState().previewVisible).toBe(false);
+  });
+
+  it('updates pane sizes', () => {
+    useAppStore.getState().setPaneSizes({ sidebar: 25, editor: 50, preview: 25 });
+    expect(useAppStore.getState().paneSizes).toEqual({ sidebar: 25, editor: 50, preview: 25 });
+  });
+
+  it('enables and disables zen mode', () => {
+    useAppStore.getState().setZenMode(true);
+    expect(useAppStore.getState().zenMode).toBe(true);
+  });
+});