feat: add foundational Tier 1 components and store methods
Add generic BottomSheet, Toast, and ConfirmDialog components. Add startTask/stopTask optimistic methods to tasks store. Add --color-active-bg/text theme tokens for all three themes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -68,6 +68,8 @@
|
||||
--color-overdue-text: #f85149;
|
||||
--color-tag-bg: rgba(139, 148, 158, 0.1);
|
||||
--color-tag-text: #8b949e;
|
||||
--color-active-bg: rgba(57, 208, 186, 0.15);
|
||||
--color-active-text: #39d0ba;
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
@@ -118,6 +120,8 @@
|
||||
--color-overdue-text: #be123c;
|
||||
--color-tag-bg: #f5f5f4;
|
||||
--color-tag-text: #78716c;
|
||||
--color-active-bg: rgba(99, 102, 241, 0.12);
|
||||
--color-active-text: #4f46e5;
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
@@ -168,6 +172,8 @@
|
||||
--color-overdue-text: #ef4444;
|
||||
--color-tag-bg: rgba(148, 163, 184, 0.1);
|
||||
--color-tag-text: #94a3b8;
|
||||
--color-active-bg: rgba(139, 92, 246, 0.15);
|
||||
--color-active-text: #8b5cf6;
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,248 @@
|
||||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
|
||||
/** @type {boolean} */
|
||||
export let open = false;
|
||||
|
||||
/** @type {() => void} */
|
||||
export let onClose;
|
||||
|
||||
let dragOffset = 0;
|
||||
let dragging = false;
|
||||
let locked = false;
|
||||
|
||||
/** @type {number|null} */
|
||||
let startY = null;
|
||||
/** @type {number|null} */
|
||||
let startX = null;
|
||||
/** @type {number|null} */
|
||||
let lastY = null;
|
||||
/** @type {number} */
|
||||
let lastTime = 0;
|
||||
/** @type {number} */
|
||||
let velocity = 0;
|
||||
|
||||
const DISMISS_THRESHOLD = 150;
|
||||
const VELOCITY_THRESHOLD = 0.5;
|
||||
|
||||
/** @type {HTMLDivElement|null} */
|
||||
let sheetEl = null;
|
||||
|
||||
// Body scroll lock
|
||||
$: if (open) {
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.documentElement.style.overflow = '';
|
||||
dragOffset = 0;
|
||||
dragging = false;
|
||||
locked = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {KeyboardEvent} e
|
||||
*/
|
||||
function handleKeydown(e) {
|
||||
if (!open) return;
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
// Focus trap
|
||||
if (e.key === 'Tab' && sheetEl) {
|
||||
const focusable = sheetEl.querySelectorAll(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
if (focusable.length === 0) return;
|
||||
const first = /** @type {HTMLElement} */ (focusable[0]);
|
||||
const last = /** @type {HTMLElement} */ (focusable[focusable.length - 1]);
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
document.documentElement.style.overflow = '';
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {TouchEvent} e
|
||||
*/
|
||||
function handleDragStart(e) {
|
||||
const touch = e.touches[0];
|
||||
startY = touch.clientY;
|
||||
startX = touch.clientX;
|
||||
lastY = touch.clientY;
|
||||
lastTime = Date.now();
|
||||
locked = false;
|
||||
dragging = false;
|
||||
velocity = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {TouchEvent} e
|
||||
*/
|
||||
function handleDragMove(e) {
|
||||
if (startY === null || startX === null) return;
|
||||
const touch = e.touches[0];
|
||||
const deltaY = touch.clientY - startY;
|
||||
const deltaX = touch.clientX - startX;
|
||||
|
||||
if (!locked && !dragging) {
|
||||
if (Math.abs(deltaY) > 10 && Math.abs(deltaY) > Math.abs(deltaX) * 2) {
|
||||
dragging = true;
|
||||
locked = true;
|
||||
} else if (Math.abs(deltaX) > 10) {
|
||||
startY = null;
|
||||
startX = null;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (dragging) {
|
||||
if (e.cancelable) e.preventDefault();
|
||||
// Only allow dragging down (positive)
|
||||
dragOffset = Math.max(0, deltaY);
|
||||
|
||||
// Track velocity
|
||||
const now = Date.now();
|
||||
const dt = now - lastTime;
|
||||
if (dt > 0 && lastY !== null) {
|
||||
velocity = (touch.clientY - lastY) / dt;
|
||||
}
|
||||
lastY = touch.clientY;
|
||||
lastTime = now;
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragEnd() {
|
||||
if (!dragging) {
|
||||
startY = null;
|
||||
startX = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (dragOffset > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
|
||||
onClose();
|
||||
}
|
||||
dragOffset = 0;
|
||||
dragging = false;
|
||||
startY = null;
|
||||
startX = null;
|
||||
}
|
||||
|
||||
function handleScrimClick() {
|
||||
onClose();
|
||||
}
|
||||
|
||||
$: transitioning = !dragging && dragOffset === 0;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
||||
<div class="sheet-scrim" class:open on:click={handleScrimClick}>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
||||
<div
|
||||
bind:this={sheetEl}
|
||||
class="sheet"
|
||||
class:open
|
||||
class:transitioning
|
||||
style:transform={open
|
||||
? `translateY(${dragOffset}px)`
|
||||
: undefined}
|
||||
on:click|stopPropagation
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
class="sheet-handle"
|
||||
on:touchstart={handleDragStart}
|
||||
on:touchmove={handleDragMove}
|
||||
on:touchend={handleDragEnd}
|
||||
>
|
||||
<div class="handle-bar"></div>
|
||||
</div>
|
||||
<div class="sheet-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.sheet-scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.sheet-scrim.open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sheet {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 85dvh;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 51;
|
||||
}
|
||||
|
||||
.sheet.transitioning {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.sheet.open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.sheet-handle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-sm) 0;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.handle-bar {
|
||||
width: 2.5rem;
|
||||
height: 0.25rem;
|
||||
background: var(--text-tertiary);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.sheet-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0 var(--spacing-md) var(--spacing-lg);
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.sheet {
|
||||
max-width: 480px;
|
||||
left: 50%;
|
||||
margin-left: -240px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<script>
|
||||
/** @type {string} */
|
||||
export let title;
|
||||
|
||||
/** @type {string} */
|
||||
export let message;
|
||||
|
||||
/** @type {string|undefined} */
|
||||
export let detail = undefined;
|
||||
|
||||
/** @type {string} */
|
||||
export let confirmLabel;
|
||||
|
||||
/** @type {'danger'|'primary'} */
|
||||
export let confirmVariant = 'danger';
|
||||
|
||||
/** @type {() => void} */
|
||||
export let onConfirm;
|
||||
|
||||
/** @type {() => void} */
|
||||
export let onCancel;
|
||||
|
||||
/** @type {HTMLDialogElement|null} */
|
||||
let dialogEl = null;
|
||||
|
||||
/** @type {HTMLButtonElement|null} */
|
||||
let cancelBtn = null;
|
||||
|
||||
export function open() {
|
||||
dialogEl?.showModal();
|
||||
requestAnimationFrame(() => cancelBtn?.focus());
|
||||
}
|
||||
|
||||
function handleConfirm() {
|
||||
dialogEl?.close();
|
||||
onConfirm();
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
dialogEl?.close();
|
||||
onCancel();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {MouseEvent} e
|
||||
*/
|
||||
function handleBackdropClick(e) {
|
||||
if (e.target === dialogEl) {
|
||||
handleCancel();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
|
||||
<dialog
|
||||
bind:this={dialogEl}
|
||||
class="confirm-dialog"
|
||||
on:click={handleBackdropClick}
|
||||
on:cancel|preventDefault={handleCancel}
|
||||
>
|
||||
<div class="dialog-content">
|
||||
<h3 class="dialog-title">{title}</h3>
|
||||
|
||||
<p class="dialog-message">"{message}"</p>
|
||||
|
||||
{#if detail}
|
||||
<p class="dialog-detail">{detail}</p>
|
||||
{/if}
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button
|
||||
bind:this={cancelBtn}
|
||||
class="btn btn-ghost"
|
||||
on:click={handleCancel}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-{confirmVariant}"
|
||||
on:click={handleConfirm}
|
||||
type="button"
|
||||
>
|
||||
{confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
.confirm-dialog {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
max-width: min(360px, calc(100vw - 2rem));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.confirm-dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background-color: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.dialog-message {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--spacing-xs) 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.dialog-detail {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--spacing-lg) 0;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-size-sm);
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
min-height: 40px;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--color-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
/** @type {string} */
|
||||
export let message;
|
||||
|
||||
/** @type {{ label: string, handler: () => void }|undefined} */
|
||||
export let action = undefined;
|
||||
|
||||
/** @type {number} */
|
||||
export let duration = 5000;
|
||||
|
||||
/** @type {() => void} */
|
||||
export let onDismiss;
|
||||
|
||||
/** @type {ReturnType<typeof setTimeout>|null} */
|
||||
let timer = null;
|
||||
|
||||
function startTimer() {
|
||||
if (duration > 0) {
|
||||
timer = setTimeout(() => {
|
||||
onDismiss();
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
function clearTimer() {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function handleAction() {
|
||||
clearTimer();
|
||||
if (action) action.handler();
|
||||
onDismiss();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
startTimer();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
clearTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="toast" transition:fly={{ y: 20, duration: 200 }}>
|
||||
<span class="toast-message">{message}</span>
|
||||
{#if action}
|
||||
<button class="toast-action" on:click={handleAction} type="button">
|
||||
{action.label}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: calc(3.5rem + var(--spacing-md));
|
||||
left: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background-color: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-md);
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-primary);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toast-action {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: 0.25rem;
|
||||
white-space: nowrap;
|
||||
min-width: unset;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.toast-action:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -140,6 +140,55 @@ function createTasksStore() {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Start task timer (optimistic)
|
||||
* @param {string} uuid
|
||||
*/
|
||||
async startTask(uuid) {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
update(tasks => tasks.map(t =>
|
||||
t.uuid === uuid ? { ...t, start: now } : t
|
||||
));
|
||||
try {
|
||||
const updated = await tasksAPI.start(uuid);
|
||||
update(tasks => tasks.map(t =>
|
||||
t.uuid === uuid ? updated : t
|
||||
));
|
||||
} catch (error) {
|
||||
update(tasks => tasks.map(t =>
|
||||
t.uuid === uuid ? { ...t, start: null } : t
|
||||
));
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop task timer (optimistic)
|
||||
* @param {string} uuid
|
||||
*/
|
||||
async stopTask(uuid) {
|
||||
/** @type {number|null} */
|
||||
let prevStart = null;
|
||||
update(tasks => tasks.map(t => {
|
||||
if (t.uuid === uuid) {
|
||||
prevStart = t.start;
|
||||
return { ...t, start: null };
|
||||
}
|
||||
return t;
|
||||
}));
|
||||
try {
|
||||
const updated = await tasksAPI.stop(uuid);
|
||||
update(tasks => tasks.map(t =>
|
||||
t.uuid === uuid ? updated : t
|
||||
));
|
||||
} catch (error) {
|
||||
update(tasks => tasks.map(t =>
|
||||
t.uuid === uuid ? { ...t, start: prevStart } : t
|
||||
));
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Complete task
|
||||
* @param {string} uuid
|
||||
|
||||
Reference in New Issue
Block a user