work on task list

knowledge.md

@@ -1,36 +1,52 @@
 # TaskRatchet Web App
 
+## Task Status Behavior
+
+- Pending tasks should have enabled controls (edit button, checkbox)
+- Task status must persist across page refreshes
+- Some controls should be disabled for non-pending tasks
+- Task status determines available actions:
+  - Pending: Can edit, complete, uncle, copy
+  - Complete: Can mark incomplete, copy
+  - Expired: Can copy
+
 ## Future Improvements
 
 ### UI/UX
+
 - Add loading states for actions (uncle, edit, etc.)
 - Improve mobile responsiveness
 - Test dark mode thoroughly
 - Add keyboard navigation
 - Add ARIA labels for better accessibility
 
 ### Error Handling
+
 - Add error handling for failed API calls
 - Add error boundaries for component failures
 
 ### Testing
+
 - Add unit tests for new Svelte components
 - Test performance with large task lists
 - Test across different browsers
 - Add end-to-end tests for critical paths
 
 ### Features
+
 - Consider adding task sorting options
 - Consider adding task filtering by status
 - Consider adding task categories or tags
 
 ## Style Guide
+
 - Keep components minimal and focused
 - Use CSS variables for theming
 - Follow BEM naming convention for CSS
 - Use TypeScript for type safety
 
 ## Architecture
+
 - Components should be self-contained
 - State management should be simple and local when possible
 - Modal state should be managed by the modal component

src/components/task.svelte

@@ -9,7 +9,10 @@
 	let showUncleConfirm = false;
 	let showEditModal = false;
 
-	export let task: TaskType;
+	export let task: TaskType = {
+		...task,
+		status: task?.complete ? 'complete' : (task?.status || 'pending')
+	};
 	export let page: 'next' | 'archive';
 	export let onCopy: (task: TaskType) => void;
 	export let onEdit: (task: TaskType) => void;