Open File Preview in Tabs

[pedramamini]

Summary

Convert file preview from a full-screen overlay to a tab-based interface that coexists with AI conversation tabs in the unified tab bar.

Current Behavior

• File preview consumes the entire main panel
• TabBar is hidden when file preview is open
• Only one file can be previewed at a time
• File preview has its own X close button in the control panel

Desired Behavior

• File preview opens as a tab in the tab bar
• Multiple documents can be open as tabs simultaneously
• Users can easily switch between AI tabs and document tabs
• Tab bar always visible, tabs freely interspersed (drag to reorder)
• File tabs show filename (without extension) + extension badge (e.g., .md, .ts)
• Remove X from file preview control panel (tab handles closing)

Design Decisions

1. Separate array: filePreviewTabs array separate from aiTabs, with unifiedTabOrder for visual ordering
2. Future-proofed: Type discriminator ('ai' | 'file') extensible to 'terminal' for future CLI terminal tabs
3. File tab overlay menu actions:
   • Copy File Path
   • Copy File Name
   • Open in Default App
   • Reveal in Finder
   • Move to First/Last Position
   • Close Tab / Close Other Tabs / Close Tabs to Left/Right
4. Keyboard shortcuts:
   • Cmd+1-9 works across unified tab order
   • Cmd+W closes current tab (AI or file)
5. State preservation: Scroll position, search query, edit mode preserved per tab
6. Persistence: File tabs persist across session switches and app restarts
7. No limit: Users manage their own tab count

Implementation Phases

Auto Run documents created in Auto Run Docs/2026-02-01-File-Preview-Tabs/:

Phase	Focus
01	Data model & type definitions
02	Tab management logic in App.tsx
03	Unified TabBar component
04	MainPanel integration
05	File content management
06	Keyboard shortcuts & navigation
07	File click handler migration
08	Cleanup & polish

Files Affected

• src/renderer/types/index.ts - New types
• src/renderer/App.tsx - Tab management handlers
• src/renderer/components/TabBar.tsx - Unified rendering
• src/renderer/components/MainPanel.tsx - Integration
• src/renderer/components/FilePreview.tsx - Remove close button
• src/renderer/constants/shortcuts.ts - Cmd+W shortcut

---

FILE-PREVIEW-TABS-01.md
FILE-PREVIEW-TABS-02.md
FILE-PREVIEW-TABS-03.md
FILE-PREVIEW-TABS-04.md
FILE-PREVIEW-TABS-05.md
FILE-PREVIEW-TABS-06.md
FILE-PREVIEW-TABS-07.md
FILE-PREVIEW-TABS-08.md