refactor(ui): complete ui template migration and fix playback

static/dropdown.ts

@@ -0,0 +1,55 @@
+class UIDropdown extends HTMLElement {
+  isOpen: boolean = false
+  contentEl: HTMLElement | null = null
+
+  constructor() {
+    super()
+    this.toggle = this.toggle.bind(this)
+    this.handleClickOutside = this.handleClickOutside.bind(this)
+  }
+
+  connectedCallback() {
+    const trigger = this.querySelector('[data-trigger]')
+    this.contentEl = this.querySelector('[data-content]')
+
+    if (trigger) {
+      trigger.addEventListener('click', this.toggle)
+    }
+
+    document.addEventListener('click', this.handleClickOutside)
+  }
+
+  disconnectedCallback() {
+    const trigger = this.querySelector('[data-trigger]')
+    if (trigger) {
+      trigger.removeEventListener('click', this.toggle)
+    }
+    document.removeEventListener('click', this.handleClickOutside)
+  }
+
+  toggle() {
+    this.isOpen = !this.isOpen
+    if (this.contentEl) {
+      if (this.isOpen) {
+        this.contentEl.classList.remove('hidden')
+      } else {
+        this.contentEl.classList.add('hidden')
+      }
+    }
+  }
+
+  close() {
+    this.isOpen = false
+    if (this.contentEl) {
+      this.contentEl.classList.add('hidden')
+    }
+  }
+
+  handleClickOutside(event: MouseEvent) {
+    if (!this.contains(event.target as Node)) {
+      this.close()
+    }
+  }
+}
+
+customElements.define('ui-dropdown', UIDropdown)

static/style.css

@@ -5,17 +5,31 @@
 @source "..";
 @source "../web/**/*.templ";
 
+@theme {
+  --color-background: #080808;
+  --color-background-sidebar: #0f0f0f;
+  --color-background-header: #141414;
+  --color-background-surface: #202020;
+  --color-background-button: #1a1a1a;
+  --color-background-button-hover: #252525;
+
+  --color-foreground-muted: #6a6b70;
+  --color-foreground: #f8f9fa;
+
+  --color-accent: #7cb518;
+}
+
 :root {
   color-scheme: light dark;
 
-  --bg: light-dark(#fafaf9, #080808);
+  --bg: var(--color-background);
   --panel: light-dark(#f5f5f4, #181818);
   --panel-soft: light-dark(#e7e5e4, #202020);
   --header: light-dark(#ffffff, #101010);
   --text: light-dark(#1c1917, #e7e5e4);
   --text-muted: light-dark(#57534e, #a8a29e);
   --text-faint: light-dark(#a8a29e, #78716c);
-  --accent: light-dark(#0c0a09, #fafaf9);
+  --accent: var(--color-accent);
   --danger: #dc2626;
   --surface-search: light-dark(#f5f5f4, #181818);
   --surface-search-focus-border: light-dark(rgba(12, 10, 9, 0.12), rgba(255, 255, 255, 0.12));
@@ -51,3 +65,39 @@
 [data-theme="dark"] {
   color-scheme: dark;
 }
+
+html, body {
+  background-color: var(--color-background);
+  color: var(--text);
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+@media (min-width: 1024px) {
+  .scrollbar-hide::-webkit-scrollbar {
+    display: block;
+    height: 8px;
+  }
+  .scrollbar-hide::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+  }
+  .scrollbar-hide::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+  }
+  .scrollbar-hide::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .scrollbar-hide {
+    -ms-overflow-style: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
+  }
+}