import React, { useState, useEffect, useRef, useMemo } from "react"; import dayjs from "dayjs"; import Chart from "chart.js"; // Define mood options const MOOD_OPTIONS = [ { label: "Great", emoji: "😃", color: "bg-emerald-200" }, { label: "Good", emoji: "🙂", color: "bg-lime-200" }, { label: "Meh", emoji: "😐", color: "bg-amber-200" }, { label: "Down", emoji: "😔", color: "bg-blue-200" }, { label: "Stressed", emoji: "😣", color: "bg-orange-200" }, { label: "Sad", emoji: "😢", color: "bg-rose-200" }, ]; // Map mood label to a numeric value for charting const MOOD_TO_SCORE = { Great: 5, Good: 4, Meh: 3, Down: 2, Stressed: 1, Sad: 0, }; const SCORE_TO_EMOJI = { 5: "😃", 4: "🙂", 3: "😐", 2: "😔", 1: "😣", 0: "😢", }; // For grouping entries by date function groupByDate(entries) { const grouped = {}; entries.forEach((e) => { const date = dayjs(e.ts).format("YYYY-MM-DD"); if (!grouped[date]) grouped[date] = []; grouped[date].push(e); }); return grouped; } export default function App() { const [moodEntries, setMoodEntries] = useSharedStorage("moodJournal.entries", []); const [selectedMood, setSelectedMood] = useState(null); const [note, setNote] = useState(""); const [trendRange, setTrendRange] = useState("7d"); // 7d or 28d const [submitting, setSubmitting] = useState(false); const chartRef = useRef(null); const chartInstanceRef = useRef(null); // Today's mood check (encourage 1 entry per day, allow more) const today = dayjs().format("YYYY-MM-DD"); const todayEntries = moodEntries.filter(e => dayjs(e.ts).format("YYYY-MM-DD") === today); // Handle mood log const handleSubmit = async (e) => { e.preventDefault(); if (!selectedMood) return; setSubmitting(true); const entry = { id: Date.now(), ts: new Date().toISOString(), mood: selectedMood.label, note: note.trim(), }; setMoodEntries(prev => [entry, ...prev].slice(0, 100)); // limit to 100 recent setSelectedMood(null); setNote(""); setSubmitting(false); }; // Prepare trend data const trendData = useMemo(() => { // Get range const days = trendRange === "7d" ? 7 : 28; let data = [], labels = []; for (let i = days - 1; i >= 0; --i) { const date = dayjs().subtract(i, 'day').format("YYYY-MM-DD"); labels.push(dayjs(date).format("ddd D MMM")); const dayEntries = moodEntries.filter(e => dayjs(e.ts).format("YYYY-MM-DD") === date); if (dayEntries.length) { // Use average score if multiple in a day const scores = dayEntries.map(e => MOOD_TO_SCORE[e.mood] || 0); data.push(scores.reduce((a,b)=>a+b,0)/scores.length); } else { data.push(null); } } return { labels, data }; }, [moodEntries, trendRange]); // Draw the trend chart useEffect(() => { if (!chartRef.current || typeof Chart === "undefined") return; if (chartInstanceRef.current) chartInstanceRef.current.destroy(); const ctx = chartRef.current.getContext('2d'); try { chartInstanceRef.current = new Chart(ctx, { type: 'line', data: { labels: trendData.labels, datasets: [{ label: 'Mood', data: trendData.data, fill: true, borderColor: 'rgba(249,168,212,0.95)', backgroundColor: 'rgba(249,168,212,0.18)', pointRadius: 5, pointBackgroundColor: trendData.data.map(v=>v !== null ? 'rgba(249,168,212,1)' : 'transparent'), pointStyle: 'circle', spanGaps: true, }], }, options: { responsive: true, animation: { duration: 600 }, plugins: { legend: { display: false }, tooltip: { callbacks: { label: (ctx) => { const v = Math.round((ctx.parsed.y ?? 0)); return SCORE_TO_EMOJI[v] + " " + (MOOD_OPTIONS.find(o=>MOOD_TO_SCORE[o.label]===v)?.label||''); }, }, }, }, scales: { y: { min: 0, max: 5, ticks: { stepSize: 1, callback: (val) => { return SCORE_TO_EMOJI[val] || ''; } }, grid: { color: "#feecef" }, }, x: { grid: { display: false }, ticks: { autoSkip: true, maxTicksLimit: 10 }, } }, }, }); } catch (e) {} return () => { chartInstanceRef.current?.destroy(); }; }, [trendData]); // Grouped mood entries (date-desc order) const groupedEntries = useMemo(() => { const grouped = groupByDate(moodEntries).entries ? groupByDate(moodEntries) : groupByDate(moodEntries); // Sort by date descending return Object.entries(grouped) .sort((a, b) => b[0].localeCompare(a[0])); }, [moodEntries]); // UI return (

📝

Instant Mood Journal

{/* Mood input */}

How are you feeling now?

{MOOD_OPTIONS.map(m => ( ))}

setNote(e.target.value)}
          disabled={!selectedMood || submitting}
          rows={2}
          maxLength={160}
        />
        <div className="flex items-center gap-2 mt-2">
          <button
            type="submit"
            disabled={!selectedMood || submitting}
            className="px-4 py-2 rounded-lg bg-[var(--ds-primary)] text-white font-semibold transition-opacity disabled:opacity-60 shadow active:scale-95"
            >
            {'Log mood'}
          </button>
          {todayEntries.length > 0 && (
            <span className="text-xs text-[var(--ds-accent)] ml-2">{todayEntries.length} logged today</span>
          )}
        </div>
      </form>

{/* Mood Trend chart */}
      <section className="rounded-xl bg-white/80 shadow p-4 flex flex-col gap-3">
        <div className="flex justify-between items-center mb-2">
          <h2 className="text-xl font-semibold text-[var(--ds-foreground)]">Mood Trends</h2>
          <div className="inline-flex gap-2 bg-[var(--ds-background)] rounded-md p-1">
            <button
              className={`px-3 py-1 rounded ${trendRange==='7d' ? 'bg-[var(--ds-accent)] text-white' : ''}`}
              onClick={()=>setTrendRange('7d')}
            >7 days</button>
            <button
              className={`px-3 py-1 rounded ${trendRange==='28d' ? 'bg-[var(--ds-accent)] text-white' : ''}`}
              onClick={()=>setTrendRange('28d')}
            >4 weeks</button>
          </div>
        </div>
        <div className="w-full overflow-x-auto pt-1 pb-2">
          <canvas ref={chartRef} height={100} />
        </div>
      </section>

{/* Timeline */}
      <section className="rounded-xl bg-white/90 shadow p-4 flex-1 flex flex-col">
        <h2 className="text-xl font-semibold text-[var(--ds-foreground)] mb-3">Recent Entries</h2>
        <div className="flex flex-col gap-6 relative">
          {moodEntries.length === 0 && (
            <div className="flex flex-col items-center text-gray-400 py-12">
              <span className="text-5xl mb-2">🌤️</span>
              <p className="text-base font-medium">No entries yet. Log your first mood above!</p>
            </div>
          )}
          {groupedEntries.slice(0, 7).map(([date, entries], i) => (
            <div key={date} className="relative">
              {/* Dotted timeline line */}
              <div className={`absolute left-3 top-7 w-0.5 h-full bg-gradient-to-b from-[var(--ds-accent)]/40 to-transparent z-0 ${i===groupedEntries.length-1 ? 'hidden':''}`} />
              <div className="flex gap-3 items-start">
                <div className="flex flex-col items-center min-w-[2.5rem]">
                  {/* Show dot with first mood emoji on this day */}
                  <div className="w-7 h-7 rounded-full flex items-center justify-center text-lg font-bold border-2 border-[var(--ds-accent)] bg-[var(--ds-accent)]/30 mb-1 z-10">
                    {MOOD_OPTIONS.find(m => m.label===entries[0]?.mood)?.emoji||'❓'}
                  </div>
                  {/* date label only for first entry in group*/}
                </div>
                <div className="flex-1">
                  <div className="text-sm font-semibold text-[var(--ds-primary)] mb-1">{dayjs(date).format("dddd, MMM D, YYYY")}</div>
                  <div className="flex flex-col gap-2">
                    {entries.map(entry => (
                      <div key={entry.id} className="flex items-start gap-2 group p-2 rounded-lg hover:bg-[var(--ds-secondary)]/20">
                        <span className="text-lg mt-1 select-none">
                          {MOOD_OPTIONS.find(m=>m.label===entry.mood)?.emoji||'❓'}
                        </span>
                        <div className="flex-1 min-w-0">
                          <div className="text-base font-semibold text-[var(--ds-foreground)] capitalize">
                            {entry.mood}
                            <span className="ml-2 text-xs text-[var(--ds-accent)]">{dayjs(entry.ts).format("h:mm A")}</span>
                          </div>
                          {entry.note && <div className="text-sm text-[var(--ds-foreground)]/90 mt-0.5 whitespace-pre-line">{entry.note}</div>}
                        </div>
                        {/* Delete option for latest entry */}
                        {entry.id === moodEntries[0]?.id && (
                          <button
                            onClick={() => setMoodEntries(prev => prev.filter(e=>e.id!==entry.id))}
                            title="Delete entry"
                            className="opacity-70 hover:opacity-100 text-lg px-1 pb-2"
                            aria-label="Delete entry"
                          >
                            🗑️
                          </button>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
      <footer className="text-center text-xs text-[var(--ds-secondary)] mt-4 pb-2 opacity-70">Your entries are private and stored only for you.</footer>
    </div>
  );
}
</article></body></html>