115 lines
3.8 KiB
Svelte
115 lines
3.8 KiB
Svelte
<script>
|
|
import { getTasks, createTask, completeTask, deleteTask } from '$lib/stores/tasks.svelte.js';
|
|
const tasks = getTasks();
|
|
import { ChevronDown, Timer } from 'lucide-svelte';
|
|
|
|
function startTimer(task, duration = 120) {
|
|
window.dispatchEvent(new CustomEvent('kon:start-timer', {
|
|
detail: { id: task.id, text: task.text, duration }
|
|
}));
|
|
}
|
|
|
|
let { wipLimit = 3 } = $props();
|
|
|
|
let newTaskText = $state('');
|
|
let showOverflow = $state(false);
|
|
|
|
let activeTasks = $derived(tasks.filter(t => !t.done));
|
|
let visibleTasks = $derived(activeTasks.slice(0, wipLimit));
|
|
let overflowTasks = $derived(activeTasks.slice(wipLimit));
|
|
let hasOverflow = $derived(overflowTasks.length > 0);
|
|
|
|
async function handleAdd() {
|
|
const text = newTaskText.trim();
|
|
if (!text) return;
|
|
await createTask(text, { bucket: 'inbox' });
|
|
newTaskText = '';
|
|
}
|
|
|
|
function handleKeydown(e) {
|
|
if (e.key === 'Enter') handleAdd();
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<!-- Add task input -->
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="text"
|
|
bind:value={newTaskText}
|
|
onkeydown={handleKeydown}
|
|
placeholder="Add a task…"
|
|
class="flex-1 px-3 py-2 rounded-lg bg-bg-input border border-border-subtle text-text text-[13px]
|
|
placeholder:text-text-tertiary focus:border-accent focus:outline-none"
|
|
data-no-transition
|
|
/>
|
|
</div>
|
|
|
|
<!-- Active tasks (WIP-limited) -->
|
|
{#if visibleTasks.length === 0}
|
|
<p class="text-[12px] text-text-tertiary text-center py-4">No active tasks</p>
|
|
{:else}
|
|
<div class="flex flex-col gap-1">
|
|
{#each visibleTasks as task (task.id)}
|
|
<div class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-hover group"
|
|
style="transition-duration: var(--duration-ui)">
|
|
<button
|
|
class="w-4 h-4 rounded border border-border-subtle flex items-center justify-center flex-shrink-0
|
|
hover:border-accent"
|
|
onclick={() => completeTask(task.id)}
|
|
aria-label="Complete task"
|
|
>
|
|
</button>
|
|
<span class="text-[13px] text-text flex-1 min-w-0 truncate">{task.text}</span>
|
|
<button
|
|
class="text-text-tertiary hover:text-accent opacity-0 group-hover:opacity-100"
|
|
style="transition: opacity var(--duration-ui)"
|
|
onclick={() => startTimer(task)}
|
|
aria-label="Start 2-minute timer"
|
|
title="Just start — 2 minutes"
|
|
>
|
|
<Timer size={14} aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
class="text-text-tertiary hover:text-danger opacity-0 group-hover:opacity-100 text-[11px]"
|
|
onclick={() => deleteTask(task.id)}
|
|
aria-label="Delete task"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Overflow -->
|
|
{#if hasOverflow}
|
|
<button
|
|
class="flex items-center gap-1.5 text-[11px] text-text-tertiary hover:text-text-secondary px-3"
|
|
onclick={() => showOverflow = !showOverflow}
|
|
>
|
|
<ChevronDown size={12} class="transform {showOverflow ? 'rotate-180' : ''}" aria-hidden="true"
|
|
style="transition: transform var(--duration-ui)" />
|
|
{overflowTasks.length} more in your list
|
|
</button>
|
|
|
|
{#if showOverflow}
|
|
<div class="flex flex-col gap-1 opacity-60">
|
|
{#each overflowTasks as task (task.id)}
|
|
<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg">
|
|
<div class="w-3 h-3 rounded border border-border-subtle flex-shrink-0"></div>
|
|
<span class="text-[12px] text-text-secondary truncate">{task.text}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
|
|
<!-- WIP indicator -->
|
|
{#if activeTasks.length > 0}
|
|
<p class="text-[10px] text-text-tertiary text-right">
|
|
{Math.min(activeTasks.length, wipLimit)}/{wipLimit} active
|
|
</p>
|
|
{/if}
|
|
</div>
|