import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("time-capsule-db"); const { doc, merge, submit } = useDocument({ type: "capsule", rawMemory: "", enhancedMemory: "", title: "", unlockDate: "", sealed: false, createdAt: Date.now(), }); const { docs: capsules } = useLiveQuery("type", { key: "capsule", descending: true }); const [view, setView] = useState("vault"); // "vault" | "create" const [selectedCapsule, setSelectedCapsule] = useState(null); const [isEnhancing, setIsEnhancing] = useState(false); const [isSealing, setIsSealing] = useState(false); const now = Date.now(); const isUnlocked = (capsule) => capsule.sealed && new Date(capsule.unlockDate).getTime() <= now; const handleEnhance = async () => { if (!doc.rawMemory.trim()) return; setIsEnhancing(true); try { const result = JSON.parse( await callAI( `You are a poetic memory keeper. Given this rough memory, produce a vivid, warm, detailed keepsake version (2-4 sentences), and a short evocative title (5 words max). Memory: "${doc.rawMemory}"`, { schema: { properties: { title: { type: "string", description: "Short evocative title, 5 words max" }, enhancedMemory: { type: "string", description: "Vivid, warm, detailed version of the memory" }, }, }, } ) ); merge({ title: result.title, enhancedMemory: result.enhancedMemory }); } finally { setIsEnhancing(false); } }; const handleSeal = async (e) => { e.preventDefault(); if (!doc.unlockDate || (!doc.rawMemory.trim() && !doc.enhancedMemory.trim())) return; setIsSealing(true); try { await database.put({ ...doc, type: "capsule", sealed: true, createdAt: Date.now(), title: doc.title || "Untitled Memory", enhancedMemory: doc.enhancedMemory || doc.rawMemory, }); submit(e); setView("vault"); } finally { setIsSealing(false); } }; const Spinner = ({ light }) => ( ); const LockIcon = () => ( ); const UnlockIcon = () => ( ); const PlusIcon = () => ( ); const BackIcon = () => ( ); const c = { bg: "bg-[#f5f3ee]", card: "bg-[#ffffff]", ink: "text-[#0f172a]", muted: "text-[#6b7280]", border: "border-[#0f172a]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", red: "bg-[#c2410c]", redText: "text-[#c2410c]", yellow: "bg-[#d97706]", yellowLight: "bg-[#fef3c7]", green: "bg-[#16a34a]", blue: "bg-[#1d4ed8]", btnPrimary: "bg-[#c2410c] text-white border-3 border-[#0f172a] font-bold uppercase tracking-wide text-sm px-5 py-2.5 rounded-[4px] shadow-[4px_4px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed", btnSecondary: "bg-[#d97706] text-[#0f172a] border-[3px] border-[#0f172a] font-bold uppercase tracking-wide text-sm px-5 py-2.5 rounded-[4px] shadow-[3px_3px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[5px_5px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed", btnGhost: "bg-[#ffffff] text-[#0f172a] border-[3px] border-[#0f172a] font-bold uppercase tracking-wide text-sm px-4 py-2 rounded-[4px] hover:shadow-[3px_3px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150", input: "w-full bg-[#ffffff] border-[3px] border-[#0f172a] rounded-[4px] px-3 py-2 text-[#0f172a] text-sm font-medium focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[4px_4px_0px_#0f172a] transition-all duration-150", label: "block text-[0.6rem] uppercase tracking-[0.15em] text-[#6b7280] mb-1 font-semibold", }; if (selectedCapsule) { const unlocked = isUnlocked(selectedCapsule); const unlockDt = new Date(selectedCapsule.unlockDate); return (

{selectedCapsule.title} {unlocked ? <> Open : <> Sealed}

Created

{new Date(selectedCapsule.createdAt).toLocaleDateString()}

Unlock Date

{unlockDt.toLocaleDateString()}

{unlocked ? (

Memory

{selectedCapsule.enhancedMemory}

{selectedCapsule.rawMemory && selectedCapsule.rawMemory !== selectedCapsule.enhancedMemory && (

Original Note

{selectedCapsule.rawMemory}

)}

) : (

This capsule is sealed

Opens on {unlockDt.toLocaleDateString()}

)}

); } return (

{/* Ambient background */}

{/* NAV */}

Time Capsule

{view === "vault" && (

{/* Hero */}

Your Memory
Vault

Seal moments in time. Let them breathe. Open them when the world has turned enough.

{/* Stats */}

{[ { label: "Total Capsules", value: capsules.length, color: "bg-[#c2410c]", textColor: "text-white" }, { label: "Sealed", value: capsules.filter(c => c.sealed && !isUnlocked(c)).length, color: "bg-[#d97706]", textColor: "text-[#0f172a]" }, { label: "Unlocked", value: capsules.filter(isUnlocked).length, color: "bg-[#1d4ed8]", textColor: "text-white" }, { label: "Opening Soon", value: capsules.filter(c => c.sealed && !isUnlocked(c) && new Date(c.unlockDate).getTime() - now < 7 * 86400000).length, color: "bg-[#16a34a]", textColor: "text-[#0f172a]" }, ].map((stat, i) => (

{stat.label}

{stat.value}

))}

{/* Capsule List */} {capsules.length === 0 ? (

No capsules yet

Seal your first memory above

) : (

{capsules.map((capsule) => { const unlocked = isUnlocked(capsule); const unlockDt = new Date(capsule.unlockDate); const daysLeft = Math.ceil((unlockDt.getTime() - now) / 86400000); return (

setSelectedCapsule(capsule)} className={`${c.card} border-[3px] ${c.border} rounded-[4px] ${c.shadowSm} p-4 flex items-center gap-4 cursor-pointer hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150`} >

{unlocked ? : }

{capsule.title || "Untitled Memory"}

{unlocked ? `Opened ${unlockDt.toLocaleDateString()}` : daysLeft > 0 ? `Opens in ${daysLeft}d` : "Opening today"}

{unlocked ? "Open" : "Sealed"}

); })}

)}

)} {view === "create" && (

Seal a New Memory

Your Memory *

merge({ rawMemory: e.target.value })}
                  />
                </div>

<button
                  className={`${c.btnSecondary} flex items-center gap-2`}
                  onClick={handleEnhance}
                  disabled={isEnhancing || !doc.rawMemory.trim()}
                >
                  {isEnhancing ? <><Spinner /> Enhancing...</> : (
                    <>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z"/></svg>
                      Enhance with AI
                    </>
                  )}
                </button>

{doc.enhancedMemory && (
                  <div className={`border-[3px] border-[#16a34a] rounded-[4px] p-4 bg-[#f0fdf4]`}>
                    <div className={`text-[0.6rem] uppercase tracking-[0.15em] text-[#16a34a] font-bold mb-2`}>AI-Enhanced Memory</div>
                    <div>
                      <label className={c.label}>Title</label>
                      <input
                        className={c.input}
                        value={doc.title}
                        onChange={(e) => merge({ title: e.target.value })}
                        placeholder="Capsule title"
                      />
                    </div>
                    <p className={`${c.ink} text-sm leading-relaxed mt-3 whitespace-pre-wrap`}>{doc.enhancedMemory}</p>
                  </div>
                )}

{!doc.enhancedMemory && (
                  <div>
                    <label className={c.label}>Title (optional)</label>
                    <input
                      className={c.input}
                      value={doc.title}
                      onChange={(e) => merge({ title: e.target.value })}
                      placeholder="Give this capsule a name"
                    />
                  </div>
                )}

<div>
                  <label className={c.label}>Unlock Date <span className="text-[#c2410c]">*</span></label>
                  <input
                    type="date"
                    className={c.input}
                    min={new Date(Date.now() + 86400000).toISOString().split("T")[0]}
                    value={doc.unlockDate}
                    onChange={(e) => merge({ unlockDate: e.target.value })}
                  />
                </div>

<div className="flex gap-3 pt-2">
                  <button
                    className={`${c.btnPrimary} flex items-center gap-2`}
                    onClick={handleSeal}
                    disabled={isSealing || !doc.unlockDate || !doc.rawMemory.trim()}
                  >
                    {isSealing ? <><Spinner light /> Sealing...</> : (
                      <><LockIcon /> Seal Capsule</>
                    )}
                  </button>
                  <button className={c.btnGhost} onClick={() => setView("vault")}>Cancel</button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>

Your MemoryVault

Your Memory
Vault