First Version

2026-07-10 15:02:09 +01:00
commit 38494a85a9
562 changed files with 196313 additions and 0 deletions
@@ -0,0 +1,47 @@
+import { html }         from 'lit';
+import { LightElement } from '../lib/base.js';
+
+export class AppTopbar extends LightElement {
+  static properties = {
+    _theme:           { state: true },
+    _copilotCollapsed: { state: true },
+  };
+
+  constructor() {
+    super();
+    this._theme            = document.documentElement.getAttribute('data-bs-theme') ?? 'light';
+    this._copilotCollapsed = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('copilot-collapsed', (e) => {
+      this._copilotCollapsed = e.detail.collapsed;
+    });
+  }
+
+  _toggleTheme() {
+    const next = this._theme === 'dark' ? 'light' : 'dark';
+    this._theme = next;
+    document.documentElement.setAttribute('data-bs-theme', next);
+    localStorage.setItem('theme', next);
+  }
+
+  render() {
+    const isDark = this._theme === 'dark';
+    return html`
+      <span class="topbar-title">Skald</span>
+      <span class="topbar-spacer"></span>
+      ${this._copilotCollapsed ? html`
+        <button class="topbar-copilot-btn" title="Open copilot"
+                @click=${() => window.dispatchEvent(new CustomEvent('copilot-open'))}>
+          <i class="bi bi-stars"></i>
+        </button>
+      ` : ''}
+      <button class="topbar-theme-btn" title="${isDark ? 'Switch to light mode' : 'Switch to dark mode'}"
+              @click=${() => this._toggleTheme()}>
+        <i class="bi ${isDark ? 'bi-sun' : 'bi-moon-stars'}"></i>
+      </button>
+    `;
+  }
+}