import React, { useState, useRef, useEffect } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("voice-passages-db"); const { doc, merge, submit } = useDocument({ type: "passage", title: "", author: "", text: "", mood: "", createdAt: 0, }); const { docs: passages } = useLiveQuery("type", { key: "passage", descending: true }); const [isRecording, setIsRecording] = useState(false); const [audioBlob, setAudioBlob] = useState(null); const [isLoading, setIsLoading] = useState(false); const [playingId, setPlayingId] = useState(null); const [view, setView] = useState("library"); // "library" | "add" const [recordingTime, setRecordingTime] = useState(0); const mediaRecorderRef = useRef(null); const chunksRef = useRef([]); const timerRef = useRef(null); const audioRefs = useRef({}); useEffect(() => { return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, []); async function startRecording() { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mr = new MediaRecorder(stream); chunksRef.current = []; mr.ondataavailable = (e) => chunksRef.current.push(e.data); mr.onstop = () => { const blob = new Blob(chunksRef.current, { type: "audio/webm" }); setAudioBlob(blob); stream.getTracks().forEach((t) => t.stop()); }; mr.start(); mediaRecorderRef.current = mr; setIsRecording(true); setRecordingTime(0); timerRef.current = setInterval(() => setRecordingTime((t) => t + 1), 1000); } function stopRecording() { mediaRecorderRef.current?.stop(); setIsRecording(false); clearInterval(timerRef.current); } async function handleSubmit(e) { e.preventDefault(); if (!doc.title || !doc.text) return; setIsLoading(true); try { const aiRes = await callAI( `Read this book passage and return a single mood word (e.g. melancholy, joyful, tense, wistful) and a one-sentence reflection. Passage: "${doc.text}"`, { schema: { properties: { mood: { type: "string", description: "Single mood word" }, reflection: { type: "string", description: "One sentence reflection" }, }, }, } ); const { mood, reflection } = JSON.parse(aiRes); const finalDoc = { ...doc, mood, reflection, createdAt: Date.now(), }; if (audioBlob) { finalDoc._files = { recording: audioBlob }; } await database.put(finalDoc); merge({ title: "", author: "", text: "", mood: "", createdAt: 0 }); setAudioBlob(null); setView("library"); } finally { setIsLoading(false); } } async function playPassage(passage) { if (playingId === passage._id) { audioRefs.current[passage._id]?.pause(); setPlayingId(null); return; } setPlayingId(passage._id); try { const file = await passage._files?.recording; if (!file) { setPlayingId(null); return; } const url = URL.createObjectURL(await file.file()); const audio = new Audio(url); audioRefs.current[passage._id] = audio; audio.onended = () => setPlayingId(null); audio.play(); } catch { setPlayingId(null); } } function fmtTime(s) { return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; } const MOOD_COLORS = { melancholy: "bg-[#3b82f6] text-white", joyful: "bg-[#ca8a04] text-[#0f172a]", tense: "bg-[#dc2626] text-white", wistful: "bg-[#7c3aed] text-white", hopeful: "bg-[#16a34a] text-[#0f172a]", default: "bg-[#e2e8f0] text-[#0f172a]", }; function moodClass(mood) { return MOOD_COLORS[(mood || "").toLowerCase()] || MOOD_COLORS.default; } const c = { bg: "bg-[oklch(0.96_0.01_90)]", card: "bg-white border-[3px] border-[#0f172a]", shadow: "[box-shadow:4px_4px_0px_#0f172a]", shadowSm: "[box-shadow:3px_3px_0px_#0f172a]", shadowHover: "hover:[box-shadow:6px_6px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px]", red: "bg-[#c2410c] text-white", yellow: "bg-[#ca8a04] text-[#0f172a]", green: "bg-[#16a34a] text-white", blue: "bg-[#1d4ed8] text-white", ink: "text-[#0f172a]", muted: "text-[#64748b]", btnPrimary: "bg-[#c2410c] text-white border-[3px] border-[#0f172a] [box-shadow:4px_4px_0px_#0f172a] hover:[box-shadow:6px_6px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] active:[box-shadow:none] transition-all duration-150 uppercase tracking-wider text-xs font-bold px-4 py-2 rounded-[4px] cursor-pointer", btnSecondary: "bg-[#ca8a04] text-[#0f172a] border-[3px] border-[#0f172a] [box-shadow:3px_3px_0px_#0f172a] hover:[box-shadow:6px_6px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] active:[box-shadow:none] transition-all duration-150 uppercase tracking-wider text-xs font-bold px-4 py-2 rounded-[4px] cursor-pointer", input: "w-full bg-white border-[3px] border-[#0f172a] rounded-[4px] px-3 py-2 text-[#0f172a] text-sm font-medium focus:outline-none focus:[box-shadow:4px_4px_0px_#0f172a] focus:translate-x-[-2px] focus:translate-y-[-2px] transition-all duration-150", label: "block uppercase text-[0.6rem] tracking-[0.15em] text-[#64748b] font-semibold mb-1", accentBar: "h-[6px] w-full rounded-t-[1px]", }; return (

{/* Ambient bg */}

{/* NAV */}

Voice Passages

{/* HERO */}

READ

Shared Reading

Voice Passages

Record your voice reading a passage. Share it with the world.

{/* STATS */}

{[ { label: "Passages", value: passages.length, hdr: c.red, mono: true }, { label: "With Audio", value: passages.filter(p => p._files).length, hdr: c.yellow, mono: true }, { label: "Today", value: passages.filter(p => new Date(p.createdAt).toDateString() === new Date().toDateString()).length, hdr: c.blue, mono: true }, { label: "Moods", value: [...new Set(passages.map(p => p.mood).filter(Boolean))].length, hdr: c.green, mono: true }, ].map((s, i) => (

{s.label}

{s.value}

))}

{view === "add" && (

New Passage

Book Title merge({ title: e.target.value })} placeholder="e.g. Moby Dick" required />

Author merge({ author: e.target.value })} placeholder="e.g. Herman Melville" />

Passage Text

merge({ text: e.target.value })} placeholder="Paste or type the passage here..." required />
              </div>

{/* Recording */}
              <div className={`border-[3px] border-[#0f172a] rounded-[4px] p-4 bg-[oklch(0.96_0.01_90)]`}>
                <label className={c.label}>Voice Recording</label>
                <div className="flex items-center gap-3 flex-wrap">
                  {!isRecording ? (
                    <button type="button" onClick={startRecording} className={c.btnSecondary + " flex items-center gap-2"}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="6" fill="currentColor"/></svg>
                      Record
                    </button>
                  ) : (
                    <button type="button" onClick={stopRecording} className={c.btnPrimary + " flex items-center gap-2"}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="white" stroke="white" strokeWidth="2"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
                      Stop {fmtTime(recordingTime)}
                    </button>
                  )}
                  {audioBlob && !isRecording && (
                    <span className="text-xs font-bold text-[#16a34a] uppercase tracking-wider flex items-center gap-1">
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                      Recorded
                    </span>
                  )}
                </div>
              </div>

<div className="flex gap-3 pt-1">
                <button type="submit" disabled={isLoading} className={c.btnPrimary + " flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"}>
                  {isLoading ? (
                    <>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" style={{ animation: "spin 0.8s linear infinite" }}><circle cx="12" cy="12" r="9" strokeOpacity="0.3"/><path d="M12 3a9 9 0 0 1 9 9"/></svg>
                      Saving...
                    </>
                  ) : (
                    <>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/></svg>
                      Save Passage
                    </>
                  )}
                </button>
                <button type="button" onClick={() => setView("library")} className={c.btnSecondary}>Cancel</button>
              </div>
            </form>
          </div>
        )}

{/* LIBRARY */}
        {view === "library" && (
          <div className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden`}>
            <div className={`${c.blue} px-4 py-2 flex items-center justify-between`}>
              <span className="text-[0.65rem] uppercase tracking-[0.15em] font-bold">Passage Library</span>
              <span className="text-[0.65rem] uppercase tracking-[0.12em] font-bold opacity-80">{passages.length} entries</span>
            </div>
            {passages.length === 0 ? (
              <div className="px-6 py-12 text-center">
                <p className="text-[#64748b] font-medium text-sm uppercase tracking-wider">No passages yet</p>
                <button onClick={() => setView("add")} className={`${c.btnPrimary} mt-4`}>Add First Passage</button>
              </div>
            ) : (
              <div className="divide-y-[3px] divide-[#0f172a]">
                {passages.map((p) => (
                  <div key={p._id} className="px-4 py-4 hover:bg-[#ca8a04] transition-colors duration-100 group">
                    <div className="flex items-start justify-between gap-3 mb-2">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className="font-black text-[#0f172a] uppercase tracking-tight text-sm">{p.title}</span>
                          {p.author && <span className="text-[0.65rem] text-[#64748b] uppercase tracking-wider font-semibold">{p.author}</span>}
                          {p.mood && <span className={`text-[0.6rem] uppercase tracking-widest font-bold px-2 py-0.5 rounded-[4px] border-[2px] border-[#0f172a] ${moodClass(p.mood)}`}>{p.mood}</span>}
                        </div>
                        {p.reflection && <p className="text-xs text-[#64748b] mt-1 italic font-medium">{p.reflection}</p>}
                      </div>
                      <div className="flex items-center gap-2 flex-shrink-0">
                        {p._files?.recording && (
                          <button
                            onClick={() => playPassage(p)}
                            className={`border-[3px] border-[#0f172a] rounded-[4px] p-2 transition-all duration-150 [box-shadow:3px_3px_0px_#0f172a] hover:[box-shadow:5px_5px_0px_#0f172a] hover:translate-x-[-1px] hover:translate-y-[-1px] ${playingId === p._id ? "bg-[#c2410c] text-white" : "bg-white text-[#0f172a]"}`}
                          >
                            {playingId === p._id ? (
                              <svg width="14" height="14" viewBox="0 0 24 24" fill="white" stroke="white" strokeWidth="2"><rect x="6" y="6" width="4" height="12"/><rect x="14" y="6" width="4" height="12"/></svg>
                            ) : (
                              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                            )}
                          </button>
                        )}
                        <button onClick={() => database.del(p._id)} className="border-[3px] border-[#0f172a] rounded-[4px] p-2 bg-white text-[#0f172a] [box-shadow:3px_3px_0px_#0f172a] hover:bg-[#c2410c] hover:text-white transition-all duration-150">
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                        </button>
                      </div>
                    </div>
                    <p className="text-xs text-[#0f172a] font-medium line-clamp-2 leading-relaxed border-l-[3px] border-[#0f172a] pl-3 opacity-70">{p.text}</p>
                    <p className="text-[0.6rem] text-[#64748b] uppercase tracking-wider mt-2 font-semibold" style={{ fontFamily: "JetBrains Mono, monospace" }}>{p.createdAt ? new Date(p.createdAt).toLocaleDateString() : ""}</p>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>