Skip to content

feat(window): drag to resize left sidebar and right outline - #28

Open
Refone wants to merge 2 commits into
ekino:mainfrom
Refone:feat/sidebar-outline-resize
Open

Refone wants to merge 2 commits into
ekino:mainfrom
Refone:feat/sidebar-outline-resize

Conversation

@Refone

@Refone Refone commented Sep 25, 2026

Copy link
Copy Markdown

Description

Adds drag-to-resize to the left file browser and the right outline, so the two panels are no longer stuck at their fixed widths (260 px and 220 px). Long folder names and deep heading text used to get truncated with no way to adapt the layout; each panel now gets a thin drag handle — drag to change its width, double-click to reset to the default, and the chosen width is remembered across launches.

Demo

img_v3_0215s_642f4f7e-b432-449e-b9ba-e77760adbe5g

Changes

Left sidebar (1dcb29e)

  • New #sidebar-resizer handle sits between the sidebar and the content area: a 6 px invisible strip that lights up on hover/drag and shows a col-resize cursor
  • Drag is wired with Pointer Events and setPointerCapture, so releasing the pointer outside the window still ends the drag cleanly — no stuck col-resize cursor
  • Width writes to the --sidebar-width CSS variable (shared by width and min-width), clamped to 160–640 px; double-click restores the 260 px default
  • The width is persisted under a new sidebarWidth key in the existing settings.json store and restored on launch
  • New preferences.ts helpers — isValidSidebarWidth, resolveInitialSidebarWidth, applySidebarWidthToDOM — plus 5 unit tests

Right outline (2a17649)

  • Same treatment for #outline via #outline-resizer, with the drag direction inverted (dragging right shrinks it) because the handle sits on the panel's left edge; range 160–480 px, default 220 px
  • The handle mirrors the outline's visibility: hidden by default, shown/hidden together in buildOutline, and hidden when the outline preference is "hidden"
  • Both handles are added to the @media print and body.print-mode hide lists so print/PDF export never leaks a stray 6 px strip
  • New outlineWidth key + preferences.ts helpers (isValidOutlineWidth, resolveInitialOutlineWidth, applyOutlineWidthToDOM) + 5 unit tests

Verification

  • npx tsc --noEmit passes
  • npm test: 327 tests pass (10 new — 5 per panel)
  • npm run build succeeds

Notes for review: no README/docs changes — resizable panels are a standard, self-explanatory affordance and the README doesn't document panel widths. The two panels share the same implementation shape (CSS variable + pointer-capture drag + store persistence) but are intentionally kept separate rather than over-abstracted, mirroring how the existing preference helpers are laid out.

Type of Change

  • Bug fix
  • New feature
  • Refactoring
  • Documentation

Checklist

  • I have tested my changes locally
  • I have updated the documentation if needed
  • My code follows the existing code style

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant