import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { useViewer, useVibe } from "use-vibes"; import Comments from "./components/Comments.jsx"; const DB = "drillDeck"; function DrillIcon(props) { return ( ); } function DeckIcon(props) { return ( ); } function Spinner() { return ( ); } function PostForm({ c }) { const { database } = useFireproof(DB); const { can, ready, me } = useVibe(DB); const { requestLogin, isViewerPending, viewer } = useViewer(); const [kind, setKind] = useState("pun"); const [body, setBody] = useState(""); const [isLoading, setIsLoading] = useState(false); const [refusal, setRefusal] = useState(""); const draft = { type: "post", kind, body, authorHandle: me?.userHandle }; const verdict = can.create(draft); async function suggest() { setIsLoading(true); setRefusal(""); try { const prompt = kind === "pun" ? "Write one short, groan-worthy dentist drill pun (max 12 words). Return just the pun text." : "Write one short, punchy startup pitch blurb (max 20 words) that a founder might post on a networking app. Return just the pitch text."; const res = await callAI(prompt, { schema: { properties: { text: { type: "string" } } } }); setBody(JSON.parse(res).text); } catch (err) { if (err?.reason === "refusal") setRefusal(err.explanation || "Couldn't think of one — try rephrasing."); } finally { setIsLoading(false); } } async function handleSubmit(e) { e.preventDefault(); if (!body.trim()) return; setIsLoading(true); setRefusal(""); try { const prompt = kind === "pun" ? `Rate the groan-factor (1-10) of this dentist drill pun and give a one-line punny reaction: "${body}"` : `Give a one-line critique or a suggested tagline for this startup pitch blurb: "${body}"`; let aiRating = null; let aiReaction = ""; try { const res = await callAI(prompt, { schema: { properties: { rating: { type: "number", description: "groan factor 1-10, only for puns, else 0" }, reaction: { type: "string", description: "one-line punny reaction or pitch critique/tagline" }, }, }, }); const parsed = JSON.parse(res); aiRating = parsed.rating || null; aiReaction = parsed.reaction || ""; } catch (err) { if (err?.reason === "refusal") setRefusal(err.explanation || "The assistant declined to react — post went up anyway."); } await database.put({ type: "post", kind, body: body.trim(), authorHandle: me?.userHandle, createdAt: Date.now(), aiRating: kind === "pun" ? aiRating : null, aiReaction, }); setBody(""); } finally { setIsLoading(false); } } const settledSignedOut = !isViewerPending && !viewer; return (

Drop a line

{verdict.pending || !ready ? (

Checking your access...

) : !verdict.ok ? (

{settledSignedOut ? "Sign in to post your own drill puns and pitch blurbs." : "Posting isn't available right now."}

{settledSignedOut && ( )}

) : (

setBody(e.target.value)}
              placeholder={kind === "pun" ? "What's your best drill pun?" : "Pitch your idea in one line"}
              className={`${c.input} flex-1 min-h-[80px]`}
            />
          </div>
          <div className="flex flex-wrap gap-2 items-center justify-between">
            <button type="button" onClick={suggest} disabled={isLoading} className={c.secondaryBtn}>
              {isLoading ? (
                <span className="flex items-center gap-2">
                  <Spinner /> Thinking...
                </span>
              ) : (
                "Suggest one"
              )}
            </button>
            <button type="submit" disabled={isLoading || !body.trim()} className={c.primaryBtn}>
              {isLoading ? (
                <span className="flex items-center gap-2">
                  <Spinner /> Posting...
                </span>
              ) : (
                "Post to the wall"
              )}
            </button>
          </div>
          {refusal && <p className={c.subtle}>{refusal}</p>}
        </form>
      )}
    </section>
  );
}

function PostCard({ post, c, ViewerTag }) {
  return (
    <li className="py-4">
      <div className="flex items-center gap-2 mb-1">
        {post.kind === "pun" ? <DrillIcon className="w-4 h-4" /> : <DeckIcon className="w-4 h-4" />}
        <span className={c.subtle}>{post.kind === "pun" ? "Drill pun" : "Pitch"}</span>
        {post.kind === "pun" && post.aiRating ? (
          <span className={c.badge}>groan {post.aiRating}/10</span>
        ) : null}
      </div>
      <p className={c.bigLine}>{post.body}</p>
      {post.aiReaction && <p className={`${c.subtle} mt-1 italic`}>"{post.aiReaction}"</p>}
      <div className="flex items-center gap-2 mt-2 text-xs">
        <ViewerTag userHandle={post.authorHandle} />
        <span className={c.fine}>{new Date(post.createdAt).toLocaleString()}</span>
      </div>
      <Comments postId={post._id} c={c} />
    </li>
  );
}

export default function App() {
  const { useLiveQuery } = useFireproof(DB);
  const { docs: posts } = useLiveQuery("type", { key: "post", descending: true });
  const { ViewerTag } = useViewer();
  const sortedPosts = [...posts].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));

const c = {
    page: "bg-[var(--background)] text-[var(--text-primary)] min-h-screen font-[var(--font-family)]",
    heading: "text-lg font-bold",
    rule: "inline-block bg-[var(--accent)] w-[var(--vibes-spacing)] h-[var(--border-width)] min-w-[24px] min-h-[4px]",
    card: "bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius)]",
    ink: "text-[var(--text-primary)]",
    subtle: "text-[var(--text-secondary)] text-sm",
    fine: "text-[var(--text-disabled)]",
    bigLine: "text-2xl font-extrabold leading-snug break-words",
    input:
      "bg-[var(--background)] border border-[var(--border)] rounded-[var(--radius-sm)] p-3 text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-[var(--primary)] focus-visible:ring-[length:var(--border-width)]",
    primaryBtn:
      "bg-[var(--primary)] text-[var(--text-primary)] rounded-[var(--radius-sm)] px-4 py-2 min-h-[44px] font-semibold disabled:opacity-50 focus-visible:outline-none focus-visible:ring-[var(--primary)] focus-visible:ring-[length:var(--border-width)]",
    secondaryBtn:
      "bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius-sm)] px-4 py-2 min-h-[44px] focus-visible:outline-none focus-visible:ring-[var(--primary)] focus-visible:ring-[length:var(--border-width)]",
    chip:
      "flex items-center gap-1 px-3 py-2 rounded-[var(--radius-sm)] border border-[var(--border)] bg-[var(--background)] focus-visible:outline-none focus-visible:ring-[var(--primary)] focus-visible:ring-[length:var(--border-width)]",
    chipActive: "bg-[var(--accent)] text-[var(--background)] border-[var(--accent)]",
    badge: "bg-[var(--secondary)] text-[var(--background)] text-xs rounded-[var(--radius-sm)] px-2 py-0.5",
    divider: "border-t border-[var(--border)]",
  };

return (
    <div className={c.page}>
      <header id="app-header" className="px-4 pt-6 pb-2">
        <h1 className="text-3xl font-extrabold">Drill & Deck</h1>
        <p className={c.subtle}>Where dentists and founders trade drill puns for pitch decks.</p>
      </header>
      <main id="app" className="px-4 pb-10 max-w-2xl mx-auto">
        <PostForm c={c} />

<section id="feed">
          <div className="flex items-center gap-2 mb-3">
            <span className={c.rule} />
            <h2 className={c.heading}>The wall</h2>
          </div>
          {sortedPosts.length === 0 ? (
            <div className={`${c.card} p-6 text-center`}>
              <p className="mb-1 font-semibold">The wall is quiet... for now.</p>
              <p className={c.subtle}>Be the first to drop a drill pun or pitch your big idea above.</p>
            </div>
          ) : (
            <ul className={`${c.card} px-4 divide-y-0`}>
              {sortedPosts.map((post, i) => (
                <React.Fragment key={post._id}>
                  {i > 0 && <li aria-hidden className={c.divider} />}
                  <PostCard post={post} c={c} ViewerTag={ViewerTag} />
                </React.Fragment>
              ))}
            </ul>
          )}
        </section>
      </main>
    </div>
  );
}</article></body></html>