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

src/renderer/components/layout/AppShell.tsx

@@ -5,6 +5,7 @@ import { Breadcrumb } from './Breadcrumb';
 import { StatusBar } from './StatusBar';
 import { EditorPane } from '@/components/editor/EditorPane';
 import { PreviewPane } from '@/components/preview/PreviewPane';
+import { Sidebar } from '@/components/sidebar/Sidebar';
 import { useAppStore } from '@/stores/app-store';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
 
@@ -26,7 +27,7 @@ export function AppShell() {
             <>
               <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
+                  <Sidebar />
                 </aside>
               </ResizablePanel>
               <ResizableHandle />

src/renderer/components/sidebar/FileTree.tsx

@@ -0,0 +1,73 @@
+import { ChevronRight, Folder, FolderOpen, File, FileText } from 'lucide-react';
+import { useFileStore } from '@/stores/file-store';
+import { cn } from '@/lib/utils';
+
+function FileTreeNode({ node, depth }: { node: import('@/stores/file-store').FileNode; depth: number }) {
+  const { expanded, activeTabId, loadChildren, toggleExpanded, openFile } = useFileStore();
+  const isExpanded = expanded.has(node.path);
+  const isActive = activeTabId === node.path;
+
+  if (node.isDirectory) {
+    const handleClick = async () => {
+      if (!node.loaded) {
+        await loadChildren(node.path);
+      }
+      toggleExpanded(node.path);
+    };
+
+    return (
+      <div>
+        <button
+          onClick={handleClick}
+          className={cn(
+            'flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-xs hover:bg-accent',
+            isActive && 'bg-accent'
+          )}
+          style={{ paddingLeft: `${depth * 16 + 4}px` }}
+        >
+          <ChevronRight
+            size={12}
+            className={cn('transition-transform duration-150', isExpanded && 'rotate-90')}
+          />
+          {isExpanded ? <FolderOpen size={14} /> : <Folder size={14} />}
+          <span className="truncate">{node.name}</span>
+        </button>
+        {isExpanded && node.loaded && node.children && (
+          <div>
+            {node.children.map((child) => (
+              <FileTreeNode key={child.path} node={child} depth={depth + 1} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => openFile(node.path)}
+      className={cn(
+        'flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-xs hover:bg-accent',
+        isActive && 'bg-accent text-accent-foreground'
+      )}
+      style={{ paddingLeft: `${depth * 16 + 4}px` }}
+    >
+      <FileText size={14} />
+      <span className="truncate">{node.name}</span>
+    </button>
+  );
+}
+
+export function FileTree() {
+  const tree = useFileStore((s) => s.tree);
+
+  if (!tree) return null;
+
+  return (
+    <div className="py-1">
+      {tree.children?.map((child) => (
+        <FileTreeNode key={child.path} node={child} depth={0} />
+      ))}
+    </div>
+  );
+}

src/renderer/components/sidebar/Outline.tsx

@@ -0,0 +1,77 @@
+import { useEditorStore } from '@/stores/editor-store';
+
+const HEADING_RE = /^(#{1,6})\s+(.+)$/gm;
+
+interface HeadingItem {
+  level: number;
+  text: string;
+  line: number;
+}
+
+function extractHeadings(content: string): HeadingItem[] {
+  const headings: HeadingItem[] = [];
+  let match: RegExpExecArray | null;
+  const re = new RegExp(HEADING_RE.source, 'gm');
+  let lineNum = 1;
+  for (const line of content.split('\n')) {
+    re.lastIndex = 0;
+    match = re.exec(line);
+    if (match) {
+      headings.push({
+        level: match[1].length,
+        text: match[2].trim(),
+        line: lineNum,
+      });
+    }
+    lineNum++;
+  }
+  return headings;
+}
+
+export function Outline() {
+  const activeId = useEditorStore((s) => s.activeId);
+  const buffers = useEditorStore((s) => s.buffers);
+
+  if (!activeId) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No file open</span>
+      </div>
+    );
+  }
+
+  const buffer = buffers.get(activeId);
+  if (!buffer) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No file open</span>
+      </div>
+    );
+  }
+
+  const headings = extractHeadings(buffer.content);
+
+  if (headings.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No headings</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-0.5 py-1">
+      {headings.map((h, i) => (
+        <button
+          key={i}
+          onClick={() => {}}
+          className="flex items-center gap-1 rounded px-2 py-0.5 text-left text-xs hover:bg-accent"
+          style={{ paddingLeft: `${(h.level - 1) * 16 + 8}px` }}
+        >
+          <span className="truncate text-muted-foreground">#{h.level}</span>
+          <span className="truncate">{h.text}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

src/renderer/components/sidebar/Sidebar.tsx

@@ -0,0 +1,50 @@
+import { ChevronRight } from 'lucide-react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useFileStore } from '@/stores/file-store';
+import { FileTree } from './FileTree';
+import { Outline } from './Outline';
+
+export function Sidebar() {
+  const rootPath = useFileStore((s) => s.rootPath);
+
+  return (
+    <div className="flex h-full flex-col gap-3">
+      {/* Files section */}
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger asChild>
+          <button className="flex w-full items-center gap-1.5 px-1 py-1.5 text-xs font-medium hover:bg-accent rounded">
+            <ChevronRight size={12} className="rotate-90" />
+            Files
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ScrollArea className="h-[calc(100vh-240px)]">
+            {!rootPath ? (
+              <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+                <span>No folder opened</span>
+              </div>
+            ) : (
+              <FileTree />
+            )}
+          </ScrollArea>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Outline section */}
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger asChild>
+          <button className="flex w-full items-center gap-1.5 px-1 py-1.5 text-xs font-medium hover:bg-accent rounded">
+            <ChevronRight size={12} className="rotate-90" />
+            Outline
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ScrollArea className="h-[calc(100vh-240px)]">
+            <Outline />
+          </ScrollArea>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}