d7fc71a5e6
- Introduced `EditorFileWatcher` for live file change detection and `GitStatusService` for displaying Git status in the file tree. - Added context menu for file operations (create, delete) and implemented multi-tab support for the editor. - Enhanced user experience with keyboard shortcuts, search functionality, and breadcrumb navigation. - Updated IPC channels for file operations and integrated conflict detection during file saves. - Improved performance with file watcher optimizations and virtualized file tree rendering.
13 KiB
13 KiB
Wireframes (черновик, пересмотреть позже)
Статус: DRAFT — требует пересмотра и финализации перед реализацией.
1. Main state (файл открыт)
┌─────────────────────────────────────────────────────────────────────────────┐
│ [←] Open in Editor — /Users/belief/project [?] [×] │
├──────────────────────┬──────────────────────────────────────────────────────┤
│ 🔍 Filter files... │ [● index.ts] [ App.tsx ] [ utils.ts] [×] │
│ │ ─────────────────────────────────────────────────── │
│ ▼ src/ │ src / renderer / components / App.tsx │
│ ▼ renderer/ │ ─────────────────────────────────────────────────── │
│ ▼ components/ │ 1 │ import React from 'react'; │
│ ▸ chat/ │ 2 │ import { useStore } from '../store'; │
│ ▸ common/ │ 3 │ │
│ ● App.tsx │ 4 │ export const App = () => { │
│ index.ts │ 5 │ const theme = useStore(s => s.theme); │
│ ▸ hooks/ │ 6 │ return ( │
│ ▸ store/ │ 7 │ <div className={theme}> │
│ ▸ utils/ │ 8 │ <Router /> │
│ ▸ main/ │ 9 │ </div> │
│ ▸ shared/ │ 10 │ ); │
│ ▸ test/ │ 11 │ }; │
│ ▸ docs/ │ 12 │ │
│ package.json │ │
│ tsconfig.json │ │
│ ├──────────────────────────────────────────────────────│
│ │ Ln 5, Col 12 │ TypeScript │ UTF-8 │ Spaces: 2 │ LF │
└──────────────────────┴──────────────────────────────────────────────────────┘
2. Empty state (нет открытых файлов)
┌──────────────────────┬──────────────────────────────────────────────────────┐
│ 🔍 Filter files... │ │
│ │ │
│ ▼ src/ │ No file is open │
│ ▸ main/ │ │
│ ▸ renderer/ │ Keyboard Shortcuts │
│ ▸ shared/ │ ───────────────── │
│ ▸ test/ │ ⌘P Quick Open │
│ package.json │ ⌘S Save File │
│ │ ⌘⇧F Search in Files │
│ │ ⌘W Close Tab │
│ │ ⌘B Toggle Sidebar │
│ │ ⌘G Go to Line │
│ │ Esc Close Editor │
│ │ │
└──────────────────────┴──────────────────────────────────────────────────────┘
3. Unsaved changes confirm dialog
┌──────────────────────────────────────────────────┐
│ │
│ ⚠ You have unsaved changes in 3 files: │
│ │
│ • index.ts │
│ • App.tsx │
│ • utils.ts │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌────────┐ │
│ │ Save All & │ │ Discard & │ │ Cancel │ │
│ │ Close │ │ Close │ │ │ │
│ └──────────────┘ └──────────────┘ └────────┘ │
│ │
└──────────────────────────────────────────────────┘
4. Context menu на директории
│ ▼ components/ │
│ ▸ chat/ │
│ ▸ common/ ─────┤
│ App.tsx │ New File... │
│ index.ts │ New Folder... │
│ ▸ hooks/ │────────────────────│
│ │ Delete │
│ │ Copy Path │
│ │ Reveal in Finder │
│ └────────────────────┘
5. Quick Open (Cmd+P)
┌──────────────────────────────────────────────────┐
│ 🔍 app.tsx │
├──────────────────────────────────────────────────┤
│ ● App.tsx src/renderer/components │
│ AppShell.tsx src/renderer/components │
│ api.ts src/shared/types │
│ atomicWrite.ts src/main/utils │
│ │
│ 4 results │
└──────────────────────────────────────────────────┘
6. Search in Files (Cmd+Shift+F)
┌──────────────────────┬──────────────────────────────────────────────────────┐
│ SEARCH IN FILES │ [ index.ts ] [● App.tsx ] │
│ 🔍 useStore [Aa] │ ─────────────────────────────────────────────────── │
│ ──────────────────── │ 1 │ import React from 'react'; │
│ 12 results in 8 files│ 5 │ const theme = useStore(s => s.theme); ◄── │
│ │ │
│ ▼ src/renderer/ │ │
│ App.tsx:5 │ │
│ const theme = │ │
│ useStore(s => │ │
│ store/index.ts:12 │ │
│ export const │ │
│ useStore = ... │ │
│ ▼ src/main/ │ │
│ ... │ │
└──────────────────────┴──────────────────────────────────────────────────────┘
7. Binary / Error / Large file states
Binary file:
┌──────────────────────────────────────────────────┐
│ │
│ 📄 logo.png │
│ PNG Image • 245 KB │
│ │
│ [Open in System Viewer] [Close Tab] │
│ │
└──────────────────────────────────────────────────┘
Error state:
┌──────────────────────────────────────────────────┐
│ │
│ ⚠ Cannot read file │
│ Permission denied (EACCES) │
│ │
│ [Retry] [Close Tab] │
│ │
└──────────────────────────────────────────────────┘
Large file (2-5MB):
┌──────────────────────────────────────────────────┐
│ ⚠ File too large for editing (3.2 MB) │
│ Showing first 100 lines (read-only preview) │
│──────────────────────────────────────────────────│
│ 1 │ // This is a large generated file... │
│ 2 │ ... │
│ 100 │ ... │
│──────────────────────────────────────────────────│
│ [Open in External Editor] │
└──────────────────────────────────────────────────┘
8. Git status badges + conflict banner
File tree with git status:
│ ▼ src/ │
│ ▼ renderer/ │
│ M App.tsx │ ← M = modified (amber)
│ U newFile.ts │ ← U = untracked (green)
│ A staged.ts │ ← A = staged (blue)
│ index.ts │
Conflict banner (file changed on disk while open):
┌──────────────────────────────────────────────────────────────┐
│ ⚠ File changed on disk [Reload] [Keep Mine] [Show Diff] │
├──────────────────────────────────────────────────────────────┤
│ 1 │ import React from 'react'; │
│ 2 │ ... │
└──────────────────────────────────────────────────────────────┘