mirrors/tranquil-pds
1
0
Fork 0
mirror of https://tangled.org/tranquil.farm/tranquil-pds synced 2026-04-11 12:16:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): extract UI primitive component styles

Browse Source
This commit is contained in:
Lewis
2026-03-18 07:18:08 +02:00
committed by Tangled
parent f95a1c7cfd
commit 79a3db8ff2
14 changed files with 8 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/AccountTypeSwitcher.svelte
View File

@@ -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>

25
frontend/src/components/AuthenticatedRoute.svelte
View File

@@ -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>

22
frontend/src/components/HandleInput.svelte
View File

@@ -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>

15
frontend/src/components/LoadMoreSentinel.svelte
View File

@@ -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>

114
frontend/src/components/ReauthModal.svelte
View File

@@ -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>

41
frontend/src/components/Skeleton.svelte
View File

@@ -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>

6
frontend/src/components/SsoIcon.svelte
View File

@@ -44,9 +44,3 @@
<line x1="15" y1="12" x2="3" y2="12" />
</svg>
{/if}
<style>
svg {
display: block;
}
</style>

156
frontend/src/components/Toast.svelte
View File

@@ -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>

43
frontend/src/components/ui/Button.svelte
View File

@@ -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>

28
frontend/src/components/ui/Card.svelte
View File

@@ -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>

13
frontend/src/components/ui/Input.svelte
View File

@@ -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>

34
frontend/src/components/ui/Message.svelte
View File

@@ -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>

43
frontend/src/components/ui/Page.svelte
View File

@@ -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>

30
frontend/src/components/ui/Section.svelte
View File

@@ -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>