From 79a3db8ff29aedce84e4cfd572704f177ef7ccbd Mon Sep 17 00:00:00 2001
From: Lewis <lu5a@proton.me>
Date: Wed, 18 Mar 2026 05:18:08 +0000
Subject: [PATCH] refactor(frontend): extract UI primitive component styles

---
 frontend/src/components/AccountTypeSwitcher.svelte | 46 ----------------------------------------------
 frontend/src/components/AuthenticatedRoute.svelte | 25 +------------------------
 frontend/src/components/HandleInput.svelte | 22 ----------------------
 frontend/src/components/LoadMoreSentinel.svelte | 15 ---------------
 frontend/src/components/ReauthModal.svelte | 114 +++---------------------------------------------------------------------------------------------------------------
 frontend/src/components/Skeleton.svelte | 41 -----------------------------------------
 frontend/src/components/SsoIcon.svelte | 6 ------
 frontend/src/components/Toast.svelte | 156 ------------------------------------------------------------------------------------------------------------------------------------------------------------
 frontend/src/components/ui/Button.svelte | 43 +------------------------------------------
 frontend/src/components/ui/Card.svelte | 28 ----------------------------
 frontend/src/components/ui/Input.svelte | 13 +------------
 frontend/src/components/ui/Message.svelte | 34 +---------------------------------
 frontend/src/components/ui/Page.svelte | 43 -------------------------------------------
 frontend/src/components/ui/Section.svelte | 30 +-----------------------------
 14 file(s) changed, 8 insertion(s)(+), 608 deletion(s)(-)

diff --git a/frontend/src/components/AccountTypeSwitcher.svelte b/frontend/src/components/AccountTypeSwitcher.svelte
--- a/frontend/src/components/AccountTypeSwitcher.svelte
+++ b/frontend/src/components/AccountTypeSwitcher.svelte
@@ -38,49 +38,3 @@
     </span>
   {/if}
 </div>
-
-<style>
-  .account-type-switcher {
-    display: flex;
-    gap: var(--space-2);
-    padding: var(--space-1);
-    background: var(--bg-secondary);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-6);
-  }
-
-  .switcher-option {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
-    border-radius: var(--radius-md);
-    text-decoration: none;
-    color: var(--text-secondary);
-    font-weight: var(--font-medium);
-    transition: all 0.15s ease;
-  }
-
-  .switcher-option:hover {
-    color: var(--text-primary);
-    background: var(--bg-tertiary);
-  }
-
-  .switcher-option.active {
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
-
-  .switcher-option.disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .switcher-option.disabled:hover {
-    color: var(--text-secondary);
-    background: transparent;
-  }
-</style>
diff --git a/frontend/src/components/AuthenticatedRoute.svelte b/frontend/src/components/AuthenticatedRoute.svelte
--- a/frontend/src/components/AuthenticatedRoute.svelte
+++ b/frontend/src/components/AuthenticatedRoute.svelte
@@ -32,28 +32,5 @@
 {#if auth.kind === 'authenticated'}
   {@render children({ session: auth.session, client: createAuthenticatedClient(auth.session) })}
 {:else}
-  <div class="loading-container"><div class="loading-spinner"></div></div>
+  <div class="loading-container"></div>
 {/if}
-
-<style>
-  .loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 200px;
-    padding: var(--space-7);
-  }
-
-  .loading-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid var(--border-color);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-</style>
diff --git a/frontend/src/components/HandleInput.svelte b/frontend/src/components/HandleInput.svelte
--- a/frontend/src/components/HandleInput.svelte
+++ b/frontend/src/components/HandleInput.svelte
@@ -47,25 +47,3 @@
     <span class="domain-suffix">.{domains[0]}</span>
   {/if}
 </div>
-
-<style>
-  .handle-input-group {
-    display: flex;
-    gap: var(--space-2);
-    align-items: center;
-  }
-
-  .handle-input-group input {
-    flex: 1;
-  }
-
-  .handle-input-group select {
-    width: auto;
-  }
-
-  .domain-suffix {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    white-space: nowrap;
-  }
-</style>
diff --git a/frontend/src/components/LoadMoreSentinel.svelte b/frontend/src/components/LoadMoreSentinel.svelte
--- a/frontend/src/components/LoadMoreSentinel.svelte
+++ b/frontend/src/components/LoadMoreSentinel.svelte
@@ -33,18 +33,3 @@
     {/if}
   </div>
 {/if}
-
-<style>
-  .load-more-sentinel {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: var(--space-4);
-  }
-
-  .loading-indicator {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-  }
-</style>
diff --git a/frontend/src/components/ReauthModal.svelte b/frontend/src/components/ReauthModal.svelte
--- a/frontend/src/components/ReauthModal.svelte
+++ b/frontend/src/components/ReauthModal.svelte
@@ -148,7 +148,7 @@
       {/if}
 
       {#if availableMethods.length > 1}
-        <div class="method-tabs">
+        <div class="tabs">
           {#if availableMethods.includes('password')}
             <button
               class="tab"
@@ -182,7 +182,7 @@
       <div class="modal-content">
         {#if activeMethod === 'password'}
           <form onsubmit={handlePasswordSubmit}>
-            <div class="field">
+            <div>
               <label for="reauth-password">{$_('reauth.password')}</label>
               <input
                 id="reauth-password"
@@ -198,7 +198,7 @@
           </form>
         {:else if activeMethod === 'totp'}
           <form onsubmit={handleTotpSubmit}>
-            <div class="field">
+            <div>
               <label for="reauth-totp">{$_('reauth.authenticatorCode')}</label>
               <input
                 id="reauth-totp"
@@ -232,111 +232,3 @@
     </div>
   </div>
 {/if}
-
-<style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: var(--overlay-bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: var(--z-modal);
-  }
-
-  .modal {
-    background: var(--bg-card);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-lg);
-    max-width: var(--width-sm);
-    width: 90%;
-    max-height: 90vh;
-    overflow-y: auto;
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-4) var(--space-6);
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .modal-header h2 {
-    margin: 0;
-    font-size: var(--text-lg);
-  }
-
-  .close-btn {
-    background: none;
-    border: none;
-    font-size: var(--text-xl);
-    cursor: pointer;
-    color: var(--text-secondary);
-    padding: 0;
-    line-height: 1;
-  }
-
-  .close-btn:hover {
-    color: var(--text-primary);
-  }
-
-  .error-message {
-    margin: var(--space-4) var(--space-6) 0;
-    padding: var(--space-3);
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: var(--radius-md);
-    color: var(--error-text);
-    font-size: var(--text-sm);
-  }
-
-  .method-tabs {
-    display: flex;
-    gap: var(--space-2);
-    padding: var(--space-4) var(--space-6) 0;
-  }
-
-  .tab {
-    flex: 1;
-    padding: var(--space-2) var(--space-4);
-    background: var(--bg-input);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-  }
-
-  .tab:hover {
-    background: var(--bg-secondary);
-  }
-
-  .tab.active {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .modal-content {
-    padding: var(--space-6);
-  }
-
-  .modal-content .field {
-    margin-bottom: var(--space-4);
-  }
-
-  .passkey-auth {
-    text-align: center;
-  }
-
-  .modal-content button:not(.tab) {
-    width: 100%;
-  }
-
-  .modal-footer {
-    padding: 0 var(--space-6) var(--space-6);
-    display: flex;
-    justify-content: flex-end;
-  }
-</style>
diff --git a/frontend/src/components/Skeleton.svelte b/frontend/src/components/Skeleton.svelte
--- a/frontend/src/components/Skeleton.svelte
+++ b/frontend/src/components/Skeleton.svelte
@@ -30,44 +30,3 @@
     <div class="skeleton-line {size} {className}" class:last={i === lines - 1}></div>
   {/each}
 {/if}
-
-<style>
-  .skeleton-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    padding: var(--space-3);
-  }
-
-  .skeleton-header {
-    display: flex;
-    gap: var(--space-2);
-    margin-bottom: var(--space-2);
-  }
-
-  .skeleton-line {
-    height: 14px;
-    background: var(--bg-tertiary);
-    border-radius: var(--radius-sm);
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-    margin-bottom: var(--space-1);
-  }
-
-  .skeleton-line.last {
-    margin-bottom: 0;
-  }
-
-  .skeleton-line.tiny { width: 50px; }
-  .skeleton-line.short { width: 80px; }
-  .skeleton-line.medium { width: 60%; }
-  .skeleton-line.full { width: 100%; }
-
-  .skeleton-circle {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: var(--bg-tertiary);
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-  }
-
-</style>
diff --git a/frontend/src/components/SsoIcon.svelte b/frontend/src/components/SsoIcon.svelte
--- a/frontend/src/components/SsoIcon.svelte
+++ b/frontend/src/components/SsoIcon.svelte
@@ -44,9 +44,3 @@
     <line x1="15" y1="12" x2="3" y2="12" />
   </svg>
 {/if}
-
-<style>
-  svg {
-    display: block;
-  }
-</style>
diff --git a/frontend/src/components/Toast.svelte b/frontend/src/components/Toast.svelte
--- a/frontend/src/components/Toast.svelte
+++ b/frontend/src/components/Toast.svelte
@@ -7,18 +7,6 @@
     dismissToast(id)
   }
 
-  function getIcon(type: Toast['type']): string {
-    switch (type) {
-      case 'success':
-        return '✓'
-      case 'error':
-        return '!'
-      case 'warning':
-        return '⚠'
-      case 'info':
-        return 'i'
-    }
-  }
 </script>
 
 {#if toasts.length > 0}
@@ -26,11 +14,9 @@
     {#each toasts as toast (toast.id)}
       <div
         class="toast toast-{toast.type}"
-        class:dismissing={toast.dismissing}
         role="alert"
         aria-live="polite"
       >
-        <span class="toast-icon">{getIcon(toast.type)}</span>
         <span class="toast-message">{toast.message}</span>
         <button
           type="button"
@@ -44,145 +30,3 @@
     {/each}
   </div>
 {/if}
-
-<style>
-  .toast-container {
-    position: fixed;
-    top: var(--space-6);
-    right: var(--space-6);
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-    max-width: min(400px, calc(100vw - var(--space-12)));
-    pointer-events: none;
-  }
-
-  .toast {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-3);
-    padding: var(--space-4);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
-    pointer-events: auto;
-    animation: toast-in 0.1s ease-out;
-  }
-
-  .toast.dismissing {
-    animation: toast-out 0.15s ease-in forwards;
-  }
-
-  @keyframes toast-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes toast-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-
-  .toast-success {
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    color: var(--success-text);
-  }
-
-  .toast-error {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
-  }
-
-  .toast-warning {
-    background: var(--warning-bg);
-    border: 1px solid var(--warning-border);
-    color: var(--warning-text);
-  }
-
-  .toast-info {
-    background: var(--accent-muted);
-    border: 1px solid var(--accent);
-    color: var(--text-primary);
-  }
-
-  .toast-icon {
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    font-size: var(--text-xs);
-    font-weight: var(--font-bold);
-  }
-
-  .toast-success .toast-icon {
-    background: var(--success-text);
-    color: var(--success-bg);
-  }
-
-  .toast-error .toast-icon {
-    background: var(--error-text);
-    color: var(--error-bg);
-  }
-
-  .toast-warning .toast-icon {
-    background: var(--warning-text);
-    color: var(--warning-bg);
-  }
-
-  .toast-info .toast-icon {
-    background: var(--accent);
-    color: var(--bg-card);
-  }
-
-  .toast-message {
-    flex: 1;
-    font-size: var(--text-sm);
-    line-height: 1.4;
-  }
-
-  .toast-dismiss {
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    opacity: 0.6;
-    font-size: var(--text-sm);
-    line-height: 1;
-    color: inherit;
-    border-radius: var(--radius-sm);
-  }
-
-  .toast-dismiss:hover {
-    opacity: 1;
-    background: rgba(0, 0, 0, 0.1);
-  }
-
-  @media (max-width: 480px) {
-    .toast-container {
-      top: var(--space-4);
-      right: var(--space-4);
-      left: var(--space-4);
-      max-width: none;
-    }
-  }
-</style>
diff --git a/frontend/src/components/ui/Button.svelte b/frontend/src/components/ui/Button.svelte
--- a/frontend/src/components/ui/Button.svelte
+++ b/frontend/src/components/ui/Button.svelte
@@ -22,51 +22,10 @@
 </script>
 
 <button
-  class="btn btn-{variant} btn-{size}"
+  class="{variant === 'primary' ? '' : variant} {size !== 'md' ? size : ''}"
   class:full-width={fullWidth}
   disabled={disabled || loading}
   {...rest}
 >
-  {#if loading}
-    <span class="spinner"></span>
-  {/if}
   {@render children()}
 </button>
-
-<style>
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-  }
-
-  .btn-sm {
-    padding: var(--space-2) var(--space-4);
-    font-size: var(--text-sm);
-  }
-
-  .btn-md {
-    padding: var(--space-4) var(--space-6);
-    font-size: var(--text-base);
-  }
-
-  .btn-lg {
-    padding: var(--space-5) var(--space-7);
-    font-size: var(--text-lg);
-  }
-
-  .full-width {
-    width: 100%;
-  }
-
-  .spinner {
-    width: 1em;
-    height: 1em;
-    border: 2px solid currentColor;
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: spin 0.6s linear infinite;
-  }
-
-</style>
diff --git a/frontend/src/components/ui/Card.svelte b/frontend/src/components/ui/Card.svelte
--- a/frontend/src/components/ui/Card.svelte
+++ b/frontend/src/components/ui/Card.svelte
@@ -19,31 +19,3 @@
 <div class="card card-{variant} padding-{padding}" {...rest}>
   {@render children()}
 </div>
-
-<style>
-  .card {
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-xl);
-  }
-
-  .card-interactive {
-    cursor: pointer;
-    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
-  }
-
-  .card-interactive:hover {
-    border-color: var(--accent);
-    box-shadow: 0 2px 8px var(--accent-muted);
-  }
-
-  .card-danger {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-  }
-
-  .padding-none { padding: 0; }
-  .padding-sm { padding: var(--space-4); }
-  .padding-md { padding: var(--space-6); }
-  .padding-lg { padding: var(--space-7); }
-</style>
diff --git a/frontend/src/components/ui/Input.svelte b/frontend/src/components/ui/Input.svelte
--- a/frontend/src/components/ui/Input.svelte
+++ b/frontend/src/components/ui/Input.svelte
@@ -19,7 +19,7 @@
   let inputId = $derived(id || fallbackId)
 </script>
 
-<div class="field">
+<div>
   {#if label}
     <label for={inputId}>{label}</label>
   {/if}
@@ -30,14 +30,3 @@
     <span class="hint">{hint}</span>
   {/if}
 </div>
-
-<style>
-  .has-error {
-    border-color: var(--error-text);
-  }
-
-  .has-error:focus {
-    border-color: var(--error-text);
-    box-shadow: 0 0 0 2px var(--error-bg);
-  }
-</style>
diff --git a/frontend/src/components/ui/Message.svelte b/frontend/src/components/ui/Message.svelte
--- a/frontend/src/components/ui/Message.svelte
+++ b/frontend/src/components/ui/Message.svelte
@@ -9,38 +9,6 @@
   let { variant, children }: Props = $props()
 </script>
 
-<div class="message message-{variant}">
+<div class="message {variant}">
   {@render children()}
 </div>
-
-<style>
-  .message {
-    padding: var(--space-4);
-    border-radius: var(--radius-md);
-    font-size: var(--text-sm);
-  }
-
-  .message-success {
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    color: var(--success-text);
-  }
-
-  .message-error {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
-  }
-
-  .message-warning {
-    background: var(--warning-bg);
-    border: 1px solid var(--warning-border);
-    color: var(--warning-text);
-  }
-
-  .message-info {
-    background: var(--accent-muted);
-    border: 1px solid var(--accent);
-    color: var(--text-primary);
-  }
-</style>
diff --git a/frontend/src/components/ui/Page.svelte b/frontend/src/components/ui/Page.svelte
--- a/frontend/src/components/ui/Page.svelte
+++ b/frontend/src/components/ui/Page.svelte
@@ -37,46 +37,3 @@
   </header>
   {@render children()}
 </div>
-
-<style>
-  .page {
-    margin: 0 auto;
-    padding: var(--space-7);
-  }
-
-  .page-sm { max-width: var(--width-md); }
-  .page-md { max-width: var(--width-lg); }
-  .page-lg { max-width: var(--width-xl); }
-
-  header {
-    margin-bottom: var(--space-7);
-  }
-
-  .back-link {
-    display: inline-block;
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    text-decoration: none;
-    margin-bottom: var(--space-3);
-  }
-
-  .back-link:hover {
-    color: var(--accent);
-  }
-
-  .header-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--space-4);
-  }
-
-  h1 {
-    margin: 0;
-  }
-
-  .actions {
-    display: flex;
-    gap: var(--space-3);
-  }
-</style>
diff --git a/frontend/src/components/ui/Section.svelte b/frontend/src/components/ui/Section.svelte
--- a/frontend/src/components/ui/Section.svelte
+++ b/frontend/src/components/ui/Section.svelte
@@ -16,7 +16,7 @@
   }: Props = $props()
 </script>
 
-<section class="section section-{variant}">
+<section class:danger={variant === 'danger'}>
   {#if title}
     <h2>{title}</h2>
   {/if}
@@ -25,31 +25,3 @@
   {/if}
   {@render children()}
 </section>
-
-<style>
-  .section {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-xl);
-    padding: var(--space-6);
-  }
-
-  .section-danger {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-  }
-
-  .section-danger h2 {
-    color: var(--error-text);
-  }
-
-  h2 {
-    margin: 0 0 var(--space-3) 0;
-    font-size: var(--text-lg);
-  }
-
-  .description {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    margin-bottom: var(--space-5);
-  }
-</style>

--
tangled.sh