Files
typst-leaf/typst-leaf-backend/src/routes/files.ts
T
nav.sikand 008dab1cf9 feat: IDE shell, file management, UI rehaul, reliability, and git workflow
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.
2026-07-02 02:05:04 +05:30

174 lines
5.8 KiB
TypeScript

import { Router, type Router as ExpressRouter } from "express";
import fs from "node:fs/promises";
import path from "node:path";
import { z } from "zod";
import { projectNameSchema, relPathSchema, resolveFile } from "../paths.js";
export const filesRouter: ExpressRouter = Router();
const projectParam = z.object({ project: projectNameSchema });
const fileQuery = z.object({ path: relPathSchema });
const writeBody = z.object({ content: z.string() });
const renameBody = z.object({ from: relPathSchema, to: relPathSchema });
const createFileBody = z.object({
path: relPathSchema,
content: z.string().optional().default(""),
});
const createFolderBody = z.object({ path: relPathSchema });
filesRouter.get("/:project/file", async (req, res) => {
const p = projectParam.safeParse(req.params);
const q = fileQuery.safeParse(req.query);
if (!p.success || !q.success) {
res.status(400).json({
error: [...(p.error?.issues ?? []), ...(q.error?.issues ?? [])],
});
return;
}
try {
const { abs } = resolveFile(p.data.project, q.data.path);
const content = await fs.readFile(abs, "utf8");
const stat = await fs.stat(abs);
res.json({ path: q.data.path, content, mtime: stat.mtimeMs });
} catch (err) {
res.status(404).json({ error: (err as Error).message });
}
});
filesRouter.put("/:project/file", async (req, res) => {
const p = projectParam.safeParse(req.params);
const q = fileQuery.safeParse(req.query);
const b = writeBody.safeParse(req.body);
if (!p.success || !q.success || !b.success) {
res.status(400).json({
error: [
...(p.error?.issues ?? []),
...(q.error?.issues ?? []),
...(b.error?.issues ?? []),
],
});
return;
}
try {
const { abs } = resolveFile(p.data.project, q.data.path);
await fs.mkdir(path.dirname(abs), { recursive: true });
await fs.writeFile(abs, b.data.content, "utf8");
const stat = await fs.stat(abs);
res.json({ path: q.data.path, mtime: stat.mtimeMs });
} catch (err) {
res.status(500).json({ error: (err as Error).message });
}
});
// Create a new file (optional content, defaults to empty)
filesRouter.post("/:project/file", async (req, res) => {
const p = projectParam.safeParse(req.params);
const b = createFileBody.safeParse(req.body);
if (!p.success || !b.success) {
res.status(400).json({
error: [...(p.error?.issues ?? []), ...(b.error?.issues ?? [])],
});
return;
}
try {
const { abs } = resolveFile(p.data.project, b.data.path);
await fs.mkdir(path.dirname(abs), { recursive: true });
const fd = await fs.open(abs, "wx").catch((e) => {
if (e.code === "EEXIST") {
const wrapped = new Error("file already exists") as NodeJS.ErrnoException;
wrapped.code = "EEXIST";
throw wrapped;
}
throw e;
});
if (b.data.content) await fd.writeFile(b.data.content, "utf8");
await fd.close();
res.status(201).json({ path: b.data.path, ok: true });
} catch (err) {
const code = (err as NodeJS.ErrnoException).code;
res.status(code === "EEXIST" || code === "ENOENT" ? 409 : 500).json({
ok: false,
error: (err as Error).message,
});
}
});
// Delete a file
filesRouter.delete("/:project/file", async (req, res) => {
const p = projectParam.safeParse(req.params);
const q = fileQuery.safeParse(req.query);
if (!p.success || !q.success) {
res.status(400).json({
error: [...(p.error?.issues ?? []), ...(q.error?.issues ?? [])],
});
return;
}
try {
const { abs } = resolveFile(p.data.project, q.data.path);
await fs.unlink(abs);
res.json({ ok: true });
} catch (err) {
res.status(404).json({ ok: false, error: (err as Error).message });
}
});
// Rename / move a file
filesRouter.patch("/:project/file", async (req, res) => {
const p = projectParam.safeParse(req.params);
const b = renameBody.safeParse(req.body);
if (!p.success || !b.success) {
res.status(400).json({
error: [...(p.error?.issues ?? []), ...(b.error?.issues ?? [])],
});
return;
}
try {
const { abs: fromAbs } = resolveFile(p.data.project, b.data.from);
const { abs: toAbs } = resolveFile(p.data.project, b.data.to);
await fs.mkdir(path.dirname(toAbs), { recursive: true });
// Atomically guard against overwriting an existing file. On POSIX
// link() fails if the destination exists, and rename() overwrites
// the destination only after we have created a hard link, so there
// is no window for another process to create the target in between.
const tempAbs = `${toAbs}.tmp-${Date.now()}`;
try {
await fs.link(fromAbs, tempAbs);
} catch (err) {
const code = (err as NodeJS.ErrnoException).code;
res
.status(code === "EEXIST" ? 409 : 500)
.json({ ok: false, error: code === "EEXIST" ? "destination already exists" : (err as Error).message });
return;
}
try {
await fs.rename(tempAbs, toAbs);
} catch (err) {
await fs.unlink(tempAbs).catch(() => {});
throw err;
}
await fs.unlink(fromAbs).catch(() => {});
res.json({ ok: true, from: b.data.from, to: b.data.to });
} catch (err) {
res.status(500).json({ ok: false, error: (err as Error).message });
}
});
// Create a folder
filesRouter.post("/:project/folder", async (req, res) => {
const p = projectParam.safeParse(req.params);
const b = createFolderBody.safeParse(req.body);
if (!p.success || !b.success) {
res.status(400).json({
error: [...(p.error?.issues ?? []), ...(b.error?.issues ?? [])],
});
return;
}
try {
const dirPath = resolveFile(p.data.project, b.data.path).abs;
await fs.mkdir(dirPath, { recursive: true });
res.status(201).json({ path: b.data.path, ok: true });
} catch (err) {
res.status(500).json({ ok: false, error: (err as Error).message });
}
});