import React, { useState } from "react"; import { callAI } from "call-ai"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("thread-exchange-db"); const { doc, merge, submit } = useDocument({ type: "listing", title: "", size: "", condition: "", description: "", createdAt: Date.now(), }); const { docs: listings } = useLiveQuery("type", { key: "listing", descending: true }); const [view, setView] = useState("browse"); // browse | add | detail const [selected, setSelected] = useState(null); const [aiPitch, setAiPitch] = useState(""); const [aiLoading, setAiLoading] = useState(false); const [myStyle, setMyStyle] = useState(""); const [uploadedFile, setUploadedFile] = useState(null); const [dragOver, setDragOver] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); if (!doc.title.trim()) return; const savedDoc = { ...doc, createdAt: Date.now() }; if (uploadedFile) { savedDoc._files = { photo: uploadedFile }; } await database.put(savedDoc); setUploadedFile(null); submit(e); setView("browse"); }; const handleInterest = async (listing) => { if (!myStyle.trim()) return; setAiLoading(true); try { const res = await callAI( `I want to swap for this clothing item: "${listing.title}" (${listing.size}, ${listing.condition}). Description: "${listing.description}". My style: "${myStyle}". Write a short, convincing 2-sentence pitch for why I'd be a great swap partner. Be friendly and specific.`, { schema: { properties: { pitch: { type: "string" } } } } ); const data = JSON.parse(res); setAiPitch(data.pitch); await database.put({ type: "interest", listingId: listing._id, listingTitle: listing.title, style: myStyle, pitch: data.pitch, createdAt: Date.now(), }); } finally { setAiLoading(false); } }; const handleDrop = (e) => { e.preventDefault(); setDragOver(false); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith("image/")) setUploadedFile(file); }; const sizes = ["XS", "S", "M", "L", "XL", "XXL", "One Size"]; const conditions = ["New with tags", "Like new", "Good", "Fair", "Well loved"]; const c = { bg: "bg-[oklch(0.96_0.01_90)]", card: "bg-white border-[3px] border-[oklch(0.15_0.02_280)]", shadow: "[box-shadow:4px_4px_0px_oklch(0.15_0.02_280)]", shadowSm: "[box-shadow:3px_3px_0px_oklch(0.15_0.02_280)]", shadowHover: "hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:-translate-x-0.5 hover:-translate-y-0.5", ink: "text-[oklch(0.15_0.02_280)]", muted: "text-[oklch(0.50_0.02_280)]", red: "bg-[oklch(0.55_0.24_28)]", yellow: "bg-[oklch(0.85_0.18_85)]", green: "bg-[oklch(0.62_0.19_145)]", blue: "bg-[oklch(0.52_0.18_255)]", input: "bg-white border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-3 py-2 w-full text-[oklch(0.15_0.02_280)] font-[Space_Grotesk] text-sm focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 focus:[box-shadow:4px_4px_0px_oklch(0.15_0.02_280)] transition-all duration-150", btnPrimary: "bg-[oklch(0.55_0.24_28)] text-white border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-4 py-2 font-[Space_Grotesk] font-700 text-xs uppercase tracking-[0.06em] cursor-pointer [box-shadow:4px_4px_0px_oklch(0.15_0.02_280)] hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:[box-shadow:none] transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed", btnYellow: "bg-[oklch(0.85_0.18_85)] text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-4 py-2 font-[Space_Grotesk] font-700 text-xs uppercase tracking-[0.06em] cursor-pointer [box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:[box-shadow:none] transition-all duration-150", btnGhost: "bg-white text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-4 py-2 font-[Space_Grotesk] font-700 text-xs uppercase tracking-[0.06em] cursor-pointer hover:[box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] hover:-translate-x-0.5 hover:-translate-y-0.5 transition-all duration-150", label: "block text-[oklch(0.50_0.02_280)] text-[0.65rem] uppercase tracking-[0.15em] mb-1 font-[Space_Grotesk]", mono: "font-[JetBrains_Mono]", heading: "font-[Space_Grotesk] font-bold uppercase tracking-[-0.02em]", }; const Spinner = () => ( ); const conditionColor = (c) => { if (c === "New with tags" || c === "Like new") return "bg-[oklch(0.62_0.19_145)] text-[oklch(0.15_0.02_280)]"; if (c === "Good") return "bg-[oklch(0.85_0.18_85)] text-[oklch(0.15_0.02_280)]"; return "bg-[oklch(0.50_0.02_280)] text-white"; }; return ( <>

{/* Ambient background */}

{/* NAV */}

Thread Exchange

{["browse", "add"].map(v => ( ))}

{/* HERO accent bar */}

Swap Threads, Not Cash Swap Threads, Not Cash

List what you have. Find what you want. Exchange with style.

{/* ADD LISTING VIEW */} {view === "add" && (

Add a Listing

Item Name * merge({ title: e.target.value })} placeholder="e.g. Vintage Levi's 501 Jeans" required />

Size

Condition

Description

merge({ description: e.target.value })} placeholder="Brand, style notes, measurements, what you'd swap for..." />
                </div>
                {/* Photo upload */}
                <div>
                  <label className={c.label}>Photo</label>
                  <div
                    onDrop={handleDrop}
                    onDragOver={e => { e.preventDefault(); setDragOver(true); }}
                    onDragLeave={() => setDragOver(false)}
                    onClick={() => document.getElementById("file-input").click()}
                    className={`border-[3px] border-dashed border-[oklch(0.15_0.02_280)] rounded-[4px] p-6 text-center cursor-pointer transition-all duration-150 ${dragOver ? "bg-[oklch(0.85_0.18_85)]" : "bg-white hover:bg-[oklch(0.96_0.01_90)]"}`}
                  >
                    {uploadedFile ? (
                      <div className="flex items-center justify-center gap-2">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="oklch(0.62 0.19 145)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                        <span className={`text-sm ${c.ink}`}>{uploadedFile.name}</span>
                      </div>
                    ) : (
                      <div>
                        <svg className="mx-auto mb-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.50 0.02 280)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                        <p className={`text-sm ${c.muted}`}>Drop photo here or click to upload</p>
                      </div>
                    )}
                    <input id="file-input" type="file" accept="image/*" className="hidden" onChange={e => setUploadedFile(e.target.files[0])} />
                  </div>
                </div>
                <div className="flex gap-3 pt-2">
                  <button type="submit" className={c.btnPrimary}>Post Listing</button>
                  <button type="button" className={c.btnGhost} onClick={() => setView("browse")}>Cancel</button>
                </div>
              </form>
            </div>
          )}

{/* DETAIL VIEW */}
          {view === "detail" && selected && (
            <div className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden`}>
              <div className="h-[5px] bg-[oklch(0.55_0.24_28)]" />
              <div className="p-6">
                <button onClick={() => { setView("browse"); setSelected(null); setAiPitch(""); }} className={`${c.btnGhost} mb-4 flex items-center gap-2`}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                  Back
                </button>
                <div className="grid md:grid-cols-2 gap-6">
                  <div className={`border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] overflow-hidden bg-[oklch(0.96_0.01_90)] flex items-center justify-center min-h-[200px]`}>
                    {selected._files?.photo ? (
                      <img src={URL.createObjectURL(selected._files.photo)} alt={selected.title} className="w-full object-cover" />
                    ) : (
                      <img src={`https://picsum.photos/seed/${selected._id}/400/400`} alt={selected.title} className="w-full object-cover" />
                    )}
                  </div>
                  <div>
                    <h2 className={`${c.heading} text-2xl ${c.ink} mb-2`}>{selected.title}</h2>
                    <div className="flex gap-2 flex-wrap mb-3">
                      {selected.size && <span className={`${c.mono} text-xs border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-2 py-0.5 ${c.ink} bg-[oklch(0.85_0.18_85)]`}>{selected.size}</span>}
                      {selected.condition && <span className={`${c.mono} text-xs border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-2 py-0.5 ${conditionColor(selected.condition)}`}>{selected.condition}</span>}
                    </div>
                    {selected.description && <p className={`text-sm ${c.ink} mb-4 leading-relaxed`}>{selected.description}</p>}
                    <p className={`${c.muted} text-xs mb-4`}>Listed {new Date(selected.createdAt).toLocaleDateString()}</p>

{/* AI Pitch */}
                    <div className={`border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] p-4 bg-[oklch(0.96_0.01_90)]`}>
                      <label className={c.label}>Your Style (for AI swap pitch)</label>
                      <textarea
                        className={`${c.input} h-20 resize-none mb-3`}
                        value={myStyle}
                        onChange={e => setMyStyle(e.target.value)}
                        placeholder="Describe your style: minimalist, vintage 90s, streetwear..."
                      />
                      <button
                        className={c.btnPrimary}
                        onClick={() => handleInterest(selected)}
                        disabled={aiLoading || !myStyle.trim()}
                      >
                        {aiLoading ? <span className="flex items-center gap-2"><Spinner /> Generating...</span> : "Generate Swap Pitch"}
                      </button>
                      {aiPitch && (
                        <div className={`mt-4 border-[3px] border-[oklch(0.62_0.19_145)] rounded-[4px] p-3 bg-white`}>
                          <p className={`text-[0.65rem] uppercase tracking-[0.15em] ${c.muted} mb-1`}>Your AI Swap Pitch</p>
                          <p className={`text-sm ${c.ink} leading-relaxed`}>{aiPitch}</p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

{/* BROWSE VIEW */}
          {view === "browse" && (
            <>
              <div className="flex items-center justify-between mb-4">
                <h2 className={`${c.heading} text-lg ${c.ink}`}>Available Swaps</h2>
                <span className={`${c.mono} text-xs ${c.muted} border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-2 py-0.5 bg-white`}>{listings.length} items</span>
              </div>
              {listings.length === 0 ? (
                <div className={`${c.card} ${c.shadowSm} rounded-[4px] p-10 text-center`}>
                  <svg className="mx-auto mb-3" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="oklch(0.50 0.02 280)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20.38 3.46L16 2a4 4 0 01-8 0L3.62 3.46a2 2 0 00-1.34 2.23l.58 3.57a1 1 0 00.99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 002-2V10h2.15a1 1 0 00.99-.84l.58-3.57a2 2 0 00-1.34-2.23z"/></svg>
                  <p className={`${c.muted} text-sm uppercase tracking-[0.08em]`}>No listings yet — be first!</p>
                  <button className={`${c.btnYellow} mt-4`} onClick={() => setView("add")}>Add an Item</button>
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                  {listings.map(listing => (
                    <div key={listing._id}
                      onClick={() => { setSelected(listing); setAiPitch(""); setView("detail"); }}
                      className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden cursor-pointer transition-all duration-150 hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:[box-shadow:none]`}>
                      <div className="aspect-square overflow-hidden border-b-[3px] border-[oklch(0.15_0.02_280)] bg-[oklch(0.96_0.01_90)]">
                        <img
                          src={`https://picsum.photos/seed/${listing._id}/300/300`}
                          alt={listing.title}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div className="p-3">
                        <h3 className={`${c.heading} text-sm ${c.ink} mb-2 truncate`}>{listing.title}</h3>
                        <div className="flex gap-1 flex-wrap">
                          {listing.size && <span className={`${c.mono} text-[0.65rem] border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-1.5 py-0.5 bg-[oklch(0.85_0.18_85)] ${c.ink}`}>{listing.size}</span>}
                          {listing.condition && <span className={`${c.mono} text-[0.65rem] border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-1.5 py-0.5 ${conditionColor(listing.condition)}`}>{listing.condition}</span>}
                        </div>
                        {listing.description && <p className={`text-xs ${c.muted} mt-2 line-clamp-2`}>{listing.description}</p>}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </>
  );
}</article></body></html>

Available Swaps

Jens

Jens