feat(web): update TaskItem and TaskList for single-screen design
TaskItem: remove onClick navigation, wrap in SwipeAction for swipe-to-complete, update priority colors (H=red, M=amber, L=gray, default=hidden), add due-today amber color. TaskList: accept activeReport prop for context-aware empty states, replace onToggle/onTaskClick with onComplete, make scrollable with flex:1 and overflow-y:auto. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,65 +1,66 @@
|
||||
<script>
|
||||
import { isToday as isTodayFn } from 'date-fns';
|
||||
import { formatRelative, isOverdue } from '$lib/utils/dates.js';
|
||||
import SwipeAction from './SwipeAction.svelte';
|
||||
import Checkbox from './ui/Checkbox.svelte';
|
||||
|
||||
|
||||
/**
|
||||
* @type {import('$lib/api/types.js').Task}
|
||||
*/
|
||||
export let task;
|
||||
|
||||
|
||||
/**
|
||||
* @type {(uuid: string) => void}
|
||||
*/
|
||||
export let onToggle;
|
||||
|
||||
/**
|
||||
* @type {(uuid: string) => void}
|
||||
*/
|
||||
export let onClick;
|
||||
|
||||
$: isDue = task.due && isOverdue(task.due);
|
||||
$: priorityLabel = ['Low', 'Default', 'Medium', 'High'][task.priority];
|
||||
export let onComplete;
|
||||
|
||||
$: overdue = task.due && isOverdue(task.due);
|
||||
$: dueToday = task.due && isTodayFn(new Date(task.due * 1000));
|
||||
</script>
|
||||
|
||||
<div class="task-item" on:click={() => onClick(task.uuid)} role="button" tabindex="0">
|
||||
<div class="task-checkbox" on:click|stopPropagation={() => onToggle(task.uuid)}>
|
||||
<Checkbox checked={task.status === 'C'} />
|
||||
</div>
|
||||
|
||||
<div class="task-content">
|
||||
<div class="task-header">
|
||||
<span class="task-description" class:completed={task.status === 'C'}>
|
||||
{task.description}
|
||||
</span>
|
||||
<SwipeAction onSwipe={() => onComplete(task.uuid)}>
|
||||
<div class="task-item">
|
||||
<div class="task-checkbox" on:click|stopPropagation={() => onComplete(task.uuid)} role="button" tabindex="-1">
|
||||
<Checkbox checked={task.status === 'C'} />
|
||||
</div>
|
||||
|
||||
<div class="task-meta">
|
||||
{#if task.project}
|
||||
<span class="meta-item project">{task.project}</span>
|
||||
{/if}
|
||||
|
||||
{#if task.priority > 1}
|
||||
<span class="meta-item priority priority-{task.priority}">
|
||||
{priorityLabel}
|
||||
|
||||
<div class="task-content">
|
||||
<div class="task-header">
|
||||
<span class="task-description" class:completed={task.status === 'C'}>
|
||||
{task.description}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if task.due}
|
||||
<span class="meta-item due" class:overdue={isDue}>
|
||||
{formatRelative(task.due)}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if task.tags && task.tags.length > 0}
|
||||
<div class="tags">
|
||||
{#each task.tags as tag}
|
||||
<span class="tag">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="task-meta">
|
||||
{#if task.project}
|
||||
<span class="meta-item project">{task.project}</span>
|
||||
{/if}
|
||||
|
||||
{#if task.priority === 3}
|
||||
<span class="meta-item priority-high">High</span>
|
||||
{:else if task.priority === 2}
|
||||
<span class="meta-item priority-medium">Med</span>
|
||||
{:else if task.priority === 0}
|
||||
<span class="meta-item priority-low">Low</span>
|
||||
{/if}
|
||||
|
||||
{#if task.due}
|
||||
<span class="meta-item due" class:overdue class:due-today={dueToday}>
|
||||
{formatRelative(task.due)}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if task.tags && task.tags.length > 0}
|
||||
<div class="tags">
|
||||
{#each task.tags as tag}
|
||||
<span class="tag">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwipeAction>
|
||||
|
||||
<style>
|
||||
.task-item {
|
||||
@@ -68,91 +69,92 @@
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--bg-primary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.task-item:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.task-item:active {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
|
||||
.task-checkbox {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: 0.125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.task-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
.task-header {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
|
||||
.task-description {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
.task-description.completed {
|
||||
text-decoration: line-through;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
|
||||
.task-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xs);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.meta-item {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.project {
|
||||
background-color: #e0e7ff;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.priority {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.priority-3 {
|
||||
|
||||
.priority-high {
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
|
||||
.priority-medium {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.priority-low {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.due {
|
||||
background-color: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
|
||||
.due.due-today {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.due.overdue {
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
.tag {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 0.125rem 0.5rem;
|
||||
|
||||
@@ -1,23 +1,35 @@
|
||||
<script>
|
||||
import TaskItem from './TaskItem.svelte';
|
||||
|
||||
|
||||
/**
|
||||
* @type {import('$lib/api/types.js').Task[]}
|
||||
*/
|
||||
export let tasks = [];
|
||||
|
||||
|
||||
/**
|
||||
* @type {(uuid: string) => void}
|
||||
*/
|
||||
export let onToggle;
|
||||
|
||||
/**
|
||||
* @type {(uuid: string) => void}
|
||||
*/
|
||||
export let onTaskClick;
|
||||
|
||||
export let onComplete;
|
||||
|
||||
export let loading = false;
|
||||
export let emptyMessage = 'No tasks found';
|
||||
export let activeReport = 'list';
|
||||
|
||||
/** @type {Record<string, string>} */
|
||||
const emptyMessages = {
|
||||
list: 'No pending tasks. Add one below!',
|
||||
completed: 'No completed tasks yet.',
|
||||
overdue: 'Nothing overdue. Nice work!',
|
||||
waiting: 'No waiting tasks.',
|
||||
active: 'No active tasks.',
|
||||
next: 'No next tasks.',
|
||||
ready: 'No ready tasks.',
|
||||
recurring: 'No recurring tasks.',
|
||||
template: 'No template tasks.',
|
||||
newest: 'No tasks found.',
|
||||
oldest: 'No tasks found.'
|
||||
};
|
||||
|
||||
$: emptyMessage = emptyMessages[activeReport] || 'No tasks found';
|
||||
</script>
|
||||
|
||||
<div class="task-list">
|
||||
@@ -35,10 +47,9 @@
|
||||
</div>
|
||||
{:else}
|
||||
{#each tasks as task (task.uuid)}
|
||||
<TaskItem
|
||||
<TaskItem
|
||||
{task}
|
||||
onToggle={onToggle}
|
||||
onClick={onTaskClick}
|
||||
{onComplete}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
@@ -46,12 +57,12 @@
|
||||
|
||||
<style>
|
||||
.task-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -60,7 +71,7 @@
|
||||
padding: var(--spacing-xl);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -68,15 +79,16 @@
|
||||
justify-content: center;
|
||||
padding: var(--spacing-xl);
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.empty-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
|
||||
.empty-message {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-lg);
|
||||
|
||||
Reference in New Issue
Block a user