emerald-application

As a frontend developer, implement the HomeHero section for the Home page. Uses a custom useInView hook (IntersectionObserver, threshold 0.2) and framer-motion useAnimation controls for a multi-step SproutingPlant animation sequence: stem scaleY 0→1 (1.2s cubic ease), then three staggered leaf reveals (rotate -30→0, scale 0→1), then a bud spring-pop. The SVG plant at 140×180 viewBox includes a main stem path, two side leaf paths, and a bud, each driven by separate animation controls (stemControls, leaf1Controls, leaf2Controls, leaf3Controls, budControls). Imports HomeHero.css.

As a frontend developer, implement the CategoryExplorer section for the Home page. Renders a grid of 8 CATEGORIES (work, health, personal, shopping, learning, fitness, coding, hobbies) each with Lucide icons (Briefcase, Heart, User, ShoppingCart, BookOpen, Dumbbell, Code, Music), per-category color tokens, bgTint, related category IDs, and sample task arrays. Includes a useMouse hook tracking cursor position within the section container via getBoundingClientRect. Uses AnimatePresence for card expand/collapse showing related categories and task previews. Imports CategoryExplorer.css.

As a frontend developer, implement the GardenPlants section for the Home page. Renders GARDEN_DATA (work/personal/learning categories) each with a PlantSVG component that switches between 'fern', 'tulip', and 'cactus' SVG illustrations. PlantSVG uses framer-motion animated paths: fern has animated stem pathLength and frond d-attribute morphing based on isOpen state; pot animates scaleY from 0 on mount. Task cards display priority badges (high/medium/low) and done checkboxes with useState toggle. AnimatePresence handles card expand/collapse revealing full task lists per garden bed. Imports GardenPlants.css.

As a frontend developer, implement the PondIntro section for the Home page. Uses framer-motion useInView (once: false, amount: 0.3) on sectionRef. Features an interactive ripple scene (sceneRef) with throttled mousemove handler (~60ms via throttleRef) spawning cursor ripples stored in state (capped at 6 via slice). Three AMBIENT_RIPPLE_COUNT SVG ripples animate concentrically with AMBIENT_DURATIONS [3.2, 4.0, 5.0] and AMBIENT_DELAYS [0, 1.1, 2.2] reaching AMBIENT_MAX_RADII [180, 260, 340]. Parallax deco-layer (speed 0.2) and mid-layer (speed 0.4) use CSS var(--scroll) transform. Imports CursorRipple.css and PondIntro.css.

As a frontend developer, implement the LilyPadNotes section for the Home page. Renders NOTES_DATA (6 notes: Morning Reflections, Project Sprint Notes, Recipe Ideas, Reading List Updates, Fitness Progress, Garden Planning) with id, date, title, category, excerpt, and fullText fields. Uses useState for expanded note tracking and AnimatePresence for card expand animation revealing fullText. Implements a useCallback-based note selection handler and a useRef scroll-into-view on expand. Note cards display category badge coloring (Personal/Work/Learning/Health/Home) and date metadata. Imports LilyPadNotes.css.

As a frontend developer, implement the QuickActionsBanner section for the Home page. Renders three actions (Create New Task → /Todos, Create New Note → /Notes, Manage Categories → /Categories) using a RippleButton component. RippleButton tracks ripple state (array of Date.now() IDs, cleared after 600ms) and renders AnimatePresence ripple spans with scale 0→4, opacity 0.7→0 over 0.55s. Container uses containerVariants (staggerChildren: 0.12, delayChildren: 0.1) and itemVariants (x -30→0, scale 0.92→1, spring stiffness 320). Decorative parallax orbs use CSS var(--scroll) transform at 0.2x speed. Primary buttons turn gold (#FFD700) on hover, secondary turn tomato (#FF6347). Imports QuickActionsBanner.css.

As a frontend developer, implement the WelcomeMessage section for the Home page. Uses framer-motion useInView (once: true, margin: '-60px') on sectionRef. Features three MetricCard components (Tasks Today: 7 / '3 completed', Notes Written: 4 / 'this week', Categories: 5 / 'active'), each using a custom useCountUp hook that runs requestAnimationFrame with cubic ease-out (1 - (1-progress)^3) over 1200ms duration triggered by inView. MetricCards animate in with opacity 0→1, y 16→0, staggered by index*0.15s delay starting at 0.8s. An accent icon animates with spring (stiffness 300, damping 18) and a pulsing gold boxShadow keyframe. Decorative orbs use parallax 0.2x. Imports WelcomeMessage.css.

As a frontend developer, implement the Footer section for the Home page. Renders six FooterLink components (Home, Todos, Categories, Notes, Settings, Privacy) each with inline SVG icons. FooterLink uses framer-motion whileHover variant 'hover' triggering scale 1.05 on the anchor (spring stiffness 400, damping 25) and a 360° icon rotation over 0.6s easeInOut. An animated underline div uses variants rest/hover for width expand. The footer container entry animation staggers children. Note: this Footer component may already exist from a previous page — reuse if available. Imports Footer.css.

As a frontend developer, implement the Navbar section for the Categories page. This component (Navbar.css) is likely already built from the Home page task [0d65a61d-1382-4309-a49c-a401a75794c4] — verify it exists and wire it into the Categories page layout. The Navbar uses useState for menuOpen and scrolled states, useEffect with a passive scroll listener to toggle the nb-scrolled class at 8px scroll depth, and framer-motion for the animated SVG logo (pathLength draw animation with hidden/visible variants over 1.6s), a radial-gradient glow pulse (opacity 0.3→0.6→0.3 on 3s infinite loop), and inner facet line animations. Nav items are driven by the NAV_PAGES array (Home, Todos, Categories, Notes) with lucide-react icons. AnimatePresence handles mobile menu open/close. The Categories link should appear as the active page.

As a frontend developer, implement the NotesHeader section for the Notes page. This section renders a full header with: (1) an animated title row using framer-motion (opacity/y slide-in) containing a custom lily pad SVG icon and an h1 'Daily Notes' heading with subtitle text; (2) a date navigation row with prev/next arrow buttons (goToPrev/goToNext callbacks using addDays helper), a formatted date display via formatDate(), and a 'Today' button that resets selectedDate to new Date(); (3) a search input with clearSearch callback and AnimatePresence-driven clear button visibility; (4) a filter chip row rendering FILTER_CHIPS array ('All Notes', 'Today', 'This Week', 'This Month') with activeFilter state toggling active CSS class. State hooks: useState for selectedDate, searchQuery, activeFilter. isToday derived boolean controls Today button disabled state. Component imports from '../styles/NotesHeader.css'. This is the first/layout section for the Notes page and should establish page-level dependency on the Home page task.

Create a global CSS file (src/styles/globals.css or index.css) that defines all CSS custom properties from the SRD palette: --color-primary: #2E8B57, --color-primary-light: #66CDAA, --color-secondary: #FF6347, --color-accent: #FFD700, --color-highlight: #FFA500, --color-bg: #F5FFFA, --color-surface: rgba(46,139,87,0.8), --color-text: #2F4F4F, --color-text-muted: #708090, --color-border: rgba(47,79,79,0.2). Also set base typography (font-family, line-height, box-sizing reset) and import Google Fonts or system font stack consistent with the Emerald Garden aesthetic. This file must be imported in main.jsx so all component CSS files can reference the tokens via var(--color-*).

Create SQLAlchemy ORM models for all entities required by the SRD: 1. **Category** — id (PK), name (str, unique), color_hex (str), created_at (datetime). 2. **Todo** — id (PK), title (str, max 120), category_id (FK → Category), due_date (date, nullable), priority (enum: high/medium/low), completed (bool, default False), created_at (datetime), updated_at (datetime). 3. **Note** — id (PK), title (str, max 80), body (text, max 600), created_at (datetime), updated_at (datetime). Generate Alembic migration scripts for all three tables. Provide a seed script (scripts/seed.py) that inserts the 8 default categories (work, health, learning, personal, finance, hobbies, reading, home) referenced in CategoriesGrid and CategoryExplorer frontend tasks. Note: frontend tasks TodosList, CategoriesGrid, NotesGrid, and CategoryExplorer depend on this data layer.

As a frontend developer, implement the CategoriesHero section (CategoriesHero.css) for the Categories page. The section renders a ch-root with decorative atmospheric leaf SVGs (three ch-deco-leaf elements using the LEAF_PATH constant with staggered positioning via ch-deco-leaf--1/2/3 modifier classes). The main content block uses framer-motion containerVariants (staggerChildren: 0.1) and itemVariants (opacity 0→1, y 14→0, spring stiffness 340 damping 28). Child elements include: a breadcrumb nav with Home→Categories trail, a title row with a folder SVG icon wrapped in ch-icon-wrap plus an h1 'My Categories', a subtitle paragraph, and a STATS row rendering three stat items each with an inline SVG icon and a label string ('Organize tasks by topic', 'Track completion per category', 'Filter and search quickly'). All motion elements use initial='hidden' animate='visible'.

As a frontend developer, implement the CategoriesFilters section (CategoriesFilters.css) for the Categories page. Uses useState for searchValue, sortKey ('name'), sortDir ('asc'), viewMode ('grid'), activeFilter ('all'), and isSticky. A useEffect with passive scroll listener checks rootRef.current.getBoundingClientRect().top against 64px to toggle cf-sticky class. The top row contains a cf-search-wrap with a lucide Search icon, a controlled text input (placeholder 'Search categories...'), and an AnimatePresence-gated clear button (lucide X, scale 0.7→1 on appear). A cf-view-toggle group renders LayoutGrid and List lucide icons as toggle buttons. Below that, SORT_OPTIONS (name/date/usage) render as sort buttons that call handleSortClick — clicking the active key toggles sortDir asc/desc and shows a lucide ArrowUp icon with CSS rotation. FILTER_BADGES (all/active/personal/work/health with hex colors) render as pill buttons. A result count badge shows the static value 12.

As a frontend developer, implement the CategoriesGrid section (CategoriesGrid.css) for the Categories page. The component renders 8 static CATEGORIES (work, health, learning, personal, finance, hobbies, reading, home) each with id, name, color hex, taskCount, completedCount, createdAt, and description fields. Each category card uses motion.div with cardVariants (hidden: opacity 0 y 20 → visible: opacity 1 y 0 with staggered delay i*0.06s, cubic-bezier ease). Cards display: a colored accent bar using the category's color hex, a task completion badge using CheckIcon SVG (polyline 20 6 9 17 4 12) showing completedCount/taskCount, a CalendarIcon SVG (rect+lines) with the createdAt date, and two action buttons using EyeIcon (eye path + circle) and EditIcon (pencil path). useState manages a deleteConfirmId for inline delete confirmation. AnimatePresence shows a confirmVariants overlay (scale 0.95→1, 0.18s) with confirm/cancel buttons when a delete is triggered. The grid switches between grid and list layout based on a viewMode prop.

As a frontend developer, implement the CategoriesEmpty section (CategoriesEmpty.css) for the Categories page. This is a conditional empty-state component rendered when no categories exist. The ce-inner uses framer-motion with initial opacity 0 y 24 → animate opacity 1 y 0 (0.5s easeOut). The ce-illustration contains a 180×180 SVG with: a semi-transparent circle background, an ellipse garden soil plot with two layered ellipses and wavy soil-texture stroke paths, four wooden fence post rects with two horizontal rail rects, a sign rect (white bg, emerald stroke) with a vertical stake line and two sign-text lines, a central animated sprout (ce-sprout-sway CSS keyframe class) with a vertical stem line and two leaf path shapes (left: Q80 116 76 108 / right: Q100 112 104 104), plus additional decorative sprout elements. Below the illustration sits a heading, subtitle text, and a CTA button to create the first category.

As a frontend developer, implement the CategoriesActions section (CategoriesActions.css) for the Categories page. Uses useState for showConfirm (boolean), toastMsg (string), and toastVisible (boolean). showToast() sets the message, sets visible true, then uses setTimeout 2400ms to hide. Three handlers: handleCreate (shows 'Ready to create a new category!' toast), handleDeleteClick (sets showConfirm true), handleExport (shows 'Categories exported successfully.' toast). The cta-inner renders: a primary cta-create-btn with lucide Plus (size 18, strokeWidth 2.5) wrapped in motion.button (whileHover scale 1.03, whileTap scale 0.97, spring stiffness 340 damping 22); a cta-bulk-group with a label and two motion.buttons — cta-bulk-btn--delete (lucide Trash2 size 15) and cta-bulk-btn--export (lucide Download size 15). AnimatePresence renders a cta-confirm-overlay (opacity 0→1 0.18s) with a nested confirm dialog containing cancel/confirm buttons calling handleDeleteCancel and handleDeleteConfirm. A separate AnimatePresence toast renders the toastMsg with slide-in animation.

As a frontend developer, implement the Footer section (Footer.css) for the Categories page. This component is likely already built from the Home page task [4e4d8ae3-c79f-430c-8725-0d66c34dc854] — verify it exists and wire it into the Categories page layout. The Footer renders a navLinks array of 6 items (Home, Todos, Categories, Notes, Settings, Privacy) each with label, href, and inline SVG icon. Each link uses a FooterLink sub-component that wraps motion.a in motion.div with whileHover='hover' / initial='rest' / animate='rest' variants: the anchor scales 1→1.05 (spring stiffness 400 damping 25) and the ftr-link-icon span rotates 0→360deg (0.6s easeInOut) on hover. A ftr-link-underline element animates width on hover. The footer also includes the app name/logo mark, a tagline, and a copyright line.

As a frontend developer, implement the Navbar section for the Todos page. This component (may already exist from Home/Categories pages) uses useState for menuOpen and scrolled states, useEffect to attach a passive scroll listener that toggles nb-scrolled class, and framer-motion for an animated logo glow (pulsing opacity 0.3→0.6→0.3 on 3s infinite loop) and SVG path drawing animation (pathLength 0→1 over 1.6s). NAV_PAGES array defines Home, Todos, Categories, Notes routes with lucide-react icons. Mobile hamburger toggleMenu toggles AnimatePresence-driven mobile menu. Active page highlight applies to 'Home' by default. Uses Navbar.css for nb-root, nb-inner, nb-logo-group, nb-logo-svg-wrap, nb-logo-glow, nb-scrolled classes.

As a frontend developer, implement the NotesGrid section for the Notes page. This section renders a grid of NoteCard components from an INITIAL_NOTES array of 6 seed notes. Each NoteCard uses framer-motion cardVariants (hidden/visible/exit) with staggered delay (i * 0.06) and custom spring easing [0.22, 1, 0.36, 1]. NoteCard features: (1) decorative lily pad ripple divs (ng-card-ripple, ng-card-ripple-2); (2) alternating even/odd CSS class based on index % 2; (3) inline edit mode with textarea, editVal state, handleSave/handleCancel handlers calling onEdit prop; (4) two-step delete confirmation via confirmDelete boolean state toggling confirm/cancel UI, calling onDelete prop; (5) formatted date (formatDate en-GB) and time (formatTime en-GB) display in card header. AnimatePresence wraps the card list for exit animations with layout prop for smooth reflow. State: useState for notes array with onEdit (update content by id) and onDelete (filter by id) handlers lifted to parent grid component. Imports from '../styles/NotesGrid.css'.

As a frontend developer, implement the NotesCreateForm section for the Notes page. This section renders a collapsible note creation form with: (1) a section label with decorative horizontal lines flanking 'Add a new note to the pond' text; (2) a toggle button (ncf-trigger-btn) using framer-motion whileTap scale that switches between 'New Note' and 'Discard Note' labels, with a rotating '+' icon (ncf-trigger-icon--open class when open), aria-expanded and aria-controls attributes; (3) AnimatePresence-driven animated form panel (spring stiffness:320 damping:28, initial opacity:0/y:32/scale:0.97) containing a pond ripple decoration div, title input (MAX_TITLE=80 chars, titleRef for auto-focus via setTimeout 120ms on open), body textarea (MAX_BODY=600 chars), and character counter with progress bar; (4) counter state classes: ncf-counter--warn at >=70% fill, ncf-counter--danger at >=90% fill, matching bar fill classes; (5) canSubmit derived boolean (title.trim && body.trim both non-empty); (6) handleSubmit sets saved=true, clears fields, then after 2200ms timeout sets saved=false and closes form; (7) a success/saved AnimatePresence state showing confirmation UI. State hooks: isOpen, title, body, saved. Imports from '../styles/NotesCreateForm.css'.

Implement the FastAPI router for /api/categories with the following endpoints: - GET /api/categories — list all categories (returns id, name, color_hex, task_count, completed_count, created_at). - POST /api/categories — create a new category (body: name, color_hex). - PATCH /api/categories/{id} — update category name or color. - DELETE /api/categories/{id} — delete category and cascade or nullify associated todos. Use Pydantic schemas for request/response validation. task_count and completed_count are computed via SQL aggregation joins with the todos table. Wire this router into main.py. Note: this API supports the following frontend tasks that currently use static data and will need to be integrated: CategoriesGrid [e59b3ac0], CategoriesFilters [c1915b7a], CategoriesActions [d467d1be], CategoryFilter for Todos [bcdd4bd4], and CategoryExplorer for Home [e3f974aa].

Implement the FastAPI router for /api/todos with the following endpoints: - GET /api/todos — list todos with optional query params: category_id, completed (bool), priority, page (default 1), page_size (default 6). Returns paginated response with total count. - POST /api/todos — create todo (body: title, category_id, due_date, priority). - PATCH /api/todos/{id} — update title, category_id, due_date, priority, or completed flag. - DELETE /api/todos/{id} — delete a todo. Use Pydantic schemas. Include overdue flag computed server-side (due_date < today AND NOT completed). Wire this router into main.py. Note: this API supports frontend tasks TodosList [ee34dd39], AddTodoForm [33d3d5c2], and TodosPageHeader stats [c15220d2] which currently use static/mock data.

Implement the FastAPI router for /api/notes with the following endpoints: - GET /api/notes — list notes with optional query params: search (title/body text search), date_filter (today/this_week/this_month), page, page_size. Returns paginated response. - POST /api/notes — create note (body: title max 80 chars, body max 600 chars). - PATCH /api/notes/{id} — update title or body. - DELETE /api/notes/{id} — delete a note. Use Pydantic schemas with field length validation matching frontend constraints (MAX_TITLE=80, MAX_BODY=600). Wire router into main.py. Note: this API supports frontend tasks NotesGrid [b46658a7], NotesCreateForm [13b50d08], and NotesHeader filters [7f8b1137] which currently use static INITIAL_NOTES seed data.

Implement a GET /api/dashboard/summary endpoint that returns aggregate metrics needed by the Home page WelcomeMessage and TodosPageHeader stats sections: - tasks_today: count of todos with due_date = today. - tasks_completed_today: count of completed todos with due_date = today. - notes_this_week: count of notes created in the current ISO week. - active_categories: count of categories that have at least one non-completed todo. - in_progress_tasks: count of todos with completed=false. - completed_tasks: count of todos with completed=true. This single endpoint avoids N+1 queries by computing all aggregates in one SQL query. Note: supports frontend tasks WelcomeMessage [f65570b1] and TodosPageHeader [c15220d2].

As a frontend developer, implement the TodosPageHeader section for the Todos page. Uses framer-motion containerVariants (staggerChildren 0.1, delayChildren 0.05) and itemVariants (opacity 0→1, y 16→0, spring stiffness 340 damping 28) applied to tph-inner wrapper. Renders three decorative SVG leaf shapes (tph-deco-leaf--1/2/3) as aria-hidden background accents. Animated children include: tph-eyebrow with inline SVG checkmark icon and 'emerald-application' text, tph-headline with tph-headline-accent span 'My Tasks', tph-subtitle paragraph, tph-motivation div with star SVG icon and motivational text, and tph-stats-row with statChips array (All Tasks/green, In Progress/gold, Completed/orange dot indicators). Uses TodosPageHeader.css with tph-root, tph-inner, tph-eyebrow, tph-headline-accent, tph-motivation, tph-stats-row classes.

As a frontend developer, implement the CategoryFilter section for the Todos page. Uses useState for active category (default 'all'). CATEGORIES array has 7 entries: all(✦,24), work(💼,8), personal(🌿,5), health(🌱,4), learning(📖,3), errands(🛒,2), ideas(💡,2). Renders framer-motion containerVariants (opacity/y slide-in, staggerChildren 0.05) wrapping a horizontally scrollable cf-scroll-track. Each category renders a motion.button with itemVariants (x -8→0 spring), badgeVariants for whileHover (scale 1.04) and whileTap (scale 0.95), aria-pressed state, and cf-badge--active class toggle. Accepts activeCategory and onCategoryChange props for controlled usage. Uses CategoryFilter.css with cf-root, cf-inner, cf-label, cf-scroll-wrap, cf-scroll-track, cf-badge, cf-badge--active, cf-badge-icon, cf-badge-count classes.

As a frontend developer, implement the TodosList section for the Todos page. Uses useState for tasks (INITIAL_TASKS array of 12 items with id, title, category, categoryColor, dueDate, priority, completed fields) and pagination (PAGE_SIZE=6). Implements isOverdue(dueDate, completed) comparing against TODAY='2026-05-13' and formatDate() for display. Features include: toggle completed state per task, delete task with AnimatePresence exit animation, pagination with prev/next controls showing PAGE_SIZE=6 tasks per page. Each task card renders categoryColor dot, priority badge (high/medium/low), overdue indicator, formatted due date, completion checkbox toggle, and delete button. Uses framer-motion AnimatePresence with layout animations for list reordering. Uses TodosList.css with associated class structure.

As a frontend developer, implement the AddTodoForm section for the Todos page. Uses useState for title, category, dueDate, errors, submitted, and isSubmitting states. CATEGORIES array has 9 options (work, personal, health, learning, errands, creative, finance, other). MAX_TITLE_LEN=120 enforces character limit with charLeft/charWarn (warn when <20 chars remain) counter display. validate() checks: title required + min 3 chars + max 120 chars, category required, dueDate not in past (compared via new Date()). handleSubmit simulates async submission with setTimeout 600ms setting isSubmitting→submitted states, then resets all fields and auto-clears submitted flag after 3500ms. AnimatePresence used for error message and success state transitions. Inline error clearing on individual field change handlers. Uses AddTodoForm.css with atf-root, atf-inner, atf-heading, atf-heading-icon classes.

As a frontend developer, implement the Footer section for the Todos page. This component (may already exist from Home/Categories pages) uses navLinks array of 6 entries (Home, Todos, Categories, Notes, Settings, Privacy) each with inline SVG icons. FooterLink sub-component uses framer-motion whileHover/rest variants: motion.a scales 1→1.05 (spring stiffness 400 damping 25), ftr-link-icon rotates 0→360deg on hover over 0.6s easeInOut. ftr-link-underline uses motion.div for animated underline reveal. Uses Footer.css with ftr-link-wrapper, ftr-link, ftr-link-icon, ftr-link-unde (underline) classes. Renders site-wide footer navigation consistent with Home and Categories pages.

Create a shared API client module at src/api/client.js (or client.ts) using fetch or axios with a configured base URL (import.meta.env.VITE_API_BASE_URL defaulting to /api). Implement thin resource modules: src/api/todos.js, src/api/notes.js, src/api/categories.js, src/api/dashboard.js — each exporting async functions (getTodos, createTodo, updateTodo, deleteTodo, etc.) that call the corresponding FastAPI endpoints. Include error handling that throws structured errors with status codes. This shared client ensures all frontend section components (TodosList, NotesGrid, CategoriesGrid, WelcomeMessage, etc.) use consistent request/response handling when they are wired from static data to live API calls.

As a frontend developer, implement the TodosEmpty section for the Todos page. Renders a te-container with initial opacity 0/y 24 animated to visible over 0.55s easeOut. Contains te-illustration with te-illustration-bg and te-illustration-ring decorative elements. Three floating LeafIcon SVG accents (te-leaf-accent--1/2/3) each with distinct infinite y/rotate keyframe animations (durations 4s/5s/3.5s with delays 0/1/0.5). Central te-plant-svg (80×80 viewBox) with scale 0.7→1 entrance animation (0.6s delay 0.15s) renders pot (rect with stroke #2E8B57), stem (line), left large leaf (rgba(46,139,87,0.25)), and right large leaf (rgba(102,205,170,0.35)) paths. Shown conditionally when task list is empty. Uses TodosEmpty.css with te-root, te-container, te-illustration, te-leaf-accent, te-plant-svg classes.