import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { useViewer } from "use-vibes"; import { useVibe } from "use-vibes"; function timeAgo(ts) { const s = Math.floor((Date.now() - ts) / 1000); if (s < 60) return "just now"; if (s < 3600) return `${Math.floor(s / 60)}m ago`; if (s < 86400) return `${Math.floor(s / 3600)}h ago`; return `${Math.floor(s / 86400)}d ago`; } function HeartIcon({ className }) { return ( ); } function SpinnerIcon({ className }) { return ( ); } function Composer({ database, canCreate, me }) { const [text, setText] = useState(""); const [isLoading, setIsLoading] = useState(false); const [refusal, setRefusal] = useState(""); async function handleSubmit(e) { e.preventDefault(); const trimmed = text.trim(); if (!trimmed) return; setIsLoading(true); setRefusal(""); try { const wordCount = trimmed.split(/\s+/).filter(Boolean).length; let hugText = "Thank you for sharing your words — they matter."; try { const res = await callAI( `You are a warm, encouraging fellow writer. Someone shared this piece of writing: "${trimmed}". Write a tiny, specific hug — a one or two sentence, warm and encouraging note that responds to something real and specific in the writing (a word, an image, a feeling). Never generic. Keep it under 220 characters.`, { schema: { properties: { hug: { type: "string", description: "the tiny hug note" } } } } ); const parsed = JSON.parse(res); if (parsed.hug) hugText = parsed.hug; } catch (err) { if (err && err.reason === "refusal") { setRefusal("The AI paused on that one — feel free to rephrase, your words are still saved below."); } } await database.put({ type: "post", authorHandle: me?.userHandle, text: trimmed, wordCount, createdAt: Date.now(), hug: hugText, }); setText(""); } finally { setIsLoading(false); } } async function suggest() { setIsLoading(true); try { const res = await callAI( "Write one short, evocative sentence or two-line snippet of creative writing that a beginner writer might post to a shared writing wall. Something specific and warm, not generic.", { schema: { properties: { snippet: { type: "string" } } } } ); const parsed = JSON.parse(res); if (parsed.snippet) setText(parsed.snippet); } finally { setIsLoading(false); } } const c = { card: "bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius-lg)] p-4 shadow-[var(--vibes-shadow)]", input: "w-full bg-[var(--background)] text-[var(--text-primary)] border border-[var(--border)] rounded-[var(--radius)] p-3 min-h-[100px] resize-y focus:outline-none focus:ring-2 focus:ring-[var(--primary)]", btn: "min-h-[44px] px-4 rounded-[var(--radius)] bg-[var(--primary)] text-[var(--text-primary)] font-medium shadow-[var(--vibes-shadow)] hover:shadow-[var(--vibes-shadow-lg)] hover:-translate-x-[var(--border-width)] hover:-translate-y-[var(--border-width)] active:shadow-none active:translate-x-[var(--border-width)] active:translate-y-[var(--border-width)] transition-all duration-150 disabled:opacity-60", ghost: "min-h-[44px] px-3 rounded-[var(--radius)] border border-[var(--border)] text-[var(--text-secondary)] hover:shadow-[var(--vibes-shadow)] active:shadow-none transition-all duration-150", }; if (!canCreate.ok && !canCreate.pending) { return (

{canCreate.reason ? "Sign in to share your writing here." : "Writing is not open right now."}

); } return (

Share a piece of writing

setText(e.target.value)}
        placeholder="A sentence, a paragraph, a page of a story..."
        className={c.input}
      />
      {refusal && <p className="text-sm text-[var(--warning)]">{refusal}</p>}
      <div className="flex justify-end">
        <button type="submit" disabled={isLoading || canCreate.pending} className={c.btn}>
          {isLoading ? (
            <span className="flex items-center gap-2">
              <SpinnerIcon className="w-4 h-4" /> Sending a hug...
            </span>
          ) : (
            "Post it"
          )}
        </button>
      </div>
    </form>
  );
}

function ReplyForm({ database, post, canReply, me, ViewerTag }) {
  const [text, setText] = useState("");
  const [open, setOpen] = useState(false);

async function handleSubmit(e) {
    e.preventDefault();
    const trimmed = text.trim();
    if (!trimmed) return;
    await database.put({
      type: "reply",
      postId: post._id,
      authorHandle: me?.userHandle,
      text: trimmed,
      createdAt: Date.now(),
    });
    setText("");
    setOpen(false);
  }

const c = {
    input: "w-full bg-[var(--background)] text-[var(--text-primary)] border border-[var(--border)] rounded-[var(--radius)] p-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)]",
    btn: "min-h-[36px] px-3 rounded-[var(--radius)] bg-[var(--secondary)] text-[var(--text-primary)] text-sm shadow-[var(--vibes-shadow)] hover:shadow-[var(--vibes-shadow-lg)] hover:-translate-x-[var(--border-width)] hover:-translate-y-[var(--border-width)] active:shadow-none active:translate-x-[var(--border-width)] active:translate-y-[var(--border-width)] transition-all duration-150",
  };

if (!canReply.ok && !canReply.pending) return null;

if (!open) {
    return (
      <button onClick={() => setOpen(true)} className="text-sm text-[var(--secondary)] hover:underline">
        + Add your own hug
      </button>
    );
  }

return (
    <form onSubmit={handleSubmit} className="flex gap-2 items-start mt-2">
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="A warm word for this writer..." className={c.input} />
      <button type="submit" disabled={canReply.pending} className={c.btn}>
        Send
      </button>
    </form>
  );
}

function PostCard({ post, replies, database, canReply, me, ViewerTag, index }) {
  const c = {
    card: "bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius-lg)] p-4 shadow-[var(--vibes-shadow)] flex flex-col gap-3 opacity-0 animate-[fadeUp_200ms_ease-out_forwards]",
    hugBox: "bg-[var(--accent)] text-[var(--text-primary)] rounded-[var(--radius)] p-3 text-lg font-semibold leading-snug",
    meta: "text-[10px] text-[var(--text-disabled)] tracking-wide",
    text: "text-[var(--text-primary)] whitespace-pre-wrap",
    reply: "text-sm text-[var(--text-secondary)] border-l-2 border-[var(--border)] pl-2",
  };

return (
    <li className={c.card} style={{ animationDelay: `${Math.min(index, 8) * 40}ms` }}>
      <p className={c.text}>{post.text}</p>
      <div className={c.hugBox}>
        <div className="flex items-start gap-2">
          <HeartIcon className="w-5 h-5 flex-shrink-0 mt-1" />
          <span>{post.hug}</span>
        </div>
      </div>
      <p className={c.meta}>
        {post.wordCount ?? post.text.split(/\s+/).filter(Boolean).length} words · {timeAgo(post.createdAt)}
        {post.authorHandle ? (
          <>
            {" "}
            · <ViewerTag userHandle={post.authorHandle} />
          </>
        ) : null}
      </p>
      {replies.length > 0 && (
        <ul className="space-y-1">
          {replies.map((r) => (
            <li key={r._id} className={c.reply}>
              <span>{r.text}</span>
              {r.authorHandle && (
                <span className="ml-1">
                  — <ViewerTag userHandle={r.authorHandle} />
                </span>
              )}
            </li>
          ))}
        </ul>
      )}
      <ReplyForm database={database} post={post} canReply={canReply} me={me} ViewerTag={ViewerTag} />
    </li>
  );
}

export default function App() {
  const { useLiveQuery, database } = useFireproof("tinyHugs");
  const { can, me, ready } = useVibe("tinyHugs");
  const { ViewerTag } = useViewer();

const { docs: posts } = useLiveQuery("type", { key: "post", descending: true });
  const { docs: allReplies } = useLiveQuery("type", { key: "reply" });

const canCreate = ready ? can.create({ type: "post", authorHandle: me?.userHandle }) : { pending: true };
  const canReply = ready ? can.create({ type: "reply", authorHandle: me?.userHandle }) : { pending: true };

const repliesByPost = {};
  for (const r of allReplies) {
    if (!repliesByPost[r.postId]) repliesByPost[r.postId] = [];
    repliesByPost[r.postId].push(r);
  }

const c = {
    app: "min-h-screen bg-[var(--background)] font-[var(--font-family)] text-[var(--text-primary)]",
    header: "sticky top-0 z-10 bg-[var(--surface)] border-b border-[var(--border)] px-4 py-3 flex items-center gap-2",
    main: "max-w-5xl mx-auto p-4 flex flex-col gap-4",
    grid: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
    empty: "bg-[var(--surface)] border border-dashed border-[var(--border)] rounded-[var(--radius-lg)] p-8 text-center text-[var(--text-secondary)]",
  };

return (
    <div className={c.app}>
      <style>{`@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      <header id="app-header" className={c.header}>
        <HeartIcon className="w-6 h-6 text-[var(--primary)]" />
        <h1 className="text-xl font-bold">Tiny Hugs</h1>
      </header>
      <main id="app" className={c.main}>
        <section id="composer">
          <Composer database={database} canCreate={canCreate} me={me} />
        </section>
        <section id="feed">
          {posts.length === 0 ? (
            <div className={c.empty}>
              <p className="text-lg font-medium mb-1">No writing here yet.</p>
              <p>Be the first to share a sentence and get a tiny hug back.</p>
            </div>
          ) : (
            <ul className={c.grid}>
              {posts.map((post, i) => (
                <PostCard
                  key={post._id}
                  post={post}
                  replies={(repliesByPost[post._id] || []).sort((a, b) => a.createdAt - b.createdAt)}
                  database={database}
                  canReply={canReply}
                  me={me}
                  ViewerTag={ViewerTag}
                  index={i}
                />
              ))}
            </ul>
          )}
        </section>
      </main>
    </div>
  );
}</article></body></html>