Files
Skald-Circle/web/components/file-viewer-page.js
T
Daniele 1515492938
Nightly Build / build (push) Successful in 8m5s
feat(file-viewer): browse a versioned file's git history
A clock button in the file viewer header lists the versions of a file
whose project keeps a git history; picking one shows the file as of
that commit, read-only, with a banner back to the current version.

A past version is never served from the working tree: the whole
repository is materialized at that revision (git archive streamed
through tar into a size-bounded, immutable-by-rev cache) and every
fetch — content, compiled LaTeX, markdown images, downloads — resolves
inside that tree, so dependencies are contemporaneous with the file:
a .tex compiles against its \input's and images of that moment.

Backend: new git_versions module (repo discovery bounded by the
workspace mount, host-git log/rev-parse/archive, extraction cache with
oldest-first prune) + GET /api/file/versions and a rev param on
GET /api/file (rev is the ETag; never X-Writable). Frontend: history
mode in FileViewerBase shared by the desktop and mobile viewers —
popover, banner, watcher paused while browsing, rev propagated to
every /api/file URL it builds.
2026-08-10 14:27:48 +01:00

81 lines
2.4 KiB
JavaScript

import { html, nothing } from 'lit';
import { t } from '../lib/i18n.js';
import { FileViewerBase } from './shared/file-viewer-base.js';
const PAGE_ID = 'file_viewer';
function pathFromHash() {
const h = location.hash;
const prefix = `#${PAGE_ID}?path=`;
if (!h.startsWith(prefix)) return null;
try {
return decodeURIComponent(h.slice(prefix.length));
} catch {
return null;
}
}
/**
* Desktop file-viewer page. Self-routes off the hash (`#file_viewer?path=...`):
* the sidebar's `llm-page-change` event toggles visibility and `hashchange`
* re-loads. All fetch/render/watch logic lives in `FileViewerBase`; this
* subclass only adds the desktop chrome and the hash wiring.
*/
export class FileViewerPage extends FileViewerBase {
static properties = {
_open: { state: true },
};
constructor() {
super();
this._open = false;
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('llm-page-change', (e) => {
this._open = e.detail.page === PAGE_ID;
this.style.display = this._open ? 'flex' : 'none';
if (this._open) this._loadFromHash();
else this._hide();
});
window.addEventListener('hashchange', () => {
if (this._open) this._loadFromHash();
});
}
_loadFromHash() {
const path = pathFromHash();
if (path) this._show(path);
}
_back() {
history.back();
}
render() {
if (!this._open) return nothing;
return html`
<div class="llm-page fv-page">
<div class="page-header">
<div class="page-header-left">
<button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('fv.back')} @click=${() => this._back()}>
<i class="bi bi-arrow-left"></i>
</button>
<h2 class="page-header-title fv-title" title=${this._path ?? ''}><bdi>${this._path ?? ''}</bdi></h2>
</div>
<div class="fv-header-actions">
${this._renderHistoryButton('btn btn-sm btn-outline-secondary fv-download-btn')}
${this._renderModeToggle('btn btn-sm btn-outline-secondary fv-download-btn')}
<button class="btn btn-sm btn-outline-secondary fv-download-btn" title=${t('fv.download')} @click=${() => this._download()}>
<i class="bi bi-download"></i>
</button>
</div>
</div>
${this._renderVersionBanner()}
<div class="fv-body">${this._renderBody()}</div>
</div>
`;
}
}