Merge branch 'feat/web-tier1-features'
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,253 @@
|
||||
<script>
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
|
||||
/** @type {boolean} */
|
||||
export let open = false;
|
||||
|
||||
/** @type {() => void} */
|
||||
export let onClose;
|
||||
|
||||
let dragOffset = 0;
|
||||
let dragging = false;
|
||||
let locked = false;
|
||||
let mounted = 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 — managed in afterUpdate to avoid SSR document access
|
||||
afterUpdate(() => {
|
||||
if (!mounted) return;
|
||||
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(() => {
|
||||
mounted = true;
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
|
||||
return () => {
|
||||
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 a11y-interactive-supports-focus -->
|
||||
<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>
|
||||
@@ -2,12 +2,23 @@
|
||||
/**
|
||||
* @type {() => void}
|
||||
*/
|
||||
export let onSwipe;
|
||||
export let onSwipeRight;
|
||||
|
||||
/**
|
||||
* @type {() => void}
|
||||
*/
|
||||
export let onSwipeLeft;
|
||||
|
||||
/**
|
||||
* @type {'start' | 'stop'}
|
||||
*/
|
||||
export let leftIcon;
|
||||
|
||||
let offsetX = 0;
|
||||
let swiping = false;
|
||||
let locked = false;
|
||||
let completed = false;
|
||||
let triggered = false;
|
||||
|
||||
/** @type {number|null} */
|
||||
let startX = null;
|
||||
@@ -52,8 +63,7 @@
|
||||
|
||||
if (swiping) {
|
||||
if (e.cancelable) e.preventDefault();
|
||||
// Only allow right swipe
|
||||
offsetX = Math.max(0, deltaX);
|
||||
offsetX = deltaX;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,11 +74,20 @@
|
||||
}
|
||||
|
||||
if (offsetX >= THRESHOLD) {
|
||||
// Right swipe — complete (row collapses)
|
||||
completed = true;
|
||||
// Animate to full width before firing callback
|
||||
offsetX = window.innerWidth;
|
||||
setTimeout(() => {
|
||||
onSwipe();
|
||||
onSwipeRight();
|
||||
}, 200);
|
||||
} else if (offsetX <= -THRESHOLD) {
|
||||
// Left swipe — start/stop (row stays)
|
||||
triggered = true;
|
||||
offsetX = -window.innerWidth;
|
||||
setTimeout(() => {
|
||||
onSwipeLeft();
|
||||
offsetX = 0;
|
||||
triggered = false;
|
||||
}, 200);
|
||||
} else {
|
||||
offsetX = 0;
|
||||
@@ -86,7 +105,8 @@
|
||||
startY = null;
|
||||
}
|
||||
|
||||
$: progress = Math.min(offsetX / THRESHOLD, 1);
|
||||
$: rightProgress = offsetX > 0 ? Math.min(offsetX / THRESHOLD, 1) : 0;
|
||||
$: leftProgress = offsetX < 0 ? Math.min(Math.abs(offsetX) / THRESHOLD, 1) : 0;
|
||||
$: transitioning = !swiping && offsetX !== 0;
|
||||
</script>
|
||||
|
||||
@@ -97,15 +117,28 @@
|
||||
on:touchend={handleTouchEnd}
|
||||
on:touchcancel={resetState}
|
||||
>
|
||||
<div
|
||||
class="swipe-background"
|
||||
style:opacity={progress}
|
||||
>
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<!-- Left background (revealed on RIGHT swipe — complete) -->
|
||||
<div class="swipe-bg swipe-bg-right"
|
||||
style:opacity={rightProgress}>
|
||||
<svg class="swipe-icon check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Right background (revealed on LEFT swipe — start/stop) -->
|
||||
<div class="swipe-bg swipe-bg-left"
|
||||
style:opacity={leftProgress}>
|
||||
{#if leftIcon === 'stop'}
|
||||
<svg class="swipe-icon fill-icon" viewBox="0 0 24 24">
|
||||
<rect x="6" y="6" width="12" height="12" rx="1" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="swipe-icon fill-icon" viewBox="0 0 24 24">
|
||||
<polygon points="6,4 20,12 6,20" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="swipe-content"
|
||||
class:transitioning
|
||||
@@ -122,21 +155,44 @@
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.swipe-background {
|
||||
.swipe-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: var(--color-success);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
.swipe-bg-right {
|
||||
background-color: var(--color-success);
|
||||
padding-left: var(--spacing-lg);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.swipe-bg-left {
|
||||
background-color: var(--color-primary);
|
||||
padding-right: var(--spacing-lg);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.swipe-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.fill-icon {
|
||||
fill: white;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.swipe-content {
|
||||
position: relative;
|
||||
background-color: var(--bg-primary);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -14,10 +14,21 @@
|
||||
*/
|
||||
export let onComplete;
|
||||
|
||||
/**
|
||||
* @type {(task: import('$lib/api/types.js').Task) => void}
|
||||
*/
|
||||
export let onTap;
|
||||
|
||||
/**
|
||||
* @type {(uuid: string) => void}
|
||||
*/
|
||||
export let onStartStop;
|
||||
|
||||
let completing = false;
|
||||
|
||||
$: overdue = task.due && isOverdue(task.due);
|
||||
$: dueToday = task.due && isTodayFn(new Date(task.due * 1000));
|
||||
$: active = task.start !== null && task.start !== undefined;
|
||||
|
||||
function handleCheckbox() {
|
||||
if (completing) return;
|
||||
@@ -34,13 +45,18 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<SwipeAction onSwipe={() => onComplete(task.uuid)}>
|
||||
<div class="task-item" class:completing on:transitionend={handleTransitionEnd}>
|
||||
<SwipeAction
|
||||
onSwipeRight={() => onComplete(task.uuid)}
|
||||
onSwipeLeft={() => onStartStop(task.uuid)}
|
||||
leftIcon={active ? 'stop' : 'start'}
|
||||
>
|
||||
<div class="task-item" class:completing class:active on:transitionend={handleTransitionEnd}>
|
||||
<button class="task-checkbox" on:click|stopPropagation={handleCheckbox} type="button" aria-label="Complete task">
|
||||
<Checkbox checked={task.status === 'C'} />
|
||||
</button>
|
||||
|
||||
<div class="task-content">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
||||
<div class="task-content" on:click={() => onTap(task)}>
|
||||
<div class="task-header">
|
||||
<span class="task-description" class:completed={task.status === 'C'}>
|
||||
{task.description}
|
||||
@@ -48,6 +64,10 @@
|
||||
</div>
|
||||
|
||||
<div class="task-meta">
|
||||
{#if active}
|
||||
<span class="meta-item active-pill">Active</span>
|
||||
{/if}
|
||||
|
||||
{#if task.project}
|
||||
<span class="meta-item project">{task.project}</span>
|
||||
{/if}
|
||||
@@ -109,6 +129,11 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-item.active {
|
||||
border-left: 3px solid var(--color-primary);
|
||||
padding-left: calc(var(--spacing-md) - 3px);
|
||||
}
|
||||
|
||||
.task-checkbox {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
@@ -127,6 +152,7 @@
|
||||
.task-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-header {
|
||||
@@ -158,6 +184,11 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.active-pill {
|
||||
background-color: var(--color-active-bg);
|
||||
color: var(--color-active-text);
|
||||
}
|
||||
|
||||
.project {
|
||||
background-color: var(--color-project-bg);
|
||||
color: var(--color-project-text);
|
||||
|
||||
@@ -11,6 +11,16 @@
|
||||
*/
|
||||
export let onComplete;
|
||||
|
||||
/**
|
||||
* @type {(task: import('$lib/api/types.js').Task) => void}
|
||||
*/
|
||||
export let onTap;
|
||||
|
||||
/**
|
||||
* @type {(uuid: string) => void}
|
||||
*/
|
||||
export let onStartStop;
|
||||
|
||||
export let loading = false;
|
||||
export let activeReport = 'list';
|
||||
|
||||
@@ -50,6 +60,8 @@
|
||||
<TaskItem
|
||||
{task}
|
||||
{onComplete}
|
||||
{onTap}
|
||||
{onStartStop}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
<script>
|
||||
import { onMount } 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();
|
||||
return () => clearTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="toast" transition:fly={{ y: 50, 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
|
||||
|
||||
@@ -8,6 +8,10 @@
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
import TaskList from '$lib/components/TaskList.svelte';
|
||||
import InputBar from '$lib/components/InputBar.svelte';
|
||||
import BottomSheet from '$lib/components/BottomSheet.svelte';
|
||||
import TaskDetail from '$lib/components/TaskDetail.svelte';
|
||||
import Toast from '$lib/components/Toast.svelte';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
|
||||
let activeReport = 'list';
|
||||
/** @type {import('$lib/api/types.js').Task[]} */
|
||||
@@ -15,6 +19,21 @@
|
||||
let loading = true;
|
||||
let inputError = '';
|
||||
|
||||
// Bottom sheet state
|
||||
/** @type {import('$lib/api/types.js').Task|null} */
|
||||
let selectedTask = null;
|
||||
|
||||
// Undo toast state
|
||||
/** @type {{ uuid: string, description: string }|null} */
|
||||
let undoToast = null;
|
||||
|
||||
// Delete confirmation state
|
||||
/** @type {{ uuid: string, description: string }|null} */
|
||||
let deleteTarget = null;
|
||||
|
||||
/** @type {ConfirmDialog} */
|
||||
let confirmDialog;
|
||||
|
||||
// Subscribe to store
|
||||
const unsubscribe = tasksStore.subscribe(value => {
|
||||
tasks = value;
|
||||
@@ -124,12 +143,97 @@
|
||||
* @param {string} uuid
|
||||
*/
|
||||
async function handleComplete(uuid) {
|
||||
const task = tasks.find(t => t.uuid === uuid);
|
||||
if (!task) return;
|
||||
|
||||
try {
|
||||
await tasksStore.complete(uuid);
|
||||
undoToast = { uuid: task.uuid, description: task.description };
|
||||
} catch (error) {
|
||||
console.error('Failed to complete task:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUndo() {
|
||||
if (!undoToast) return;
|
||||
const { uuid } = undoToast;
|
||||
undoToast = null;
|
||||
|
||||
try {
|
||||
await tasksStore.updateTask(uuid, { status: 'P', end: null });
|
||||
await loadReport(activeReport);
|
||||
} catch (error) {
|
||||
console.error('Failed to undo completion:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} uuid
|
||||
*/
|
||||
async function handleStartStop(uuid) {
|
||||
const task = tasks.find(t => t.uuid === uuid);
|
||||
if (!task) return;
|
||||
|
||||
try {
|
||||
if (task.start) {
|
||||
await tasksStore.stopTask(uuid);
|
||||
} else {
|
||||
await tasksStore.startTask(uuid);
|
||||
}
|
||||
// Update selectedTask if it's the same task
|
||||
if (selectedTask?.uuid === uuid) {
|
||||
const updated = tasks.find(t => t.uuid === uuid);
|
||||
if (updated) selectedTask = updated;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to start/stop task:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} uuid
|
||||
* @param {Partial<import('$lib/api/types.js').Task>} updates
|
||||
*/
|
||||
async function handleUpdate(uuid, updates) {
|
||||
try {
|
||||
await tasksStore.updateTask(uuid, updates);
|
||||
// Keep selectedTask fresh
|
||||
if (selectedTask?.uuid === uuid) {
|
||||
selectedTask = { ...selectedTask, ...updates };
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update task:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} uuid
|
||||
*/
|
||||
function handleDeleteRequest(uuid) {
|
||||
const task = tasks.find(t => t.uuid === uuid)
|
||||
?? (selectedTask?.uuid === uuid ? selectedTask : null);
|
||||
if (!task) return;
|
||||
|
||||
deleteTarget = { uuid: task.uuid, description: task.description };
|
||||
confirmDialog.open();
|
||||
}
|
||||
|
||||
async function handleDeleteConfirm() {
|
||||
if (!deleteTarget) return;
|
||||
const { uuid } = deleteTarget;
|
||||
deleteTarget = null;
|
||||
selectedTask = null;
|
||||
|
||||
try {
|
||||
await tasksStore.deleteTask(uuid);
|
||||
} catch (error) {
|
||||
console.error('Failed to delete task:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeleteCancel() {
|
||||
deleteTarget = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Header {activeReport} onReportChange={handleReportChange} />
|
||||
@@ -139,9 +243,44 @@
|
||||
{loading}
|
||||
{activeReport}
|
||||
onComplete={handleComplete}
|
||||
onTap={(task) => selectedTask = task}
|
||||
onStartStop={handleStartStop}
|
||||
/>
|
||||
|
||||
<InputBar
|
||||
onSubmit={handleSubmit}
|
||||
error={inputError}
|
||||
/>
|
||||
|
||||
<BottomSheet open={selectedTask !== null} onClose={() => selectedTask = null}>
|
||||
{#if selectedTask}
|
||||
<TaskDetail
|
||||
task={selectedTask}
|
||||
onUpdate={handleUpdate}
|
||||
onStart={(uuid) => handleStartStop(uuid)}
|
||||
onStop={(uuid) => handleStartStop(uuid)}
|
||||
onDelete={handleDeleteRequest}
|
||||
onComplete={handleComplete}
|
||||
onClose={() => selectedTask = null}
|
||||
/>
|
||||
{/if}
|
||||
</BottomSheet>
|
||||
|
||||
{#if undoToast}
|
||||
<Toast
|
||||
message={'Completed "' + undoToast.description + '"'}
|
||||
action={{ label: 'Undo', handler: handleUndo }}
|
||||
onDismiss={() => undoToast = null}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDialog}
|
||||
title="Delete task?"
|
||||
message={deleteTarget?.description ?? ''}
|
||||
detail="This cannot be undone."
|
||||
confirmLabel="Delete"
|
||||
confirmVariant="danger"
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={handleDeleteCancel}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user