joakim/gems
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): update TaskItem and TaskList for single-screen design

Browse Source 
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:
Joakim
2026-02-14 17:30:02 +01:00
parent ac0fd6c72f
commit a6cd0ea41d
2 changed files with 109 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
opal-web/src/lib/components/TaskItem.svelte
+77 -75
View File
@@ -1,65 +1,66 @@
<script> <script>
import { isToday as isTodayFn } from 'date-fns';
import { formatRelative, isOverdue } from '$lib/utils/dates.js'; import { formatRelative, isOverdue } from '$lib/utils/dates.js';
import SwipeAction from './SwipeAction.svelte';
import Checkbox from './ui/Checkbox.svelte'; import Checkbox from './ui/Checkbox.svelte';
/** /**
* @type {import('$lib/api/types.js').Task} * @type {import('$lib/api/types.js').Task}
*/ */
export let task; export let task;
/** /**
* @type {(uuid: string) => void} * @type {(uuid: string) => void}
*/ */
export let onToggle; export let onComplete;
/** $: overdue = task.due && isOverdue(task.due);
* @type {(uuid: string) => void} $: dueToday = task.due && isTodayFn(new Date(task.due * 1000));
*/
export let onClick;
$: isDue = task.due && isOverdue(task.due);
$: priorityLabel = ['Low', 'Default', 'Medium', 'High'][task.priority];
</script> </script>
<div class="task-item" on:click={() => onClick(task.uuid)} role="button" tabindex="0"> <SwipeAction onSwipe={() => onComplete(task.uuid)}>
<div class="task-checkbox" on:click|stopPropagation={() => onToggle(task.uuid)}> <div class="task-item">
<Checkbox checked={task.status === 'C'} /> <div class="task-checkbox" on:click|stopPropagation={() => onComplete(task.uuid)} role="button" tabindex="-1">
</div> <Checkbox checked={task.status === 'C'} />
<div class="task-content">
<div class="task-header">
<span class="task-description" class:completed={task.status === 'C'}>
{task.description}
</span>
</div> </div>
<div class="task-meta"> <div class="task-content">
{#if task.project} <div class="task-header">
<span class="meta-item project">{task.project}</span> <span class="task-description" class:completed={task.status === 'C'}>
{/if} {task.description}
{#if task.priority > 1}
<span class="meta-item priority priority-{task.priority}">
{priorityLabel}
</span> </span>
{/if} </div>
{#if task.due} <div class="task-meta">
<span class="meta-item due" class:overdue={isDue}> {#if task.project}
{formatRelative(task.due)} <span class="meta-item project">{task.project}</span>
</span> {/if}
{/if}
{#if task.priority === 3}
{#if task.tags && task.tags.length > 0} <span class="meta-item priority-high">High</span>
<div class="tags"> {:else if task.priority === 2}
{#each task.tags as tag} <span class="meta-item priority-medium">Med</span>
<span class="tag">{tag}</span> {:else if task.priority === 0}
{/each} <span class="meta-item priority-low">Low</span>
</div> {/if}
{/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> </div>
</div> </SwipeAction>
<style> <style>
.task-item { .task-item {
@@ -68,91 +69,92 @@
padding: var(--spacing-md); padding: var(--spacing-md);
background-color: var(--bg-primary); background-color: var(--bg-primary);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
cursor: pointer;
transition: background-color 0.2s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.task-item:hover {
background-color: var(--bg-secondary);
}
.task-item:active {
background-color: var(--bg-tertiary);
}
.task-checkbox { .task-checkbox {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding-top: 0.125rem; padding-top: 0.125rem;
cursor: pointer;
} }
.task-content { .task-content {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
.task-header { .task-header {
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
} }
.task-description { .task-description {
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--text-primary); color: var(--text-primary);
word-break: break-word; word-break: break-word;
} }
.task-description.completed { .task-description.completed {
text-decoration: line-through; text-decoration: line-through;
color: var(--text-secondary); color: var(--text-secondary);
} }
.task-meta { .task-meta {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--spacing-xs); gap: var(--spacing-xs);
align-items: center; align-items: center;
} }
.meta-item { .meta-item {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
padding: 0.125rem 0.5rem; padding: 0.125rem 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
font-weight: 500; font-weight: 500;
} }
.project { .project {
background-color: #e0e7ff; background-color: #e0e7ff;
color: #4338ca; color: #4338ca;
} }
.priority { .priority-high {
background-color: #fef3c7;
color: #92400e;
}
.priority-3 {
background-color: #fee2e2; background-color: #fee2e2;
color: #991b1b; color: #991b1b;
} }
.priority-medium {
background-color: #fef3c7;
color: #92400e;
}
.priority-low {
background-color: var(--bg-tertiary);
color: var(--text-tertiary);
}
.due { .due {
background-color: #dbeafe; background-color: #dbeafe;
color: #1e40af; color: #1e40af;
} }
.due.due-today {
background-color: #fef3c7;
color: #92400e;
}
.due.overdue { .due.overdue {
background-color: #fee2e2; background-color: #fee2e2;
color: #991b1b; color: #991b1b;
} }
.tags { .tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem; gap: 0.25rem;
} }
.tag { .tag {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
padding: 0.125rem 0.5rem; padding: 0.125rem 0.5rem;
opal-web/src/lib/components/TaskList.svelte
+32 -20
View File
@@ -1,23 +1,35 @@
<script> <script>
import TaskItem from './TaskItem.svelte'; import TaskItem from './TaskItem.svelte';
/** /**
* @type {import('$lib/api/types.js').Task[]} * @type {import('$lib/api/types.js').Task[]}
*/ */
export let tasks = []; export let tasks = [];
/** /**
* @type {(uuid: string) => void} * @type {(uuid: string) => void}
*/ */
export let onToggle; export let onComplete;
/**
* @type {(uuid: string) => void}
*/
export let onTaskClick;
export let loading = false; 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> </script>
<div class="task-list"> <div class="task-list">
@@ -35,10 +47,9 @@
</div> </div>
{:else} {:else}
{#each tasks as task (task.uuid)} {#each tasks as task (task.uuid)}
<TaskItem <TaskItem
{task} {task}
onToggle={onToggle} {onComplete}
onClick={onTaskClick}
/> />
{/each} {/each}
{/if} {/if}
@@ -46,12 +57,12 @@
<style> <style>
.task-list { .task-list {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background-color: var(--bg-primary); background-color: var(--bg-primary);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
} }
.loading-container { .loading-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -60,7 +71,7 @@
padding: var(--spacing-xl); padding: var(--spacing-xl);
gap: var(--spacing-md); gap: var(--spacing-md);
} }
.empty-state { .empty-state {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -68,15 +79,16 @@
justify-content: center; justify-content: center;
padding: var(--spacing-xl); padding: var(--spacing-xl);
text-align: center; text-align: center;
height: 100%;
} }
.empty-icon { .empty-icon {
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
color: var(--text-tertiary); color: var(--text-tertiary);
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
} }
.empty-message { .empty-message {
color: var(--text-secondary); color: var(--text-secondary);
font-size: var(--font-size-lg); font-size: var(--font-size-lg);