Skip to content

Migrate to htmx4 & better ultar viewer UX#3

Merged
bobcao3 merged 14 commits intomainfrom
feat/htmx4-esm-streaming
Feb 8, 2026
Merged

Migrate to htmx4 & better ultar viewer UX#3
bobcao3 merged 14 commits intomainfrom
feat/htmx4-esm-streaming

Conversation

@bobcao3
Copy link
Copy Markdown
Collaborator

@bobcao3 bobcao3 commented Feb 8, 2026

No description provided.

bobcao3 and others added 14 commits February 8, 2026 00:49
- Remove build-time htmx embedding (build.zig, build.zig.zon) in favor
  of CDN ES module import from jsdelivr (htmx 4.0.0-alpha6)
- Migrate to htmx 4 conventions: explicit attribute inheritance
  (hx-vals:inherited), updated event names (htmx:after:swap)
- Add /load_stream SSE endpoint that progressively streams table rows
  using facil.io's native SSE API, leveraging htmx 4's built-in
  streaming response support
- File list links now use /load_stream with hx-config stream settings

Co-authored-by: Cursor <cursoragent@cursor.com>
The SSE-based /load_stream approach doesn't integrate well with htmx 4's
streaming model. Revert to the standard /load endpoint for now.

Co-authored-by: Cursor <cursoragent@cursor.com>
- Extract renderBrowseHtml/renderLoadHtml so handleIndex can pre-render
  the file tree and table inline on the initial response, eliminating
  extra XHR round-trips on deep links (/?dir=...&file=...)
- Replace Google Fonts (SUSE, IBM Plex Mono) with system font stacks,
  removing 3 blocking <link> tags and their DNS/TLS overhead

Co-authored-by: Cursor <cursoragent@cursor.com>
- Replace per-cell hx-vals with data-file/data-k/data-id on table/th/tr;
  single delegated click handler computes /boxed_file URL from DOM structure
- Inherit mono font from .table tbody td a instead of per-element class="mono"
- Add fetch()-intercepting progress bar with CSS slide+pulse animation
- Remove hx-get/hx-swap from cells; use htmx.ajax() from click handler
- Lazy-load highlight.js via ESM dynamic import (core + json only)
- Remove redundant class="suse", reorder DOM for streaming layout stability

Co-authored-by: Cursor <cursoragent@cursor.com>
- Paginate table at 500 rows/page; only build Row/Cell structs for
  current page slice (parse all entries, render one page)
- Progress bar uses CSS :has(.htmx-request) to track htmx activity,
  .active class for initial page load
- Mute address text (overlay2), brighten on hover (accent-2)
- Column highlight on hover via td::after pseudo-element
- Frosted glass thead (backdrop-filter blur on sticky thead)
- Remove bright left padding from table pane-body

Co-authored-by: Cursor <cursoragent@cursor.com>
Merge row/id into a single left-sticky id column instead of two
right-sticky columns. Switch table from border-collapse: collapse to
border-collapse: separate so that backdrop-filter on sticky thead
actually composites correctly.

Co-authored-by: Cursor <cursoragent@cursor.com>
Move backdrop-filter from thead to individual th elements so it
actually composites. Restrict position: relative to non-sticky td
cells so sticky-left isn't overridden by specificity. Show
row_idx:id in the frozen id column. Remove row divider borders.

Co-authored-by: Cursor <cursoragent@cursor.com>
Skip clicks inside .boxed-preview so the native download link
works instead of being caught and sent as a bogus boxed_file request.

Co-authored-by: Cursor <cursoragent@cursor.com>
The 10000px-tall ::after on hovered td was inflating the scroll area.
Clip overflow on .table-wrap to contain it without breaking sticky.

Co-authored-by: Cursor <cursoragent@cursor.com>
Use directional overflow-y: clip to contain the column-highlight
pseudo-element vertically while keeping overflow-x: visible for
horizontal table scrolling.

Co-authored-by: Cursor <cursoragent@cursor.com>
- Add template cloning approach: hidden <template> elements in
  base.html are cloned and populated by JS on cell click. No server
  round-trip needed for previews.
- Images show inline thumbnails first, then open floating windows.
  JSON/video/audio/text open floating windows directly.
- Floating windows are draggable, resizable, closable, stackable.
- Extract all CSS/JS to static files (style.css, app.js, hljs-json.js)
  served via new /static/ route with Cache-Control headers.
- Remove /boxed_file endpoint and all boxed template files.

Co-authored-by: Cursor <cursoragent@cursor.com>
Switch to table-layout: fixed with --data-col-width: 12rem for data
columns. All cells get overflow ellipsis. Thumbnails naturally fit
within the fixed column width without JS measurement.

Co-authored-by: Cursor <cursoragent@cursor.com>
Floating windows animate in with a fast scale(0.85)->1 zoom.
Thumbnails show a black square placeholder until the image loads,
then fade in with opacity transition.

Co-authored-by: Cursor <cursoragent@cursor.com>
Clamp drag so titlebar stays on-screen. Cap window height at 90vh
with flex column layout so the body scrolls within bounds.

Co-authored-by: Cursor <cursoragent@cursor.com>
@bobcao3 bobcao3 merged commit a56fbce into main Feb 8, 2026
8 checks passed
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