feat(renderer): Sidebar, FileTree, Outline components wired into AppShell

tests/component/sidebar/FileTree.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { FileTree } from '@/components/sidebar/FileTree';
+import { useFileStore } from '@/stores/file-store';
+
+vi.mock('@/lib/ipc', () => ({
+  ipc: {
+    file: {
+      list: vi.fn().mockResolvedValue({ ok: true, data: [] }),
+      read: vi.fn().mockResolvedValue({ ok: true, data: '' }),
+    },
+  },
+}));
+
+describe('FileTree', () => {
+  beforeEach(() => {
+    useFileStore.setState({ tree: null, rootPath: null, expanded: new Set(), openTabs: [], activeTabId: null });
+  });
+
+  it('renders nothing when tree is null', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <FileTree />
+      </ThemeProvider>
+    );
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+
+  it('renders root children after openFolder', async () => {
+    useFileStore.setState({
+      tree: {
+        name: 'project',
+        path: '/project',
+        isDirectory: true,
+        loaded: true,
+        children: [
+          { name: 'src', path: '/project/src', isDirectory: true, children: null, loaded: false },
+          { name: 'README.md', path: '/project/README.md', isDirectory: false, children: null },
+        ],
+      },
+      rootPath: '/project',
+    });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <FileTree />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('src')).toBeInTheDocument();
+    expect(screen.getByText('README.md')).toBeInTheDocument();
+  });
+
+  it('shows folder as expanded after toggle and reveals children', async () => {
+    useFileStore.setState({
+      tree: {
+        name: 'project',
+        path: '/project',
+        isDirectory: true,
+        loaded: true,
+        children: [
+          {
+            name: 'src',
+            path: '/project/src',
+            isDirectory: true,
+            loaded: true,
+            children: [
+              { name: 'index.ts', path: '/project/src/index.ts', isDirectory: false, children: null },
+            ],
+          },
+        ],
+      },
+      rootPath: '/project',
+      expanded: new Set(['/project/src']),
+    });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <FileTree />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('index.ts')).toBeInTheDocument();
+  });
+
+  it('highlights the active tab path', () => {
+    useFileStore.setState({
+      tree: {
+        name: 'project',
+        path: '/project',
+        isDirectory: true,
+        loaded: true,
+        children: [
+          { name: 'README.md', path: '/project/README.md', isDirectory: false, children: null },
+        ],
+      },
+      rootPath: '/project',
+      activeTabId: '/project/README.md',
+    });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <FileTree />
+      </ThemeProvider>
+    );
+
+    const btn = screen.getByRole('button', { name: /README.md/i });
+    expect(btn).toHaveClass('bg-accent');
+  });
+});

tests/component/sidebar/Outline.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Outline } from '@/components/sidebar/Outline';
+import { useEditorStore } from '@/stores/editor-store';
+
+describe('Outline', () => {
+  beforeEach(() => {
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('renders "No file open" when no active buffer', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/no file open/i)).toBeInTheDocument();
+  });
+
+  it('renders H1-H6 headings from the active buffer content', () => {
+    const buffers = new Map([
+      [
+        'b1',
+        {
+          id: 'b1',
+          path: '/x.md',
+          content: '# Hello\n## World\n### Foo\n#### Bar\n##### Baz\n###### Qux',
+          dirty: false,
+        },
+      ],
+    ]);
+    useEditorStore.setState({ buffers, activeId: 'b1' });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+    expect(screen.getByText('World')).toBeInTheDocument();
+    expect(screen.getByText('Foo')).toBeInTheDocument();
+    expect(screen.getByText('Bar')).toBeInTheDocument();
+    expect(screen.getByText('Baz')).toBeInTheDocument();
+    expect(screen.getByText('Qux')).toBeInTheDocument();
+  });
+
+  it('renders headings with level-based indent', () => {
+    const buffers = new Map([
+      [
+        'b1',
+        {
+          id: 'b1',
+          path: '/x.md',
+          content: '# Title\n## Subtitle\n### Section',
+          dirty: false,
+        },
+      ],
+    ]);
+    useEditorStore.setState({ buffers, activeId: 'b1' });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+
+    const buttons = screen.getAllByRole('button');
+    // H1 has paddingLeft 8px, H2 has24px, H3 has 40px
+    expect(buttons[0]).toHaveStyle('padding-left: 8px');
+    expect(buttons[1]).toHaveStyle('padding-left: 24px');
+    expect(buttons[2]).toHaveStyle('padding-left: 40px');
+  });
+});

tests/component/sidebar/Sidebar.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Sidebar } from '@/components/sidebar/Sidebar';
+import { useFileStore } from '@/stores/file-store';
+import { useEditorStore } from '@/stores/editor-store';
+
+describe('Sidebar', () => {
+  beforeEach(() => {
+    useFileStore.setState({ tree: null, rootPath: null, expanded: new Set(), openTabs: [], activeTabId: null });
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('renders without crashing with empty state in both sections', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Sidebar />
+      </ThemeProvider>
+    );
+    expect(screen.getByText('Files')).toBeInTheDocument();
+    expect(screen.getByText('Outline')).toBeInTheDocument();
+    expect(screen.getByText(/no folder opened/i)).toBeInTheDocument();
+    expect(screen.getByText(/no file open/i)).toBeInTheDocument();
+  });
+
+  it('renders FileTree and Outline sections', () => {
+    useFileStore.setState({
+      tree: {
+        name: 'project',
+        path: '/project',
+        isDirectory: true,
+        loaded: true,
+        children: [{ name: 'README.md', path: '/project/README.md', isDirectory: false, children: null }],
+      },
+      rootPath: '/project',
+    });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Sidebar />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('Files')).toBeInTheDocument();
+    expect(screen.getByText('Outline')).toBeInTheDocument();
+    expect(screen.getByText('README.md')).toBeInTheDocument();
+  });
+});