mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 09:19:56 -05:00
Chore: Port over Settings (Barely Works)
This commit is contained in:
Youwes09
@@ -0,0 +1,202 @@
|
||||
<script lang="ts">
|
||||
import { dismissToast } from '$lib/state/notifications.svelte'
|
||||
import type { Toast } from '$lib/state/notifications.svelte'
|
||||
|
||||
let { toasts }: { toasts: Toast[] } = $props()
|
||||
|
||||
const EXIT_MS = 280
|
||||
const leaving = new Set<string>()
|
||||
const timers = new Map<string, ReturnType<typeof setTimeout>>()
|
||||
|
||||
let detail = $state<Toast | null>(null)
|
||||
|
||||
function schedule(t: Toast) {
|
||||
if (timers.has(t.id)) return
|
||||
const dur = t.duration ?? 3500
|
||||
if (dur === 0) return
|
||||
timers.set(t.id, setTimeout(() => dismiss(t.id), dur))
|
||||
}
|
||||
|
||||
function dismiss(id: string) {
|
||||
if (leaving.has(id)) return
|
||||
leaving.add(id)
|
||||
if (timers.has(id)) { clearTimeout(timers.get(id)!); timers.delete(id) }
|
||||
const el = document.querySelector<HTMLElement>(`[data-toast-id="${id}"]`)
|
||||
if (!el) { finalize(id); return }
|
||||
el.style.setProperty('--exit-h', `${el.offsetHeight}px`)
|
||||
el.classList.add('leaving')
|
||||
setTimeout(() => finalize(id), EXIT_MS)
|
||||
}
|
||||
|
||||
function finalize(id: string) {
|
||||
leaving.delete(id)
|
||||
dismissToast(id)
|
||||
}
|
||||
|
||||
function openDetail(e: MouseEvent, t: Toast) {
|
||||
e.preventDefault()
|
||||
detail = t
|
||||
if (timers.has(t.id)) { clearTimeout(timers.get(t.id)!); timers.delete(t.id) }
|
||||
}
|
||||
|
||||
function onBackdropKey(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') detail = null
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const activeIds = new Set(toasts.map(t => t.id))
|
||||
toasts.forEach(schedule)
|
||||
for (const [id, timer] of timers) {
|
||||
if (!activeIds.has(id)) { clearTimeout(timer); timers.delete(id) }
|
||||
}
|
||||
if (detail && !activeIds.has(detail.id)) detail = null
|
||||
})
|
||||
|
||||
const icons: Record<Toast['kind'], string> = {
|
||||
success: 'M20 6L9 17l-5-5',
|
||||
error: 'M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',
|
||||
info: 'M12 16v-4M12 8h.01M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z',
|
||||
download: 'M12 3v13M7 11l5 5 5-5M5 21h14',
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if toasts.length}
|
||||
<div class="toaster" aria-live="polite">
|
||||
{#each toasts as t (t.id)}
|
||||
<button
|
||||
class="toast toast-{t.kind}"
|
||||
data-toast-id={t.id}
|
||||
aria-label="{t.message}{t.detail ? ': ' + t.detail : ''}"
|
||||
onclick={() => dismiss(t.id)}
|
||||
oncontextmenu={(e) => openDetail(e, t)}
|
||||
>
|
||||
<div class="accent-bar"></div>
|
||||
<span class="icon">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d={icons[t.kind]}/>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="body">
|
||||
<p class="message">{t.message}</p>
|
||||
<p class="sub">{t.detail ?? '\u00a0'}</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if detail}
|
||||
<div
|
||||
class="detail-backdrop"
|
||||
role="presentation"
|
||||
onclick={() => (detail = null)}
|
||||
onkeydown={onBackdropKey}
|
||||
>
|
||||
<div
|
||||
class="detail-panel detail-{detail.kind}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={detail.message}
|
||||
tabindex="-1"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="detail-accent"></div>
|
||||
<div class="detail-body">
|
||||
<div class="detail-header">
|
||||
<span class="detail-kind">{detail.kind}</span>
|
||||
<button class="detail-close" onclick={() => (detail = null)} aria-label="Close">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="detail-message">{detail.message}</p>
|
||||
{#if detail.detail}
|
||||
<pre class="detail-text">{detail.detail}</pre>
|
||||
{/if}
|
||||
<div class="detail-actions">
|
||||
<button class="detail-copy" onclick={() => navigator.clipboard.writeText(`${detail!.message}${detail!.detail ? '\n' + detail!.detail : ''}`)}>
|
||||
Copy
|
||||
</button>
|
||||
<button class="detail-dismiss" onclick={() => { dismiss(detail!.id); detail = null }}>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.toaster { position:fixed; bottom:var(--sp-5); right:var(--sp-5); z-index:9999; display:flex; flex-direction:column; gap:5px; pointer-events:none; }
|
||||
|
||||
.toast {
|
||||
display:flex; align-items:center; gap:10px; padding:12px var(--sp-3) 12px 0;
|
||||
border-radius:var(--radius-md); background:var(--bg-raised); border:1px solid var(--border-dim);
|
||||
box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
|
||||
pointer-events:all; width:280px; overflow:hidden; cursor:pointer;
|
||||
font-family:inherit; font-size:inherit; color:inherit; text-align:left;
|
||||
will-change:transform, opacity;
|
||||
animation:slideIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
|
||||
transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.toast:hover { border-color:var(--border-base); box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06) inset; transform:translateX(-3px); }
|
||||
.toast:active { transform:translateX(0) scale(0.98); }
|
||||
|
||||
:global(.toast.leaving) { animation:slideOut 0.28s cubic-bezier(0.4,0,1,1) forwards !important; pointer-events:none; }
|
||||
|
||||
@keyframes slideIn { from { opacity:0; transform:translateX(20px) scale(0.96) } to { opacity:1; transform:translateX(0) scale(1) } }
|
||||
@keyframes slideOut {
|
||||
0% { opacity:1; transform:translateX(0) scale(1); max-height:var(--exit-h,80px); margin-bottom:0; }
|
||||
40% { opacity:0; transform:translateX(14px) scale(0.96); max-height:var(--exit-h,80px); margin-bottom:0; }
|
||||
100% { opacity:0; transform:translateX(14px) scale(0.96); max-height:0; margin-bottom:-5px; }
|
||||
}
|
||||
|
||||
.accent-bar { width:3px; align-self:stretch; flex-shrink:0; border-radius:0 2px 2px 0; }
|
||||
.toast-success .accent-bar { background:var(--accent-fg); }
|
||||
.toast-error .accent-bar { background:var(--color-error); }
|
||||
.toast-info .accent-bar { background:var(--text-faint); }
|
||||
.toast-download .accent-bar { background:var(--accent-fg); }
|
||||
|
||||
.icon { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
|
||||
.toast-success .icon { color:var(--accent-fg); }
|
||||
.toast-error .icon { color:var(--color-error); }
|
||||
.toast-info .icon { color:var(--text-muted); }
|
||||
.toast-download .icon { color:var(--accent-fg); }
|
||||
|
||||
.body { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
|
||||
.message { font-size:var(--text-xs); font-family:var(--font-ui); color:var(--text-secondary); font-weight:var(--weight-medium); letter-spacing:var(--tracking-wide); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.sub { font-family:var(--font-ui); font-size:var(--text-2xs); color:var(--text-faint); letter-spacing:var(--tracking-wide); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
|
||||
.detail-backdrop { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; animation:fadeIn 0.15s ease both; }
|
||||
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
|
||||
|
||||
.detail-panel { display:flex; width:420px; max-width:calc(100vw - 32px); max-height:60vh; border-radius:var(--radius-lg); background:var(--bg-raised); border:1px solid var(--border-base); box-shadow:0 24px 64px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05) inset; overflow:hidden; animation:popIn 0.2s cubic-bezier(0.16,1,0.3,1) both; }
|
||||
@keyframes popIn { from { opacity:0; transform:scale(0.95) } to { opacity:1; transform:scale(1) } }
|
||||
|
||||
.detail-accent { width:3px; flex-shrink:0; }
|
||||
.detail-error .detail-accent { background:var(--color-error); }
|
||||
.detail-success .detail-accent { background:var(--accent-fg); }
|
||||
.detail-info .detail-accent { background:var(--text-faint); }
|
||||
.detail-download .detail-accent { background:var(--accent-fg); }
|
||||
|
||||
.detail-body { flex:1; min-width:0; display:flex; flex-direction:column; padding:var(--sp-3); gap:var(--sp-2); overflow:hidden; }
|
||||
.detail-header { display:flex; align-items:center; justify-content:space-between; }
|
||||
.detail-kind { font-family:var(--font-ui); font-size:var(--text-2xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--text-faint); }
|
||||
.detail-error .detail-kind { color:var(--color-error); }
|
||||
|
||||
.detail-close { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:var(--radius-sm); background:none; border:none; color:var(--text-faint); cursor:pointer; transition:color var(--t-fast), background var(--t-fast); }
|
||||
.detail-close:hover { color:var(--text-primary); background:var(--bg-overlay); }
|
||||
|
||||
.detail-message { font-family:var(--font-ui); font-size:var(--text-sm); color:var(--text-secondary); font-weight:var(--weight-medium); line-height:var(--leading-snug); word-break:break-word; }
|
||||
|
||||
.detail-text { flex:1; min-height:0; overflow-y:auto; font-family:var(--font-ui); font-size:var(--text-xs); color:var(--text-muted); line-height:var(--leading-base); white-space:pre-wrap; word-break:break-all; background:var(--bg-void); border:1px solid var(--border-dim); border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); scrollbar-width:thin; margin:0; }
|
||||
|
||||
.detail-actions { display:flex; gap:var(--sp-2); margin-top:var(--sp-1); }
|
||||
.detail-copy, .detail-dismiss { font-family:var(--font-ui); font-size:var(--text-2xs); letter-spacing:var(--tracking-wide); padding:5px var(--sp-3); border-radius:var(--radius-sm); cursor:pointer; transition:color var(--t-base), background var(--t-base), border-color var(--t-base); }
|
||||
.detail-copy { border:1px solid var(--border-dim); background:none; color:var(--text-muted); }
|
||||
.detail-copy:hover { color:var(--text-primary); border-color:var(--border-strong); background:var(--bg-overlay); }
|
||||
.detail-dismiss { border:1px solid color-mix(in srgb, var(--color-error) 40%, transparent); background:color-mix(in srgb, var(--color-error) 10%, transparent); color:var(--color-error); }
|
||||
.detail-dismiss:hover { background:color-mix(in srgb, var(--color-error) 18%, transparent); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user