Add user database migration, core reusable components, and layout structure

2026-05-16 18:54:23 -04:00
parent c7df396a83
commit e132c7a580
33 changed files with 2348 additions and 398 deletions
@@ -0,0 +1,35 @@
+class UiEmpty extends HTMLElement {
+  connectedCallback() {
+    const icon    = this.getAttribute('icon')    || 'inbox';
+    const heading = this.getAttribute('heading') || 'Nothing here yet';
+    const body    = this.getAttribute('body')    || '';
+
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: flex; justify-content: center; }
+        .wrap {
+          display: flex; flex-direction: column; align-items: center;
+          gap: .75rem; padding: 3rem 2rem; text-align: center; max-width: 360px;
+        }
+        .icon-wrap {
+          width: 64px; height: 64px; border-radius: 50%;
+          background: var(--surface-2); display: flex; align-items: center;
+          justify-content: center; color: var(--text-muted);
+        }
+        h3 { font-size: 1rem; font-weight: 600; color: var(--text); }
+        p  { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }
+        ::slotted(*) { margin-top: .5rem; }
+      </style>
+      <div class="wrap">
+        <div class="icon-wrap">
+          <i data-lucide="${icon}" style="width:28px;height:28px"></i>
+        </div>
+        <h3>${heading}</h3>
+        ${body ? `<p>${body}</p>` : ''}
+        <slot></slot>
+      </div>`;
+    if (window.lucide) lucide.createIcons({ nodes: [this.shadowRoot] });
+  }
+}
+customElements.define('ui-empty', UiEmpty);