APP REVIEW — Daily. by Elaine (lizhuoning)

LOADED_SRC URL

BEHAVIOR SUMMARY

• Landing screen: The app opens to a paper-textured drop zone prompting you to upload a .json file, with an "— or —" divider and a "Use sample data" button below it. No content is shown until one of these is activated.
• Sample data path: Clicking "Use sample data" loads a hardcoded SAMPLE constant and renders the main dashboard for a user named "Elaine" with a date of 2026-02-25, mood "focused", one morning routine of 2 tasks ("Wake up" — done, "Exercise" — pending), and a short note.
• Dashboard layout: Four cards in a 2-column grid — Date, Mood, Task Routine, and Note — each with a colored left-border accent and staggered fadeUp entrance animations.
• Mood card: Displays current mood in italic serif text. Clicking "edit" toggles a chip-picker row of 10 mood options; selecting one updates the display and closes the picker.
• Task card: Tasks are toggled done/undone by clicking anywhere on the row. A green progress bar and "X% complete" label update live. New tasks can be added via a text input + "+" button or by pressing Enter.
• Note card: Switches between a read-only italic display and an editable <textarea> via an "edit" / "save" toggle button.
• File reload: A "↩ load new file" button in the header dismisses the dashboard and returns to the drop screen, clearing all state.
• Aesthetic: Warm paper tones (#f5f0e8), Lora serif + DM Mono, rust and green accents, and a repeating horizontal line background that mimics notebook ruled paper. Clean and intentional visual language throughout.

THINGS THAT DIDN'T WORK AS EXPECTED

• No data persistence: All changes — toggled tasks, edited mood, updated notes, added tasks — live only in JS memory. Refreshing the page silently discards everything. The note card acknowledges this with "changes kept in memory" but the other cards give no such warning.
• No JSON export: You can make changes in the UI, but there is no way to download the updated state as a .json file. The app accepts JSON in but provides no path out, making it a dead end for any real planning workflow.
• Date in JSON vs. actual date: The greeting ("Good morning / afternoon / evening") uses the real current time, but the date displayed in the Date card comes from the JSON field day.date. Using the sample data shows "2026-02-25" while today is 2026-04-22 — the two signals contradict each other with no explanation.
• JSON schema is undocumented: If you upload your own file, there is no schema reference, example, or field guide anywhere in the UI. A wrong or incomplete JSON produces only a bare alert(): "Could not load JSON: Missing required fields (user, day)" — no hint of what structure is expected.
• No task deletion: Tasks can be added and toggled, but there is no way to remove a task. Accidentally typed entries persist for the life of the session.
• Multiple routines break the grid: The routines array supports multiple entries, but each one renders as its own card. With 2+ routines, the grid gains a fifth or sixth card and the clean 2×2 layout collapses into an uneven flow.
• No date validation: A malformed date string in the JSON (e.g., "date": "bad") causes all three date display functions to silently output "Invalid Date" in the header and Date card, with no error caught or shown.
• File drag-and-drop target is only the label element: Dragging a JSON file onto the center of the page (outside the dashed box) does nothing. Users instinctively expect the whole page to accept the drop on a dedicated drop-zone screen.
• Mood picker stays open if you click "edit" and then navigate away: There is no outside-click or Escape handler to close the mood picker; it stays open until you explicitly select a chip or click "edit" again.
• Mobile: Add-task input is not visible without scrolling: On narrow screens the card is tall, and the "Add a task…" input sits at the bottom below the progress bar. It is easy to miss entirely.

IMPROVEMENT PROMPT

You are improving a single-file HTML/CSS/JS daily planner app called "Daily." that loads
a JSON file and renders a 2x2 card dashboard (date, mood, tasks, note) in a warm
paper-notebook aesthetic using Lora serif and DM Mono fonts.

Apply the following fixes and additions without altering the visual design, color palette,
or typography:

1. ADD localStorage persistence:
   - After any state change (task toggle, task add, mood change, note save), call
     localStorage.setItem('daily_state', JSON.stringify(state)).
   - On page load, check localStorage for a saved state and load it automatically,
     skipping the drop screen. Show a small dismissible banner: "Restored previous session."
   - The "load new file" button should also call localStorage.removeItem('daily_state').

2. ADD a JSON export button:
   - In the app header, next to "load new file", add an "export json" button
     styled identically to the reload button.
   - Clicking it serialises the current state to a formatted JSON string, creates a
     Blob, and triggers a download as "daily-export.json".

3. FIX the date discrepancy:
   - Replace the static date in the Date card with today's actual date using
     new Date() instead of parsing s.day.date, so the greeting and the calendar
     number always match.
   - Keep s.day.date in the data model for reference, but add a note "(planned)"
     beneath the calendar number if it differs from today's date.

4. ADD a JSON schema hint on the drop screen:
   - Below the "Use sample data" button, add a collapsible details element
     labelled "Expected JSON format" in the mono font.
   - Inside, show a pretty-printed minimal example covering all required and optional
     fields (user.name, day.date, day.mood, day.note, routines[].id, routines[].tasks[]).

5. ADD task deletion:
   - Add a small "x" button at the right edge of each task row (visible on hover).
   - Clicking it removes the task from the routine, updates the progress bar, and
     re-renders without full page reload.

6. FIX multiple routines layout:
   - If there are more than one routine, wrap all routine cards in a full-width
     grid column span so they don't disrupt the Date / Mood / Note card layout.
   - Alternatively, stack all routines into a single card with tab navigation between them.

7. FIX the drop target:
   - Attach the dragover/dragleave/drop event listeners to document.body instead of
     only the label element, so dragging a file anywhere onto the drop screen works.

8. ADD mood picker dismiss on outside click:
   - Add a one-time document click listener when the mood picker opens that closes
     the picker if the click target is outside the mood card.
   - Also close on Escape key.

9. ADD date validation with a friendly error:
   - In the loadJSON function, after parsing, check that new Date(state.day.date)
     is a valid date. If not, show an inline error message below the drop zone instead
     of an alert(), with a hint like: 'day.date must be in YYYY-MM-DD format.'