refactor(frontend): extract UI primitive component styles #56

-46

frontend/src/components/AccountTypeSwitcher.svelte

··· 38 38 </span> 39 39 {/if} 40 40 </div> 41 41 - 42 42 - <style> 43 43 - .account-type-switcher { 44 44 - display: flex; 45 45 - gap: var(--space-2); 46 46 - padding: var(--space-1); 47 47 - background: var(--bg-secondary); 48 48 - border-radius: var(--radius-lg); 49 49 - margin-bottom: var(--space-6); 50 50 - } 51 51 - 52 52 - .switcher-option { 53 53 - flex: 1; 54 54 - display: flex; 55 55 - align-items: center; 56 56 - justify-content: center; 57 57 - gap: var(--space-2); 58 58 - padding: var(--space-3) var(--space-4); 59 59 - border-radius: var(--radius-md); 60 60 - text-decoration: none; 61 61 - color: var(--text-secondary); 62 62 - font-weight: var(--font-medium); 63 63 - transition: all 0.15s ease; 64 64 - } 65 65 - 66 66 - .switcher-option:hover { 67 67 - color: var(--text-primary); 68 68 - background: var(--bg-tertiary); 69 69 - } 70 70 - 71 71 - .switcher-option.active { 72 72 - background: var(--bg-primary); 73 73 - color: var(--text-primary); 74 74 - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 75 75 - } 76 76 - 77 77 - .switcher-option.disabled { 78 78 - opacity: 0.4; 79 79 - cursor: not-allowed; 80 80 - } 81 81 - 82 82 - .switcher-option.disabled:hover { 83 83 - color: var(--text-secondary); 84 84 - background: transparent; 85 85 - } 86 86 - </style>

+1 -24

frontend/src/components/AuthenticatedRoute.svelte

··· 32 32 {#if auth.kind === 'authenticated'} 33 33 {@render children({ session: auth.session, client: createAuthenticatedClient(auth.session) })} 34 34 {:else} 35 35 - <div class="loading-container"><div class="loading-spinner"></div></div> 35 35 + <div class="loading-container"></div> 36 36 {/if} 37 37 - 38 38 - <style> 39 39 - .loading-container { 40 40 - display: flex; 41 41 - justify-content: center; 42 42 - align-items: center; 43 43 - min-height: 200px; 44 44 - padding: var(--space-7); 45 45 - } 46 46 - 47 47 - .loading-spinner { 48 48 - width: 32px; 49 49 - height: 32px; 50 50 - border: 3px solid var(--border-color); 51 51 - border-top-color: var(--accent); 52 52 - border-radius: 50%; 53 53 - animation: spin 0.8s linear infinite; 54 54 - } 55 55 - 56 56 - @keyframes spin { 57 57 - to { transform: rotate(360deg); } 58 58 - } 59 59 - </style>

-22

frontend/src/components/HandleInput.svelte

··· 47 47 <span class="domain-suffix">.{domains[0]}</span> 48 48 {/if} 49 49 </div> 50 50 - 51 51 - <style> 52 52 - .handle-input-group { 53 53 - display: flex; 54 54 - gap: var(--space-2); 55 55 - align-items: center; 56 56 - } 57 57 - 58 58 - .handle-input-group input { 59 59 - flex: 1; 60 60 - } 61 61 - 62 62 - .handle-input-group select { 63 63 - width: auto; 64 64 - } 65 65 - 66 66 - .domain-suffix { 67 67 - color: var(--text-secondary); 68 68 - font-size: var(--text-sm); 69 69 - white-space: nowrap; 70 70 - } 71 71 - </style>

-15

frontend/src/components/LoadMoreSentinel.svelte

··· 33 33 {/if} 34 34 </div> 35 35 {/if} 36 36 - 37 37 - <style> 38 38 - .load-more-sentinel { 39 39 - height: 40px; 40 40 - display: flex; 41 41 - align-items: center; 42 42 - justify-content: center; 43 43 - margin-top: var(--space-4); 44 44 - } 45 45 - 46 46 - .loading-indicator { 47 47 - color: var(--text-secondary); 48 48 - font-size: var(--text-sm); 49 49 - } 50 50 - </style>

+3 -111

frontend/src/components/ReauthModal.svelte

··· 148 148 {/if} 149 149 150 150 {#if availableMethods.length > 1} 151 151 - <div class="method-tabs"> 151 151 + <div class="tabs"> 152 152 {#if availableMethods.includes('password')} 153 153 <button 154 154 class="tab" ··· 182 182 <div class="modal-content"> 183 183 {#if activeMethod === 'password'} 184 184 <form onsubmit={handlePasswordSubmit}> 185 185 - <div class="field"> 185 185 + <div> 186 186 <label for="reauth-password">{$_('reauth.password')}</label> 187 187 <input 188 188 id="reauth-password" ··· 198 198 </form> 199 199 {:else if activeMethod === 'totp'} 200 200 <form onsubmit={handleTotpSubmit}> 201 201 - <div class="field"> 201 201 + <div> 202 202 <label for="reauth-totp">{$_('reauth.authenticatorCode')}</label> 203 203 <input 204 204 id="reauth-totp" ··· 232 232 </div> 233 233 </div> 234 234 {/if} 235 235 - 236 236 - <style> 237 237 - .modal-backdrop { 238 238 - position: fixed; 239 239 - inset: 0; 240 240 - background: var(--overlay-bg); 241 241 - display: flex; 242 242 - align-items: center; 243 243 - justify-content: center; 244 244 - z-index: var(--z-modal); 245 245 - } 246 246 - 247 247 - .modal { 248 248 - background: var(--bg-card); 249 249 - border-radius: var(--radius-xl); 250 250 - box-shadow: var(--shadow-lg); 251 251 - max-width: var(--width-sm); 252 252 - width: 90%; 253 253 - max-height: 90vh; 254 254 - overflow-y: auto; 255 255 - } 256 256 - 257 257 - .modal-header { 258 258 - display: flex; 259 259 - justify-content: space-between; 260 260 - align-items: center; 261 261 - padding: var(--space-4) var(--space-6); 262 262 - border-bottom: 1px solid var(--border-color); 263 263 - } 264 264 - 265 265 - .modal-header h2 { 266 266 - margin: 0; 267 267 - font-size: var(--text-lg); 268 268 - } 269 269 - 270 270 - .close-btn { 271 271 - background: none; 272 272 - border: none; 273 273 - font-size: var(--text-xl); 274 274 - cursor: pointer; 275 275 - color: var(--text-secondary); 276 276 - padding: 0; 277 277 - line-height: 1; 278 278 - } 279 279 - 280 280 - .close-btn:hover { 281 281 - color: var(--text-primary); 282 282 - } 283 283 - 284 284 - .error-message { 285 285 - margin: var(--space-4) var(--space-6) 0; 286 286 - padding: var(--space-3); 287 287 - background: var(--error-bg); 288 288 - border: 1px solid var(--error-border); 289 289 - border-radius: var(--radius-md); 290 290 - color: var(--error-text); 291 291 - font-size: var(--text-sm); 292 292 - } 293 293 - 294 294 - .method-tabs { 295 295 - display: flex; 296 296 - gap: var(--space-2); 297 297 - padding: var(--space-4) var(--space-6) 0; 298 298 - } 299 299 - 300 300 - .tab { 301 301 - flex: 1; 302 302 - padding: var(--space-2) var(--space-4); 303 303 - background: var(--bg-input); 304 304 - border: 1px solid var(--border-color); 305 305 - border-radius: var(--radius-md); 306 306 - cursor: pointer; 307 307 - color: var(--text-secondary); 308 308 - font-size: var(--text-sm); 309 309 - } 310 310 - 311 311 - .tab:hover { 312 312 - background: var(--bg-secondary); 313 313 - } 314 314 - 315 315 - .tab.active { 316 316 - background: var(--accent); 317 317 - border-color: var(--accent); 318 318 - color: var(--text-inverse); 319 319 - } 320 320 - 321 321 - .modal-content { 322 322 - padding: var(--space-6); 323 323 - } 324 324 - 325 325 - .modal-content .field { 326 326 - margin-bottom: var(--space-4); 327 327 - } 328 328 - 329 329 - .passkey-auth { 330 330 - text-align: center; 331 331 - } 332 332 - 333 333 - .modal-content button:not(.tab) { 334 334 - width: 100%; 335 335 - } 336 336 - 337 337 - .modal-footer { 338 338 - padding: 0 var(--space-6) var(--space-6); 339 339 - display: flex; 340 340 - justify-content: flex-end; 341 341 - } 342 342 - </style>

-41

frontend/src/components/Skeleton.svelte

··· 30 30 <div class="skeleton-line {size} {className}" class:last={i === lines - 1}></div> 31 31 {/each} 32 32 {/if} 33 33 - 34 34 - <style> 35 35 - .skeleton-card { 36 36 - background: var(--bg-card); 37 37 - border: 1px solid var(--border-color); 38 38 - border-radius: var(--radius-md); 39 39 - padding: var(--space-3); 40 40 - } 41 41 - 42 42 - .skeleton-header { 43 43 - display: flex; 44 44 - gap: var(--space-2); 45 45 - margin-bottom: var(--space-2); 46 46 - } 47 47 - 48 48 - .skeleton-line { 49 49 - height: 14px; 50 50 - background: var(--bg-tertiary); 51 51 - border-radius: var(--radius-sm); 52 52 - animation: skeleton-pulse 1.5s ease-in-out infinite; 53 53 - margin-bottom: var(--space-1); 54 54 - } 55 55 - 56 56 - .skeleton-line.last { 57 57 - margin-bottom: 0; 58 58 - } 59 59 - 60 60 - .skeleton-line.tiny { width: 50px; } 61 61 - .skeleton-line.short { width: 80px; } 62 62 - .skeleton-line.medium { width: 60%; } 63 63 - .skeleton-line.full { width: 100%; } 64 64 - 65 65 - .skeleton-circle { 66 66 - width: 40px; 67 67 - height: 40px; 68 68 - border-radius: 50%; 69 69 - background: var(--bg-tertiary); 70 70 - animation: skeleton-pulse 1.5s ease-in-out infinite; 71 71 - } 72 72 - 73 73 - </style>

-6

frontend/src/components/SsoIcon.svelte

··· 44 44 <line x1="15" y1="12" x2="3" y2="12" /> 45 45 </svg> 46 46 {/if} 47 47 - 48 48 - <style> 49 49 - svg { 50 50 - display: block; 51 51 - } 52 52 - </style>

-156

frontend/src/components/Toast.svelte

··· 7 7 dismissToast(id) 8 8 } 9 9 10 10 - function getIcon(type: Toast['type']): string { 11 11 - switch (type) { 12 12 - case 'success': 13 13 - return '✓' 14 14 - case 'error': 15 15 - return '!' 16 16 - case 'warning': 17 17 - return '⚠' 18 18 - case 'info': 19 19 - return 'i' 20 20 - } 21 21 - } 22 10 </script> 23 11 24 12 {#if toasts.length > 0} ··· 26 14 {#each toasts as toast (toast.id)} 27 15 <div 28 16 class="toast toast-{toast.type}" 29 29 - class:dismissing={toast.dismissing} 30 17 role="alert" 31 18 aria-live="polite" 32 19 > 33 33 - <span class="toast-icon">{getIcon(toast.type)}</span> 34 20 <span class="toast-message">{toast.message}</span> 35 21 <button 36 22 type="button" ··· 44 30 {/each} 45 31 </div> 46 32 {/if} 47 47 - 48 48 - <style> 49 49 - .toast-container { 50 50 - position: fixed; 51 51 - top: var(--space-6); 52 52 - right: var(--space-6); 53 53 - z-index: 9999; 54 54 - display: flex; 55 55 - flex-direction: column; 56 56 - gap: var(--space-3); 57 57 - max-width: min(400px, calc(100vw - var(--space-12))); 58 58 - pointer-events: none; 59 59 - } 60 60 - 61 61 - .toast { 62 62 - display: flex; 63 63 - align-items: flex-start; 64 64 - gap: var(--space-3); 65 65 - padding: var(--space-4); 66 66 - border-radius: var(--radius-lg); 67 67 - box-shadow: var(--shadow-lg); 68 68 - pointer-events: auto; 69 69 - animation: toast-in 0.1s ease-out; 70 70 - } 71 71 - 72 72 - .toast.dismissing { 73 73 - animation: toast-out 0.15s ease-in forwards; 74 74 - } 75 75 - 76 76 - @keyframes toast-in { 77 77 - from { 78 78 - opacity: 0; 79 79 - transform: scale(0.95); 80 80 - } 81 81 - to { 82 82 - opacity: 1; 83 83 - transform: scale(1); 84 84 - } 85 85 - } 86 86 - 87 87 - @keyframes toast-out { 88 88 - from { 89 89 - opacity: 1; 90 90 - transform: scale(1); 91 91 - } 92 92 - to { 93 93 - opacity: 0; 94 94 - transform: scale(0.95); 95 95 - } 96 96 - } 97 97 - 98 98 - .toast-success { 99 99 - background: var(--success-bg); 100 100 - border: 1px solid var(--success-border); 101 101 - color: var(--success-text); 102 102 - } 103 103 - 104 104 - .toast-error { 105 105 - background: var(--error-bg); 106 106 - border: 1px solid var(--error-border); 107 107 - color: var(--error-text); 108 108 - } 109 109 - 110 110 - .toast-warning { 111 111 - background: var(--warning-bg); 112 112 - border: 1px solid var(--warning-border); 113 113 - color: var(--warning-text); 114 114 - } 115 115 - 116 116 - .toast-info { 117 117 - background: var(--accent-muted); 118 118 - border: 1px solid var(--accent); 119 119 - color: var(--text-primary); 120 120 - } 121 121 - 122 122 - .toast-icon { 123 123 - flex-shrink: 0; 124 124 - width: 20px; 125 125 - height: 20px; 126 126 - display: flex; 127 127 - align-items: center; 128 128 - justify-content: center; 129 129 - border-radius: 50%; 130 130 - font-size: var(--text-xs); 131 131 - font-weight: var(--font-bold); 132 132 - } 133 133 - 134 134 - .toast-success .toast-icon { 135 135 - background: var(--success-text); 136 136 - color: var(--success-bg); 137 137 - } 138 138 - 139 139 - .toast-error .toast-icon { 140 140 - background: var(--error-text); 141 141 - color: var(--error-bg); 142 142 - } 143 143 - 144 144 - .toast-warning .toast-icon { 145 145 - background: var(--warning-text); 146 146 - color: var(--warning-bg); 147 147 - } 148 148 - 149 149 - .toast-info .toast-icon { 150 150 - background: var(--accent); 151 151 - color: var(--bg-card); 152 152 - } 153 153 - 154 154 - .toast-message { 155 155 - flex: 1; 156 156 - font-size: var(--text-sm); 157 157 - line-height: 1.4; 158 158 - } 159 159 - 160 160 - .toast-dismiss { 161 161 - flex-shrink: 0; 162 162 - width: 20px; 163 163 - height: 20px; 164 164 - padding: 0; 165 165 - border: none; 166 166 - background: transparent; 167 167 - cursor: pointer; 168 168 - opacity: 0.6; 169 169 - font-size: var(--text-sm); 170 170 - line-height: 1; 171 171 - color: inherit; 172 172 - border-radius: var(--radius-sm); 173 173 - } 174 174 - 175 175 - .toast-dismiss:hover { 176 176 - opacity: 1; 177 177 - background: rgba(0, 0, 0, 0.1); 178 178 - } 179 179 - 180 180 - @media (max-width: 480px) { 181 181 - .toast-container { 182 182 - top: var(--space-4); 183 183 - right: var(--space-4); 184 184 - left: var(--space-4); 185 185 - max-width: none; 186 186 - } 187 187 - } 188 188 - </style>

+1 -42

frontend/src/components/ui/Button.svelte

··· 22 22 </script> 23 23 24 24 <button 25 25 - class="btn btn-{variant} btn-{size}" 25 25 + class="{variant === 'primary' ? '' : variant} {size !== 'md' ? size : ''}" 26 26 class:full-width={fullWidth} 27 27 disabled={disabled || loading} 28 28 {...rest} 29 29 > 30 30 - {#if loading} 31 31 - <span class="spinner"></span> 32 32 - {/if} 33 30 {@render children()} 34 31 </button> 35 35 - 36 36 - <style> 37 37 - .btn { 38 38 - display: inline-flex; 39 39 - align-items: center; 40 40 - justify-content: center; 41 41 - gap: var(--space-2); 42 42 - } 43 43 - 44 44 - .btn-sm { 45 45 - padding: var(--space-2) var(--space-4); 46 46 - font-size: var(--text-sm); 47 47 - } 48 48 - 49 49 - .btn-md { 50 50 - padding: var(--space-4) var(--space-6); 51 51 - font-size: var(--text-base); 52 52 - } 53 53 - 54 54 - .btn-lg { 55 55 - padding: var(--space-5) var(--space-7); 56 56 - font-size: var(--text-lg); 57 57 - } 58 58 - 59 59 - .full-width { 60 60 - width: 100%; 61 61 - } 62 62 - 63 63 - .spinner { 64 64 - width: 1em; 65 65 - height: 1em; 66 66 - border: 2px solid currentColor; 67 67 - border-right-color: transparent; 68 68 - border-radius: 50%; 69 69 - animation: spin 0.6s linear infinite; 70 70 - } 71 71 - 72 72 - </style>

-28

frontend/src/components/ui/Card.svelte

··· 19 19 <div class="card card-{variant} padding-{padding}" {...rest}> 20 20 {@render children()} 21 21 </div> 22 22 - 23 23 - <style> 24 24 - .card { 25 25 - background: var(--bg-card); 26 26 - border: 1px solid var(--border-color); 27 27 - border-radius: var(--radius-xl); 28 28 - } 29 29 - 30 30 - .card-interactive { 31 31 - cursor: pointer; 32 32 - transition: border-color var(--transition-normal), box-shadow var(--transition-normal); 33 33 - } 34 34 - 35 35 - .card-interactive:hover { 36 36 - border-color: var(--accent); 37 37 - box-shadow: 0 2px 8px var(--accent-muted); 38 38 - } 39 39 - 40 40 - .card-danger { 41 41 - background: var(--error-bg); 42 42 - border-color: var(--error-border); 43 43 - } 44 44 - 45 45 - .padding-none { padding: 0; } 46 46 - .padding-sm { padding: var(--space-4); } 47 47 - .padding-md { padding: var(--space-6); } 48 48 - .padding-lg { padding: var(--space-7); } 49 49 - </style>

+1 -12

frontend/src/components/ui/Input.svelte

··· 19 19 let inputId = $derived(id || fallbackId) 20 20 </script> 21 21 22 22 - <div class="field"> 22 22 + <div> 23 23 {#if label} 24 24 <label for={inputId}>{label}</label> 25 25 {/if} ··· 30 30 <span class="hint">{hint}</span> 31 31 {/if} 32 32 </div> 33 33 - 34 34 - <style> 35 35 - .has-error { 36 36 - border-color: var(--error-text); 37 37 - } 38 38 - 39 39 - .has-error:focus { 40 40 - border-color: var(--error-text); 41 41 - box-shadow: 0 0 0 2px var(--error-bg); 42 42 - } 43 43 - </style>

+1 -33

frontend/src/components/ui/Message.svelte

··· 9 9 let { variant, children }: Props = $props() 10 10 </script> 11 11 12 12 - <div class="message message-{variant}"> 12 12 + <div class="message {variant}"> 13 13 {@render children()} 14 14 </div> 15 15 - 16 16 - <style> 17 17 - .message { 18 18 - padding: var(--space-4); 19 19 - border-radius: var(--radius-md); 20 20 - font-size: var(--text-sm); 21 21 - } 22 22 - 23 23 - .message-success { 24 24 - background: var(--success-bg); 25 25 - border: 1px solid var(--success-border); 26 26 - color: var(--success-text); 27 27 - } 28 28 - 29 29 - .message-error { 30 30 - background: var(--error-bg); 31 31 - border: 1px solid var(--error-border); 32 32 - color: var(--error-text); 33 33 - } 34 34 - 35 35 - .message-warning { 36 36 - background: var(--warning-bg); 37 37 - border: 1px solid var(--warning-border); 38 38 - color: var(--warning-text); 39 39 - } 40 40 - 41 41 - .message-info { 42 42 - background: var(--accent-muted); 43 43 - border: 1px solid var(--accent); 44 44 - color: var(--text-primary); 45 45 - } 46 46 - </style>

-43

frontend/src/components/ui/Page.svelte

··· 37 37 </header> 38 38 {@render children()} 39 39 </div> 40 40 - 41 41 - <style> 42 42 - .page { 43 43 - margin: 0 auto; 44 44 - padding: var(--space-7); 45 45 - } 46 46 - 47 47 - .page-sm { max-width: var(--width-md); } 48 48 - .page-md { max-width: var(--width-lg); } 49 49 - .page-lg { max-width: var(--width-xl); } 50 50 - 51 51 - header { 52 52 - margin-bottom: var(--space-7); 53 53 - } 54 54 - 55 55 - .back-link { 56 56 - display: inline-block; 57 57 - color: var(--text-secondary); 58 58 - font-size: var(--text-sm); 59 59 - text-decoration: none; 60 60 - margin-bottom: var(--space-3); 61 61 - } 62 62 - 63 63 - .back-link:hover { 64 64 - color: var(--accent); 65 65 - } 66 66 - 67 67 - .header-row { 68 68 - display: flex; 69 69 - justify-content: space-between; 70 70 - align-items: center; 71 71 - gap: var(--space-4); 72 72 - } 73 73 - 74 74 - h1 { 75 75 - margin: 0; 76 76 - } 77 77 - 78 78 - .actions { 79 79 - display: flex; 80 80 - gap: var(--space-3); 81 81 - } 82 82 - </style>

+1 -29

frontend/src/components/ui/Section.svelte

··· 16 16 }: Props = $props() 17 17 </script> 18 18 19 19 - <section class="section section-{variant}"> 19 19 + <section class:danger={variant === 'danger'}> 20 20 {#if title} 21 21 <h2>{title}</h2> 22 22 {/if} ··· 25 25 {/if} 26 26 {@render children()} 27 27 </section> 28 28 - 29 29 - <style> 30 30 - .section { 31 31 - background: var(--bg-secondary); 32 32 - border-radius: var(--radius-xl); 33 33 - padding: var(--space-6); 34 34 - } 35 35 - 36 36 - .section-danger { 37 37 - background: var(--error-bg); 38 38 - border: 1px solid var(--error-border); 39 39 - } 40 40 - 41 41 - .section-danger h2 { 42 42 - color: var(--error-text); 43 43 - } 44 44 - 45 45 - h2 { 46 46 - margin: 0 0 var(--space-3) 0; 47 47 - font-size: var(--text-lg); 48 48 - } 49 49 - 50 50 - .description { 51 51 - color: var(--text-secondary); 52 52 - font-size: var(--text-sm); 53 53 - margin-bottom: var(--space-5); 54 54 - } 55 55 - </style>