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.
171 lines
13 KiB
Markdown
171 lines
13 KiB
Markdown
# 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 │ ... │
|
||
└──────────────────────────────────────────────────────────────┘
|
||
```
|