nav.sikand/typst-leaf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: IDE shell, file management, UI rehaul, reliability, and git workflow

Browse Source 
This is the next major chunk on top of the barebones MVP. It implements
the IDE shell, resizable editor/preview workspace, file CRUD, Git workflow
UI upgrade, SyncTeX/LSP reliability hardening, and documentation updates.

Highlights:

* New shared path utilities (typst-leaf-frontend/src/path-utils.ts):
  normalizeFsPath, encodeVirtualPathForFileUri, relativePathFromProject.

* SyncTeX reliability:
  * Jump targets now carry stable numeric IDs for deduplication.
  * tinymist/preview/scrollSource and window/showDocument payloads are
    validated and normalized through shared path utilities.
  * External preview paths are reported via a toast instead of silent drop.
  * Editor uses monaco.Uri.equals for URI comparison.

* IDE shell rehaul:
  * New components: TopBar, StatusBar, PanelSection, ResizableSplit,
    ToastHost, EmptyState.
  * App.tsx now uses a layered layout: top bar, sidebar tabs
    (Files/Git/Settings), resizable main workspace, status bar, toasts.
  * Sidebar tabs replace the old inline Git/settings panels.

* Resizable workspace:
  * Pointer-driven resizable split between editor and preview.
  * Split ratio persisted to localStorage (typst-leaf.split).
  * Double-click splitter resets to 55%.
  * onResize prop dispatches typst-leaf:layout so Monaco re-layouts.

* File management:
  * Backend CRUD: POST /file, DELETE /file, PATCH /file, POST /folder.
  * Frontend API wrappers and inline FileTree create/rename/delete.
  * Backend tree endpoint returns empty directories in a folders array.
  * Rename protects the .typ extension and rejects overwriting existing
    files atomically on POSIX.
  * Newly created files are opened automatically.
  * Dirty file badges in the tree.

* Git workflow upgrade:
  * GitPanel now shows changed files grouped by staged/unstaged, deduped
    by path, with per-file status icons.
  * Click a changed file to open it.
  * Commit disabled when clean or no message.
  * Push/pull with success/error toasts.
  * FileTree shows dirty badges from git status.

* Preview UX:
  * Preview toolbar with status chip, reload button, and SyncTeX hint.
  * Preview hidden/marked as "open a file" when no file is open.

* State/UX infrastructure (app-state.tsx):
  * activePanel, fileDirty, saving, notice (toast), vimOn, treeVersion,
    folders, and stable jumpTarget.id.
  * focusCommit switches to the Git panel.
  * selectProject resets more state to avoid stale data.

* Editor improvements:
  * Monaco model disposed on unmount so LSP sees didClose.
  * mountedRef survives React StrictMode remounts.
  * Global save/layout events bridge TopBar and ResizableSplit to the
    editor instance.
  * Vim mode state moved to global state/localStorage.
  * Removed redundant automaticLayout and inline Save button.

* Documentation:
  * Added DESIGN.md with the full UI aesthetic guide.
  * Updated PLAN.md, README.md, VISION.md, and the frontend README.

Verification:
  * pnpm -r typecheck passes.
  * pnpm --filter typst-leaf-frontend build passes.
This commit is contained in:
Navraj Sikand
2026-07-02 02:05:04 +05:30
parent 7618476b60
commit 008dab1cf9
24 changed files with 1727 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
VISION.md
+4 -4
View File
@@ -15,7 +15,7 @@ The system follows a strict **Client-Server** model, even when running locally.
* **Monorepo Structure:** Flat directory structure (`typst-leaf-backend`, `typst-leaf-frontend`).
* **Frontend:** React (Vite) + Monaco Editor.
* **Desktop Wrapper:** Tauri v2 (integrated into `typst-leaf-frontend`).
* **Backend:** TypeScript (Node.js/Bun) + Express/Fastify.
* **Backend:** TypeScript (Node.js) + Express.
* **Core Engine:** `tinymist` (Binary) for LSP and compilation.
### Component Breakdown
@@ -31,9 +31,9 @@ The backend is a stateless orchestration layer that sits on top of the file syst
#### B. Frontend (`typst-leaf-frontend`)
A Single Page Application (SPA) that acts as the IDE interface.
* **Editor:** Monaco Editor configured with `monaco-languageclient` to talk to the backend LSP.
* **Editor:** Monaco Editor configured with a custom ~300-line raw JSON-RPC LSP client (no `monaco-languageclient`).
* **Preview:** A high-performance SVG renderer that receives delta updates from Tinymist.
* **Vim Mode:** `monaco-vim` enabled by default or toggleable.
* **Vim Mode:** `monaco-vim` toggleable via toolbar, persisted to `localStorage`.
* **Tauri Integration:** The frontend folder contains `src-tauri`, allowing it to build as a native desktop application.
## 3. Critical Technical Decisions
@@ -54,7 +54,7 @@ We **do not** render PDFs in the browser for preview.
*Rationale:* SVGs are selectable, zoomable without blur, and significantly lighter than streaming PDF binaries.
### 3.3 The LSP Connection
We use `monaco-languageclient` to connect Monaco to the backend via WebSocket. The backend simply pipes this socket to the stdin/stdout of the running `tinymist` binary. We do not reimplement LSP logic in TypeScript.
We use a raw JSON-RPC WebSocket client (no `monaco-languageclient`) to connect Monaco to the backend. The backend simply pipes this socket to the stdin/stdout of the running `tinymist` binary. We do not reimplement LSP logic in TypeScript.
## 4. User Stories
* **As a User,** I want to type code and see the result instantly (<100ms lag).