From 154f9fae89f4ed1702341a1b6f4f79ca2a97d3f9 Mon Sep 17 00:00:00 2001
From: Lewis <lu5a@proton.me>
Date: Wed, 18 Mar 2026 07:18:08 +0200
Subject: [PATCH] refactor(frontend): extract dashboard shell and lightweight
 component styles

---
 .../dashboard/AccountOverview.svelte          |  81 ----
 .../components/dashboard/CommsContent.svelte  | 255 -----------
 .../dashboard/InviteCodesContent.svelte       | 147 ------
 .../dashboard/MigrationContent.svelte         |  60 ---
 frontend/src/routes/Dashboard.svelte          | 419 ------------------
 5 files changed, 962 deletions(-)

diff --git a/frontend/src/components/dashboard/AccountOverview.svelte b/frontend/src/components/dashboard/AccountOverview.svelte
index 71250d7..2c40d94 100644
--- a/frontend/src/components/dashboard/AccountOverview.svelte
+++ b/frontend/src/components/dashboard/AccountOverview.svelte
@@ -58,84 +58,3 @@
     {/if}
   </dl>
 </div>
-
-<style>
-  .overview {
-    background: var(--bg-secondary);
-    padding: var(--space-6);
-    border-radius: var(--radius-xl);
-  }
-
-  dl {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: var(--space-3) var(--space-5);
-    margin: 0;
-  }
-
-  dt {
-    font-weight: var(--font-medium);
-    color: var(--text-secondary);
-  }
-
-  dd {
-    margin: 0;
-    min-width: 0;
-  }
-
-  .mono {
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    word-break: break-all;
-  }
-
-  .badge {
-    display: inline-block;
-    padding: var(--space-1) var(--space-3);
-    border-radius: var(--radius-md);
-    font-size: var(--text-xs);
-    margin-left: var(--space-3);
-  }
-
-  .badge.success {
-    background: var(--success-bg);
-    color: var(--success-text);
-  }
-
-  .badge.warning {
-    background: var(--warning-bg);
-    color: var(--warning-text);
-  }
-
-  .badge.admin {
-    background: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .badge.deactivated {
-    background: var(--warning-bg);
-    color: var(--warning-text);
-    border: 1px solid var(--warning-border);
-  }
-
-  .badge.migrated {
-    background: var(--info-bg, #e0f2fe);
-    color: var(--info-text, #0369a1);
-    border: 1px solid var(--info-border, #7dd3fc);
-  }
-
-  @media (max-width: 500px) {
-    dl {
-      grid-template-columns: 1fr;
-      gap: var(--space-2);
-    }
-
-    dt {
-      margin-top: var(--space-3);
-    }
-
-    dt:first-child {
-      margin-top: 0;
-    }
-  }
-</style>
diff --git a/frontend/src/components/dashboard/CommsContent.svelte b/frontend/src/components/dashboard/CommsContent.svelte
index b0fe840..c6473da 100644
--- a/frontend/src/components/dashboard/CommsContent.svelte
+++ b/frontend/src/components/dashboard/CommsContent.svelte
@@ -382,258 +382,3 @@
     </section>
   {/if}
 </div>
-
-<style>
-  .comms {
-    max-width: var(--width-lg);
-  }
-
-  .loading,
-  .empty {
-    color: var(--text-secondary);
-    padding: var(--space-4);
-  }
-
-  section {
-    background: var(--bg-secondary);
-    padding: var(--space-5);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-5);
-  }
-
-  section h3 {
-    margin: 0 0 var(--space-4) 0;
-    font-size: var(--text-base);
-  }
-
-  .channel-options {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .channel-option {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-3) var(--space-4);
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-  }
-
-  .channel-option input[type="radio"] {
-    margin: 0;
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    accent-color: var(--accent);
-  }
-
-  .channel-option:hover:not(.disabled) {
-    border-color: var(--accent);
-  }
-
-  .channel-option.disabled,
-  .channel-option.unavailable {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .channel-info {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-
-  .channel-name {
-    font-weight: var(--font-medium);
-  }
-
-  .channel-desc {
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-  }
-
-  .channel-hint {
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    margin-left: auto;
-  }
-
-  .channel-config {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .config-item {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .config-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .config-input {
-    display: flex;
-    gap: var(--space-2);
-  }
-
-  .config-input input {
-    flex: 1;
-  }
-
-  input.readonly {
-    background: var(--bg-tertiary);
-    color: var(--text-secondary);
-  }
-
-  .status {
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--radius-md);
-    font-size: var(--text-xs);
-  }
-
-  .status.verified {
-    background: var(--success-bg);
-    color: var(--success-text);
-  }
-
-  .status.unverified {
-    background: var(--warning-bg);
-    color: var(--warning-text);
-  }
-
-  .hint {
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-    margin: 0;
-  }
-
-  .hint.warning {
-    color: var(--warning-text);
-  }
-
-  .telegram-verify-prompt {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
-    background: var(--accent-bg, var(--bg-card));
-    border: 1px solid var(--accent, var(--border-color));
-    border-radius: var(--radius-md);
-    font-size: var(--text-sm);
-    color: var(--text-primary);
-  }
-
-  .discord-verify-prompt {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
-    background: var(--accent-bg, var(--bg-card));
-    border: 1px solid var(--accent, var(--border-color));
-    border-radius: var(--radius-md);
-    font-size: var(--text-sm);
-    color: var(--text-primary);
-  }
-
-  .manual-hint {
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-  }
-
-
-  .verify-form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .verify-form button {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-sm);
-  }
-
-  .actions {
-    margin-bottom: var(--space-5);
-  }
-
-  .history-section {
-    margin-top: var(--space-6);
-  }
-
-  .message-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .message-item {
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    padding: var(--space-3);
-  }
-
-  .message-header {
-    display: flex;
-    gap: var(--space-2);
-    align-items: center;
-    margin-bottom: var(--space-2);
-  }
-
-  .message-type {
-    font-weight: var(--font-medium);
-    font-size: var(--text-sm);
-  }
-
-  .message-channel {
-    font-size: var(--text-xs);
-    padding: var(--space-1) var(--space-2);
-    background: var(--bg-secondary);
-    border-radius: var(--radius-md);
-    color: var(--text-secondary);
-  }
-
-  .message-status {
-    font-size: var(--text-xs);
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--radius-md);
-    margin-left: auto;
-  }
-
-  .message-status.sent {
-    background: var(--success-bg);
-    color: var(--success-text);
-  }
-
-  .message-status.failed {
-    background: var(--error-bg);
-    color: var(--error-text);
-  }
-
-  .message-subject {
-    font-weight: var(--font-medium);
-    font-size: var(--text-sm);
-    margin-bottom: var(--space-1);
-  }
-
-  .message-body {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    white-space: pre-wrap;
-  }
-
-  .message-date {
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    margin-top: var(--space-2);
-  }
-</style>
diff --git a/frontend/src/components/dashboard/InviteCodesContent.svelte b/frontend/src/components/dashboard/InviteCodesContent.svelte
index 4ef5299..fbaafab 100644
--- a/frontend/src/components/dashboard/InviteCodesContent.svelte
+++ b/frontend/src/components/dashboard/InviteCodesContent.svelte
@@ -158,150 +158,3 @@
     {/if}
   </section>
 </div>
-
-<style>
-  .invite-codes {
-    max-width: var(--width-lg);
-  }
-
-  .created-code {
-    padding: var(--space-5);
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    border-radius: var(--radius-xl);
-    margin-bottom: var(--space-6);
-  }
-
-  .created-code h3 {
-    margin: 0 0 var(--space-4) 0;
-    color: var(--success-text);
-  }
-
-  .code-display {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-    background: var(--bg-card);
-    padding: var(--space-4);
-    border-radius: var(--radius-md);
-    margin-bottom: var(--space-4);
-  }
-
-  .code-display code {
-    font-size: var(--text-lg);
-    font-family: var(--font-mono);
-    flex: 1;
-  }
-
-  .actions {
-    margin-bottom: var(--space-6);
-  }
-
-  .list-section h2 {
-    font-size: var(--text-lg);
-    margin: 0 0 var(--space-4) 0;
-  }
-
-  .empty {
-    color: var(--text-secondary);
-    padding: var(--space-6);
-    text-align: center;
-  }
-
-  .code-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .code-item {
-    padding: var(--space-4);
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-  }
-
-  .skeleton-item {
-    pointer-events: none;
-  }
-
-  .code-item.disabled {
-    opacity: 0.6;
-  }
-
-  .code-item.used {
-    background: var(--bg-tertiary);
-  }
-
-  .code-main {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    margin-bottom: var(--space-2);
-  }
-
-  .code-value {
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    padding: var(--space-2) var(--space-3);
-    background: var(--bg-card);
-    border-radius: var(--radius-md);
-  }
-
-  .copy-btn {
-    flex-shrink: 0;
-  }
-
-  .code-meta {
-    display: flex;
-    gap: var(--space-4);
-    font-size: var(--text-sm);
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  .date {
-    color: var(--text-secondary);
-  }
-
-  .status {
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--radius-md);
-    font-size: var(--text-xs);
-  }
-
-  .status.available {
-    background: var(--success-bg);
-    color: var(--success-text);
-  }
-
-  .status.used {
-    background: var(--bg-secondary);
-    color: var(--text-secondary);
-  }
-
-  .status.spent {
-    background: var(--bg-tertiary);
-    color: var(--text-tertiary);
-  }
-
-  .status.disabled {
-    background: var(--error-bg);
-    color: var(--error-text);
-  }
-
-  @media (max-width: 500px) {
-    .code-display {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .code-main {
-      flex-direction: column;
-      align-items: stretch;
-    }
-  }
-</style>
diff --git a/frontend/src/components/dashboard/MigrationContent.svelte b/frontend/src/components/dashboard/MigrationContent.svelte
index eee2287..44f76f3 100644
--- a/frontend/src/components/dashboard/MigrationContent.svelte
+++ b/frontend/src/components/dashboard/MigrationContent.svelte
@@ -51,63 +51,3 @@
     </section>
   {/if}
 </div>
-
-<style>
-  .migration {
-    max-width: var(--width-md);
-  }
-
-  section {
-    background: var(--bg-secondary);
-    padding: var(--space-5);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-5);
-  }
-
-  section h3 {
-    margin: 0 0 var(--space-2) 0;
-    font-size: var(--text-base);
-  }
-
-  .description {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    margin: 0 0 var(--space-4) 0;
-  }
-
-  .feature-list {
-    list-style: none;
-    padding: 0;
-    margin: 0 0 var(--space-4) 0;
-  }
-
-  .feature-list li {
-    padding: var(--space-2) 0;
-    padding-left: var(--space-4);
-    position: relative;
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .feature-list li::before {
-    content: '✓';
-    position: absolute;
-    left: 0;
-    color: var(--success-text);
-  }
-
-  .info-section {
-    background: var(--info-bg, #e0f2fe);
-    border: 1px solid var(--info-border, #7dd3fc);
-  }
-
-  .info-section h3 {
-    color: var(--info-text, #0369a1);
-  }
-
-  .info-section p {
-    color: var(--info-text, #0369a1);
-    font-size: var(--text-sm);
-    margin: 0;
-  }
-</style>
diff --git a/frontend/src/routes/Dashboard.svelte b/frontend/src/routes/Dashboard.svelte
index 36925af..787b4e0 100644
--- a/frontend/src/routes/Dashboard.svelte
+++ b/frontend/src/routes/Dashboard.svelte
@@ -328,422 +328,3 @@
     </main>
   </div>
 {/if}
-
-<style>
-  .dashboard {
-    display: flex;
-    height: 100vh;
-    background: var(--bg-primary);
-    overflow: hidden;
-  }
-
-  .sidebar {
-    width: 320px;
-    flex-shrink: 0;
-    background: var(--bg-secondary);
-    border-right: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .sidebar-header {
-    padding: var(--space-6);
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .sidebar-header h1 {
-    margin: 0;
-    font-size: var(--text-2xl);
-  }
-
-  .sidebar-subtitle {
-    margin: var(--space-1) 0 var(--space-4) 0;
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .account-section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .account-dropdown {
-    position: relative;
-    width: 100%;
-  }
-
-  .account-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-3);
-    width: 100%;
-    padding: var(--space-3) var(--space-4);
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    color: var(--text-primary);
-    text-align: left;
-  }
-
-  .account-trigger .account-handle {
-    font-weight: var(--font-medium);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .account-trigger:hover:not(:disabled) {
-    border-color: var(--accent);
-    background: var(--bg-tertiary);
-  }
-
-  .account-trigger:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .dropdown-arrow {
-    font-size: 0.625rem;
-    color: var(--text-secondary);
-    flex-shrink: 0;
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    margin-top: var(--space-2);
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-lg);
-    z-index: 100;
-    overflow: hidden;
-  }
-
-  .account-details {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    padding: 0 var(--space-1);
-  }
-
-  .account-details .account-did {
-    font-size: var(--text-xs);
-    font-family: var(--font-mono);
-    color: var(--text-muted);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .account-status {
-    display: flex;
-    gap: var(--space-2);
-    flex-wrap: wrap;
-  }
-
-  .badge {
-    display: inline-block;
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--radius-md);
-    font-size: var(--text-xs);
-    font-weight: var(--font-medium);
-  }
-
-  .badge.admin {
-    background: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .badge.success {
-    background: var(--success-bg);
-    color: var(--success-text);
-  }
-
-  .badge.warning {
-    background: var(--warning-bg);
-    color: var(--warning-text);
-  }
-
-  .dropdown-section {
-    padding: var(--space-3) 0;
-  }
-
-  .dropdown-label {
-    display: block;
-    padding: var(--space-2) var(--space-5);
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .dropdown-item {
-    display: block;
-    width: 100%;
-    padding: var(--space-3) var(--space-5);
-    background: transparent;
-    border: none;
-    text-align: left;
-    cursor: pointer;
-    color: var(--text-primary);
-    font-size: var(--text-sm);
-  }
-
-  .dropdown-item:hover {
-    background: var(--bg-secondary);
-  }
-
-  .dropdown-item.logout-item {
-    color: var(--error-text);
-  }
-
-  .dropdown-divider {
-    height: 1px;
-    background: var(--border-color);
-  }
-
-  .status-banner {
-    margin: var(--space-4);
-    padding: var(--space-4);
-    border-radius: var(--radius-lg);
-  }
-
-  .status-banner.deactivated {
-    background: var(--warning-bg);
-    border: 1px solid var(--warning-border);
-  }
-
-  .status-banner.deactivated strong {
-    color: var(--warning-text);
-  }
-
-  .status-banner.deactivated p {
-    margin: var(--space-2) 0 0 0;
-    color: var(--warning-text);
-    font-size: var(--text-sm);
-  }
-
-  .status-banner.migrated {
-    background: var(--info-bg, #e0f2fe);
-    border: 1px solid var(--info-border, #7dd3fc);
-  }
-
-  .status-banner.migrated strong {
-    color: var(--info-text, #0369a1);
-  }
-
-  .status-banner.migrated p {
-    margin: var(--space-2) 0 0 0;
-    color: var(--info-text, #0369a1);
-    font-size: var(--text-sm);
-  }
-
-  .nav-list {
-    flex: 1;
-    padding: var(--space-2);
-    overflow-y: auto;
-  }
-
-  .nav-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: var(--space-4);
-    background: transparent;
-    border: none;
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    color: var(--text-primary);
-    font-size: var(--text-base);
-    text-align: left;
-    transition: background var(--transition-fast), color var(--transition-fast);
-  }
-
-  .nav-item:hover:not(.active) {
-    background: var(--bg-tertiary);
-    color: var(--accent);
-  }
-
-  .nav-item:hover:not(.active) .nav-chevron {
-    color: var(--accent);
-  }
-
-  .nav-item.active {
-    background: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .nav-item.active .nav-chevron {
-    color: var(--text-inverse);
-  }
-
-  .nav-item.highlight-admin {
-    color: var(--accent);
-  }
-
-  .nav-item.highlight-admin.active {
-    background: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .nav-item.highlight-migrated {
-    color: var(--info-text, #0369a1);
-  }
-
-  .nav-item.highlight-migrated.active {
-    background: var(--info-text, #0369a1);
-    color: var(--text-inverse);
-  }
-
-  .nav-item.highlight-did-web {
-    color: var(--accent);
-  }
-
-  .nav-item.highlight-did-web.active {
-    background: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .nav-chevron {
-    display: none;
-  }
-
-  .content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    height: 100%;
-    overflow: hidden;
-    background: var(--bg-primary);
-  }
-
-  .content-header {
-    display: none;
-    padding: var(--space-4) var(--space-6);
-    border-bottom: 1px solid var(--border-color);
-    background: var(--bg-secondary);
-  }
-
-  .content-header h2 {
-    margin: 0;
-    font-size: var(--text-lg);
-  }
-
-  .back-button {
-    display: flex;
-    align-items: center;
-    gap: var(--space-1);
-    padding: 0;
-    background: transparent;
-    border: none;
-    color: var(--accent);
-    font-size: var(--text-base);
-    cursor: pointer;
-    margin-bottom: var(--space-2);
-  }
-
-  .back-arrow {
-    font-size: var(--text-xl);
-    font-weight: 300;
-  }
-
-  .content-body {
-    flex: 1;
-    padding: var(--space-6);
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .content-body > :global(*) {
-    width: 100%;
-  }
-
-  .loading-state .sidebar {
-    opacity: 0.7;
-  }
-
-  .skeleton-header {
-    height: 100px;
-    background: var(--bg-tertiary);
-    border-radius: var(--radius-lg);
-    margin: var(--space-6);
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-  }
-
-  .skeleton-nav-item {
-    height: 48px;
-    background: var(--bg-tertiary);
-    border-radius: var(--radius-lg);
-    margin: var(--space-2) var(--space-2);
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-  }
-
-  .skeleton-content {
-    height: 300px;
-    background: var(--bg-secondary);
-    border-radius: var(--radius-xl);
-    margin: var(--space-6);
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-  }
-
-  @media (max-width: 768px) {
-    .dashboard {
-      flex-direction: column;
-      height: 100vh;
-    }
-
-    .sidebar {
-      width: 100%;
-      height: auto;
-      flex: 1;
-      border-right: none;
-      border-bottom: 1px solid var(--border-color);
-      overflow-y: auto;
-    }
-
-    .sidebar.hidden-mobile {
-      display: none;
-    }
-
-    .content {
-      display: flex;
-      flex: 1;
-      height: auto;
-    }
-
-    .content.hidden-mobile {
-      display: none;
-    }
-
-    .content-header {
-      display: block;
-    }
-  }
-
-  @media (min-width: 769px) {
-    .back-button {
-      display: none;
-    }
-
-    .content-header {
-      display: block;
-      padding: var(--space-6);
-    }
-
-    .content-header h2 {
-      font-size: var(--text-xl);
-    }
-  }
-</style>