Skip to content

feat(file-viewer): resize and expand the window, back/forward between previewed files - #659

Merged
Ark0N merged 3 commits into
Ark0N:masterfrom
opticon454:feat/file-viewer-resize-history
Oct 22, 2026
Merged

Ark0N merged 3 commits into
Ark0N:masterfrom
opticon454:feat/file-viewer-resize-history

Conversation

@opticon454

Copy link
Copy Markdown
Contributor

What

The File Viewer window (where a markdown file opens) can be resized and expanded, and has Back and Forward buttons for jumping between files.

Why

A document that links to another document replaces itself in the overlay with no way back, so reading a set of linked notes means closing and reopening each one. The window is also fixed at 900x700, which is small for a long document or a wide table.

How

  • Back / forward: every preview opened in the overlay is remembered. ← and → buttons (and Alt+← / Alt+→) walk the list. Opening something new from the middle of the list drops the forward entries, as a browser does; reloading the file already showing (the MD and Page toggles) adds nothing; closing the viewer clears the list. The buttons stay hidden until there is somewhere to go, and unsaved edits still ask before leaving.
  • Expand: a header button fills the screen and is remembered across opens.
  • Resize: a corner grip sizes the window. It is centred, so the drag counts twice to keep the corner under the pointer. The default size is unchanged; a dragged or expanded size is capped at 96vw x 94vh.
  • Folder-grid paging (‹ ›, ←/→) is unchanged and separate from the new buttons.

Tests

test/file-preview-window.test.ts (new): list recording, stepping without re-recording, dropping forward entries, no duplicate on reload, clearing on close, the unsaved-edits prompt, expand toggle and re-apply, and the markup. The full suite passes. Changeset included.

@Ark0N

Ark0N commented Oct 18, 2026

Copy link
Copy Markdown
Owner

Thanks @opticon454, this is a welcome one: the File Viewer gets Back/Forward between previewed files (buttons plus Alt+←/→), an Expand button that is remembered per device, and a corner grip to resize the window. The history logic is clean and the tests cover it well. A few things before it goes in:

  1. Phones: Expand and the grip shrink the full-screen viewer (src/web/public/styles.css:11942, src/web/public/index.html:629 and :641). Under 600px, mobile.css:2277 makes the window full screen (100vw x --app-height). The new .expanded rule (96vw x 94vh, !important) beats it, so tapping Expand on a 390x844 phone takes the window from 390x844 to 374x793, labels the button "Restore size", and remembers that for every later preview on the phone. The grip renders on phones too (the CSS comment says touch devices use Expand instead, but nothing hides it), and a stray touch drag writes inline px sizes that stay for the rest of the page load. This block inside mobile.css's @media (max-width: 599px) fixes both. I checked it at 390, 820 and 1440 wide: the phone stays full screen in every state, and tablet and desktop are unchanged.

    .file-preview-window,
    .file-preview-window.expanded {
      width: 100vw !important;
      height: var(--app-height, 100vh) !important;
    }
    #filePreviewExpandBtn,
    .file-preview-resize {
      display: none;
    }

    The !important on the phone rule also covers a size left over from a drag in landscape (where the grip still shows) after the phone rotates to portrait. A JS guard (MobileDetection.isHandheldDevice() hiding the button and skipping _bindFilePreviewResize) is fine too, as long as neither the .expanded class nor an inline size can shrink the phone layout.

  2. Back/Forward leaves folder paging on the wrong file (src/web/public/panels-ui.js:4574). Each ←/→ page through a folder grid is recorded, but stepping back onto one of those entries leaves folderGrid.index on the newer file. Paging a, b, c, then Alt+← shows b, and the next → opens d instead of c (and the forward list becomes a, b, d). In stepFilePreviewHistory, when e.options?.folderFile?.folderId === this.folderGrid?.folderId, look up the file's index by name and open it through _openFolderGridFile(index) (still under _filePreviewHistoryStepping), so index, lastIndex and the highlighted tile follow. Or skip recording folder-grid pages entirely: ‹ › already walk them, and paging 50 images pushes the document you came from out of the list. Your call, with a test for whichever you pick.

  3. Alt+←/→ at the ends of the list leaks through (src/web/public/panels-ui.js:4644). The handler returns before preventDefault() when there is nowhere to step. With the terminal focused behind the overlay, the chord is typed into the session as word-left/right, and with focus on a header button the browser's own Alt+← Back can navigate away from Codeman. While the overlay is visible and the target is not a text field, please swallow the chord even when there is nothing to step to.

  4. A test for the key handler (test/file-preview-window.test.ts). The harness already stubs document.addEventListener with vi.fn(), so the listener can be read from mock.calls and driven with fake keydown events: Alt+← steps, a plain or Shift arrow does nothing, a textarea target is skipped, and the end-of-list case is swallowed after fix 3. A quick check of the grip's clamp and doubled delta is welcome too.

Two optional extras:

  • A line on Back/Forward (Alt+←/→), Expand and the grip in docs/wiki/Keyboard-Shortcuts.md and docs/wiki/Working-With-Files.md.
  • zh-CN entries in src/web/public/i18n.js for the new titles and labels, next to Copy content and Edit file.

Once 1 to 4 are in, I'll merge it. Thanks again for building this!

…llows history, swallow Alt+arrows

Under 600px the window stays full screen whatever Expand or a drag says, and both
controls are hidden. Stepping onto a folder-grid entry goes through the grid so its
index follows. Alt+left/right is swallowed at the ends of the list too. Adds tests
for the key handler, the grip clamp and the history/grid case, zh-CN titles and wiki lines.
@opticon454

Copy link
Copy Markdown
Contributor Author

Pushed 2cd0d825 (rebased onto current master first). Items 1 to 4 and both extras:

  1. Phones: your mobile.css block, added to the max-width: 599px section (width and height !important for the window with and without .expanded, and the Expand button and grip hidden).
  2. Folder paging: I took the lookup route. stepFilePreviewHistory opens a folder-grid entry through _openFolderGridFile(index) (found by name, same folderId) under the stepping flag, so index, lastIndex and the tile follow. Paging a, b, c, back, then → now gives c, with history a, b, c. An entry from another folder falls back to a plain open.
  3. Alt+←/→ is now swallowed whenever the overlay is visible and the target is not a text field, including at the ends of the list.
  4. test/file-preview-window.test.ts drives the keydown listener from document.addEventListener's mock calls: steps, plain/Shift/Ctrl and other keys ignored, textarea skipped, end-of-list swallowed, hidden overlay ignored. It also covers the grid case from item 2, the grip's doubled delta and clamp, and the phone CSS (a text match against mobile.css, not a rendered check; I have not looked at it at 390/820/1440 in a browser).
  • Extras: zh-CN entries in i18n.js, and lines in Keyboard-Shortcuts.md and Working-With-Files.md.

Typecheck, lint, format and the full npm test pass (590 files, 11824 tests).

@opticon454
opticon454 force-pushed the feat/file-viewer-resize-history branch from 9b6d258 to 2cd0d82 Compare October 18, 2026 10:03
@Ark0N

Ark0N commented Oct 20, 2026

Copy link
Copy Markdown
Owner

Thanks @opticon454 for the quick turnaround. This gives the File Viewer Back/Forward between previewed files (buttons plus Alt+←/→), an Expand button remembered per device, and a corner grip to resize the window, and all four items from my last comment are in. I checked them in Chromium: on a 390x844 phone the window stays 390x844 with Expand on and with a leftover drag size, and both controls are hidden; desktop keeps its 900x700 default; a drag keeps the grip under the pointer; folder paging continues from the file you stepped back to; and with the terminal focused, Alt+← steps while Alt+→ at the end of the list is swallowed instead of reaching the session.

One small thing turned up:

  1. The grip resizes on any mouse button (src/web/public/panels-ui.js:4668). The pointerdown handler does not check ev.button, so a right-click on the grip followed by a move resizes the window (900x700 to 700x500 in my run), and on Linux and macOS the context menu opens at the same time. Making if (ev.button !== 0) return; the first line fixes it, with a drag() case in test/file-preview-window.test.ts that passes button: 2 and expects no size write (the existing drag() cases then need button: 0 on their pointerdown).

A few doc touches I will make at merge time:

  • The styles.css comment at src/web/public/styles.css:12254 says touch devices use Expand instead, but tablets (600 to 1023px) show and use the grip; only phones hide it.
  • Alt+←/→ goes into the Ctrl+? overlay (a display-only entry in DEFAULT_SHORTCUTS, src/web/public/app.js:683) and the help modal's Panels group, since the wiki page says the two lists match.
  • The wiki row moves from "Sessions and tabs" to "Everything else" in docs/wiki/Keyboard-Shortcuts.md.

I will merge this with the grip fix on top. If you would rather push the fix yourself, go ahead and I will merge once it lands. Thanks again for building this!

@opticon454

Copy link
Copy Markdown
Contributor Author

Thanks @Ark0N. The grip fix is in the new commit: _bindFilePreviewResize now returns first when ev.button !== 0. drag() in test/file-preview-window.test.ts takes a button (default 0) and a new case passes button: 2 and expects no size write. The three doc touches are fine for you to make at merge time.

@Ark0N

Ark0N commented Oct 20, 2026

Copy link
Copy Markdown
Owner

Thanks @opticon454, the grip fix is in: _bindFilePreviewResize now ignores anything but the primary button, and the new button: 2 case in test/file-preview-window.test.ts pins it. With that, the File Viewer gets Back/Forward between previewed files (buttons plus Alt+←/→), an Expand button remembered per device, and a corner grip, and phones stay full screen. Typecheck, lint, format, the frontend syntax check and the tests all pass here.

As agreed, I will make these at merge time:

  • The grip comment at src/web/public/styles.css:12254 will say that only phones hide the grip, since tablets show and use it.
  • Alt+←/→ goes into the Ctrl+? overlay as a display-only entry in DEFAULT_SHORTCUTS (src/web/public/app.js), and into the help modal's Panels group.
  • The wiki row moves from "Sessions and tabs" to "Everything else" in docs/wiki/Keyboard-Shortcuts.md.

I will also keep the Expand button's label fixed while it is pressed (src/web/public/panels-ui.js:4627), the way the MD, Lines and Wrap toggles work, so a screen reader does not announce "Restore size, pressed".

I will merge it with these on top. Thanks again for building this!

@Ark0N
Ark0N merged commit e3c6f9f into Ark0N:master Oct 22, 2026
2 checks passed
Ark0N pushed a commit that referenced this pull request Oct 22, 2026
Merge-time fix for #659.

The Expand button swapped its title and aria-label to "Restore size"
while on, so a screen reader announced "Restore size, pressed". The
label now stays "Expand" and aria-pressed alone carries the state, the
way the MD, Lines and Wrap toggles work.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Ark0N pushed a commit that referenced this pull request Oct 22, 2026
Merge-time fix for #659.

- Alt+Left/Right (File Viewer back/forward) is a display-only entry in
  DEFAULT_SHORTCUTS, so the Ctrl+? overlay lists it, and a row in the
  help modal's Panels group, pinned in help-modal-shortcuts.test.ts.
  zh-CN entry for the new label; the "Restore size" entry is dropped,
  since nothing shows that string any more.
- The wiki row moves from "Sessions and tabs" to "Everything else".
- The grip comment in styles.css says only phones hide the grip;
  tablets show and use it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Ark0N pushed a commit that referenced this pull request Oct 22, 2026
…dow, back/forward between previewed files

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@Ark0N

Ark0N commented Oct 22, 2026

Copy link
Copy Markdown
Owner

Merged and shipped in 1.44.0. Thank you @opticon454! Resizing, Expand and Back/Forward make the File Viewer feel like a real window, and phones staying full screen was the right call.

What I added at merge time:

  • The grip comment in styles.css now says only phones hide it.
  • Alt+← / Alt+→ are in the Ctrl+? overlay (a display-only DEFAULT_SHORTCUTS entry, translated for zh-CN) and in the help modal's Panels group, with a test line pinning the help row.
  • The wiki row moved to "Everything else".
  • The Expand button keeps its label while pressed and only aria-pressed changes, like the MD, Lines and Wrap toggles, so the now-unused "Restore size" translation went too.

@opticon454
opticon454 deleted the feat/file-viewer-resize-history branch October 22, 2026 20:16
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.

2 participants