e.stopPropagation()}
@@ -228,13 +255,6 @@
pointer-events: none;
}
- .hidden-checkbox {
- position: absolute;
- opacity: 0;
- width: 0;
- height: 0;
- }
-
.todo-label {
user-select: none;
font-weight: 600;
@@ -246,14 +266,6 @@
font-weight: 100;
}
- .amount-label {
- font-size: 0.875rem;
- color: rgba(255, 255, 255, 0.6);
- margin-right: 0.5rem;
- min-width: 3rem;
- text-align: right;
- }
-
.edit-container {
display: flex;
gap: 0.5rem;
@@ -261,16 +273,45 @@
flex: 1;
}
- .amount-input {
- flex: 0 0 6rem;
- }
-
.title-input {
flex: 2;
}
- .category-input {
+ .category-input-wrapper {
+ position: relative;
flex: 1;
}
+ .category-input {
+ width: 100%;
+ }
+
+ .autocomplete-hint {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ margin-top: 0.25rem;
+ padding: 0.25rem 0.5rem;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+ font-size: 0.75rem;
+ color: rgba(255, 255, 255, 0.7);
+ white-space: nowrap;
+ z-index: 10;
+ pointer-events: none;
+ }
+
+ .autocomplete-hint kbd {
+ display: inline-block;
+ padding: 0.125rem 0.375rem;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 3px;
+ font-size: 0.7rem;
+ font-family: monospace;
+ font-weight: 600;
+ margin-right: 0.25rem;
+ }
+
diff --git a/frontend/src/lib/components/todo/TodoInput.svelte b/frontend/src/lib/components/todo/TodoInput.svelte
index a4d38046..a16f6d54 100644
--- a/frontend/src/lib/components/todo/TodoInput.svelte
+++ b/frontend/src/lib/components/todo/TodoInput.svelte
@@ -5,21 +5,83 @@
import Button from 'carbon-components-svelte/src/Button/Button.svelte';
import TextInput from 'carbon-components-svelte/src/TextInput/TextInput.svelte';
import Add from 'carbon-icons-svelte/lib/Add.svelte';
+ import { onMount } from 'svelte';
// 2. PROPS
- let { listId, onTodoAdded }: { listId: string; onTodoAdded?: () => void } = $props();
+ let {
+ listId,
+ categories,
+ onTodoAdded,
+ }: { listId: string; categories: string[]; onTodoAdded?: () => void } = $props();
// 4. STATE
let newTodoName = $state('');
- let newTodoAmount = $state('1x');
let newTodoCategory = $state('');
+ // 5. DERIVED
+ let categoryAutocomplete = $derived.by(() => {
+ if (!newTodoCategory || newTodoCategory.length === 0) return null;
+
+ const matches = categories.filter((cat) =>
+ cat.toLowerCase().startsWith(newTodoCategory.toLowerCase()),
+ );
+
+ return matches.length > 0 ? matches[0] : null;
+ });
+
+ // 7. LIFECYCLE
+ onMount(() => {
+ // Listen for category selection from category history
+ const handleCategorySelected = ((e: CustomEvent) => {
+ const context = e.detail.context;
+ const activeElement = document.activeElement as HTMLInputElement;
+ const wrapper = activeElement?.closest('[data-category-input="new-todo"]');
+
+ if (context === 'new-todo' || wrapper) {
+ newTodoCategory = e.detail.category;
+ }
+ }) as EventListener;
+
+ window.addEventListener('category-selected', handleCategorySelected);
+
+ return () => {
+ window.removeEventListener('category-selected', handleCategorySelected);
+ };
+ });
+
// 8. FUNCTIONS
+ const autocompleteCategory = () => {
+ if (!newTodoCategory) return;
+
+ const matches = categories.filter((cat) =>
+ cat.toLowerCase().startsWith(newTodoCategory.toLowerCase()),
+ );
+
+ if (matches.length > 0) {
+ newTodoCategory = matches[0];
+ }
+ };
+
+ const handleCategoryKeydown = (e: KeyboardEvent) => {
+ if (e.key === 'Tab') {
+ e.preventDefault();
+ autocompleteCategory();
+ } else if (e.key === 'Enter') {
+ saveTodo();
+ }
+ };
+
const saveTodo = () => {
if (newTodoName) {
todoStore.update((todoListArray) => {
return todoListArray.map((list) => {
if (list.id === listId) {
+ const currentCategories = list.categories || [];
+ const updatedCategories =
+ newTodoCategory && !currentCategories.includes(newTodoCategory)
+ ? [...currentCategories, newTodoCategory]
+ : currentCategories;
+
return {
...list,
todos: [
@@ -28,18 +90,17 @@
id: crypto.randomUUID(),
title: newTodoName,
done: false,
- amount: newTodoAmount || '1x',
category: newTodoCategory || '',
},
],
history: Array.from(new Set([...list.history, newTodoName])),
+ categories: updatedCategories,
};
}
return list;
});
});
newTodoName = '';
- newTodoAmount = '1x';
newTodoCategory = '';
}
if (onTodoAdded) {
@@ -51,26 +112,27 @@
{#if $initialized}