dguiducci
126886e309
- Rebrand: new app/agent icons, SKALD.md, warm "paper" CSS palette (terracotta accent, --radius tokens, WCAG contrast, reduced-motion), updated favicon, tray icon, skaldkonur asset - i18n: backend crate (i18n.rs, locale column, ui_locale config), frontend library (web/lib/i18n.js, I18nMixin, t(key)), translation files (web/i18n/), every component wired - Dashboard: <dashboard-page> replaces old home-page content; <app-copilot> becomes the landing page (full/dock layout modes) - Shared folders: API endpoints (shared_folders.rs), frontend page, can_write membership, container mount topology, user_fs routing - Role capabilities: new db table & authorization seam (data not enums), roles.attrs JSON for ui_mode / interface select - Setup: skald-setup prompts for language + password, sets ui_locale - General: components migrated to CSS variables, Lit conventions cleanup, connectors/catalog/marketplace/approval refactoring
66 lines
2.0 KiB
JavaScript
66 lines
2.0 KiB
JavaScript
import { html, nothing } from 'lit';
|
|
import { t } from '../../lib/i18n.js';
|
|
import { FileViewerBase } from './file-viewer-base.js';
|
|
|
|
/**
|
|
* Mobile file-viewer page. Same engine as the desktop `<file-viewer-page>`, but
|
|
* prop-driven: `<mobile-app>` binds `visible` / `path` from its hash router
|
|
* (`#file_viewer?path=...`) instead of the component listening to the hash. The
|
|
* back button returns to the previous mobile section via history.
|
|
*/
|
|
export class MobileFileViewerPage extends FileViewerBase {
|
|
static properties = {
|
|
visible: { type: Boolean },
|
|
path: { type: String },
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
this.visible = false;
|
|
this.path = null;
|
|
}
|
|
|
|
updated(changed) {
|
|
if (changed.has('visible') || changed.has('path')) {
|
|
if (this.visible && this.path) this._show(this.path);
|
|
else if (!this.visible) this._hide();
|
|
}
|
|
}
|
|
|
|
_back() {
|
|
history.back();
|
|
}
|
|
|
|
// Filename portion of the path, for the compact mobile header title.
|
|
_basename() {
|
|
const p = this.path || '';
|
|
const i = p.lastIndexOf('/');
|
|
return i < 0 ? p : p.slice(i + 1);
|
|
}
|
|
|
|
render() {
|
|
if (!this.visible) return nothing;
|
|
return html`
|
|
<div class="mobile-file-viewer">
|
|
<div class="mobile-section-header">
|
|
<span class="mobile-section-title">
|
|
<button class="chat-page-back" title=${t('fv.back')} @click=${() => this._back()}>
|
|
<i class="bi bi-arrow-left"></i>
|
|
</button>
|
|
<span class="fv-mobile-name" title=${this.path ?? ''}><bdi>${this._basename()}</bdi></span>
|
|
</span>
|
|
<span class="fv-header-actions">
|
|
${this._renderModeToggle('chat-page-back')}
|
|
<button class="chat-page-back" title=${t('fv.download')} @click=${() => this._download()}>
|
|
<i class="bi bi-download"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div class="fv-body">${this._renderBody()}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('mobile-file-viewer-page', MobileFileViewerPage);
|