🎨 ✨ 🚀 Overhaul UI/UX with comprehensive design system improvements

✨ Features added:

- 🔍 Implement functional search in header navigation
- ⚙️ Add basic user settings page
- 📱 Make dashboard fully responsive

🔧 Enhancements:

- 🎭 Standardize CSS with consistent theming across components
- 🧹 Remove unused CSS for better performance
- 📊 Improve dashboard layout and visual hierarchy
- 📦 Redesign last block widget for better usability

💅 This commit introduces a cohesive design system with functional design-token components for a more ✨ polished user experience.

package.json

@@ -31,13 +31,13 @@
     "@tsconfig/node22": "^22.0.0",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.13.10",
-    "electron": "^34.3.2",
+    "electron": "^34.3.3",
     "electron-builder": "^25.1.8",
     "electron-vite": "^3.0.0",
-    "lightningcss": "^1.29.2",
+    "lightningcss": "^1.29.3",
-    "sass-embedded": "^1.85.1",
+    "sass-embedded": "^1.86.0",
     "typescript": "~5.6.3",
-    "vite": "^6.2.1"
+    "vite": "^6.2.2"
   },
   "dependencies": {
     "@lit-labs/motion": "^1.0.8",

src/components/AppGrid.ts

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 
 import '@components/AppIcon';
 
@@ -15,34 +16,24 @@ export class AppGrid extends LitElement {
 
   static override styles = [
     css`
-      .app-grid {
+      :host {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+        grid-template-columns: 80px;
+        justify-content: space-around;
         gap: 20px;
         padding: 30px;
-        width: minmax(800px, 100cqw);
         margin-top: 10px;
+
+        @media (min-width: 500px) {
+          grid-template-columns: repeat(2, 80px);
+        }
+
+        @media (min-width: 768px) {
+          grid-template-columns: repeat(3, 80px);
         }
 
         @media (min-width: 1024px) {
-        .app-grid {
+          grid-template-columns: repeat(4, 80px);
-          width: 500px;
-        }
-      }
-
-      @media (max-width: 768px) {
-        .app-grid {
-          grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
-          gap: 15px;
-          padding: 20px;
-        }
-      }
-
-      @media (max-width: 480px) {
-        .app-grid {
-          grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
-          gap: 10px;
-          padding: 15px;
         }
       }
     `,
@@ -50,8 +41,8 @@ export class AppGrid extends LitElement {
 
   override render() {
     return html`
-      <div class="app-grid">
+      ${map(
-        ${this.apps.map(
+        this.apps,
         (app) => html`
           <arx-app-icon
             .icon=${app.icon}
@@ -61,7 +52,6 @@ export class AppGrid extends LitElement {
           ></arx-app-icon>
         `,
       )}
-      </div>
     `;
   }
 }

src/components/AppIcon.ts

@@ -2,6 +2,7 @@ import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import '@components/EveLink';
+import { when } from 'lit/directives/when.js';
 
 @customElement('arx-app-icon')
 export class AppIcon extends LitElement {
@@ -17,83 +18,157 @@ export class AppIcon extends LitElement {
   @property()
   name = 'App';
 
+  private iconElement?: HTMLElement;
+
   static override styles = [
     css`
-      .app-name {
+      :host {
-        font-size: 12px;
+        display: flex;
-        color: #000;
+        --animation-speed: 0.25s;
-        text-shadow: 0px 0px 5px #ffffff;
-        text-align: center;
-        max-width: 70px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        transition: all 0.2s ease-in-out;
       }
 
       .app-icon {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 5px;
+        gap: 8px;
-        color: #fff;
+        text-decoration: none;
-        text-align: center;
+        padding: 6px;
-
+        border-radius: 18px;
-        &:hover {
+        transition: transform var(--animation-speed)
-          .icon {
+          cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            transform: scale(1.1);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            border: 2px solid #000;
-            border-radius: 10px;
       }
 
-          .app-name {
+      .app-icon:hover {
-            color: white;
+        transform: translateY(-2px);
-            text-shadow: 0px 0px 5px black;
-          }
-        }
       }
 
       .icon {
-        width: clamp(48px, 8vw, 64px);
+        width: 96px;
-        height: clamp(48px, 8vw, 64px);
+        height: 96px;
-        border-radius: 15px;
+        border-radius: 24px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
         display: flex;
         justify-content: center;
         align-items: center;
-        border: 1px solid #aaa;
+        border: 1px solid rgba(255, 255, 255, 0.2);
-        transition: all 0.2s ease-in-out;
+        overflow: hidden;
+        position: relative;
+        transition: all var(--animation-speed) ease-out;
+        &::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            145deg,
+            rgba(255, 255, 255, 0.25) 20%,
+            rgba(255, 255, 255, 0) 60%
+          );
+          pointer-events: none;
+          opacity: 1;
+          transition: opacity var(--animation-speed) ease-out;
+        }
 
-        .app-icon {
+        &::after {
-          width: 75%;
+          content: "";
-          height: 75%;
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            var(--gradient-angle),
+            rgba(255, 255, 255, 0.25) 20%,
+            rgba(255, 255, 255, 0) 60%
+          );
+          pointer-events: none;
+          opacity: 0;
+          transition: opacity var(--animation-speed) ease-out;
+        }
+
+        &:hover::before {
+          opacity: 0;
+        }
+
+        &:hover::after {
+          opacity: 1;
         }
       }
 
-      @media (max-width: 480px) {
+      .icon-svg {
+        color: white;
+        filter: drop-shadow(
+          calc(cos(var(--gradient-angle)) * 2px)
+            calc(sin(var(--gradient-angle)) * 2px) rgba(0, 0, 0, 0.2)
+        );
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+      }
+
       .app-name {
-          font-size: 11px;
+        display: block;
+        width: 100%;
+        text-align: center;
+        font-size: 18px;
+        font-weight: 500;
+        color: var(--color-base-content);
+        white-space: nowrap;
+        text-decoration: none;
+        transition: all var(--animation-speed) ease-out;
       }
+
+      .app-icon:hover .icon {
+        transform: scale(1.08);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+      }
+
+      .app-icon:active .icon {
+        transform: scale(0.96);
       }
     `,
   ];
 
+  override firstUpdated() {
+    this.iconElement = this.shadowRoot?.querySelector('.icon') as HTMLElement;
+    if (this.iconElement) {
+      this.iconElement.addEventListener('mousemove', this.handleMouseMove);
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.iconElement) {
+      this.iconElement.removeEventListener('mousemove', this.handleMouseMove);
+    }
+  }
+
+  handleMouseMove = (e: MouseEvent) => {
+    if (!this.iconElement) return;
+
+    const rect = this.iconElement.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    const dx = e.clientX - centerX;
+    const dy = e.clientY - centerY;
+    const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+
+    this.iconElement.style.setProperty('--gradient-angle', `${angle}deg`);
+  };
+
   override render() {
     return html`
       <arx-eve-link href="${this.href}" class="app-icon">
-        <div class="icon" style="background-color: ${this.color}">
+        <div class="icon" style="background: ${this.color};">
-          ${
+          ${when(
-            this.icon
+            this.icon,
-              ? html`<iconify-icon
+            () => html`<iconify-icon
               icon="${this.icon}"
-                class="app-icon"
+              class="icon-svg"
-                width="48"
+              width="64"
-                height="48"
+              height="64"
-                color="white"
+            ></iconify-icon>`,
-              ></iconify-icon>`
+          )}
-              : ''
-          }
         </div>
         <span class="app-name">${this.name}</span>
       </arx-eve-link>

src/components/Arbor/Button.ts

@@ -1,78 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import '@components/EveLink';
-
-@customElement('arx-arbor-button')
-export class ArborButton extends LitElement {
-  @property({ type: String }) href = '';
-  @property({ type: String }) target = '';
-  @property({ type: String }) rel = '';
-  @property({ type: Boolean }) disabled = false;
-
-  get hrefValue() {
-    if (!this.href || this.disabled) return 'javascript:void(0)';
-    return this.href;
-  }
-
-  static override styles = [
-    css`
-      arx-eve-link::part(link) {
-        color: white;
-        text-decoration: none;
-      }
-
-      arx-eve-link {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--accent);
-        border: none;
-        padding: 0.75rem 0.75rem;
-        border-radius: 0.25rem;
-        text-decoration: none;
-        font-size: 0.9rem;
-        font-weight: 500;
-        line-height: 1.2;
-        cursor: pointer;
-        transition: all 0.2s ease-in-out;
-        box-shadow: var(--shadow-sm);
-        gap: 5px;
-      }
-
-      arx-eve-link:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-        background: color-mix(in oklch, var(--accent), black 15%);
-      }
-
-      arx-eve-link:focus {
-        outline: none;
-        box-shadow: var(--shadow-md);
-      }
-
-      arx-eve-link:active {
-        transform: translateY(0);
-        box-shadow: var(--shadow-md);
-      }
-
-      arx-eve-link.disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-    `,
-  ];
-
-  override render() {
-    return html`
-      <arx-eve-link
-        .href=${this.hrefValue}
-        .target=${this.target}
-        .rel=${this.rel}
-        class="${this.disabled ? 'disabled' : ''}"
-      >
-        <slot></slot>
-      </arx-eve-link>
-    `;
-  }
-}

src/components/Arbor/ForumCategory.ts

@@ -1,6 +1,8 @@
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+import '@components/General/Button';
+
 @customElement('arx-arbor-forum-category')
 export class ArborForumCategory extends LitElement {
   @property({ type: String }) override title = '';
@@ -9,21 +11,45 @@ export class ArborForumCategory extends LitElement {
   static override styles = [
     css`
       .forum-category {
-        background: oklch(100% 0 0);
+        background: var(--color-base-100);
-        border-radius: 0.5rem;
+        border-radius: var(--radius-box);
-        box-shadow: var(--shadow-xl);
+        border: var(--border) solid var(--color-base-300);
-        margin-block-end: 1.5rem;
+        margin-block-end: 2rem;
+        box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+            calc(var(--depth) * 4px)
+            oklch(from var(--color-base-content) l c h / 0.1),
+          calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+            calc(var(--depth) * 3px)
+            oklch(from var(--color-base-100) l c h / 0.4);
+        overflow: hidden;
       }
 
       .category-header {
-        background: var(--primary);
+        background: var(--color-secondary);
-        color: oklch(100% 0 0);
+        color: var(--color-secondary-content);
-        padding: 1rem 1.5rem;
+        padding: 1.25rem 1.75rem;
-        border-radius: 0.5rem 0.5rem 0 0;
+        font-weight: 600;
-        font-weight: 500;
+        font-size: 1.1rem;
+        letter-spacing: 0.01em;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        border-bottom: var(--border) solid var(--color-base-300);
+      }
+
+      ::slotted(:first-child) {
+        margin-top: 1rem;
+      }
+
+      ::slotted(:last-child) {
+        margin-bottom: 1rem;
+      }
+
+      .empty-state {
+        padding: 2rem 1.75rem;
+        color: var(--color-secondary);
+        font-style: italic;
+        text-align: center;
       }
     `,
   ];
@@ -33,12 +59,13 @@ export class ArborForumCategory extends LitElement {
       <div class="forum-category">
         <div class="category-header">
           <span>${this.title}</span>
-          <arx-arbor-button href="/arbor/new-topic/${this.id}">
+          <arx-button
-            New Topic
+            label="New Topic"
-          </arx-arbor-button>
+            href="/arbor/new-topic/${this.id}"
+          ></arx-button>
         </div>
         <slot>
-          <div style="padding: 1rem 1.5rem">No topics...</div>
+          <div class="empty-state">No topics yet...</div>
         </slot>
       </div>
     `;

src/components/Arbor/ForumPost.ts

@@ -19,47 +19,50 @@ export class ForumPost extends LitElement {
       .post {
         display: flex;
         flex-direction: row;
-        border-radius: 16px;
+        border-radius: var(--radius-box);
-        background: #ffffff;
+        background: var(--color-base-100);
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04),
+        box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
-          0 1px 3px rgba(0, 0, 0, 0.03);
+          calc(var(--depth) * 4px)
-        margin-block-end: 0.75rem;
+          oklch(from var(--color-base-content) l c h / 0.1);
+        margin-block-end: 1rem;
         overflow: hidden;
         transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
         isolation: isolate;
+        border: var(--border) solid var(--color-base-300);
         will-change: transform;
-
-        &:hover {
-          transform: translateY(2px);
-          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07),
-            0 2px 4px rgba(0, 0, 0, 0.04);
       }
+
+      .post:hover {
+        transform: translateY(-2px);
+        box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 6px)
+          oklch(from var(--color-base-content) l c h / 0.15);
       }
 
       .post--highlighted {
         position: relative;
         border-inline-start: none;
+      }
 
-        &::before {
+      .post--highlighted::before {
         content: "";
         position: absolute;
         inset-inline-start: 0;
         top: 0;
         bottom: 0;
         width: 4px;
-          background: #4361ee;
+        background: var(--color-accent);
         border-radius: 4px 0 0 4px;
       }
-      }
 
       .post__sidebar {
         padding: clamp(1rem, 4vw, 1.5rem);
-        border-right: 1px solid rgba(0, 0, 0, 0.06);
+        border-right: var(--border) solid var(--color-base-300);
         flex: 0 0 auto;
         display: flex;
         flex-direction: column;
         align-items: center;
-        background: rgba(0, 0, 0, 0.01);
+        background: var(--color-base-200);
       }
 
       .post__main {
@@ -73,10 +76,8 @@ export class ForumPost extends LitElement {
         display: flex;
         align-items: center;
         padding: 1rem clamp(1rem, 4vw, 1.5rem);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        border-bottom: var(--border) solid var(--color-base-300);
-        background: rgba(0, 0, 0, 0.01);
+        background: var(--color-base-200);
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
       }
 
       .post__time {
@@ -84,17 +85,18 @@ export class ForumPost extends LitElement {
         align-items: center;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: rgba(0, 0, 0, 0.6);
+        color: var(--color-secondary);
         font-weight: 500;
-
-        & iconify-icon {
-          color: rgba(0, 0, 0, 0.4);
       }
+
+      .post__time iconify-icon {
+        color: var(--color-secondary);
+        opacity: 0.7;
       }
 
       .post__permalink {
         margin-inline-start: auto;
-        color: #4361ee;
+        color: var(--color-accent);
         border: none;
         background: transparent;
         cursor: pointer;
@@ -104,22 +106,16 @@ export class ForumPost extends LitElement {
         display: grid;
         place-items: center;
         transition: all 0.2s ease;
+      }
 
-        &:hover {
+      .post__permalink:hover {
-          background: rgba(67, 97, 238, 0.08);
         transform: scale(1.05);
       }
 
-        &:focus-visible {
-          outline: 2px solid #4361ee;
-          outline-offset: 2px;
-        }
-      }
-
       .post__content {
         padding: clamp(1.25rem, 5vw, 1.75rem);
         line-height: 1.7;
-        color: rgba(0, 0, 0, 0.87);
+        color: var(--color-base-content);
         overflow-wrap: break-word;
         flex: 1;
         font-size: clamp(0.95rem, 2vw, 1rem);
@@ -129,90 +125,25 @@ export class ForumPost extends LitElement {
       .post__actions {
         display: flex;
         padding: 0.75rem clamp(0.75rem, 3vw, 1.25rem);
-        border-top: 1px solid rgba(0, 0, 0, 0.06);
+        border-top: var(--border) solid var(--color-base-300);
         gap: clamp(0.5rem, 2vw, 0.75rem);
-        background: rgba(0, 0, 0, 0.01);
+        background: var(--color-base-200);
-      }
-
-      .action-button {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 0.75rem;
-        border-radius: 10px;
-        background: transparent;
-        border: none;
-        font-family: inherit;
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: rgba(0, 0, 0, 0.6);
-        cursor: pointer;
-        transition: all 0.2s ease;
-
-        & iconify-icon {
-          font-size: 1.25rem;
-        }
-
-        &:hover:not(:disabled) {
-          background: rgba(0, 0, 0, 0.04);
-          color: rgba(0, 0, 0, 0.87);
-          transform: translateY(-1px);
-        }
-
-        &:focus-visible {
-          outline: 2px solid rgba(0, 0, 0, 0.2);
-          outline-offset: 1px;
-        }
-
-        &:active:not(:disabled) {
-          transform: translateY(1px) scale(0.98);
-        }
-
-        &:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-      }
-
-      .action-button--primary {
-        color: #4361ee;
-
-        &:hover:not(:disabled) {
-          background: rgba(67, 97, 238, 0.08);
-        }
-
-        &:focus-visible {
-          outline-color: #4361ee;
-        }
       }
 
       @media (max-width: 768px) {
         .post {
           flex-direction: column;
-          margin-inline: -1rem;
-          border-radius: 0;
           margin-block-end: 1.5rem;
         }
 
         .post__sidebar {
           border-right: none;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+          border-bottom: var(--border) solid var(--color-base-300);
           padding: 1rem;
           flex-direction: row;
           justify-content: flex-start;
           gap: 1rem;
         }
-
-        .action-button {
-          padding: 0.625rem;
-          justify-content: center;
-          flex: 1;
-          border-radius: 10px;
-
-          & span {
-            display: none;
-          }
-        }
       }
 
       @media (max-width: 480px) {
@@ -290,13 +221,13 @@ export class ForumPost extends LitElement {
               ${formatDateTime(this.date)}
             </div>
 
-            <button
+            <arx-button
               class="post__permalink"
               title="Copy permalink"
               @click=${this._copyPermalink}
             >
-              <iconify-icon icon="mdi:link-variant"></iconify-icon>
+              <iconify-icon slot="label" icon="mdi:link-variant"></iconify-icon>
-            </button>
+            </arx-button>
           </div>
 
           <div class="post__content">
@@ -306,33 +237,30 @@ export class ForumPost extends LitElement {
           </div>
 
           <div class="post__actions">
-            <button
+            <arx-button label="Reply" @click=${this._handleReply} disabled>
-              class="action-button action-button--primary"
+              <iconify-icon slot="prefix" icon="mdi:reply"></iconify-icon>
-              @click=${this._handleReply}
+            </arx-button>
-              disabled
-            >
-              <iconify-icon icon="mdi:reply"></iconify-icon>
-              <span>Reply</span>
-            </button>
 
-            <a href=${permalink} class="action-button">
+            <arx-button href=${permalink} label="Permalink">
-              <iconify-icon icon="mdi:link-variant"></iconify-icon>
+              <iconify-icon
-              <span>Permalink</span>
+                slot="prefix"
-            </a>
+                icon="mdi:link-variant"
+              ></iconify-icon>
+            </arx-button>
 
-            <button class="action-button" @click=${this._handleZap} disabled>
+            <arx-button label="Zap" @click=${this._handleZap} disabled>
-              <iconify-icon icon="mdi:lightning-bolt"></iconify-icon>
+              <iconify-icon
-              <span>Zap</span>
+                slot="prefix"
-            </button>
+                icon="mdi:lightning-bolt"
+              ></iconify-icon>
+            </arx-button>
 
-            <button
+            <arx-button label="Downzap" @click=${this._handleDownzap} disabled>
-              class="action-button"
+              <iconify-icon
-              @click=${this._handleDownzap}
+                slot="prefix"
-              disabled
+                icon="mdi:lightning-bolt-outline"
-            >
+              ></iconify-icon>
-              <iconify-icon icon="mdi:lightning-bolt-outline"></iconify-icon>
+            </arx-button>
-              <span>Downzap</span>
-            </button>
           </div>
         </div>
       </div>

src/components/Arbor/ForumTopic.ts

@@ -12,26 +12,40 @@ export class ArborForumTopic extends LitElement {
         display: grid;
         grid-template-columns: 3fr 1fr;
         padding: 1.75rem;
-        border-radius: 12px;
+        border-radius: var(--radius-box);
         margin-bottom: 1rem;
-        box-shadow: var(--shadow-md);
+        border: var(--border) solid var(--color-base-300);
+        background-color: var(--color-base-200);
+        box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+            calc(var(--depth) * 4px)
+            oklch(from var(--color-base-content) l c h / 0.1),
+          calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+            calc(var(--depth) * 3px)
+            oklch(from var(--color-base-100) l c h / 0.4);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       .topic:hover {
         transform: translateY(-2px);
-        box-shadow: var(--shadow-lg);
+        box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
+            calc(var(--depth) * 8px)
+            oklch(from var(--color-base-content) l c h / 0.15),
+          calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+            calc(var(--depth) * 5px)
+            oklch(from var(--color-base-100) l c h / 0.5);
       }
 
       .topic-icon {
         inline-size: 40px;
         block-size: 40px;
-        background: var(--accent);
+        background: var(--color-accent);
-        border-radius: 10px;
+        border-radius: calc(var(--radius-selector) * 1.5);
         flex-shrink: 0;
         position: relative;
         overflow: hidden;
-        box-shadow: var(--shadow-sm);
+        box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.15);
       }
 
       .topic-icon::after {
@@ -41,7 +55,7 @@ export class ArborForumTopic extends LitElement {
         background: linear-gradient(
           45deg,
           transparent,
-          oklch(from var(--accent) l c h / 0.2)
+          oklch(from var(--color-accent) l c h / 0.2)
         );
       }
 
@@ -62,24 +76,25 @@ export class ArborForumTopic extends LitElement {
         font-weight: 600;
         letter-spacing: -0.01em;
         text-decoration: none;
-        color: var(--primary);
+        color: var(--color-base-content);
         transition: all 0.2s ease;
-        &:hover {
-          color: var(--secondary);
-          transform: translateX(4px);
       }
+
+      arx-eve-link:hover::part(link) {
+        color: var(--color-accent);
+        transform: translateX(4px);
       }
 
       .topic-details p {
         margin: 0;
         font-size: 0.975rem;
         line-height: 1.6;
-        color: var(--secondary);
+        color: var(--color-secondary);
       }
 
       .new-status {
         position: relative;
-        color: var(--accent);
+        color: var(--color-accent);
       }
 
       .new-status::after {
@@ -90,15 +105,17 @@ export class ArborForumTopic extends LitElement {
         font-size: 0.75rem;
         font-weight: 700;
         text-transform: uppercase;
-        background: var(--accent);
+        background: var(--color-accent);
-        color: var(--light);
+        color: var(--color-accent-content);
         padding: 2px 8px;
         border-radius: 12px;
-        box-shadow: var(--shadow-sm);
+        box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.15);
       }
 
       .hot-status {
-        color: var(--error);
+        color: var(--color-error);
       }
 
       .hot-status::before {
@@ -111,29 +128,31 @@ export class ArborForumTopic extends LitElement {
         flex-direction: column;
         gap: 1rem;
         padding-left: 1.5rem;
-        border-left: 2px solid var(--border);
+        border-left: var(--border) solid var(--color-base-300);
       }
 
       .last-post-section {
-        background: oklch(from var(--primary) 98% calc(c * 0.2) h);
+        background: oklch(from var(--color-base-200) l c h);
         padding: 0.875rem;
-        border-radius: 8px;
+        border-radius: var(--radius-field);
-        box-shadow: var(--shadow-sm);
+        box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.1);
       }
 
       .last-post-section > div:first-of-type {
         font-size: 0.875rem;
         font-weight: 500;
-        color: var(--secondary);
+        color: var(--color-secondary);
         margin-bottom: 0.5rem;
       }
 
       .last-post-info {
-        color: var(--secondary);
+        color: var(--color-secondary);
         font-size: 0.875rem;
         margin-top: 0.625rem;
         padding-top: 0.625rem;
-        border-top: 1px solid var(--border);
+        border-top: var(--border) solid var(--color-base-300);
       }
 
       @media (max-width: 968px) {
@@ -147,7 +166,7 @@ export class ArborForumTopic extends LitElement {
           padding-left: 0;
           border-left: none;
           padding-top: 1rem;
-          border-top: 2px solid var(--border);
+          border-top: var(--border) solid var(--color-base-300);
         }
       }
     `,

src/components/Breadcrumbs.ts

@@ -1,8 +1,9 @@
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import './BreadcrumbsItem';
 import { map } from 'lit/directives/map.js';
 
+import '@components/BreadcrumbsItem';
+
 @customElement('arx-breadcrumbs')
 export class Breadcrumbs extends LitElement {
   @property({ type: Array }) items: { text: string; href?: string }[] = [];
@@ -11,27 +12,23 @@ export class Breadcrumbs extends LitElement {
     css`
       :host {
         display: block;
-        --breadcrumb-bg: var(--surface, #ffffff);
-        --breadcrumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-        --breadcrumb-border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
-        --breadcrumb-radius: 8px;
-        --breadcrumb-padding: 0.75rem 1.25rem;
-        --breadcrumb-font: var(--font-family, system-ui, sans-serif);
-        --breadcrumb-text-color: var(--text-primary, #333);
-        --breadcrumb-separator-color: var(--text-secondary, #666);
-        --breadcrumb-accent-color: var(--accent, #0066cc);
-        --breadcrumb-hover-color: var(--accent-dark, #004c99);
-        --breadcrumb-active-bg: var(--accent-light, rgba(0, 102, 204, 0.1));
       }
+
       nav {
         max-width: 1200px;
         margin: 1.25rem auto;
-        background-color: var(--breadcrumb-bg);
+        background-color: var(--color-base-200);
-        border-radius: var(--breadcrumb-radius);
+        border-radius: var(--radius-box);
-        box-shadow: var(--breadcrumb-shadow);
+        border: var(--border) solid var(--color-base-300);
         padding: 0.75rem 1.25rem;
         font-size: 0.95rem;
         transition: all 0.3s ease;
+        box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+            calc(var(--depth) * 4px)
+            oklch(from var(--color-base-content) l c h / 0.1),
+          calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+            calc(var(--depth) * 3px)
+            oklch(from var(--color-base-100) l c h / 0.4);
       }
 
       ol {
@@ -43,6 +40,11 @@ export class Breadcrumbs extends LitElement {
         align-items: center;
         overflow-x: auto;
         scrollbar-width: none;
+        color: var(--color-base-content);
+      }
+
+      ol::-webkit-scrollbar {
+        display: none;
       }
 
       @media (max-width: 640px) {

src/components/BreadcrumbsItem.ts

@@ -26,7 +26,7 @@ export class BreadcrumbsItem extends LitElement {
         display: flex;
         align-items: center;
         margin-inline: 0.75rem;
-        color: var(--breadcrumb-separator);
+        color: var(--color-secondary);
         user-select: none;
         font-size: 0.85rem;
       }
@@ -42,29 +42,29 @@ export class BreadcrumbsItem extends LitElement {
         display: inline-flex;
         align-items: center;
         padding: 0.4rem 0.7rem;
-        border-radius: 6px;
+        border-radius: calc(var(--radius-selector) / 2);
         transition: all 0.2s ease;
       }
 
       .active {
-        background-color: var(--breadcrumb-active-bg);
+        background-color: oklch(from var(--color-base-300) l c h / 0.5);
         font-weight: 500;
-        color: var(--breadcrumb-text);
+        color: var(--color-base-content);
       }
 
       .link {
-        color: var(--breadcrumb-accent);
+        color: var(--color-accent);
         text-decoration: none;
       }
 
       .link:hover .breadcrumb-content {
-        background-color: var(--breadcrumb-active-bg);
+        background-color: oklch(from var(--color-accent) l c h / 0.1);
       }
 
       .link:focus-visible {
-        outline: 2px solid var(--breadcrumb-accent);
+        outline: var(--border) solid var(--color-accent);
         outline-offset: 2px;
-        border-radius: 6px;
+        border-radius: calc(var(--radius-selector) / 2);
       }
 
       .item-text {
@@ -77,8 +77,8 @@ export class BreadcrumbsItem extends LitElement {
         bottom: -2px;
         left: 0;
         width: 0;
-        height: 2px;
+        height: var(--border);
-        background-color: var(--breadcrumb-accent);
+        background-color: var(--color-accent);
         transition: width 0.25s ease;
       }
 

src/components/DateTimeSettings.ts

@@ -0,0 +1,296 @@
+import { StyledToggle } from '@/components/General/Toggle';
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+import '@components/General/Input';
+import '@components/General/Fieldset';
+import '@components/General/Select';
+
+interface DateTimeFormatOptions {
+  locale: string;
+  weekday: 'long' | 'short' | 'narrow' | '';
+  year: 'numeric' | '2-digit' | '';
+  month: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | '';
+  day: 'numeric' | '2-digit' | '';
+  hour: 'numeric' | '2-digit' | '';
+  minute: 'numeric' | '2-digit' | '';
+  second: 'numeric' | '2-digit' | '';
+  hour12: boolean;
+}
+
+const DEFAULT_OPTIONS: DateTimeFormatOptions = {
+  locale: 'en-US',
+  weekday: 'short',
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  hour12: true,
+};
+
+@customElement('arx-date-time-settings')
+export class DateTimeSettings extends LitElement {
+  @state()
+  private options: DateTimeFormatOptions = { ...DEFAULT_OPTIONS };
+
+  @state()
+  private previewDate = new Date();
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.loadFromLocalStorage();
+    setInterval(() => {
+      this.previewDate = new Date();
+      this.requestUpdate();
+    }, 1000);
+  }
+
+  private loadFromLocalStorage() {
+    const savedOptions = localStorage.getItem('dateTimeFormatOptions');
+    if (savedOptions) {
+      try {
+        this.options = { ...DEFAULT_OPTIONS, ...JSON.parse(savedOptions) };
+      } catch (e) {
+        console.error('Failed to parse saved options', e);
+        this.options = { ...DEFAULT_OPTIONS };
+      }
+    }
+  }
+
+  private saveToLocalStorage() {
+    localStorage.setItem('dateTimeFormatOptions', JSON.stringify(this.options));
+    this.dispatchEvent(
+      new CustomEvent('settings-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { options: this.options },
+      }),
+    );
+  }
+
+  private handleChange(key: keyof DateTimeFormatOptions, e: Event) {
+    const target = e.target as HTMLSelectElement | HTMLInputElement | StyledToggle;
+    let value: string | boolean | undefined = target.value;
+
+    if (key === 'hour12' && target instanceof StyledToggle) value = target.checked;
+
+    this.options = {
+      ...this.options,
+      [key]: value,
+    };
+
+    if (key === 'locale') this.requestUpdate();
+
+    this.saveToLocalStorage();
+  }
+
+  private formatWithOption(option: string, type: keyof DateTimeFormatOptions): string {
+    if (option === '') return '';
+    const date = this.previewDate;
+    const locale = this.options.locale;
+
+    const formatterOptions: Intl.DateTimeFormatOptions = {
+      [type]: option,
+    };
+
+    // Special case for hour to respect hour12 setting
+    if (type === 'hour') formatterOptions.hour12 = this.options.hour12;
+
+    try {
+      return new Intl.DateTimeFormat(locale, formatterOptions).format(date);
+    } catch (e) {
+      console.error(`Error formatting with option ${option} for ${type}`, e);
+      return 'Error: Invalid format';
+    }
+  }
+
+  private formatPreview(): string {
+    return new Date(this.previewDate).toLocaleString(this.options.locale, {
+      weekday: this.options.weekday === '' ? undefined : this.options.weekday,
+      year: this.options.year === '' ? undefined : this.options.year,
+      month: this.options.month === '' ? undefined : this.options.month,
+      day: this.options.day === '' ? undefined : this.options.day,
+      hour: this.options.hour === '' ? undefined : this.options.hour,
+      minute: this.options.minute === '' ? undefined : this.options.minute,
+      second: this.options.second === '' ? undefined : this.options.second,
+      hour12: this.options.hour12,
+    });
+  }
+
+  override render() {
+    return html`
+      <arx-fieldset legend="Date/Time Settings">
+        <arx-input
+          label="Locale"
+          type="text"
+          .value=${this.options.locale}
+          @input=${(e: Event) => this.handleChange('locale', e)}
+        >
+        </arx-input>
+
+        <arx-select
+          label="Weekday Format"
+          .value=${this.options.weekday}
+          @change=${(e: Event) => this.handleChange('weekday', e)}
+          .options=${[
+            {
+              value: 'long',
+              label: `Long (${this.formatWithOption('long', 'weekday')})`,
+            },
+            {
+              value: 'short',
+              label: `Short (${this.formatWithOption('short', 'weekday')})`,
+            },
+            {
+              value: 'narrow',
+              label: `Narrow (${this.formatWithOption('narrow', 'weekday')})`,
+            },
+          ]}
+        ></arx-select>
+
+        <arx-select
+          label="Year Format"
+          .value=${this.options.year}
+          @change=${(e: Event) => this.handleChange('year', e)}
+          .options=${[
+            {
+              value: 'numeric',
+              label: `Numeric (${this.formatWithOption('numeric', 'year')})`,
+            },
+            {
+              value: '2-digit',
+              label: `2-digit (${this.formatWithOption('2-digit', 'year')})`,
+            },
+            {
+              value: '',
+              label: 'None',
+            },
+          ]}
+        ></arx-select>
+
+        <arx-select
+          label="Month Format"
+          .value=${this.options.month}
+          @change=${(e: Event) => this.handleChange('month', e)}
+          .options=${[
+            {
+              value: 'long',
+              label: `Long (${this.formatWithOption('long', 'month')})`,
+            },
+            {
+              value: 'short',
+              label: `Short (${this.formatWithOption('short', 'month')})`,
+            },
+            {
+              value: 'narrow',
+              label: `Narrow (${this.formatWithOption('narrow', 'month')})`,
+            },
+            {
+              value: 'numeric',
+              label: `Numeric (${this.formatWithOption('numeric', 'month')})`,
+            },
+            {
+              value: '2-digit',
+              label: `2-digit (${this.formatWithOption('2-digit', 'month')})`,
+            },
+            {
+              value: '',
+              label: 'None',
+            },
+          ]}
+        ></arx-select>
+
+        <arx-select
+          label="Day Format"
+          .value=${this.options.day}
+          @change=${(e: Event) => this.handleChange('day', e)}
+          .options=${[
+            {
+              value: 'numeric',
+              label: `Numeric (${this.formatWithOption('numeric', 'day')})`,
+            },
+            {
+              value: '2-digit',
+              label: `2-digit (${this.formatWithOption('2-digit', 'day')})`,
+            },
+            {
+              value: '',
+              label: 'None',
+            },
+          ]}
+        ></arx-select>
+
+        <arx-select
+          label="Hour Format"
+          .value=${this.options.hour}
+          @change=${(e: Event) => this.handleChange('hour', e)}
+          .options=${[
+            {
+              value: 'numeric',
+              label: 'Numeric',
+            },
+            {
+              value: '2-digit',
+              label: '2-digit',
+            },
+            {
+              value: '',
+              label: 'None',
+            },
+          ]}
+        ></arx-select>
+
+        <arx-select
+          label="Minute Format"
+          .value=${this.options.minute}
+          @change=${(e: Event) => this.handleChange('minute', e)}
+          .options=${[
+            {
+              value: 'numeric',
+              label: 'Numeric',
+            },
+            {
+              value: '2-digit',
+              label: '2-digit',
+            },
+            {
+              value: '',
+              label: 'None',
+            },
+          ]}
+        ></arx-select>
+
+        <arx-select
+          label="Second Format"
+          .value=${this.options.second}
+          @change=${(e: Event) => this.handleChange('second', e)}
+          .options=${[
+            {
+              value: 'numeric',
+              label: 'Numeric',
+            },
+            {
+              value: '2-digit',
+              label: '2-digit',
+            },
+            {
+              value: '',
+              label: 'None',
+            },
+          ]}
+        ></arx-select>
+
+        <arx-toggle
+          label="Use 12-hour format"
+          ?checked=${this.options.hour12}
+          @change=${(e: Event) => this.handleChange('hour12', e)}
+        ></arx-toggle>
+
+        <h3>Preview</h3>
+        <p>${this.formatPreview()}</p>
+      </arx-fieldset>
+    `;
+  }
+}

src/components/ErrorView.ts

@@ -7,17 +7,55 @@ export class ErrorView extends LitElement {
   error!: string;
 
   static override styles = css`
-    .error {
+    :host {
-      color: var(--error);
+      display: block;
-  }`;
+      margin: 0.75rem 0;
+    }
+
+    .error-container {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      border-radius: var(--radius-field);
+      background-color: var(--color-error);
+      color: var(--color-error-content);
+      box-shadow: 0 2px 5px oklch(from var(--color-error) l c h / 0.2);
+      border-left: calc(var(--border) * 2) solid
+        oklch(from var(--color-error-content) l c h / 0.8);
+      animation: fadeIn 0.3s ease-out forwards;
+    }
+
+    .error-message {
+      flex: 1;
+      font-weight: 500;
+      line-height: 1.5;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @media (max-width: 640px) {
+      .error-container {
+        padding: 0.625rem 0.875rem;
+      }
+    }
+  `;
 
   override render() {
-    return html`<span class="error">${this.error}</span>`;
+    return html`
-  }
+      <div class="error-container" role="alert">
-}
+        <iconify-icon icon="mdi:alert-circle" width="24"></iconify-icon>
-
+        <div class="error-message">${this.error}</div>
-declare global {
+      </div>
-  interface HTMLElementTagNameMap {
+    `;
-    'arx-error-view': ErrorView;
   }
 }

src/components/EveLink.ts

@@ -7,6 +7,13 @@ export class EveLink extends LitElement {
   @property({ type: String }) target = '';
   @property({ type: String }) rel = '';
 
+  static override styles = css`
+    a {
+      display: inline-block;
+      color: var(--color-primary);
+    }
+  `;
+
   get hrefValue() {
     let href = this.href;
     if (href.startsWith('javascript:')) return href;
@@ -16,12 +23,6 @@ export class EveLink extends LitElement {
     return href;
   }
 
-  static override styles = css`
-    a {
-      part: link;
-    }
-  `;
-
   override render() {
     return html`
       <a

src/components/General/Button.ts

@@ -0,0 +1,257 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('arx-button')
+export class StyledButton extends LitElement {
+  @property() label = '';
+  @property() type: 'button' | 'submit' | 'reset' | 'menu' = 'button';
+  @property({ type: Boolean }) disabled = false;
+  @property() name = '';
+  @property() value = '';
+  @property() variant: 'default' | 'primary' | 'secondary' | 'accent' = 'default';
+  @property({ type: Boolean }) loading = false;
+  @property({ type: Boolean }) fullWidth = false;
+  @property({ type: Boolean, reflect: true }) pressed = false;
+  @property({ type: String }) href = '';
+
+  static override styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    :host([fullWidth]) {
+      display: block;
+      width: 100%;
+    }
+
+    button {
+      --bg: var(--color-base-100);
+      --text: var(--color-base-content);
+
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-height: 46px;
+      padding: 10px 24px;
+      font-size: 16px;
+      font-weight: 500;
+      font-family: inherit;
+      color: var(--text);
+      background: var(--bg);
+      border: var(--border) solid var(--color-base-300);
+      border-radius: var(--radius-selector);
+      cursor: pointer;
+      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+      box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 6px)
+          oklch(from var(--color-base-content) l c h / 0.15),
+        calc(var(--depth) * -3px) calc(var(--depth) * -3px)
+          calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.7);
+      overflow: hidden;
+      outline: none;
+    }
+
+    :host([variant="primary"]) button {
+      --bg: var(--color-primary);
+      --text: var(--color-primary-content);
+    }
+
+    :host([variant="secondary"]) button {
+      --bg: var(--color-secondary);
+      --text: var(--color-secondary-content);
+    }
+
+    :host([variant="accent"]) button {
+      --bg: var(--color-accent);
+      --text: var(--color-accent-content);
+    }
+
+    :host([fullWidth]) button {
+      width: 100%;
+    }
+
+    button:hover,
+    button:focus-visible {
+      transform: translateY(-2px);
+      background: oklch(from var(--bg) calc(l + 0.02) c h);
+      box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
+          calc(var(--depth) * 8px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        calc(var(--depth) * -4px) calc(var(--depth) * -4px)
+          calc(var(--depth) * 8px) oklch(from var(--color-base-100) l c h / 0.8);
+    }
+
+    button:active,
+    :host([pressed]) button {
+      transform: translateY(1px);
+      border-top: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-left: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-bottom: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      border-right: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 5px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5);
+      background: linear-gradient(
+        145deg,
+        oklch(from var(--bg) calc(l - 0.03) c h),
+        oklch(from var(--bg) l c h)
+      );
+    }
+
+    button:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 3px)
+          oklch(from var(--color-base-content) l c h / 0.1),
+        calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.4);
+    }
+
+    .spinner {
+      display: none;
+      position: relative;
+      width: 18px;
+      height: 18px;
+    }
+
+    :host([loading]) .spinner {
+      display: inline-block;
+    }
+
+    :host([loading]) .label {
+      opacity: 0.7;
+    }
+
+    .spinner::before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      border: 2px solid transparent;
+      border-top-color: currentColor;
+      border-right-color: currentColor;
+      animation: spinner 0.8s linear infinite;
+    }
+
+    @keyframes spinner {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    ::slotted([slot="prefix"]) {
+      margin-right: 4px;
+    }
+
+    ::slotted([slot="suffix"]) {
+      margin-left: 4px;
+    }
+  `;
+
+  override render() {
+    return html`
+      <button
+        type=${this.type}
+        ?disabled=${this.disabled || this.loading}
+        name=${this.name}
+        value=${this.value}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
+      >
+        <slot name="prefix"></slot>
+        <div class="spinner"></div>
+        <slot name="label">
+          <span class="label">${this.label}</span>
+        </slot>
+        <slot name="suffix"></slot>
+      </button>
+    `;
+  }
+
+  private _handleClick(e: MouseEvent) {
+    if (this.disabled || this.loading) {
+      e.preventDefault();
+      return;
+    }
+
+    if (this.href) {
+      let href = this.href;
+      if (href.startsWith('javascript:')) return href;
+      if (href.startsWith('eve://')) href = href.replace('eve://', '#');
+      if (href.startsWith('/')) href = href.replace('/', '#');
+      if (!href.startsWith('#')) href = `#${href}`;
+      window.location.href = href;
+      return;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('click', {
+        detail: {
+          name: this.name,
+          value: this.value,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    if ((e.key === 'Enter' || e.key === ' ') && !this.disabled && !this.loading) {
+      e.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent('click', {
+          detail: {
+            name: this.name,
+            value: this.value,
+          },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('keydown', {
+        detail: { key: e.key },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleFocus() {
+    this.dispatchEvent(
+      new CustomEvent('focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleBlur() {
+    this.dispatchEvent(
+      new CustomEvent('blur', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

src/components/General/Card.ts

@@ -0,0 +1,35 @@
+import { LitElement, css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('arx-card')
+export class StyledFieldset extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      background: var(--color-base-200);
+      border-radius: var(--radius-box);
+      box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
+          calc(var(--depth) * 8px)
+          oklch(from var(--color-base-content) l c h / 0.1),
+        calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
+      padding: 32px;
+      margin-bottom: 32px;
+      border: var(--border) solid var(--color-base-300);
+      transition: all 0.3s ease;
+      &:hover {
+        box-shadow: calc(var(--depth) * 6px) calc(var(--depth) * 6px)
+            calc(var(--depth) * 12px)
+            oklch(from var(--color-base-content) l c h / 0.15),
+          calc(var(--depth) * -3px) calc(var(--depth) * -3px)
+            calc(var(--depth) * 8px)
+            oklch(from var(--color-base-100) l c h / 0.7);
+        transform: translateY(-2px);
+      }
+    }
+  `;
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}

src/components/General/Fieldset.ts

@@ -0,0 +1,122 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+@customElement('arx-fieldset')
+export class StyledFieldset extends LitElement {
+  @property() legend = '';
+  @property({ type: Boolean }) disabled = false;
+  @property() variant = 'default'; // default, primary, secondary, accent
+
+  static override styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      margin-bottom: 24px;
+    }
+
+    .fieldset-container {
+      background: var(--color-base-100);
+      border: var(--border) solid var(--color-base-300);
+      border-radius: var(--radius-box);
+      padding: 24px;
+      position: relative;
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+          calc(var(--depth) * 4px)
+          oklch(from var(--color-base-content) l c h / 0.1),
+        calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.5);
+      transition: all 0.25s ease;
+    }
+
+    :host([variant="primary"]) .fieldset-container {
+      border-left: calc(var(--border) * 3) solid var(--color-primary);
+    }
+
+    :host([variant="secondary"]) .fieldset-container {
+      border-left: calc(var(--border) * 3) solid var(--color-secondary);
+    }
+
+    :host([variant="accent"]) .fieldset-container {
+      border-left: calc(var(--border) * 3) solid var(--color-accent);
+    }
+
+    .legend {
+      position: absolute;
+      top: -10px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--color-base-100);
+      border: var(--border) solid var(--color-base-300);
+      padding: 0 10px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-base-content);
+      border-radius: calc(var(--radius-selector) / 2);
+      transition: all 0.25s ease;
+    }
+
+    :host([variant="primary"]) .legend {
+      color: var(--color-primary);
+    }
+
+    :host([variant="secondary"]) .legend {
+      color: var(--color-secondary);
+    }
+
+    :host([variant="accent"]) .legend {
+      color: var(--color-accent);
+    }
+
+    .fieldset-content {
+      padding-top: 8px;
+    }
+
+    :host([disabled]) .fieldset-container {
+      opacity: 0.7;
+      cursor: not-allowed;
+      box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.05),
+        calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.3);
+    }
+
+    :host([disabled]) .legend {
+      opacity: 0.7;
+    }
+
+    :host(:not([disabled])) .fieldset-container:hover {
+      box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 6px)
+          oklch(from var(--color-base-content) l c h / 0.15),
+        calc(var(--depth) * -3px) calc(var(--depth) * -3px)
+          calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
+    }
+
+    :host(:not([disabled])) .fieldset-container:focus-within {
+      border-color: var(--color-accent);
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+          calc(var(--depth) * 4px)
+          oklch(from var(--color-base-content) l c h / 0.1),
+        calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.5),
+        0 0 0 2px oklch(from var(--color-accent) l c h / 0.2);
+    }
+
+    :host(:not([disabled])) .fieldset-container:focus-within .legend {
+      color: var(--color-accent);
+    }
+  `;
+
+  override render() {
+    return html`
+      <div class="fieldset-container" ?disabled=${this.disabled}>
+        ${when(this.legend, () => html`<div class="legend">${this.legend}</div>`)}
+        <div class="fieldset-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

src/components/General/Input.ts

@@ -0,0 +1,165 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+@customElement('arx-input')
+export class StyledInput extends LitElement {
+  @property() placeholder = '';
+  @property() value = '';
+  @property({ type: Boolean }) disabled = false;
+  @property() type = 'text';
+  @property() name = '';
+  @property({ type: Boolean }) required = false;
+  @property() label = '';
+
+  static override styles = css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      margin-bottom: 8px;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: var(--color-base-content);
+      font-weight: 500;
+    }
+
+    input {
+      width: 100%;
+      padding: 14px 16px;
+      font-size: 16px;
+      color: var(--color-base-content);
+      background: var(--color-base-100);
+      border: var(--border) solid var(--color-base-300);
+      border-radius: var(--radius-field);
+      box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+          calc(var(--depth) * 4px)
+          oklch(from var(--color-base-content) l c h / 0.15),
+        inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7),
+        0 0 0 transparent;
+      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    input::placeholder {
+      color: var(--color-secondary);
+      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.1);
+    }
+
+    input:hover {
+      transform: translateY(-1px);
+      background: oklch(from var(--color-base-100) calc(l + 0.02) c h);
+    }
+
+    input:hover::placeholder {
+      transform: translateX(3px);
+    }
+
+    input:focus {
+      outline: none;
+      transform: translateY(1px);
+      border-top: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-left: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-bottom: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      border-right: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 5px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
+        0 0 0 transparent;
+      background: linear-gradient(
+        145deg,
+        oklch(from var(--color-base-100) calc(l - 0.03) c h),
+        oklch(from var(--color-base-100) l c h)
+      );
+    }
+
+    input:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.05),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
+      transform: none;
+    }
+  `;
+
+  override render() {
+    return html`
+      ${when(this.label, () => html`<label for="input-${this.name}">${this.label}</label>`)}
+      <input
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        placeholder=${this.placeholder}
+        type=${this.type}
+        name=${this.name}
+        @input=${this._handleInput}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
+        @keydown=${this._handleKeyDown}
+        @keyup=${this._handleKeyUp}
+      />
+    `;
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    this.dispatchEvent(
+      new CustomEvent('keydown', {
+        detail: { key: e.key },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleKeyUp(e: KeyboardEvent) {
+    this.dispatchEvent(
+      new CustomEvent('keyup', {
+        detail: { key: e.key },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleFocus() {
+    this.dispatchEvent(
+      new CustomEvent('focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleBlur() {
+    this.dispatchEvent(
+      new CustomEvent('blur', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleInput(e: InputEvent) {
+    const input = e.target as HTMLInputElement;
+    this.value = input.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

src/components/General/Prompt.ts

@@ -2,6 +2,8 @@ import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
+import '@components/General/Input';
+
 @customElement('arx-prompt')
 export class EvePrompt extends LitElement {
   @property({ type: String }) promptText = 'Please provide input';
@@ -17,18 +19,7 @@ export class EvePrompt extends LitElement {
 
   static override styles = css`
     :host {
-      --prompt-primary: #3b82f6;
+      display: block;
-      --prompt-primary-hover: #2563eb;
-      --prompt-bg: #ffffff;
-      --prompt-text: #1f2937;
-      --prompt-border: #e5e7eb;
-      --prompt-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-      --prompt-cancel-bg: #f3f4f6;
-      --prompt-cancel-hover: #e5e7eb;
-      --prompt-overlay: rgba(15, 23, 42, 0.6);
-
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-        sans-serif;
     }
 
     .overlay {
@@ -37,7 +28,7 @@ export class EvePrompt extends LitElement {
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: var(--prompt-overlay);
+      background-color: oklch(from var(--color-base-content) l c h / 0.6);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -54,15 +45,20 @@ export class EvePrompt extends LitElement {
     }
 
     .prompt-container {
-      background-color: var(--prompt-bg);
+      background-color: var(--color-base-100);
-      border-radius: 12px;
+      border-radius: var(--radius-box);
-      box-shadow: var(--prompt-shadow);
+      border: var(--border) solid var(--color-base-300);
+      box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
+          calc(var(--depth) * 8px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.4);
       width: 90%;
       max-width: 420px;
       padding: 28px;
       transform: scale(0.95) translateY(10px);
       transition: transform 0.25s cubic-bezier(0.1, 1, 0.2, 1);
-      color: var(--prompt-text);
+      color: var(--color-base-content);
     }
 
     .overlay.active .prompt-container {
@@ -74,28 +70,7 @@ export class EvePrompt extends LitElement {
       font-weight: 600;
       margin: 0 0 16px 0;
       line-height: 1.4;
-    }
+      color: var(--color-base-content);
-
-    .input-container {
-      margin: 20px 0;
-    }
-
-    .input-field {
-      width: 100%;
-      padding: 12px 14px;
-      border-radius: 8px;
-      border: 1px solid var(--prompt-border);
-      font-size: 15px;
-      transition: border-color 0.2s ease, box-shadow 0.2s ease;
-      color: inherit;
-      background-color: transparent;
-      outline: none;
-      box-sizing: border-box;
-    }
-
-    .input-field:focus {
-      border-color: var(--prompt-primary);
-      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
     }
 
     .buttons {
@@ -105,47 +80,13 @@ export class EvePrompt extends LitElement {
       margin-top: 24px;
     }
 
-    button {
+    .prompt-container:focus-within {
-      padding: 10px 18px;
+      box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
-      border-radius: 8px;
+          calc(var(--depth) * 8px)
-      font-size: 14px;
+          oklch(from var(--color-base-content) l c h / 0.2),
-      font-weight: 500;
+        calc(var(--depth) * -1px) calc(var(--depth) * -1px)
-      cursor: pointer;
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.4),
-      transition: all 0.2s ease;
+        0 0 0 2px oklch(from var(--color-accent) l c h / 0.2);
-      border: none;
-      outline: none;
-    }
-
-    button:focus-visible {
-      box-shadow: 0 0 0 2px var(--prompt-bg), 0 0 0 4px var(--prompt-primary);
-    }
-
-    .cancel-btn {
-      background-color: var(--prompt-cancel-bg);
-      color: var(--prompt-text);
-    }
-
-    .cancel-btn:hover {
-      background-color: var(--prompt-cancel-hover);
-    }
-
-    .save-btn {
-      background-color: var(--prompt-primary);
-      color: white;
-    }
-
-    .save-btn:hover {
-      background-color: var(--prompt-primary-hover);
-    }
-
-    @media (prefers-color-scheme: dark) {
-      :host {
-        --prompt-bg: #1e1e1e;
-        --prompt-text: #e5e7eb;
-        --prompt-border: #374151;
-        --prompt-cancel-bg: #374151;
-        --prompt-cancel-hover: #4b5563;
-      }
     }
   `;
 
@@ -221,26 +162,30 @@ export class EvePrompt extends LitElement {
           ${
             this.showInput
               ? html`
-                <div class="input-container">
+                <arx-input
-                  <input
                   type="text"
                   class="input-field"
                   .value=${this._inputValue}
                   @input=${this._handleInputChange}
                   placeholder=${this.placeholder}
-                  />
+                ></arx-input>
-                </div>
               `
               : ''
           }
 
           <div class="buttons">
-            <button @click=${this._handleCancel} class="cancel-btn">
+            <arx-button
-              ${this.cancelText}
+              variant="accent"
-            </button>
+              label=${this.cancelText}
-            <button @click=${this._handleSave} class="save-btn">
+              @click=${this._handleCancel}
-              ${this.saveText}
+            >
-            </button>
+            </arx-button>
+            <arx-button
+              variant="secondary"
+              label=${this.saveText}
+              @click=${this._handleSave}
+            >
+            </arx-button>
           </div>
         </div>
       </div>

src/components/General/Select.ts

@@ -0,0 +1,207 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+
+@customElement('arx-select')
+export class StyledSelect<T> extends LitElement {
+  @property() placeholder = '';
+  @property() value = '';
+  @property({ type: Boolean }) disabled = false;
+  @property() name = '';
+  @property({ type: Boolean }) required = false;
+  @property() label = '';
+  @property({ type: Array<T> }) options = [];
+  @property() valueMapper?: (option: T) => string;
+  @property() textMapper?: (option: T) => string;
+
+  static override styles = css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      margin-bottom: 8px;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: var(--color-base-content);
+      font-weight: 500;
+    }
+
+    select {
+      width: 100%;
+      padding: 14px 16px;
+      font-size: 16px;
+      color: var(--color-base-content);
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background-color: var(--color-base-100);
+      border: var(--border) solid var(--color-base-300);
+      border-radius: var(--radius-field);
+      box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+          calc(var(--depth) * 4px)
+          oklch(from var(--color-base-content) l c h / 0.15),
+        inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7),
+        0 0 0 transparent;
+      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+      cursor: pointer;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 16px center;
+      padding-right: 40px;
+    }
+
+    select:hover {
+      transform: translateY(-1px);
+      background-color: oklch(from var(--color-base-100) calc(l + 0.02) c h);
+    }
+
+    select:focus {
+      outline: none;
+      transform: translateY(1px);
+      border-top: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-left: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-bottom: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      border-right: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 5px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
+        0 0 0 transparent;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 16px center;
+      background-color: linear-gradient(
+        145deg,
+        oklch(from var(--color-base-100) calc(l - 0.03) c h),
+        oklch(from var(--color-base-100) l c h)
+      );
+    }
+
+    select:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.05),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
+      transform: none;
+    }
+
+    select option[value=""] {
+      color: var(--color-secondary);
+    }
+  `;
+
+  private _getOptionValue(option: T) {
+    if (option === undefined || option === null) return '';
+    if (this.valueMapper) return this.valueMapper(option);
+    if (typeof option === 'object' && 'value' in option) return option.value;
+    return option;
+  }
+
+  private _getOptionText(option: T) {
+    if (option === undefined || option === null) return '';
+    if (this.textMapper) return this.textMapper(option);
+    if (typeof option === 'object' && 'label' in option) return option.label;
+    return option;
+  }
+
+  override render() {
+    return html`
+      ${when(this.label, () => html`<label for="select-${this.name}">${this.label}</label>`)}
+      <select
+        id="select-${this.name}"
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        name=${this.name}
+        @change=${this._handleChange}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
+        @keydown=${this._handleKeyDown}
+        @keyup=${this._handleKeyUp}
+      >
+        ${when(
+          this.placeholder,
+          () =>
+            html`<option value="" ?selected=${!this.value} disabled>
+              ${this.placeholder}
+            </option>`,
+        )}
+        ${map(this.options, (option) => {
+          const optionValue = this._getOptionValue(option);
+          const optionText = this._getOptionText(option);
+          return html`
+            <option
+              value=${optionValue}
+              ?selected=${optionValue === this.value}
+            >
+              ${optionText}
+            </option>
+          `;
+        })}
+      </select>
+    `;
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    this.dispatchEvent(
+      new CustomEvent('keydown', {
+        detail: { key: e.key },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleKeyUp(e: KeyboardEvent) {
+    this.dispatchEvent(
+      new CustomEvent('keyup', {
+        detail: { key: e.key },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleFocus() {
+    this.dispatchEvent(
+      new CustomEvent('focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleBlur() {
+    this.dispatchEvent(
+      new CustomEvent('blur', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleChange(e: Event) {
+    const select = e.target as HTMLSelectElement;
+    this.value = select.value;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

src/components/General/Textarea.ts

@@ -0,0 +1,212 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+@customElement('arx-textarea')
+export class StyledTextarea extends LitElement {
+  @property() placeholder = '';
+  @property() value = '';
+  @property({ type: Boolean }) disabled = false;
+  @property() name = '';
+  @property({ type: Boolean }) required = false;
+  @property() label = '';
+  @property() rows = 4;
+  @property() maxlength = '';
+  @property({ type: Boolean }) resizable = true;
+
+  static override styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      margin-bottom: 8px;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: var(--color-base-content);
+      font-weight: 500;
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 80px;
+      padding: 14px 16px;
+      font-size: 16px;
+      color: var(--color-base-content);
+      font-family: inherit;
+      line-height: 1.5;
+      background: var(--color-base-100);
+      border: var(--border) solid var(--color-base-300);
+      border-radius: var(--radius-field);
+      box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+          calc(var(--depth) * 4px)
+          oklch(from var(--color-base-content) l c h / 0.15),
+        inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7),
+        0 0 0 transparent;
+      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+      resize: vertical;
+    }
+
+    :host(:not([resizable])) textarea {
+      resize: none;
+    }
+
+    textarea::placeholder {
+      color: var(--color-secondary);
+      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.1);
+    }
+
+    textarea:hover {
+      transform: translateY(-1px);
+      background: oklch(from var(--color-base-100) calc(l + 0.02) c h);
+    }
+
+    textarea:hover::placeholder {
+      transform: translateX(3px);
+    }
+
+    textarea:focus {
+      outline: none;
+      transform: translateY(1px);
+      border-top: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-left: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-bottom: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      border-right: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 5px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
+        0 0 0 transparent;
+      background: linear-gradient(
+        145deg,
+        oklch(from var(--color-base-100) calc(l - 0.03) c h),
+        oklch(from var(--color-base-100) l c h)
+      );
+    }
+
+    textarea:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.05),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
+      transform: none;
+    }
+
+    .character-count {
+      display: none;
+      text-align: right;
+      margin-top: 4px;
+      font-size: 12px;
+      color: var(--color-secondary);
+    }
+
+    .has-maxlength .character-count {
+      display: block;
+    }
+
+    .character-count.near-limit {
+      color: var(--color-warning);
+    }
+
+    .character-count.at-limit {
+      color: var(--color-error);
+    }
+  `;
+
+  override render() {
+    const charCount = this.value?.length || 0;
+    const maxLen = Number.parseInt(this.maxlength) || 0;
+    const nearLimit = maxLen && charCount >= maxLen * 0.8;
+    const atLimit = maxLen && charCount >= maxLen * 0.95;
+    const hasMaxlength = !!this.maxlength;
+
+    return html`
+      ${when(this.label, () => html`<label for="textarea-${this.name}">${this.label}</label>`)}
+      <div class="${hasMaxlength ? 'has-maxlength' : ''}">
+        <textarea
+          id="textarea-${this.name}"
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          placeholder=${this.placeholder}
+          rows=${this.rows}
+          maxlength=${this.maxlength}
+          name=${this.name}
+          @input=${this._handleInput}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+          @keydown=${this._handleKeyDown}
+        ></textarea>
+        <div
+          class="character-count ${nearLimit ? 'near-limit' : ''} ${atLimit ? 'at-limit' : ''}"
+        >
+          ${charCount}/${this.maxlength}
+        </div>
+      </div>
+    `;
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Tab' && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+      e.preventDefault();
+      const textarea = e.target as HTMLTextAreaElement;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+
+      this.value = `${this.value.substring(0, start)}\t${this.value.substring(end)}`;
+
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 1;
+      }, 0);
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('keydown', {
+        detail: { key: e.key },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleFocus() {
+    this.dispatchEvent(
+      new CustomEvent('focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleBlur() {
+    this.dispatchEvent(
+      new CustomEvent('blur', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleInput(e: InputEvent) {
+    const textarea = e.target as HTMLTextAreaElement;
+    this.value = textarea.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

src/components/General/Toggle.ts

@@ -0,0 +1,216 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+@customElement('arx-toggle')
+export class StyledToggle extends LitElement {
+  @property() label = '';
+  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ type: Boolean }) disabled = false;
+  @property() name = '';
+  @property({ type: Boolean }) required = false;
+  @property() value = 'on';
+
+  static override styles = css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      margin-bottom: 8px;
+    }
+
+    .toggle-container {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    label {
+      font-size: 14px;
+      color: var(--color-base-content);
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    .toggle-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 48px;
+      height: 24px;
+    }
+
+    .toggle-input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
+    }
+
+    .toggle-track {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--color-base-100);
+      border-radius: 24px;
+      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+      border: var(--border) solid var(--color-base-300);
+      box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+          calc(var(--depth) * 4px)
+          oklch(from var(--color-base-content) l c h / 0.15),
+        inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7);
+    }
+
+    .toggle-track:hover {
+      background-color: oklch(from var(--color-base-100) calc(l + 0.02) c h);
+    }
+
+    .toggle-knob {
+      position: absolute;
+      height: 18px;
+      width: 18px;
+      left: 3px;
+      bottom: 2px;
+      background-color: var(--color-base-content);
+      border-radius: 50%;
+      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+          calc(var(--depth) * 4px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.3);
+    }
+
+    .toggle-input:checked + .toggle-track {
+      background-color: var(--color-base-100);
+      border-top: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-left: var(--border) solid
+        oklch(from var(--color-base-300) l c h / 0.8);
+      border-bottom: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      border-right: var(--border) solid
+        oklch(from var(--color-base-200) l c h / 0.8);
+      box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 5px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5);
+    }
+
+    .toggle-input:checked + .toggle-track .toggle-knob {
+      transform: translateX(24px);
+      background-color: var(--color-accent);
+    }
+
+    .toggle-input:focus + .toggle-track {
+      outline: none;
+      box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 5px)
+          oklch(from var(--color-base-content) l c h / 0.2),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
+        0 0 0 2px oklch(from var(--color-accent) l c h / 0.3);
+    }
+
+    .toggle-input:disabled + .toggle-track {
+      opacity: 0.7;
+      cursor: not-allowed;
+      box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.05),
+        inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
+    }
+
+    .toggle-input:disabled + .toggle-track .toggle-knob {
+      background-color: var(--color-secondary);
+      box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
+          calc(var(--depth) * 2px)
+          oklch(from var(--color-base-content) l c h / 0.1),
+        calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.2);
+    }
+  `;
+
+  override render() {
+    return html`
+      <div class="toggle-container">
+        ${when(this.label, () => html` <label for="toggle-${this.name}">${this.label}</label> `)}
+        <div class="toggle-wrapper">
+          <input
+            type="checkbox"
+            id="toggle-${this.name}"
+            class="toggle-input"
+            .checked=${this.checked}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${this.name}
+            value=${this.value}
+            @change=${this._handleChange}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+            @keydown=${this._handleKeyDown}
+          />
+          <label for="toggle-${this.name}" class="toggle-track">
+            <span class="toggle-knob"></span>
+          </label>
+        </div>
+      </div>
+    `;
+  }
+
+  private _handleChange(e: Event) {
+    const checkbox = e.target as HTMLInputElement;
+    this.checked = checkbox.checked;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: { checked: this.checked, value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleFocus() {
+    this.dispatchEvent(
+      new CustomEvent('focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleBlur() {
+    this.dispatchEvent(
+      new CustomEvent('blur', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      this.checked = !this.checked;
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: { checked: this.checked, value: this.value },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('keydown', {
+        detail: { key: e.key },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

src/components/General/Tooltip.ts

@@ -0,0 +1,241 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+@customElement('arx-tooltip')
+export class Tooltip extends LitElement {
+  @property() content = '';
+  @property() position = 'top';
+  @property() delay = 100; // Delay before showing tooltip (ms)
+  @property() offset = 8; // Distance from target element
+  @property() variant = 'default'; // default, primary, secondary, accent, error, warning, success
+  @property({ type: Boolean }) arrow = true;
+  @property({ type: Boolean }) allowHtml = false;
+  @property({ type: Boolean }) interactive = false;
+  @property({ type: Boolean }) disabled = false;
+
+  @state() private isVisible = false;
+  @state() private timer: ReturnType<typeof setTimeout> | null = null;
+
+  static override styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .tooltip-container {
+      position: relative;
+      display: inline-block;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: 999;
+      max-width: 300px;
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      border-radius: var(--radius-field);
+      font-size: 0.875rem;
+      line-height: 1.4;
+      text-align: center;
+      pointer-events: none;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+        calc(var(--depth) * 4px)
+        oklch(from var(--color-base-content) l c h / 0.2);
+      transform: scale(0.95);
+      transform-origin: center;
+    }
+
+    .tooltip.interactive {
+      pointer-events: auto;
+    }
+
+    .tooltip.visible {
+      opacity: 1;
+      visibility: visible;
+      transform: scale(1);
+    }
+
+    /* Default variant */
+    .tooltip.default {
+      background-color: var(--color-base-content);
+      color: var(--color-base-100);
+    }
+
+    /* Primary variant */
+    .tooltip.primary {
+      background-color: var(--color-primary);
+      color: var(--color-primary-content);
+    }
+
+    /* Secondary variant */
+    .tooltip.secondary {
+      background-color: var(--color-secondary);
+      color: var(--color-secondary-content);
+    }
+
+    /* Accent variant */
+    .tooltip.accent {
+      background-color: var(--color-accent);
+      color: var(--color-accent-content);
+    }
+
+    /* Error variant */
+    .tooltip.error {
+      background-color: var(--color-error);
+      color: var(--color-error-content);
+    }
+
+    /* Warning variant */
+    .tooltip.warning {
+      background-color: var(--color-warning);
+      color: var(--color-warning-content);
+    }
+
+    /* Success variant */
+    .tooltip.success {
+      background-color: var(--color-success);
+      color: var(--color-success-content);
+    }
+
+    /* Positions */
+    .tooltip.top {
+      bottom: calc(100% + var(--offset, 8px));
+      left: 50%;
+      transform: translateX(-50%) scale(0.95);
+    }
+
+    .tooltip.top.visible {
+      transform: translateX(-50%) scale(1);
+    }
+
+    .tooltip.right {
+      left: calc(100% + var(--offset, 8px));
+      top: 50%;
+      transform: translateY(-50%) scale(0.95);
+    }
+
+    .tooltip.right.visible {
+      transform: translateY(-50%) scale(1);
+    }
+
+    .tooltip.bottom {
+      top: calc(100% + var(--offset, 8px));
+      left: 50%;
+      transform: translateX(-50%) scale(0.95);
+    }
+
+    .tooltip.bottom.visible {
+      transform: translateX(-50%) scale(1);
+    }
+
+    .tooltip.left {
+      right: calc(100% + var(--offset, 8px));
+      top: 50%;
+      transform: translateY(-50%) scale(0.95);
+    }
+
+    .tooltip.left.visible {
+      transform: translateY(-50%) scale(1);
+    }
+
+    /* Arrow */
+    .tooltip::after {
+      content: "";
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: inherit;
+      transform: rotate(45deg);
+    }
+
+    .tooltip.top::after {
+      bottom: -4px;
+      left: 50%;
+      margin-left: -4px;
+    }
+
+    .tooltip.right::after {
+      left: -4px;
+      top: 50%;
+      margin-top: -4px;
+    }
+
+    .tooltip.bottom::after {
+      top: -4px;
+      left: 50%;
+      margin-left: -4px;
+    }
+
+    .tooltip.left::after {
+      right: -4px;
+      top: 50%;
+      margin-top: -4px;
+    }
+
+    .tooltip.no-arrow::after {
+      display: none;
+    }
+
+    @media (max-width: 640px) {
+      .tooltip {
+        max-width: 200px;
+        font-size: 0.75rem;
+        padding: 0.4rem 0.6rem;
+      }
+    }
+  `;
+
+  override render() {
+    return html`
+      <div
+        class="tooltip-container"
+        @mouseenter=${!this.disabled ? this._onMouseEnter : null}
+        @mouseleave=${!this.disabled ? this._onMouseLeave : null}
+        @focus=${!this.disabled ? this._onMouseEnter : null}
+        @blur=${!this.disabled ? this._onMouseLeave : null}
+      >
+        <slot></slot>
+        <div
+          class="tooltip ${this.position} ${this.variant} ${
+            this.isVisible ? 'visible' : ''
+          } ${!this.arrow ? 'no-arrow' : ''} ${this.interactive ? 'interactive' : ''}"
+          style="--offset: ${this.offset}px;"
+          role="tooltip"
+          aria-hidden=${!this.isVisible}
+        >
+          ${this.allowHtml ? html`<div .innerHTML=${this.content}></div>` : this.content}
+        </div>
+      </div>
+    `;
+  }
+
+  private _onMouseEnter() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+
+    this.timer = setTimeout(() => {
+      this.isVisible = true;
+    }, this.delay);
+  }
+
+  private _onMouseLeave() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+
+    this.isVisible = false;
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  }
+}

src/components/Header.ts

@@ -1,141 +1,302 @@
+import { ndk } from '@/ndk';
+import type { NDKEvent } from '@nostr-dev-kit/ndk';
+import * as nip19 from '@nostr/tools/nip19';
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+
+import '@components/HeaderSugestion';
+import '@components/General/Input';
 
 @customElement('arx-header')
 export class Header extends LitElement {
   @property({ type: String }) override title = 'Eve';
   @property({ type: String }) url = 'eve://home';
-
   @property({ type: Boolean }) canGoBack = false;
   @property({ type: Boolean }) canGoForward = false;
 
   private searchQuery = '';
-  private searchInput: HTMLInputElement | null = null;
+  private _debounceTimeout?: ReturnType<typeof setTimeout>;
 
-  static override styles = [
+  @state() private showSuggestions = false;
-    css`
+  @state() private events: NDKEvent[] = [];
-      header {
+  @state() private suggestions: NDKEvent[] = [];
-        background: rgba(255, 255, 255, 0.5);
+
-        backdrop-filter: blur(10px);
+  static override styles = css`
-        border: 1px solid rgba(255, 255, 255, 0.6);
+    :host {
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+      display: block;
       z-index: 999999;
-        background: var(--primary);
+    }
-        height: var(--font-2xl);
+
-        font-size: var(--header-height);
+    header {
+      background: var(--color-primary);
+      backdrop-filter: blur(10px);
+      border: var(--border) solid var(--color-primary-content);
+      box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
+        calc(var(--depth) * 8px)
+        oklch(from var(--color-base-content) l c h / 0.2);
+      height: var(--font-2xl, 3rem);
+      font-size: var(--font-md, 1rem);
       transition: all 0.3s ease;
       display: flex;
-        align-items: center;
+      align-items: space-between;
-        padding: 0 var(--space-md);
+      padding: 0 var(--space-md, 1rem);
     }
 
     .nav-buttons {
       display: flex;
-        gap: var(--space-xs);
+      gap: var(--space-xs, 0.5rem);
-        padding-right: var(--space-xs);
+      padding-right: var(--space-xs, 0.5rem);
+    }
 
-        button {
+    .nav-buttons button {
       text-decoration: none;
-          color: var(--light);
+      color: var(--color-primary-content);
-          background: rgba(255, 255, 255, 0.1);
+      background: oklch(from var(--color-primary-content) l c h / 0.1);
-          border: 1px solid rgba(255, 255, 255, 0.2);
+      border: var(--border) solid
-          padding: var(--space-xs);
+        oklch(from var(--color-primary-content) l c h / 0.2);
-          border-radius: 100%;
+      padding: var(--space-xs, 0.5rem);
-          font-size: var(--font-md);
+      border-radius: 50%;
+      font-size: var(--font-md, 1rem);
       backdrop-filter: blur(10px);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s ease;
-
-          &:hover {
-            background: rgba(255, 255, 255, 0.2);
     }
 
-          &.disabled {
+    .nav-buttons button:hover {
+      background: oklch(from var(--color-primary-content) l c h / 0.2);
+      transform: translateY(-2px);
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+        calc(var(--depth) * 4px)
+        oklch(from var(--color-base-content) l c h / 0.15);
+    }
+
+    .nav-buttons button:active {
+      transform: translateY(1px);
+    }
+
+    .nav-buttons button.disabled {
       opacity: 0.5;
       pointer-events: none;
     }
-        }
-      }
 
     .search-container {
       flex: 1;
       position: relative;
+    }
 
-        input {
+    arx-input {
-          background: rgba(255, 255, 255, 0.5);
+      transform: translateY(3px);
+    }
+
+    .suggestions {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: oklch(from var(--color-base-100) l c h / 0.9);
       backdrop-filter: blur(10px);
-          border: 1px solid rgba(255, 255, 255, 0.6);
+      border: var(--border) solid var(--color-base-200);
-          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+      border-top: none;
-          color: var(--light);
+      border-radius: 0 0 var(--radius-field) var(--radius-field);
-          width: 100%;
+      box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
-          text-align: center;
+        calc(var(--depth) * 8px)
-          cursor: text;
+        oklch(from var(--color-base-content) l c h / 0.2);
-          font-size: 0.9rem;
+      z-index: 9999;
-          width: 100%;
+      max-height: 200px;
-          padding: var(--space-xs);
+      overflow-y: auto;
-          text-align: center;
+      overflow-x: hidden;
+    }
+  `;
 
-          &:not(:focus)::placeholder {
+  override firstUpdated() {
-            color: var(--light);
+    ndk
-            opacity: 1;
+      .fetchEvents({
+        limit: 50_000,
+      })
+      .then((events) => {
+        this.events = [...events];
+      });
   }
 
-          &:focus {
-            background: rgba(0, 0, 0, 0.2);
-          }
-        }
-      }
-    `,
-  ];
-
   override render() {
     return html`
       <header>
         <div class="nav-buttons">
           <button
-            class=${this.canGoBack ? '' : 'disabled'}
+            class=${classMap({ disabled: !this.canGoBack })}
-            @click=${() => this.dispatchEvent(new CustomEvent('go-back'))}
+            @click=${this._handleGoBack}
             aria-label="Go back"
           >
             <iconify-icon icon="material-symbols:arrow-back"></iconify-icon>
           </button>
           <button
-            class=${this.canGoForward ? '' : 'disabled'}
+            class=${classMap({ disabled: !this.canGoForward })}
-            @click=${() => this.dispatchEvent(new CustomEvent('go-forward'))}
+            @click=${this._handleGoForward}
             aria-label="Go forward"
           >
             <iconify-icon icon="material-symbols:arrow-forward"></iconify-icon>
           </button>
-          <button
+          <button @click=${this._handleGoHome} aria-label="Home">
-            @click=${() => {
-              window.location.hash = '#';
-            }}
-            aria-label="Home"
-          >
             <iconify-icon icon="material-symbols:home"></iconify-icon>
           </button>
         </div>
-        <div class="search-container" @click=${this.focusSearch}>
+        <div class="search-container">
-          <input
+          <arx-input
-            ref=${this.searchInput}
             type="text"
             .value=${this.searchQuery}
-            @keyup=${this.handleSearch}
+            placeholder=${this.url}
-          />
+            @keyup=${this._handleSearch}
+            @focus=${this._handleFocus}
+            @input=${this._handleInput}
+          ></arx-input>
+          ${when(
+            this.showSuggestions,
+            () => html`
+              <div class="suggestions">
+                ${map(this.suggestions, (suggestion: NDKEvent) =>
+                  keyed(
+                    suggestion.id,
+                    html`
+                      <arx-header-suggestion
+                        .event=${suggestion}
+                        .allEvents=${this.events}
+                        @click=${() => this._handleSuggestionClick(suggestion)}
+                      ></arx-header-suggestion>
+                    `,
+                  ),
+                )}
+              </div>
+            `,
+          )}
         </div>
       </header>
     `;
   }
 
-  private focusSearch() {
+  private _handleFocus() {
-    this.searchInput?.focus();
+    this.showSuggestions = true;
   }
 
-  private handleSearch(e: KeyboardEvent) {
+  private _handleInput(e: InputEvent) {
+    this.searchQuery = (e.target as HTMLInputElement).value;
+    if (this._debounceTimeout) {
+      clearTimeout(this._debounceTimeout);
+    }
+
+    if (!this.searchQuery.trim()) {
+      this.suggestions = [];
+      this.showSuggestions = false;
+      return;
+    }
+
+    this._debounceTimeout = setTimeout(() => {
+      const query = this.searchQuery.toLowerCase();
+
+      const isNoteSearch = query.startsWith('note1');
+      const isEventSearch = query.startsWith('nevent1');
+      const isPubkeySearch = query.startsWith('npub1');
+
+      this.suggestions = this.events
+        .filter((event: NDKEvent) => {
+          if (event.kind === 11 || event.kind === 1111) return false; // hide old forum events
+          if (event.kind === 30890 || event.kind === 30891) return false; // ignore old-in-dev events
+          if (event.kind === 60890) return false; // don't include the actual forum
+          if (event.kind === 60891) {
+            const categoryId = event.tags.find((tag) => tag[0] === 'd')?.[1] || '';
+            const forum = this.events.find(
+              (e) => e.kind === 60890 && e.tags.some((tag) => tag[0] === 'forum' && tag[1] === `60891:${categoryId}`),
+            );
+            if (!forum) return false; // ignore orphan forum categories
+          }
+
+          if (event.id.includes(query)) return true;
+
+          if (isNoteSearch) {
+            const noteId = nip19.noteEncode(event.id);
+            return noteId.includes(query);
+          }
+
+          if (isEventSearch) {
+            const eventId = event.encode();
+            return eventId.includes(query);
+          }
+
+          if (isPubkeySearch && event.kind === 0) {
+            const pubkey = nip19.npubEncode(event.pubkey);
+            return pubkey.includes(query);
+          }
+
+          if (event.content.toLowerCase().includes(query)) return true;
+          return event.tags.some((tag) => tag.length > 1 && tag[1].toLowerCase().includes(query));
+        })
+        .slice(0, 20);
+
+      this.showSuggestions = this.suggestions.length > 0;
+    }, 50);
+    this.showSuggestions = true;
+  }
+
+  private _handleSearch(e: KeyboardEvent) {
     if (e.key !== 'Enter') return;
-    const hash = (e.target as HTMLInputElement).value.replace('eve://', '#');
+
+    const target = e.target as HTMLInputElement;
+    this.searchQuery = target.value;
+    this.showSuggestions = false;
+
+    if (this.searchQuery.startsWith('npub1')) {
+      try {
+        const { type } = nip19.decode(this.searchQuery);
+        if (type === 'npub') {
+          window.location.hash = `profile/${this.searchQuery}`;
+          return;
+        }
+      } catch (e) {}
+    }
+
+    const hash = this.searchQuery.replace('eve://', '#');
     window.location.hash = hash;
   }
+
+  private _handleGoBack() {
+    this.dispatchEvent(new CustomEvent('go-back'));
+  }
+
+  private _handleGoForward() {
+    this.dispatchEvent(new CustomEvent('go-forward'));
+  }
+
+  private _handleGoHome() {
+    window.location.hash = '#';
+  }
+
+  private _handleSuggestionClick(suggestion: NDKEvent) {
+    window.location.hash = '#';
+    this.showSuggestions = false;
+    console.log(suggestion);
+    switch (suggestion.kind) {
+      case 0:
+        window.location.hash = `profile/${suggestion.pubkey}`;
+        break;
+      case 60890:
+      case 60891:
+        window.location.hash = 'arbor';
+        break;
+      case 892:
+        window.location.hash = `arbor/topics/${suggestion.id}`;
+        break;
+      case 893: {
+        const threadId = suggestion.tags.find((tag) => tag[0] === 'E')?.[1]!;
+        window.location.hash = `arbor/topics/${threadId}`;
+        break;
+      }
+      default:
+        window.location.hash = `event/${suggestion.id}`;
+    }
+  }
 }

src/components/HeaderSugestion.ts

@@ -0,0 +1,52 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import '@components/NostrProfile';
+
+@customElement('arx-header-suggestion')
+export class HeaderSuggestion extends LitElement {
+  @property({ type: NDKEvent }) event: NDKEvent | undefined;
+  @property({ type: Array<NDKEvent> }) allEvents: NDKEvent[] | undefined;
+
+  static override styles = css`
+    :host {
+      display: block;
+      padding: var(--space-xs) var(--space-sm);
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+  `;
+
+  override render() {
+    if (!this.event) return html``;
+    if (this.event.kind === 0)
+      return html`<arx-nostr-profile
+        npub=${this.event.pubkey}
+      ></arx-nostr-profile>`;
+    if (this.event.kind === 892) {
+      const threadName = this.event.tags.find((tag) => tag[0] === 'name')?.[1] || '';
+      return html`Arbor Thread: ${threadName}`;
+    }
+    if (this.event.kind === 893) {
+      const threadId = this.event.tags.find((tag) => tag[0] === 'E')?.[1] || '';
+      const thread = this.allEvents?.find((event) => event.id === threadId);
+      const threadName = thread?.tags.find((tag) => tag[0] === 'name')?.[1] || '';
+      return html`Arbor Post in ${threadName}:
+      ${this.event.content.substring(0, 100)}`;
+    }
+    if (this.event.kind === 60891) {
+      const categoryId = this.event.tags.find((tag) => tag[0] === 'd')?.[1] || '';
+      const forum = this.allEvents?.find(
+        (event) =>
+          event.kind === 60890 && event.tags.some((tag) => tag[0] === 'forum' && tag[1] === `60891:${categoryId}`),
+      );
+      if (!forum) return html`Orphan (deleted) forum category`;
+      const forumName = forum.tags.find((tag) => tag[0] === 'd')?.[1] || '';
+      const arborText = `Arbor${forumName === 'arbor' ? '' : ` [${forumName}]`}`;
+      const categoryName = this.event.tags.find((tag) => tag[0] === 'name')?.[1] || '';
+      return html`${arborText} Category: ${categoryName}`;
+    }
+    return html`Event kind ${this.event.kind}`;
+  }
+}

src/components/InitialSetup.ts

@@ -10,6 +10,11 @@ import { encodeBase64 } from '@std/encoding/base64';
 import { LitElement, css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 
+import '@components/LoadingView';
+import '@components/General/Button';
+import '@components/General/Input';
+import '@components/General/Fieldset';
+
 @customElement('arx-initial-setup')
 export class InitialSetup extends LitElement {
   @state() private currentPage = 1;
@@ -32,32 +37,18 @@ export class InitialSetup extends LitElement {
     :host {
       display: block;
       width: 100%;
-      --primary-color: var(--eve-primary-color, #4a90e2);
-      --primary-hover: var(--eve-primary-hover, #357abd);
-      --secondary-color: var(--eve-secondary-color, #6c757d);
-      --secondary-hover: var(--eve-secondary-hover, #5a6268);
-      --text-color: var(--eve-text-color, #2c3e50);
-      --text-secondary: var(--eve-text-secondary, #64748b);
-      --background-color: var(--eve-background-color, #ffffff);
-      --error-color: var(--eve-error-color, #dc3545);
-      --success-color: var(--eve-success-color, #28a745);
-      --spacing-unit: 0.25rem;
-      --border-radius: 8px;
-      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-      --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
-      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-
       font-family: system-ui, -apple-system, sans-serif;
       -webkit-font-smoothing: antialiased;
-      color: var(--text-color);
+      color: var(--color-base-content);
+
+      --spacing-unit: 0.25rem;
     }
 
     .welcome-container {
       max-width: min(800px, 90vw);
       margin: 0 auto;
       padding: calc(var(--spacing-unit) * 8);
-      animation: fadeIn var(--transition-normal);
+      animation: fadeIn var(--transition);
     }
 
     section {
@@ -67,8 +58,8 @@ export class InitialSetup extends LitElement {
     .alpha-badge {
       display: inline-flex;
       align-items: center;
-      background: var(--primary-color);
+      background: var(--color-accent);
-      color: white;
+      color: var(--color-accent-content);
       padding: 0.15em 0.5em;
       border-radius: 999px;
       font-size: 0.75em;
@@ -89,8 +80,8 @@ export class InitialSetup extends LitElement {
       font-weight: 700;
       background: linear-gradient(
         45deg,
-        var(--primary-color),
+        var(--color-accent),
-        var(--primary-hover)
+        oklch(from var(--color-accent) l calc(c * 1.2) h)
       );
       -webkit-background-clip: text;
       color: transparent;
@@ -101,18 +92,20 @@ export class InitialSetup extends LitElement {
       font-size: clamp(1.5rem, 3vw, 1.75rem);
       font-weight: 600;
       margin-bottom: calc(var(--spacing-unit) * 4);
+      color: var(--color-base-content);
     }
 
     h3 {
       font-size: 1.25rem;
       font-weight: 600;
       margin-bottom: calc(var(--spacing-unit) * 4);
+      color: var(--color-base-content);
     }
 
     p {
       margin: 0 0 calc(var(--spacing-unit) * 4);
       line-height: 1.6;
-      color: var(--text-secondary);
+      color: var(--color-secondary);
     }
 
     .input-group {
@@ -121,65 +114,6 @@ export class InitialSetup extends LitElement {
       margin-top: calc(var(--spacing-unit) * 6);
     }
 
-    input {
-      flex: 1;
-      padding: calc(var(--spacing-unit) * 4);
-      border: 2px solid var(--text-secondary);
-      border-radius: var(--border-radius);
-      font-size: 1rem;
-      transition: all var(--transition-fast);
-    }
-
-    input:focus {
-      outline: none;
-      border-color: var(--primary-color);
-      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
-    }
-
-    .button {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: calc(var(--spacing-unit) * 2);
-      padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 6);
-      border: none;
-      border-radius: var(--border-radius);
-      font-weight: 500;
-      cursor: pointer;
-      transition: all var(--transition-fast);
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    .button.primary {
-      background: linear-gradient(
-        45deg,
-        var(--primary-color),
-        var(--primary-hover)
-      );
-      color: white;
-      box-shadow: var(--shadow-md);
-    }
-
-    .button.secondary {
-      background: linear-gradient(
-        45deg,
-        var(--secondary-color),
-        var(--secondary-hover)
-      );
-      color: white;
-    }
-
-    .button:hover {
-      transform: translateY(-2px);
-    }
-
-    .button:active {
-      transform: translateY(0);
-    }
-
     .navigation {
       display: flex;
       justify-content: space-between;
@@ -201,75 +135,52 @@ export class InitialSetup extends LitElement {
       .welcome-container {
         padding: calc(var(--spacing-unit) * 4);
       }
-
-      .input-group {
-        flex-direction: column;
-      }
-
-      .button {
-        width: 100%;
-        justify-content: center;
-      }
     }
 
     pre {
       white-space: normal;
+      background-color: var(--color-base-200);
+      padding: calc(var(--spacing-unit) * 4);
+      border-radius: var(--radius-field);
     }
+
     code {
       white-space: pre;
+      font-family: monospace;
+      background-color: var(--color-base-200);
+      padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
+      border-radius: var(--radius-field);
     }
 
     .note {
       display: block;
-      color: #666;
+      color: var(--color-secondary);
       font-size: 0.875rem;
       margin-top: 0.5rem;
       padding-left: 0.5rem;
-      border-left: 2px solid #ddd;
+      border-left: var(--border) solid var(--color-base-300);
       font-style: italic;
       line-height: 1.4;
       max-width: 600px;
       opacity: 0.9;
+      transition: all 0.2s ease;
     }
 
     .note:hover {
       opacity: 1;
-      border-left-color: #999;
+      border-left-color: var(--color-accent);
-    }
-
-    fieldset {
-      border: 2px solid #3498db;
-      border-radius: 8px;
-      padding: 20px;
-      margin: 20px 0;
-      background-color: #f8f9fa;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    legend {
-      padding: 0 10px;
-      background-color: #3498db;
-      color: white;
-      font-weight: bold;
-      border-radius: 4px;
-      font-size: 1.1em;
-    }
-
-    fieldset:hover {
-      border-color: #2980b9;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transition: all 0.3s ease;
     }
 
     .external-link {
-      color: #2970ff;
+      color: var(--color-accent);
       text-decoration: none;
       font-weight: 500;
       transition: color 0.2s ease;
+      position: relative;
     }
 
     .external-link:hover {
-      color: #1a56db;
+      color: oklch(from var(--color-accent) l calc(c * 1.2) h);
       text-decoration: underline;
     }
 
@@ -328,27 +239,28 @@ export class InitialSetup extends LitElement {
         </section>
 
         <section>
-          <div class="action-buttons">
+          <arx-button
-            <a href="https://arx-ccn.com/eve-feedback" class="button primary">
+            label="Share Feedback"
-              <iconify-icon icon="mdi:feedback"></iconify-icon>Share Feedback
+            @click=${() => window.open('https://arx-ccn.com/eve-feedback')}
-            </a>
-            <a
-              href="https://arx-ccn.com/report-eve-bug"
-              class="button secondary"
           >
-              <iconify-icon icon="mdi:bug"></iconify-icon>Report a Bug
+            <iconify-icon slot="prefix" icon="mdi:feedback"></iconify-icon>
-            </a>
+          </arx-button>
-          </div>
+          <arx-button
+            variant="secondary"
+            label="Report a Bug"
+            @click=${() => window.open('https://arx-ccn.com/report-eve-bug')}
+          >
+            <iconify-icon slot="prefix" icon="mdi:bug"></iconify-icon>
+          </arx-button>
         </section>
 
         <div class="navigation">
           <span></span>
-          <button
+          <arx-button
+            variant="primary"
+            label="Next"
             @click=${() => this.handleNavigation(2)}
-            class="button primary"
+          ></arx-button>
-          >
-            Next
-          </button>
         </div>
       </main>
     `;
@@ -387,36 +299,36 @@ export class InitialSetup extends LitElement {
             well as improve your community's security.
           </p>
           <div class="input-group">
-            <input
+            <arx-input
               @input=${this.onSeedPhraseInput}
               .value=${this.seedPhrase}
               id="seed-input"
               type="text"
               placeholder="Enter seed phrase..."
-            />
+            ></arx-input>
-            <button
+            <arx-button
               @click=${() => this.generateSeedPhrase()}
-              class="button secondary"
+              label="Generate"
+              variant="secondary"
             >
-              Generate
+            </arx-button>
-            </button>
           </div>
         </section>
 
         <div class="navigation">
-          <button
+          <arx-button
             @click=${() => this.handleNavigation(1)}
-            class="button secondary"
+            label="Back"
+            variant="secondary"
           >
-            Back
+          </arx-button>
-          </button>
+          <arx-button
-          <button
             @click=${() => this.handleNavigation(3)}
             ?disabled=${!this.isValidSeedPhrase()}
-            class="button primary"
+            label="Continue"
+            variant="primary"
           >
-            Continue
+          </arx-button>
-          </button>
         </div>
       </main>
     `;
@@ -437,9 +349,13 @@ export class InitialSetup extends LitElement {
             This process will be automated in future releases.
           </p>
           <p>Please press the button below to start the relay.</p>
-          <button @click=${() => this.startRelay()} class="button primary">
+          <arx-button
+            variant="primary"
+            label="Start Relay"
+            @click=${() => this.startRelay()}
+          >
             Start Relay
-          </button>
+          </arx-button>
           <p>
             Having trouble? Our team is here to help if you encounter any
             issues.
@@ -448,18 +364,18 @@ export class InitialSetup extends LitElement {
         </section>
 
         <div class="navigation">
-          <button
+          <arx-button
             @click=${() => this.handleNavigation(2)}
-            class="button secondary"
+            variant="secondary"
+            label="Back"
           >
-            Back
+          </arx-button>
-          </button>
+          <arx-button
-          <button
             @click=${() => this.handleNavigation(4)}
-            class="button primary"
+            variant="primary"
+            label="Continue"
           >
-            Continue
+          </arx-button>
-          </button>
         </div>
       </main>
     `;
@@ -488,45 +404,43 @@ export class InitialSetup extends LitElement {
             community members.
           </p>
           <div class="profile-form">
-            <fieldset>
+            <arx-fieldset legend="Your Name">
-              <legend>Display Name</legend>
+              <arx-input
-              <input
                 id="username"
                 type="text"
                 .value=${this.userName}
                 @input=${this.onUserNameInput}
                 placeholder="Enter your name"
-              />
+              ></arx-input>
-            </fieldset>
+            </arx-fieldset>
-            <fieldset>
+            <arx-fieldset legend="Profile Picture">
-              <legend>Profile Picture</legend>
+              <arx-input
-              <input
                 id="profile-image"
                 type="text"
                 .value=${this.profileImage}
                 @input=${this.onProfileImageInput}
                 placeholder="Enter image URL"
-              />
+              ></arx-input>
               <small class="note">
                 Direct file uploads will be supported in a future update. For
                 now, please provide an image URL or leave blank.
               </small>
-            </fieldset>
+            </arx-fieldset>
           </div>
         </section>
         <div class="navigation">
-          <button
+          <arx-button
             @click=${() => this.handleNavigation(3)}
-            class="button secondary"
+            variant="secondary"
+            label="Back"
           >
-            Back
+          </arx-button>
-          </button>
+          <arx-button
-          <button
             @click=${() => this.handleNavigation(5)}
-            class="button primary"
+            variant="primary"
+            label="Final Step"
           >
-            Final Step
+          </arx-button>
-          </button>
         </div>
       </main>
     `;
@@ -546,13 +460,13 @@ export class InitialSetup extends LitElement {
               >npub.cash</a
             >.
           </p>
-          <input
+          <arx-input
             id="lightning-address"
             type="text"
             .value=${this.lightningAddress}
             @input=${this.onLightningAddressInput}
             placeholder="your@lightning.address"
-          />
+          /></arx-input>
           <small class="note">
             Your Lightning address enables secure, instant payments within the
             community.
@@ -560,15 +474,14 @@ export class InitialSetup extends LitElement {
         </section>
 
         <div class="navigation">
-          <button
+          <arx-button
             @click=${() => this.handleNavigation(4)}
-            class="button secondary"
+            variant="secondary"
+            label="Back"
           >
-            Back
+          </arx-button>
-          </button>
+          <arx-button variant="primary" label="Next" @click=${() => this.goToFinalStep()}>
-          <button @click=${() => this.goToFinalStep()} class="button primary">
+          </arx-button>
-            Next
-          </button>
         </div>
       </main>
     `;
@@ -625,13 +538,17 @@ export class InitialSetup extends LitElement {
         </section>
 
         <div class="navigation">
-          <button
+          <arx-button
             @click=${() => this.handleNavigation(5)}
-            class="button secondary"
+            variant="secondary"
+            label="Back"
           >
-            Back
+          </arx-button>
-          </button>
+          <arx-button
-          <button @click=${this.finish} class="button primary">Finish</button>
+            variant="accent"
+            label="Finish"
+            @click=${this.finish}
+          ></arx-button>
         </div>
       </main>
     `;
@@ -666,7 +583,9 @@ export class InitialSetup extends LitElement {
       case 6:
         return this.renderPageSix();
       default:
-        return html`<div class="welcome-container">Loading...</div>`;
+        return html`<div class="welcome-container">
+          <arx-loading-view></arx-loading-view>
+        </div>`;
     }
   }
 }

src/components/LoadingView.ts

@@ -1,17 +1,43 @@
-import { LitElement, html } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 @customElement('arx-loading-view')
 export class LoadingView extends LitElement {
-  override render() {
+  static override styles = [
-    return html`
+    css`
-      <span>Loading...</span>
+      :host {
-    `;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 16px;
+        color: var(--color-accent);
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
         }
       }
 
-declare global {
+      .spinner {
-  interface HTMLElementTagNameMap {
+        animation: spin 1.5s linear infinite;
-    'arx-loading-view': LoadingView;
+        width: 18px;
+        height: 18px;
+        border: 2px solid var(--color-accent-content);
+        border-top: 2px solid var(--color-accent);
+        border-radius: 50%;
+      }
+    `,
+  ];
+
+  override render() {
+    return html`
+      <div class="spinner"></div>
+      Loading...
+    `;
   }
 }

src/components/NostrAvatar.ts

@@ -20,13 +20,13 @@ export class ArxNostrAvatar extends LitElement {
         --avatar-size: 2rem;
       }
       .medium-avatar {
-        --avatar-size: 3rem;
-      }
-      .large-avatar {
         --avatar-size: 4rem;
       }
+      .large-avatar {
+        --avatar-size: 6rem;
+      }
       .huge-avatar {
-        --avatar-size: 5rem;
+        --avatar-size: 10rem;
       }
     `,
   ];

src/components/NostrProfile.ts

@@ -52,13 +52,25 @@ export class NostrProfile extends LitElement {
 
     switch (this.renderType) {
       case 'short':
-        return html`<arx-nostr-short-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-short-profile>`;
+        return html`<arx-nostr-short-profile
+          .profile=${this.profile}
+          npub=${this.npub}
+        ></arx-nostr-short-profile>`;
       case 'medium':
-        return html`<arx-nostr-medium-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-medium-profile>`;
+        return html`<arx-nostr-medium-profile
+          .profile=${this.profile}
+          npub=${this.npub}
+        ></arx-nostr-medium-profile>`;
       case 'large':
-        return html`<arx-nostr-large-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-large-profile>`;
+        return html`<arx-nostr-large-profile
+          .profile=${this.profile}
+          npub=${this.npub}
+        ></arx-nostr-large-profile>`;
       case 'card':
-        return html`<arx-nostr-card-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-card-profile>`;
+        return html`<arx-nostr-card-profile
+          .profile=${this.profile}
+          npub=${this.npub}
+        ></arx-nostr-card-profile>`;
       default:
         return html`<p>Invalid render type</p>`;
     }

src/components/Widgets/BitcoinBlockWidget.ts

@@ -1,11 +1,16 @@
-import { getLastBlockHeight } from '@utils/lastBlockHeight';
+import formatDateTime from '@/utils/formatDateTime';
+import { type LastBlock, getLastBlock } from '@/utils/lastBlock';
 import { LitElement, css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import '@components/LoadingView';
+import '@components/General/Tooltip';
+import '@components/General/Fieldset';
 
 @customElement('arx-bitcoin-block-widget')
 export class BitcoinBlockWidget extends LitElement {
   @state()
-  private lastBlock: number | null = null;
+  private lastBlock: LastBlock | null = null;
 
   @state()
   private isLoading = true;
@@ -13,15 +18,16 @@ export class BitcoinBlockWidget extends LitElement {
   @state()
   private error: string | null = null;
 
-  private REFRESH_INTERVAL = 5000;
+  private REFRESH_INTERVAL = 30000;
 
   @state()
   private timer: number | null = null;
 
   constructor() {
     super();
-    this.loadBlockHeight();
+    this.loadBlock = this.loadBlock.bind(this);
-    this.timer = window.setInterval(this.loadBlockHeight, this.REFRESH_INTERVAL);
+    this.loadBlock();
+    this.timer = window.setInterval(this.loadBlock, this.REFRESH_INTERVAL);
   }
 
   override disconnectedCallback() {
@@ -29,70 +35,138 @@ export class BitcoinBlockWidget extends LitElement {
     if (this.timer) clearInterval(this.timer);
   }
 
-  async loadBlockHeight() {
+  async loadBlock() {
+    this.isLoading = true;
     try {
-      const response = await getLastBlockHeight();
+      const response = await getLastBlock();
-      this.lastBlock = response.height;
+      this.lastBlock = response;
       this.error = null;
     } catch (error) {
-      this.error = 'Failed to load block height';
+      this.error = 'Failed to load block data';
       console.error(error);
     } finally {
       this.isLoading = false;
     }
   }
 
+  private formatBlockId(id: string): string {
+    if (!id) return '';
+    if (id.length <= 16) return id;
+    return `${id.substring(0, 8)}...${id.substring(id.length - 8)}`;
+  }
+
+  private formatSize(size: number): string {
+    if (size < 1024) return `${size} Bytes`;
+    if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
+    return `${(size / (1024 * 1024)).toFixed(2)} MB`;
+  }
+
+  private copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text).catch((err) => {
+      console.error('Could not copy text: ', err);
+    });
+  }
+
   static override styles = [
     css`
-      .error {
+      :host {
-        color: #dc3545;
+        display: block;
-        padding: 0.5rem;
-        border-radius: 4px;
-        background: #f8d7da;
       }
 
-      .loading {
+      .widget-header {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        gap: 0.5rem;
+        margin-bottom: 12px;
+        border-bottom: var(--border) solid var(--color-base-300);
+        padding-bottom: 8px;
       }
 
-      .block-height {
+      .widget-title {
-        display: flex;
+        font-size: 1.2rem;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .label {
-        font-weight: 500;
-      }
-
-      .value {
-        font-size: 1.25rem;
         font-weight: 600;
+        margin: 0;
+        color: var(--color-base-content);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .bitcoin-icon {
+        color: var(--color-warning);
+        font-size: 1.4rem;
+      }
+
+      .error {
+        color: var(--color-error-content);
+        padding: 12px;
+        border-radius: var(--radius-field);
+        background: var(--color-error);
+        margin-bottom: 12px;
       }
     `,
   ];
 
-  override render() {
+  private renderError() {
-    if (this.error) {
     return html`<div class="error">${this.error}</div>`;
   }
 
-    if (this.isLoading) {
+  private renderLoading() {
+    return html`<arx-loading-view></arx-loading-view>`;
+  }
+
+  private renderEmptyState() {
+    return html`<div class="error">No block data available</div>`;
+  }
+
+  private renderBlockData() {
+    if (!this.lastBlock) return this.renderEmptyState();
+
     return html`
-        <div class="loading">
+      <arx-fieldset legend="Height">
-          <span class="loader"></span>
+        <strong>${this.lastBlock.height.toLocaleString()}</strong>
-          Loading latest block...
+      </arx-fieldset>
-        </div>
+
+      <arx-fieldset legend="Block ID">
+        <arx-tooltip
+          content="Click to copy full ID"
+          @click=${() => this.copyToClipboard(this.lastBlock!.id)}
+        >
+          <strong>${this.formatBlockId(this.lastBlock.id)}</strong>
+        </arx-tooltip>
+      </arx-fieldset>
+
+      <arx-fieldset legend="Timestamp">
+        <strong>${formatDateTime(this.lastBlock.timestamp * 1000)}</strong>
+      </arx-fieldset>
+
+      <arx-fieldset legend="Size">
+        <strong>
+          ${this.formatSize(this.lastBlock.size)}
+          (${this.lastBlock.tx_count.toLocaleString()} txs)
+        </strong>
+      </arx-fieldset>
     `;
   }
 
+  override render() {
     return html`
-      <div class="block-height">
+      <div class="widget-header">
-        <span class="label">Last Block:</span>
+        <h3 class="widget-title">
-        <span class="value">${this.lastBlock?.toLocaleString()}</span>
+          <span class="bitcoin-icon">₿</span> Bitcoin Latest Block
+        </h3>
       </div>
+
+      ${when(
+        this.error,
+        () => this.renderError(),
+        () =>
+          when(
+            this.isLoading && !this.lastBlock,
+            () => this.renderLoading(),
+            () => this.renderBlockData(),
+          ),
+      )}
     `;
   }
 }

src/components/profiles/CardProfile.ts

@@ -2,6 +2,10 @@ import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { getProfile } from '@utils/profileUtils';
 import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+import '@components/EveLink';
+import '@components/General/Card';
 
 @customElement('arx-nostr-card-profile')
 export class CardProfile extends LitElement {
@@ -25,50 +29,82 @@ export class CardProfile extends LitElement {
 
   static override styles = [
     css`
-      .card {
-        padding: 1rem;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        max-width: 300px;
-      }
-
       a {
-        color: var(--primary);
+        color: var(--color-accent);
         text-decoration: none;
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.75rem;
+        transition: all 0.2s ease;
       }
 
       h3 {
         margin: 0;
         font-size: 1.2rem;
+        color: var(--color-base-content);
+        font-weight: 600;
       }
 
       p {
         margin: 0.25rem 0;
-        color: var(--secondary);
+        color: var(--color-secondary);
         font-size: 0.9rem;
       }
 
       .bio {
         white-space: pre-line;
         font-size: 0.9rem;
-        color: var(--primary);
+        color: var(--color-base-content);
-        margin: 0.5rem 0;
+        margin: 0.75rem 0 0.5rem;
-        padding-top: 0.5rem;
+        padding-top: 0.75rem;
-        border-top: 1px solid var(--border);
+        border-top: var(--border) solid var(--color-base-300);
+        line-height: 1.5;
       }
 
       .website-link {
         display: block;
-        margin-top: 0.5rem;
+        margin-top: 0.75rem;
         font-size: 0.9rem;
-        color: var(--accent);
+        color: var(--color-accent);
+        position: relative;
+        width: fit-content;
+        padding: 0.25rem 0;
+      }
+
+      .website-link::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 0;
+        height: var(--border);
+        background-color: var(--color-accent);
+        transition: width 0.25s ease;
       }
 
       .website-link:hover {
-        text-decoration: underline;
+        color: oklch(from var(--color-accent) l calc(c * 1.1) h);
+      }
+
+      .website-link:hover::after {
+        width: 100%;
+      }
+
+      router-link {
+        display: flex;
+        align-items: center;
+        border-radius: calc(var(--radius-selector) / 2);
+        padding: 0.25rem;
+        transition: all 0.2s ease;
+      }
+
+      router-link:hover {
+        background-color: oklch(from var(--color-base-300) l c h / 0.5);
+      }
+
+      router-link:focus-visible {
+        outline: var(--border) solid var(--color-accent);
+        outline-offset: 2px;
       }
     `,
   ];
@@ -101,21 +137,31 @@ export class CardProfile extends LitElement {
 
   override render() {
     return html`
-      <div class="card">
+      <arx-card>
-        <router-link to=${this.profileUrl}>
+        <arx-eve-link href=${this.profileUrl}>
-          <arx-nostr-avatar .profile=${this.profile} size="large"></arx-nostr-avatar>
+          <arx-nostr-avatar
+            .profile=${this.profile}
+            size="large"
+          ></arx-nostr-avatar>
           <div>
             <h3>${this.displayName}</h3>
-            <p v-if=${this.firstLineOfAbout}>${this.firstLineOfAbout}</p>
+            ${when(this.firstLineOfAbout, () => html`<p>${this.firstLineOfAbout}</p>`)}
           </div>
-        </router-link>
+        </arx-eve-link>
 
-        <div v-if=${this.about} class="bio">${this.about}</div>
+        ${when(this.about, () => html`<div class="bio">${this.about}</div>`)}
-
+        ${when(
-        <a v-if=${this.website} href=${this.website} target="_blank" rel="noreferrer noopener" class="website-link">
+          this.website,
+          () => html`<a
+            href=${this.website}
+            target="_blank"
+            rel="noreferrer noopener"
+            class="website-link"
+          >
             ${this.website}
-        </a>
+          </a>`,
-      </div>
+        )}
+      </arx-card>
     `;
   }
 }

src/components/profiles/LargeProfile.ts

@@ -4,6 +4,8 @@ import { getProfile } from '@utils/profileUtils';
 import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+import '@components/EveLink';
+
 @customElement('arx-nostr-large-profile')
 export class LargeProfile extends LitElement {
   @property() profile!: NDKUserProfile;
@@ -20,19 +22,58 @@ export class LargeProfile extends LitElement {
 
   static override styles = [
     css`
-      a {
+      :host {
-        color: var(--primary);
+        display: block;
+      }
+
+      arx-eve-link {
+        color: var(--color-base-content);
         text-decoration: none;
-        display: inline-flex;
+        display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.75rem;
+        padding: 0.75rem;
+        border-radius: var(--radius-selector);
+        transition: all 0.2s ease;
+      }
+
+      arx-eve-link:hover {
+        background-color: oklch(from var(--color-base-300) l c h / 0.5);
+      }
+
+      arx-eve-link:focus-visible {
+        outline: var(--border) solid var(--color-accent);
+        outline-offset: 2px;
+      }
+
+      h3 {
+        margin: 0 0 0.35rem 0;
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: var(--color-base-content);
       }
 
       .bio {
         white-space: pre-line;
         font-size: 0.9rem;
-        color: var(--primary);
+        color: var(--color-secondary);
-        margin: 0.5rem 0;
+        margin: 0;
+        line-height: 1.4;
+        max-width: 24rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      arx-nostr-avatar {
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+      }
+
+      arx-eve-link:hover arx-nostr-avatar {
+        transform: scale(1.05);
       }
     `,
   ];
@@ -49,13 +90,16 @@ export class LargeProfile extends LitElement {
 
   override render() {
     return html`
-      <router-link to=${this.profileUrl}>
+      <arx-eve-link href=${this.profileUrl}>
-        <arx-nostr-avatar .profile=${this.profile} size="large"></arx-nostr-avatar>
+        <arx-nostr-avatar
+          .profile=${this.profile}
+          size="large"
+        ></arx-nostr-avatar>
         <div>
           <h3>${this.displayName}</h3>
           <div class="bio">${this.about}</div>
         </div>
-      </router-link>
+      </arx-eve-link>
     `;
   }
 }

src/components/profiles/MediumProfile.ts

@@ -22,12 +22,52 @@ export class MediumProfile extends LitElement {
 
   static override styles = [
     css`
-      arx-eve-link::part(link) {
+      :host {
-        color: var(--primary);
+        display: block;
+      }
+
+      arx-eve-link {
+        color: var(--color-base-content);
         text-decoration: none;
-        display: inline-flex;
+        display: flex;
         align-items: center;
         gap: 0.5rem;
+        padding: 0.5rem;
+        border-radius: var(--radius-selector);
+        transition: all 0.2s ease;
+      }
+
+      arx-eve-link:hover {
+        background-color: oklch(from var(--color-base-300) l c h / 0.5);
+      }
+
+      arx-eve-link:focus-visible {
+        outline: var(--border) solid var(--color-accent);
+        outline-offset: 2px;
+      }
+
+      .display-name {
+        font-weight: 500;
+        color: var(--color-base-content);
+        margin-bottom: 0.25rem;
+      }
+
+      .bio {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 0.85rem;
+        color: var(--color-secondary);
+        max-width: 180px;
+      }
+
+      arx-nostr-avatar {
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+      }
+
+      arx-eve-link:hover arx-nostr-avatar {
+        transform: scale(1.05);
       }
     `,
   ];

src/components/profiles/ShortProfile.ts

@@ -18,12 +18,43 @@ export class ShortProfile extends LitElement {
 
   static override styles = [
     css`
-      arx-eve-link::part(link) {
+      :host {
-        color: var(--primary);
+        display: inline-block;
+      }
+
+      arx-eve-link {
+        color: var(--color-base-content);
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: var(--radius-selector);
+        transition: all 0.2s ease;
+        white-space: nowrap;
+      }
+
+      arx-eve-link:hover {
+        background-color: oklch(from var(--color-base-300) l c h / 0.5);
+      }
+
+      arx-eve-link:focus-visible {
+        outline: var(--border) solid var(--color-accent);
+        outline-offset: 2px;
+      }
+
+      span {
+        font-weight: 500;
+        font-size: 0.95rem;
+      }
+
+      arx-nostr-avatar {
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+      }
+
+      arx-eve-link:hover arx-nostr-avatar {
+        transform: scale(1.05);
       }
     `,
   ];

src/index.html

@@ -2,7 +2,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
     <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.3.0/dist/iconify-icon.min.js"></script>
   </head>
 

src/main.ts

@@ -1,5 +1,4 @@
-import './style.scss';
+import './style.css';
-
 import '@components/ErrorView';
 import '@components/NostrAvatar';
 import '@components/LoadingView';

src/routes/404Page.ts

@@ -2,7 +2,9 @@ import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { RouteParams } from './router';
 
-import '@components/EveLink';
+import '@components/General/Button';
+import '@components/General/Card';
+import '@components/General/Fieldset';
 
 @customElement('arx-404-page')
 export class FourOhFourPage extends LitElement {
@@ -17,30 +19,27 @@ export class FourOhFourPage extends LitElement {
 
   static override styles = [
     css`
-      .not-found {
+      :host {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-family: "Inter", sans-serif;
+        font-family: system-ui, -apple-system, sans-serif;
-        padding: 1rem;
+        padding: 2rem 1rem;
-      }
+        min-height: 80vh;
-
+        background-color: var(--color-base-100);
-      .content {
-        max-width: 600px;
-        text-align: center;
       }
 
       .error-container h1 {
         margin: 0;
-      }
+        display: flex;
-
+        align-items: center;
-      .error-container h1 * {
+        justify-content: center;
-        position: relative;
-        margin: 0 -20px;
       }
 
       .spinning-gear {
-        animation: spin 5s linear infinite;
+        animation: spin 8s linear infinite;
+        font-size: 7rem;
+        margin: 0 -10px;
       }
 
       @keyframes spin {
@@ -52,37 +51,34 @@ export class FourOhFourPage extends LitElement {
         }
       }
 
-      .path-container {
+      arx-fieldset {
-        background: rgba(255, 255, 255, 0.5);
+        margin-top: 1rem;
-        backdrop-filter: blur(10px);
+        text-align: center;
-        border: 1px solid rgba(255, 255, 255, 0.6);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-        margin-bottom: 2rem;
-        padding: 1rem;
-        backdrop-filter: blur(10px);
-      }
-
-      .path-text {
-        color: var(--secondary);
-        margin: 0 0 0.5rem 0;
-        font-size: 0.9rem;
       }
 
       .path {
-        font-family: "JetBrains Mono", monospace;
+        font-family: monospace;
-        color: var(--primary);
+        color: var(--color-accent);
         word-break: break-all;
-        font-size: 1.1rem;
+        font-size: 1rem;
-        padding: 0.5rem;
+        padding: 0.75rem;
-        background: rgba(0, 0, 0, 0.2);
+        background: oklch(from var(--color-base-content) l c h / 0.1);
-        border-radius: 4px;
+        border-radius: var(--radius-field);
         display: inline-block;
         max-width: 100%;
+        text-align: left;
       }
 
       h1 {
-        font-size: 8rem;
+        font-size: 7rem;
         font-weight: 800;
+        color: var(--color-base-content);
+        line-height: 1;
+        margin-bottom: 1rem;
+      }
+
+      .four {
+        padding: 0 0.25rem;
       }
 
       .message-text {
@@ -92,66 +88,58 @@ export class FourOhFourPage extends LitElement {
         gap: 0.75rem;
       }
 
-      .message-text .inline-icon {
-        font-size: 1.25rem;
-        flex-shrink: 0;
-      }
-
       .status {
-        font-size: 1.25rem;
+        font-size: 1.5rem;
-        color: #94a3b8;
+        color: var(--color-base-content);
-        margin: 1rem 0;
+        margin: 0.5rem 0;
+        font-weight: 600;
       }
 
       .sub-text {
-        color: #64748b;
+        color: var(--color-secondary);
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
-        margin-bottom: 2rem;
+        margin-bottom: 2.5rem;
-      }
+        font-size: 1.1rem;
-
-      .inline-icon {
-        font-size: 1.25rem;
       }
 
       .actions {
         display: flex;
-        gap: 1rem;
+        gap: 1.25rem;
         justify-content: center;
         flex-wrap: wrap;
       }
 
-      .primary-button {
+      @media (max-width: 640px) {
-        display: flex;
+        h1 {
+          font-size: 5rem;
+        }
+
+        .spinning-gear {
+          font-size: 5rem;
+        }
+
+        .status {
+          font-size: 1.25rem;
+        }
+
+        .sub-text {
+          font-size: 1rem;
+        }
+
+        .actions {
+          flex-direction: column;
           align-items: center;
-        gap: 0.5rem;
-        padding: 0.75rem 1.5rem;
-        border-radius: 8px;
-        font-weight: 600;
-        transition: all 0.3s ease;
-        text-decoration: none;
-        background: var(--accent);
-        color: white;
-
-        &:hover {
-          background: var(--secondary);
-          transform: translateY(-2px);
         }
       }
-
-      arx-eve-link::part(link) {
-        color: white;
-        text-decoration: none;
-      }
     `,
   ];
 
   override render() {
     return html`
-      <div class="not-found">
+      <arx-card>
-        <div class="content">
         <div class="error-container">
           <h1>
             <span class="four">4</span>
@@ -162,19 +150,17 @@ export class FourOhFourPage extends LitElement {
             <span class="four">4</span>
           </h1>
         </div>
-          <div class="path-container">
+        <arx-fieldset legend="Path">
-            <div class="path-text">Path:</div>
           <div class="path">${this.path}</div>
-          </div>
+        </arx-fieldset>
         <div class="message-text">
-            <div class="status">Page not found.</div>
+          <div class="status">Page not found</div>
           <div class="sub-text">
-              The page you are looking for does not exist.
+            The page you are looking for does not exist
           </div>
         </div>
         <div class="actions">
-            <a
+          <arx-button
-              href="javascript:void(0)"
             @click="${() =>
               this.dispatchEvent(
                 new CustomEvent('go-back', {
@@ -182,18 +168,20 @@ export class FourOhFourPage extends LitElement {
                   composed: true,
                 }),
               )}"
-              class="primary-button"
+            variant="primary"
+            label="Go Back"
           >
-              <iconify-icon icon="material-symbols:arrow-back"></iconify-icon>
+            <iconify-icon
-              Go back
+              slot="prefix"
-            </a>
+              icon="material-symbols:arrow-back"
-            <arx-eve-link href="home" class="primary-button">
+            ></iconify-icon>
+          </arx-button>
+          <arx-button href="home" label="Home" variant="secondary">
             <iconify-icon icon="material-symbols:home"></iconify-icon>
             Home
-            </arx-eve-link>
+          </arx-button>
-          </div>
-        </div>
         </div>
+      </arx-card>
     `;
   }
 }

src/routes/Arbor/Home.ts

@@ -2,16 +2,13 @@ import { getSigner, ndk } from '@/ndk';
 import { NDKEvent, type NDKKind, type NDKSubscription } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
 
 import '@components/Breadcrumbs';
 import '@components/Arbor/ForumTopic';
 import '@components/Arbor/ForumCategory';
-import '@components/Arbor/Button';
+import '@components/General/Prompt';
-import '@components/Prompt';
-
-import type { EvePrompt } from '@components/Prompt';
-import { map } from 'lit/directives/map.js';
-import { when } from 'lit/directives/when.js';
 
 interface ForumTopic {
   id: string;
@@ -164,9 +161,10 @@ export class ArborForum extends LitElement {
       >
       </arx-breadcrumbs>
 
-      <arx-arbor-button @click=${this.newCategoryButtonClicked}>
+      <arx-button
-        New Category
+        label="New Category"
-      </arx-arbor-button>
+        @click=${this.newCategoryButtonClicked}
+      ></arx-button>
 
       <arx-prompt
         id="new-category-prompt"

src/routes/Arbor/NewPost.ts

@@ -3,6 +3,8 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+import '@components/General/Textarea';
+
 @customElement('arx-arbor-post-creator')
 export class ArborPostCreator extends LitElement {
   @property({ type: String })
@@ -36,23 +38,6 @@ export class ArborPostCreator extends LitElement {
       font-family: monospace;
     }
 
-    textarea {
-      width: 100%;
-      min-height: 200px;
-      padding: 0.75rem;
-      border: 1px solid #ccc;
-      border-radius: 0.5rem;
-      resize: vertical;
-      font-family: inherit;
-      line-height: 1.5;
-    }
-
-    textarea:focus {
-      outline: none;
-      border-color: var(--primary-color, #3b82f6);
-      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-    }
-
     .error {
       color: #dc2626;
       font-size: 0.875rem;
@@ -133,29 +118,29 @@ export class ArborPostCreator extends LitElement {
       <div class="container">
         <div class="topic-id">Topic ID: ${this.topicId}</div>
 
-        <textarea
+        <arx-textarea
           placeholder="Post. You can use Markdown here."
           .value=${this.postContent}
           @input=${this.handleContentInput}
           ?disabled=${this.isCreating}
-        ></textarea>
+        ></arx-textarea>
 
         ${this.error ? html` <div class="error">${this.error}</div> ` : null}
 
         <div class="actions">
-          <arx-arbor-button
+          <arx-button
+            label="Cancel"
             @click=${() => this.dispatchEvent(new CustomEvent('cancel'))}
             ?disabled=${this.isCreating}
-          >
+          ></arx-button>
-            Cancel
-          </arx-arbor-button>
 
-          <arx-arbor-button
+          <arx-button
+            label=${this.isCreating ? 'Creating...' : 'Create'}
             @click=${this.doCreatePost}
             ?disabled=${this.isCreating}
           >
             ${this.isCreating ? 'Creating...' : 'Create'}
-          </arx-arbor-button>
+          </arx-button>
         </div>
       </div>
     `;

src/routes/Arbor/NewTopic.ts

@@ -3,6 +3,10 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+import '@components/General/Input';
+import '@components/General/Textarea';
+import '@components/General/Button';
+
 @customElement('arx-arbor-topic-creator')
 export class ArborTopicCreator extends LitElement {
   @property({ type: String })
@@ -22,20 +26,6 @@ export class ArborTopicCreator extends LitElement {
       display: block;
     }
 
-    input,
-    textarea {
-      width: 100%;
-      margin-bottom: 1rem;
-      padding: 0.5rem;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-    }
-
-    textarea {
-      min-height: 200px;
-      resize: vertical;
-    }
-
     .error {
       color: red;
       margin-bottom: 1rem;
@@ -108,35 +98,34 @@ export class ArborTopicCreator extends LitElement {
     return html`
       <div class="category-id">Category ID: ${this.categoryId}</div>
 
-      <input
+      <arx-input
         type="text"
         placeholder="New Topic"
         .value=${this.newTopic}
         @input=${this.handleTopicInput}
         ?disabled=${this.isCreating}
-      />
+      ></arx-input>
 
-      <textarea
+      <arx-textarea
         placeholder="Topic. You can use Markdown here."
         .value=${this.topicContent}
         @input=${this.handleContentInput}
         ?disabled=${this.isCreating}
-      ></textarea>
+      ></arx-textarea>
 
       <div class="button-group">
-        <arx-arbor-button
+        <arx-button
+          label="Cancel"
           @click=${() => this.dispatchEvent(new CustomEvent('cancel'))}
           ?disabled=${this.isCreating}
-        >
+        ></arx-button>
-          Cancel
-        </arx-arbor-button>
 
-        <arx-arbor-button
+        <arx-button
+          label=${this.isCreating ? 'Creating...' : 'Create'}
           @click=${this.doCreateTopic}
           ?disabled=${this.isCreating}
         >
-          ${this.isCreating ? 'Creating...' : 'Create'}
+        </arx-button>
-        </arx-arbor-button>
       </div>
     `;
   }

src/routes/Arbor/TopicView.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 import '@components/Breadcrumbs';
 import '@components/Arbor/ForumPost';
-import '@components/Arbor/Button';
+import '@components/General/Button';
 
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
@@ -34,23 +34,24 @@ export class ArborTopicView extends LitElement {
     :host {
       display: block;
       margin: 0 auto;
-      padding: 1rem;
-      color: #1a1a1a;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
     }
 
     .topic-container {
-      background: #ffffff;
+      background: var(--color-base-100);
-      border-radius: 12px;
+      border-radius: var(--radius-box);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+      border: var(--border) solid var(--color-base-300);
       overflow: hidden;
       margin-top: 1.5rem;
-      border: 1px solid rgba(0, 0, 0, 0.08);
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+          calc(var(--depth) * 4px)
+          oklch(from var(--color-base-content) l c h / 0.1),
+        calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+          calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.4);
     }
 
     .header {
-      background: var(--primary);
+      background: var(--color-secondary);
-      color: oklch(100% 0 0);
+      color: var(--color-secondary-content);
       padding: 1.5rem 2rem;
       font-weight: 600;
       font-size: 1.25rem;
@@ -58,32 +59,54 @@ export class ArborTopicView extends LitElement {
       justify-content: space-between;
       align-items: center;
       position: relative;
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      text-shadow: 0 1px 2px oklch(from var(--color-base-content) l c h / 0.2);
       letter-spacing: 0.01em;
+      border-bottom: var(--border) solid var(--color-base-300);
     }
 
     .posts-container {
       display: flex;
       flex-direction: column;
       gap: 0;
-      background: #f9f9f9;
+      background: var(--color-base-200);
       padding: 1.5rem;
       min-height: 300px;
     }
 
     .actions {
-      background: #f9f9f9;
+      background: var(--color-base-200);
       padding: 1.25rem 1.5rem;
       display: flex;
       justify-content: flex-end;
-      border-top: 1px solid rgba(0, 0, 0, 0.06);
+      border-top: var(--border) solid var(--color-base-300);
     }
 
     .empty-state {
       padding: 3rem;
       text-align: center;
-      color: #666;
+      color: var(--color-secondary);
       font-style: italic;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      background: var(--color-base-100);
+      border-radius: var(--radius-field);
+      margin: 1rem 0;
+      border: var(--border) dashed var(--color-base-300);
+    }
+
+    arx-breadcrumbs {
+      margin-bottom: 1rem;
+    }
+
+    arx-forum-post {
+      border-bottom: var(--border) solid var(--color-base-300);
+    }
+
+    arx-forum-post:last-child {
+      border-bottom: none;
     }
 
     @media (max-width: 768px) {
@@ -108,6 +131,13 @@ export class ArborTopicView extends LitElement {
 
       .header {
         padding: 1rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+      }
+
+      .empty-state {
+        padding: 2rem 1rem;
       }
     }
   `;
@@ -199,9 +229,9 @@ export class ArborTopicView extends LitElement {
         </div>
 
         <div class="actions">
-          <arx-arbor-button href="/arbor/new-post/${this.topicId}">
+          <arx-button label="New Post" href="/arbor/new-post/${this.topicId}">
             New Post
-          </arx-arbor-button>
+          </arx-button>
         </div>
       </div>
     `;

src/routes/Home.ts

@@ -2,9 +2,13 @@ import { getNpub, getUserProfile } from '@/ndk';
 import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { LitElement, css } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import { html, literal } from 'lit/static-html.js';
+
 import '@widgets/BitcoinBlockWidget';
 import '@components/AppGrid';
+import '@components/NostrAvatar';
+import '@components/General/Card';
 
 @customElement('arx-eve-home')
 export class Home extends LitElement {
@@ -20,57 +24,57 @@ export class Home extends LitElement {
       id: 0,
       href: 'letters',
       name: 'Letters',
-      color: '#FF33BB',
+      color: '#FF3E96',
-      icon: 'bxs:envelope',
+      icon: 'fa-solid:leaf',
     },
     {
       id: 1,
       href: 'messages',
-      name: 'Messages',
+      name: 'Murmur',
-      color: '#34C759',
+      color: '#00CD66',
-      icon: 'bxs:chat',
+      icon: 'fa-solid:seedling',
     },
     {
       id: 2,
       href: 'calendar',
       name: 'Calendar',
-      color: '#FF9500',
+      color: '#FF8C00',
-      icon: 'bxs:calendar',
+      icon: 'fa-solid:sun',
     },
     {
       id: 3,
       href: 'arbor',
       name: 'Arbor',
-      color: '#FF3B30',
+      color: '#FF4040',
-      icon: 'bxs:conversation',
+      icon: 'fa-solid:tree',
     },
     {
       id: 5,
-      href: 'agora',
+      href: 'grove',
-      name: 'Agora',
+      name: 'Grove',
-      color: '#5856D6',
+      color: '#9370DB',
-      icon: 'bxs:store',
+      icon: 'fa-solid:store-alt',
     },
     {
       id: 6,
       href: 'wallet',
       name: 'Wallet',
-      color: '#007AFF',
+      color: '#1E90FF',
-      icon: 'bxs:wallet',
+      icon: 'fa-solid:spa',
     },
     {
       id: 7,
-      href: 'consortium',
+      href: 'oracle',
-      name: 'Consortium',
+      name: 'Oracle',
-      color: '#FFCC00',
+      color: '#FFD700',
-      icon: 'bxs:landmark',
+      icon: 'bxs:landscape',
     },
     {
       id: 8,
       href: 'settings',
       name: 'Settings',
-      color: '#deadbeef',
+      color: '#7B68EE',
-      icon: 'bxs:wrench',
+      icon: 'fa-solid:tools',
     },
   ];
 
@@ -91,26 +95,12 @@ export class Home extends LitElement {
 
   static override styles = [
     css`
-      @keyframes gradient {
-        0% {
-          background-position: 0% 50%;
-        }
-
-        50% {
-          background-position: 100% 50%;
-        }
-
-        100% {
-          background-position: 0% 50%;
-        }
-      }
-
       .content-wrapper {
         display: flex;
         gap: 20px;
+        width: 100%;
         max-width: 1200px;
-        margin: 0 auto;
+        margin: auto;
-        padding: 20px;
       }
 
       .home {
@@ -126,36 +116,17 @@ export class Home extends LitElement {
 
       .home-container {
         flex: 1;
-        background: rgba(255, 255, 255, 0.5);
+        padding: 0;
-        border-radius: 20px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       }
 
       .widgets-container {
-        width: 300px;
+        width: 350px;
         display: flex;
         flex-direction: column;
         gap: 20px;
-      }
 
-      .widget {
+        & > * {
-        background: rgba(255, 255, 255, 0.5);
+          flex: 1;
-        border-radius: 15px;
-        padding: 20px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        backdrop-filter: blur(10px);
-
-        h3 {
-          margin: 0 0 10px 0;
-          font-size: 18px;
-          color: #1c1c1e;
-        }
-
-        p {
-          margin: 0;
-          font-size: 14px;
-          color: #333;
-          line-height: 1.4;
         }
       }
 
@@ -170,20 +141,12 @@ export class Home extends LitElement {
           overflow-x: auto;
           padding-bottom: 10px;
         }
-
-        .widget {
-          min-width: 250px;
-        }
       }
 
       @media (max-width: 768px) {
         .widgets-container {
           flex-direction: column;
         }
-
-        .widget {
-          width: auto;
-        }
       }
 
       .welcome-section {
@@ -193,21 +156,12 @@ export class Home extends LitElement {
         justify-content: center;
         gap: 20px;
         padding: 20px;
-        background: rgba(255, 255, 255, 0.5);
         border-radius: 20px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       }
 
       .welcome-text h1 {
         margin: 0;
         font-size: 24px;
-        color: #1c1c1e;
-      }
-
-      .welcome-text p {
-        margin: 5px 0 0;
-        color: #666;
-        font-size: 14px;
       }
     `,
   ];
@@ -221,29 +175,20 @@ export class Home extends LitElement {
     return html`
       <div class="home">
         <div class="content-wrapper">
-          <div class="home-container">
+          <arx-card class="home-container">
-            <div class="welcome-section">
+            <arx-card class="welcome-section">
-              <div class="avatar">
+              <arx-nostr-avatar
-                <arx-nostr-profile
+                .profile=${this.profile}
-                  .npub=${this.npub}
+                size="huge"
-                  render-type="avatar"
+              ></arx-nostr-avatar>
-                ></arx-nostr-profile>
-              </div>
               <div class="welcome-text">
                 <h1>Welcome, ${this.username}</h1>
               </div>
-            </div>
+            </arx-card>
             <arx-app-grid .apps=${this.apps}></arx-app-grid>
-          </div>
+          </arx-card>
           <div class="widgets-container">
-            ${this.widgets.map(
+            ${map(this.widgets, (widget) => html`<arx-card><${widget.content}></${widget.content}></arx-card>`)}
-              (widget) => html`
-                <div class="widget">
-                  <h3>${widget.title}</h3>
-                  <${widget.content}></${widget.content}>
-                </div>
-              `,
-            )}
           </div>
         </div>
       </div>

src/routes/Profile.ts

@@ -4,6 +4,8 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { getUserProfile } from '../ndk';
 
+import '@components/General/Card';
+
 @customElement('arx-profile-route')
 export class NostrProfile extends LitElement {
   @property({ type: String })
@@ -24,13 +26,16 @@ export class NostrProfile extends LitElement {
       position: relative;
       height: 20rem;
       overflow: hidden;
+      border-radius: var(--radius-box) var(--radius-box) 0 0;
+      border: var(--border) solid var(--color-base-300);
+      border-bottom: none;
     }
 
     .banner-image {
       position: absolute;
       inset: 0;
       transform: scale(1);
-      transition: transform 700ms;
+      transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .banner-image:hover {
@@ -49,8 +54,8 @@ export class NostrProfile extends LitElement {
       background: linear-gradient(
         to bottom,
         transparent,
-        rgba(0, 0, 0, 0.2),
+        oklch(from var(--color-base-content) l c h / 0.2),
-        rgba(0, 0, 0, 0.4)
+        oklch(from var(--color-base-content) l c h / 0.4)
       );
     }
 
@@ -70,14 +75,6 @@ export class NostrProfile extends LitElement {
       margin-top: 4rem;
     }
 
-    .profile-card {
-      background-color: rgba(255, 255, 255, 0.95);
-      border-radius: 0.75rem;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      padding: 1.5rem;
-      backdrop-filter: blur(8px);
-    }
-
     .profile-content {
       display: flex;
       flex-direction: column;
@@ -100,9 +97,11 @@ export class NostrProfile extends LitElement {
       height: 10rem;
       border-radius: 50%;
       object-fit: cover;
-      border: 4px solid white;
+      border: calc(var(--border) * 2) solid var(--color-base-100);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
-      transition: transform 300ms;
+        calc(var(--depth) * 4px)
+        oklch(from var(--color-base-content) l c h / 0.15);
+      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .profile-image:hover {
@@ -113,16 +112,24 @@ export class NostrProfile extends LitElement {
       width: 10rem;
       height: 10rem;
       border-radius: 50%;
-      background: linear-gradient(to bottom right, #e5e7eb, #d1d5db);
+      background: linear-gradient(
+        135deg,
+        var(--color-base-200),
+        var(--color-base-300)
+      );
       display: flex;
       align-items: center;
       justify-content: center;
+      border: calc(var(--border) * 2) solid var(--color-base-100);
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+        calc(var(--depth) * 4px)
+        oklch(from var(--color-base-content) l c h / 0.15);
     }
 
     .placeholder-icon {
       width: 5rem;
       height: 5rem;
-      color: #9ca3af;
+      color: var(--color-secondary);
     }
 
     .profile-info {
@@ -145,18 +152,19 @@ export class NostrProfile extends LitElement {
     .display-name {
       font-size: 1.875rem;
       font-weight: bold;
-      color: #111827;
+      color: var(--color-base-content);
       display: flex;
       align-items: center;
       gap: 0.5rem;
+      margin: 0;
     }
 
     .verified-icon {
-      color: #3b82f6;
+      color: var(--color-accent);
     }
 
     .nip05 {
-      color: #4b5563;
+      color: var(--color-secondary);
       display: flex;
       align-items: center;
       gap: 0.25rem;
@@ -175,51 +183,13 @@ export class NostrProfile extends LitElement {
       }
     }
 
-    .follow-button {
-      padding: 0.5rem 1.5rem;
-      border-radius: 9999px;
-      font-weight: 500;
-      transition: all 300ms;
-      background-color: #3b82f6;
-      color: white;
-    }
-
-    .follow-button:hover {
-      background-color: #2563eb;
-    }
-
-    .follow-button.following {
-      background-color: #e5e7eb;
-      color: #1f2937;
-    }
-
-    .follow-button.following:hover {
-      background-color: #d1d5db;
-    }
-
-    .copy-button {
-      padding: 0.5rem;
-      border-radius: 9999px;
-      background-color: #f3f4f6;
-      transition: background-color 300ms;
-    }
-
-    .copy-button:hover {
-      background-color: #e5e7eb;
-    }
-
-    .copy-icon {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
     .links-section {
       display: grid;
-      grid-auto-columns: minmax(300px, 1fr);
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 1.5rem;
       margin-top: 2rem;
       padding-top: 1.5rem;
-      border-top: 1px solid #e5e7eb;
+      border-top: var(--border) solid var(--color-base-300);
     }
 
     .link-item {
@@ -227,13 +197,19 @@ export class NostrProfile extends LitElement {
       align-items: center;
       gap: 0.5rem;
       padding: 1rem;
-      border-radius: 0.5rem;
+      border-radius: var(--radius-field);
-      background-color: #f9fafb;
+      background-color: var(--color-base-200);
-      transition: background-color 300ms;
+      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+      text-decoration: none;
+      color: var(--color-base-content);
     }
 
     .link-item:hover {
-      background-color: #f3f4f6;
+      background-color: var(--color-base-300);
+      transform: translateY(-2px);
+      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+        calc(var(--depth) * 4px)
+        oklch(from var(--color-base-content) l c h / 0.1);
     }
 
     .link-icon {
@@ -242,39 +218,23 @@ export class NostrProfile extends LitElement {
     }
 
     .link-icon.website {
-      color: #3b82f6;
+      color: var(--color-accent);
     }
 
     .link-icon.lightning {
-      color: #eab308;
+      color: var(--color-warning);
     }
 
     .bio {
       white-space: pre-line;
       font-size: 0.9rem;
-      color: #4b5563;
+      color: var(--color-secondary);
       margin: 1rem 0;
-      padding-top: 1rem;
+      padding: 1rem;
-      line-height: 1.5;
+      line-height: 1.6;
-    }
+      background-color: var(--color-base-200);
-
+      border-radius: var(--radius-field);
-    .animate-gradient {
+      border-left: 3px solid var(--color-accent);
-      background-size: 200% 200%;
-      animation: gradient 15s ease infinite;
-    }
-
-    @keyframes gradient {
-      0% {
-        background-position: 0% 50%;
-      }
-
-      50% {
-        background-position: 100% 50%;
-      }
-
-      100% {
-        background-position: 0% 50%;
-      }
     }
   `;
 
@@ -317,7 +277,7 @@ export class NostrProfile extends LitElement {
       <div
         class=${this.profile.banner ? 'profile-container with-banner' : 'profile-container no-banner'}
       >
-        <div class="profile-card">
+        <arx-card>
           <div class="profile-content">
             <div class="profile-image-container">
               ${when(
@@ -376,6 +336,7 @@ export class NostrProfile extends LitElement {
                 <a
                   href=${this.profile!.website}
                   target="_blank"
+                  rel="noopener noreferrer"
                   class="link-item"
                 >
                   <svg-icon icon="mdi:web" class="link-icon website"></svg-icon>
@@ -396,7 +357,7 @@ export class NostrProfile extends LitElement {
               `,
             )}
           </div>
-        </div>
+        </arx-card>
       </div>
     `;
   }

src/routes/Settings.ts

@@ -0,0 +1,181 @@
+import defaultAvatar from '@/default-avatar.png';
+import { getSigner, getUserProfile, ndk } from '@/ndk';
+import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
+import { LitElement, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+import '@components/DateTimeSettings';
+import '@components/General/Input';
+import '@components/General/Button';
+import '@components/General/Fieldset';
+import '@components/General/Card';
+import '@components/Breadcrumbs';
+
+@customElement('arx-settings')
+export class EveSettings extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      font-family: var(--font-family, "Inter", system-ui, sans-serif);
+      margin: 0 auto;
+      line-height: 1.6;
+      color: var(--color-base-content);
+      background-color: var(--color-base-100);
+    }
+
+    .profile-image {
+      width: 140px;
+      height: 140px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: calc(var(--border) * 2) solid var(--color-base-100);
+      box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+          calc(var(--depth) * 6px)
+          oklch(from var(--color-base-content) l c h / 0.15),
+        calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.6);
+      transition: transform 0.3s, box-shadow 0.3s;
+      margin: 0 auto;
+    }
+
+    .profile-image:hover {
+      transform: scale(1.05);
+      box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
+          calc(var(--depth) * 8px) oklch(from var(--color-accent) l c h / 0.3),
+        calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+          calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
+    }
+
+    .profile-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+
+  @state() private loading = true;
+  @state() private saving = false;
+  @state() private profile: NDKUserProfile | undefined;
+  @state() private error: string | undefined;
+  @state() private darkMode = false;
+
+  protected override async firstUpdated() {
+    try {
+      this.profile = await getUserProfile();
+      this.darkMode = localStorage.getItem('darkMode') === 'true';
+      this.loading = false;
+    } catch (err) {
+      this.error = 'Failed to load profile';
+      console.error(err);
+      this.loading = false;
+    }
+  }
+
+  private handleInputChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.profile = {
+      ...this.profile,
+      [target.name]: target.value,
+    };
+  }
+
+  private async saveProfile() {
+    if (this.saving) return;
+    this.saving = true;
+    try {
+      await getSigner();
+      const event = new NDKEvent(ndk);
+      event.kind = 0;
+      event.content = JSON.stringify(this.profile);
+      await event.sign();
+      await event.publish();
+    } catch (err) {
+      alert(err);
+      console.error(err);
+    } finally {
+      this.saving = false;
+    }
+  }
+
+  private toggleDarkMode() {
+    this.darkMode = !this.darkMode;
+    localStorage.setItem('darkMode', this.darkMode.toString());
+    document.body.classList.toggle('dark', this.darkMode);
+  }
+
+  override render() {
+    if (this.error) return html`<arx-error-view .error=${this.error}></arx-error-view>`;
+
+    if (this.loading) return html`<arx-loading-view></arx-loading-view>`;
+
+    const breadcrumbItems = [{ text: 'Home', href: '/' }, { text: 'Settings' }];
+
+    return html`
+      <arx-breadcrumbs .items=${breadcrumbItems}></arx-breadcrumbs>
+      <arx-card>
+        <arx-fieldset legend="Dark Mode">
+          <arx-toggle
+            label="Dark Mode"
+            .checked=${this.darkMode}
+            @change=${() => this.toggleDarkMode()}
+          ></arx-toggle>
+        </arx-fieldset>
+        <arx-fieldset legend="Profile">
+          ${when(
+            this.profile.picture,
+            () => html`
+              <div class="profile-header">
+                <img
+                  class="profile-image"
+                  src=${this.profile!.picture}
+                  alt="Profile"
+                  @error=${(e: Event) => {
+                    (e.target as HTMLImageElement).src = defaultAvatar;
+                  }}
+                />
+              </div>
+            `,
+          )}
+
+          <arx-input
+            label="Name"
+            type="text"
+            name="name"
+            .value=${this.profile.name}
+            @input=${this.handleInputChange}
+            placeholder="Your display name"
+          ></arx-input>
+
+          <arx-input
+            label="Profile Image URL"
+            type="text"
+            name="image"
+            .value=${this.profile.picture}
+            @input=${this.handleInputChange}
+            placeholder="https://example.com/your-image.jpg"
+          ></arx-input>
+
+          <arx-input
+            label="Banner URL"
+            type="text"
+            name="banner"
+            .value=${this.profile.banner}
+            @input=${this.handleInputChange}
+            placeholder="https://example.com/your-image.jpg"
+          ></arx-input>
+        </arx-fieldset>
+
+        <arx-date-time-settings></arx-date-time-settings>
+
+        <arx-button
+          .label=${this.saving ? 'Saving...' : 'Save Changes'}
+          @click=${this.saveProfile}
+          ?disabled=${this.saving}
+        >
+        </arx-button>
+      </arx-card>
+    `;
+  }
+}

src/routes/router.ts

@@ -1,6 +1,7 @@
 import '@routes/404Page';
 import '@routes/Home';
 import '@routes/Profile';
+import '@routes/Settings';
 import '@routes/Arbor/Home';
 import '@routes/Arbor/NewTopic';
 import '@routes/Arbor/TopicView';
@@ -10,6 +11,7 @@ import '@components/InitialSetup';
 import { spread } from '@open-wc/lit-helpers';
 import { LitElement, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
 import { type StaticValue, html, literal } from 'lit/static-html.js';
 
 export interface RouteParams {
@@ -58,6 +60,11 @@ export default class EveRouter extends LitElement {
       params: {},
       component: literal`arx-arbor-post-creator`,
     },
+    {
+      pattern: 'settings',
+      params: {},
+      component: literal`arx-settings`,
+    },
     {
       pattern: '404',
       params: {},
@@ -85,25 +92,16 @@ export default class EveRouter extends LitElement {
       overflow: hidden;
     }
 
-    input {
-      width: 100%;
-    }
-
-    button {
-      background: var(--primary);
-      color: white;
-      border: 1px solid var(--border);
-      margin: 1rem 0;
-      width: 100%;
-    }
-
     .window {
-      max-width: 1200px;
       overflow: auto;
+    }
+
+    .window-content {
+      max-width: 1200px;
+      overflow: visible;
       height: 100%;
-      position: relative;
+      margin: 0 auto;
-      left: 50%;
+      padding: 1rem;
-      transform: translateX(-50%);
     }
   `;
 
@@ -272,6 +270,9 @@ export default class EveRouter extends LitElement {
       ></arx-header>
       <div class="window">
         <div class="window-content">
+          ${keyed(
+            this.currentRoute.params,
+            html`
               <${this.currentRoute.component} 
                 ${spread(this.currentRoute.params)}
                 path=${this.currentPath}
@@ -279,6 +280,8 @@ export default class EveRouter extends LitElement {
                 @go-back=${this.goBack}
                 @go-forward=${this.goForward}
               ></${this.currentRoute.component}>
+            `,
+          )}
         </div>
       </div>
     `;

src/style.css

@@ -0,0 +1,90 @@
+:root {
+  --font-md: clamp(1.333rem, 1.5vw, 1.5rem);
+  --font-2xl: clamp(3.157rem, 3.6vw, 3.555rem);
+
+  --space-xs: clamp(0.5rem, 0.75vw, 0.75rem);
+  --space-sm: clamp(1rem, 1.5vw, 1.5rem);
+  --space-md: clamp(2rem, 3vw, 3rem);
+
+  --animation-curve: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --transition: 0.3s var(--animation-curve);
+
+  --color-base-100: oklch(98% 0.016 73.684);
+  --color-base-200: oklch(95% 0.038 75.164);
+  --color-base-300: oklch(90% 0.076 70.697);
+  --color-base-content: oklch(40% 0.123 38.172);
+
+  --color-primary: oklch(0% 0 0);
+  --color-primary-content: oklch(100% 0 0);
+
+  --color-secondary: oklch(22.45% 0.075 37.85);
+  --color-secondary-content: oklch(90% 0.076 70.697);
+
+  --color-accent: oklch(46.44% 0.111 37.85);
+  --color-accent-content: oklch(90% 0.076 70.697);
+
+  --color-neutral: oklch(55% 0.195 38.402);
+  --color-neutral-content: oklch(98% 0.016 73.684);
+
+  --color-info: oklch(42% 0.199 265.638);
+  --color-info-content: oklch(90% 0.076 70.697);
+  --color-success: oklch(43% 0.095 166.913);
+  --color-success-content: oklch(90% 0.076 70.697);
+  --color-warning: oklch(82% 0.189 84.429);
+  --color-warning-content: oklch(41% 0.112 45.904);
+  --color-error: oklch(70% 0.191 22.216);
+  --color-error-content: oklch(39% 0.141 25.723);
+
+  --radius-selector: 1rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 2px;
+  --depth: 1;
+  --noise: 1;
+}
+
+body.dark {
+  --color-base-100: oklch(28.822% 0.022 277.508);
+  --color-base-200: oklch(26.805% 0.02 277.508);
+  --color-base-300: oklch(24.787% 0.019 277.508);
+  --color-base-content: oklch(97.747% 0.007 106.545);
+  --color-primary: oklch(75.461% 0.183 346.812);
+  --color-primary-content: oklch(15.092% 0.036 346.812);
+  --color-secondary: oklch(74.202% 0.148 301.883);
+  --color-secondary-content: oklch(14.84% 0.029 301.883);
+  --color-accent: oklch(83.392% 0.124 66.558);
+  --color-accent-content: oklch(16.678% 0.024 66.558);
+  --color-neutral: oklch(39.445% 0.032 275.524);
+  --color-neutral-content: oklch(87.889% 0.006 275.524);
+  --color-info: oklch(88.263% 0.093 212.846);
+  --color-info-content: oklch(17.652% 0.018 212.846);
+  --color-success: oklch(87.099% 0.219 148.024);
+  --color-success-content: oklch(17.419% 0.043 148.024);
+  --color-warning: oklch(95.533% 0.134 112.757);
+  --color-warning-content: oklch(19.106% 0.026 112.757);
+  --color-error: oklch(68.22% 0.206 24.43);
+  --color-error-content: oklch(13.644% 0.041 24.43);
+  --radius-selector: 1rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+body {
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+  box-sizing: border-box;
+  border: var(--border) solid var(--color-base-300);
+  border-radius: var(--radius-box);
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}

src/style.scss

@@ -1,443 +0,0 @@
-:root {
-  --primary: oklch(25% 0.09 210);
-  --secondary: oklch(from var(--primary) calc(l + 0.05) calc(c * 1.1) h);
-  --accent: oklch(from var(--primary) calc(l + 0.35) calc(c + 0.15) h);
-  --light: oklch(from var(--primary) 96% calc(c * 0.3) h);
-  --dark: oklch(from var(--primary) 20% calc(c * 0.3) h);
-  --border: oklch(from var(--primary) 80% calc(c * 0.5) h);
-  --success: oklch(from var(--primary) 70% calc(c + 0.2) 142);
-  --warning: oklch(from var(--primary) 85% calc(c + 0.2) 85);
-  --error: oklch(from var(--primary) 65% calc(c + 0.2) 25);
-
-  --shadow-color: oklch(from var(--primary) 20% calc(c * 0.3) h);
-  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.1);
-  --shadow-md: 0 2px 4px oklch(from var(--shadow-color) l c h / 0.1),
-    0 1px 2px oklch(from var(--shadow-color) l c h / 0.05);
-  --shadow-lg: 0 4px 6px oklch(from var(--shadow-color) l c h / 0.1),
-    0 2px 4px oklch(from var(--shadow-color) l c h / 0.06);
-  --shadow-xl: 0 10px 15px oklch(from var(--shadow-color) l c h / 0.1),
-    0 4px 6px oklch(from var(--shadow-color) l c h / 0.08);
-
-  --font-xs: clamp(0.65rem, 0.7vw, 0.8rem);
-  --font-sm: clamp(0.8rem, 0.9vw, 0.9rem);
-  --font-base: clamp(1rem, 1.1vw, 1.125rem);
-  --font-md: clamp(1.333rem, 1.5vw, 1.5rem);
-  --font-lg: clamp(1.777rem, 2vw, 2rem);
-  --font-xl: clamp(2.369rem, 2.7vw, 2.666rem);
-  --font-2xl: clamp(3.157rem, 3.6vw, 3.555rem);
-  --font-3xl: clamp(4.209rem, 4.8vw, 4.74rem);
-
-  --space-xs: clamp(0.5rem, 0.75vw, 0.75rem);
-  --space-sm: clamp(1rem, 1.5vw, 1.5rem);
-  --space-md: clamp(2rem, 3vw, 3rem);
-  --space-lg: clamp(3rem, 4.5vw, 4.5rem);
-
-  --header-height: var(--font-2xl);
-}
-
-.window {
-  display: grid;
-  gap: 0;
-  grid-template-rows: var(--header-height) 1fr;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-}
-
-header {
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
-  z-index: 999999;
-  margin-bottom: var(--font-2xl);
-  background: var(--primary);
-  height: var(--font-2xl);
-  font-size: var(--header-height);
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-md);
-
-  .search-container {
-    flex: 1;
-    position: relative;
-
-    input {
-      background: rgba(255, 255, 255, 0.5);
-      backdrop-filter: blur(10px);
-      border: 1px solid rgba(255, 255, 255, 0.6);
-      border-radius: 16px;
-      color: var(--light);
-      width: 100%;
-      text-align: center;
-      cursor: text;
-      font-size: 0.9rem;
-      width: 100%;
-      padding: var(--space-xs);
-      text-align: center;
-
-      &:not(:focus)::placeholder {
-        color: var(--light);
-        opacity: 1;
-      }
-
-      &:focus {
-        background: rgba(0, 0, 0, 0.2);
-      }
-    }
-  }
-
-  .nav-buttons {
-    display: flex;
-    gap: var(--space-xs);
-    padding-right: var(--space-xs);
-
-    button {
-      text-decoration: none;
-      color: var(--light);
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      padding: var(--space-xs);
-      border-radius: 100%;
-      font-size: var(--font-md);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s ease;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.2);
-      }
-
-      &.disabled {
-        pointer-events: none;
-        opacity: 0.5;
-      }
-    }
-  }
-}
-
-::selection {
-  background: oklch(from var(--accent) l c h / 0.2);
-  color: var(--accent);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: "Inter var", system-ui, -apple-system, sans-serif;
-  font-size: var(--font-base);
-  line-height: 1.7;
-  font-feature-settings: "liga" 1, "kern" 1, "calt" 1;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  margin: 0;
-  background: oklch(from var(--primary) 97% calc(c * 0.25) h);
-  color: oklch(from var(--primary) 20% calc(c * 0.1) h);
-  letter-spacing: -0.01em;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Inter var", system-ui, sans-serif;
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.03em;
-  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin: 0;
-}
-
-h1 {
-  font-size: var(--font-2xl);
-  font-weight: 800;
-  letter-spacing: -0.04em;
-}
-
-h2 {
-  font-size: var(--font-xl);
-  font-weight: 700;
-}
-
-h3 {
-  font-size: var(--font-lg);
-  font-weight: 600;
-}
-
-section {
-  max-width: 1200px;
-  margin-inline: auto;
-  padding-inline: 1rem;
-  display: flex;
-  justify-content: center;
-  place-items: center;
-  align-items: center;
-}
-
-ul,
-ol {
-  margin: var(--space-sm) 0;
-  padding-left: var(--space-md);
-
-  & li {
-    margin-bottom: var(--space-xs);
-    position: relative;
-  }
-
-  & li::marker {
-    color: var(--accent);
-  }
-}
-
-code {
-  font-family: "JetBrains Mono", "SF Mono", monospace;
-  font-size: 0.9em;
-  padding: 0.2em 0.4em;
-  border-radius: 4px;
-  background: oklch(from var(--primary) 97% calc(c * 0.15) h);
-  border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
-}
-
-blockquote {
-  position: relative;
-  padding: var(--space-md);
-  border-radius: 1rem;
-  background: linear-gradient(135deg,
-      oklch(from var(--primary) calc(l + 0.02) calc(c * 0.8) h),
-      oklch(from var(--secondary) calc(l + 0.02) calc(c * 0.8) h));
-  backdrop-filter: blur(10px);
-  box-shadow: var(--shadow-lg), inset 0 2px 4px oklch(from var(--primary) 100% 0 h / 0.1);
-  color: var(--light);
-
-  & p {
-    font-size: var(--font-md);
-    font-weight: 500;
-    font-style: italic;
-    line-height: 1.6;
-    margin-bottom: var(--space-sm);
-    color: var(--light);
-  }
-
-  &::before {
-    position: absolute;
-    font-family: Georgia, serif;
-    opacity: 0.15;
-    content: "❞";
-    bottom: -1rem;
-    right: 1rem;
-    font-size: 5rem;
-    color: var(--light);
-  }
-}
-
-small {
-  font-size: var(--font-xs);
-  line-height: var(--leading-normal);
-}
-
-p {
-  margin: 0 auto;
-  margin-bottom: var(--space-md);
-  max-width: 80ch;
-  opacity: 0.9;
-}
-
-a {
-  color: var(--accent);
-  text-decoration: none;
-  background-image: linear-gradient(transparent calc(100% - 2px),
-      var(--accent) 2px);
-  background-size: 0% 100%;
-  background-repeat: no-repeat;
-  transition: background-size 0.3s ease-in-out;
-
-  &:hover {
-    background-size: 100% 100%;
-  }
-}
-
-hr {
-  height: 5px;
-  border: 0;
-  margin: var(--space-md);
-  background: linear-gradient(90deg,
-      transparent,
-      var(--primary) 20%,
-      var(--accent) 50%,
-      var(--primary) 80%,
-      transparent);
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    background: inherit;
-    top: 2px;
-    filter: blur(2px);
-    opacity: 0.7;
-  }
-}
-
-.blurfade-enter-active {
-  transition: all 0.5s ease-out;
-}
-
-.blurfade-leave-active {
-  transition: all 0.25s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.blurfade-enter-from,
-.blurfade-leave-to {
-  overflow: hidden;
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  transform: translate(0, 0) !important;
-  transform-style: preserve-3d;
-  z-index: 9999;
-  opacity: 0;
-  backdrop-filter: blur(1000px);
-  filter: blur(1000px);
-}
-
-.w-full {
-  width: 100%;
-}
-
-input {
-  font-family: "Inter var", system-ui, -apple-system, sans-serif;
-  font-size: var(--font-base);
-  line-height: 1.7;
-  color: oklch(from var(--primary) 20% calc(c * 0.1) h);
-  background: oklch(from var(--primary) 97% calc(c * 0.25) h);
-  border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
-  border-radius: 6px;
-  padding: var(--space-xs) var(--space-sm);
-  outline: none;
-  transition: all 0.2s ease-in-out;
-
-  &:focus {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.2);
-  }
-
-  &:hover {
-    border-color: oklch(from var(--primary) 80% calc(c * 0.3) h);
-  }
-
-  &::placeholder {
-    color: oklch(from var(--primary) 60% calc(c * 0.2) h);
-    opacity: 0.7;
-  }
-
-  &[type="submit"],
-  &[type="button"] {
-    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-    color: var(--light);
-    border: none;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:hover {
-      background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
-    }
-
-    &:active {
-      transform: scale(0.98);
-    }
-  }
-
-  &[type="checkbox"],
-  &[type="radio"] {
-    width: 1.2em;
-    height: 1.2em;
-    accent-color: var(--accent);
-    margin-right: var(--space-xs);
-  }
-
-  &[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background: transparent;
-    cursor: pointer;
-
-    &::-webkit-slider-runnable-track {
-      height: 6px;
-      background: oklch(from var(--primary) 90% calc(c * 0.2) h);
-      border-radius: 3px;
-    }
-
-    &::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 16px;
-      height: 16px;
-      background: var(--accent);
-      border-radius: 50%;
-      margin-top: -5px;
-    }
-
-    &::-moz-range-track {
-      height: 6px;
-      background: oklch(from var(--primary) 90% calc(c * 0.2) h);
-      border-radius: 3px;
-    }
-
-    &::-moz-range-thumb {
-      width: 16px;
-      height: 16px;
-      background: var(--accent);
-      border-radius: 50%;
-    }
-  }
-}
-
-textarea {
-  font-family: "Inter var", system-ui, -apple-system, sans-serif;
-  font-size: var(--font-base);
-  line-height: 1.7;
-  color: oklch(from var(--primary) 20% calc(c * 0.1) h);
-  background: oklch(from var(--primary) 97% calc(c * 0.25) h);
-  border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
-  border-radius: 6px;
-  padding: var(--space-xs) var(--space-sm);
-  outline: none;
-  transition: all 0.2s ease-in-out;
-  resize: vertical;
-  min-height: 120px;
-
-  &:focus {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.2);
-  }
-
-  &:hover {
-    border-color: oklch(from var(--primary) 80% calc(c * 0.3) h);
-  }
-
-  &::placeholder {
-    color: oklch(from var(--primary) 60% calc(c * 0.2) h);
-    opacity: 0.7;
-  }
-}

src/utils/formatDateTime.ts

@@ -1,6 +1,8 @@
 export default function formatDateTime(date: Date | string | number): string {
   const properDate = new Date(date);
-  return properDate.toLocaleString('en-US', {
+
+  const defaultOptions = {
+    locale: 'en-US',
     weekday: 'short',
     year: 'numeric',
     month: 'long',
@@ -8,5 +10,27 @@ export default function formatDateTime(date: Date | string | number): string {
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',
+    hour12: true,
+  };
+
+  let formattingOptions = defaultOptions;
+  const savedOptions = localStorage.getItem('dateTimeFormatOptions');
+
+  if (savedOptions)
+    try {
+      formattingOptions = { ...defaultOptions, ...JSON.parse(savedOptions) };
+    } catch (e) {
+      console.error('Failed to parse date format options from localStorage', e);
+    }
+
+  return properDate.toLocaleString(formattingOptions.locale, {
+    weekday: formattingOptions.weekday === '' ? undefined : formattingOptions.weekday,
+    year: formattingOptions.year === '' ? undefined : formattingOptions.year,
+    month: formattingOptions.month === '' ? undefined : formattingOptions.month,
+    day: formattingOptions.day === '' ? undefined : formattingOptions.day,
+    hour: formattingOptions.hour === '' ? undefined : formattingOptions.hour,
+    minute: formattingOptions.minute === '' ? undefined : formattingOptions.minute,
+    second: formattingOptions.second === '' ? undefined : formattingOptions.second,
+    hour12: formattingOptions.hour12,
   });
 }

src/utils/lastBlock.ts

@@ -0,0 +1,50 @@
+const MEMPOOL_API = 'https://mempool.space/api/blocks/tip';
+
+export interface LastBlock {
+  id: string;
+  height: number;
+  version: number;
+  timestamp: number;
+  tx_count: number;
+  size: number;
+  weight: number;
+  merkle_root: string;
+  previousblockhash: string;
+  mediantime: number;
+  nonce: number;
+  bits: number;
+  difficulty: number;
+  error?: string;
+}
+
+export async function getLastBlock(): Promise<LastBlock> {
+  try {
+    const response = await fetch(MEMPOOL_API);
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+
+    const data = await response.json();
+    const latestBlock = data[0];
+    if (!latestBlock) throw new Error('Failed to fetch block');
+    return latestBlock;
+  } catch (e) {
+    return {
+      id: '',
+      height: 0,
+      version: 0,
+      timestamp: 0,
+      tx_count: 0,
+      size: 0,
+      weight: 0,
+      merkle_root: '',
+      previousblockhash: '',
+      mediantime: 0,
+      nonce: 0,
+      bits: 0,
+      difficulty: 0,
+      error: e instanceof Error ? e.message : 'Failed to fetch block',
+    };
+  }
+}

src/utils/lastBlockHeight.ts

@@ -1,26 +0,0 @@
-const MEMPOOL_API = 'https://mempool.space/api/blocks/tip/height';
-
-export interface LastBlockHeight {
-  height: number;
-  error?: string;
-}
-
-export async function getLastBlockHeight(): Promise<LastBlockHeight> {
-  try {
-    const response = await fetch(MEMPOOL_API);
-
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-
-    const data = await response.text();
-    return {
-      height: Number.parseInt(data, 10),
-    };
-  } catch (e) {
-    return {
-      height: 0,
-      error: e instanceof Error ? e.message : 'Failed to fetch block height',
-    };
-  }
-}