pure-todo

As a frontend developer, implement the HomeHeader section for the Home page. The section renders a centered hero header using framer-motion: an h1 with className 'hh-title' displaying 'pure-todo' and a tagline paragraph 'A simple task list', both animated with opacity/scale entrance (initial: opacity 0, scale 0.95; animate: opacity 1, scale 1) with easeOut transitions and a 0.2s stagger delay between title and tagline. Apply HomeHeader.css for section layout and typography styles.

As a frontend developer, implement the HomeTaskInput section for the Home page. The component uses useState hooks for task text, isFocused, showFeedback, and validationError state. Features include: a controlled text input with MAX_CHARS=120 character limit enforced in handleChange, WARN_THRESHOLD=100 for warning state, Enter key submission via handleKeyDown that validates the trimmed task and triggers a flash overlay animation (AnimatePresence with rgba(42,157,143,0.06) background fade) on success with 1200ms auto-clear, dynamic progress color via getProgressColor() returning var(--secondary) at limit / var(--accent) at warning / var(--primary) otherwise, an elastic bottom border rendered as a framer-motion div with animated height and background color, char count display with conditional CSS classes hti-char-count--warning and hti-char-count--limit, and a validation error message display. Apply HomeTaskInput.css.

As a frontend developer, implement the HomeTaskList section for the Home page. The component uses framer-motion Reorder.Group/Reorder.Item for drag-and-drop reordering along an axis='y'. INITIAL_TASKS array seeds 5 tasks with id, text, and completed fields. Sub-components include: CheckIcon (SVG polyline checkmark), DragHandle (3-row dot grid with motion.div opacity prop), EditIcon (SVG pencil path), TrashIcon (SVG trash can), EmptyIcon (SVG circle with checkmark path), and TaskCard which manages local isHovered, isEditing, and editText state. TaskCard supports inline editing via an edit text input that submits on Enter/blur via handleEditSubmit, toggling completed state, and delete. The task list uses AnimatePresence with popLayout mode for exit animations. Task cards display a drag handle that fades in on hover, a circular checkbox with htl-checkbox--checked styling when completed, task text with line-through when completed, and hover-revealed edit/delete action buttons. Apply HomeTaskList.css for card layout, drag styles, and responsive grid.

As a backend developer, create the Task SQLAlchemy model with fields: id (PK, auto-increment), title (String, required), is_completed (Boolean, default False), order_index (Integer, default 0), created_at (DateTime), updated_at (DateTime). Generate Alembic migration for the tasks table. Ensure the model supports all CRUD operations needed by the task management API.

As a frontend developer, configure the global theme and design system for the pure-todo app. Set up CSS variables in theme.css for the color palette: primary, primary_light, secondary, accent, highlight, bg, surface, text, text_muted, border. Configure global.css with base resets, typography (Inter font), and shared utility classes. Ensure responsive breakpoints are defined. This foundational setup is required before all section-level tasks render correctly.