dguiducci
0ed94225b2
Nightly Build / build (push) Successful in 7m17s
Every full-page view now renders the same sticky top bar (back button, title, right-side actions) from the new web/css/page-header.css, replacing a dozen per-page duplicates (.page-panel-header, .project-page-header, .task-page-header, .llm-page-header, .um-header, .apr-header, .llmr-header, .pv-header, .sa-header, .config-page-header, .agents-page-header). Pages that padded the whole container (config, agents, system-agents, llm-requests, models-hub) move that padding into a body wrapper so the bar sits flush and stays pinned on scroll. Back buttons are standardized to the icon-only .page-header-back.
79 lines
2.3 KiB
JavaScript
79 lines
2.3 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._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>
|
|
<div class="fv-body">${this._renderBody()}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|