import React, { useState } from "react"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("swatch-catalog-db"); const { doc, merge, submit } = useDocument({ type: "swatch", name: "", brand: "", hex: "#e8d5b0", room: "living-room", notes: "", createdAt: Date.now(), }); const { docs: swatches } = useLiveQuery("type", { key: "swatch", descending: true }); const [filterRoom, setFilterRoom] = useState("all"); const [selectedId, setSelectedId] = useState(null); const [generateFor, setGenerateFor] = useState(null); const [view, setView] = useState("gallery"); // gallery | add const rooms = ["living-room", "bedroom", "kitchen", "bathroom", "office", "exterior"]; const filtered = filterRoom === "all" ? swatches : swatches.filter(s => s.room === filterRoom); const selectedSwatch = swatches.find(s => s._id === selectedId); function handleSubmit(e) { e.preventDefault(); if (!doc.name.trim()) return; merge({ createdAt: Date.now() }); submit(); setView("gallery"); } function hexToRgb(hex) { const r = parseInt(hex.slice(1,3),16); const g = parseInt(hex.slice(3,5),16); const b = parseInt(hex.slice(5,7),16); return `${r}, ${g}, ${b}`; } function luminance(hex) { const r = parseInt(hex.slice(1,3),16); const g = parseInt(hex.slice(3,5),16); const b = parseInt(hex.slice(5,7),16); return (0.299*r + 0.587*g + 0.114*b); } const c = { bg: "bg-[oklch(0.96_0.01_90)]", card: "bg-white", border: "border-[oklch(0.15_0.02_280)]", 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)]", shadow: "shadow-[4px_4px_0px_oklch(0.15_0.02_280)]", shadowSm: "shadow-[3px_3px_0px_oklch(0.15_0.02_280)]", btnPrimary: "bg-[oklch(0.55_0.24_28)] text-white border-3 border-[oklch(0.15_0.02_280)] shadow-[4px_4px_0px_oklch(0.15_0.02_280)] hover: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:shadow-none transition-all duration-150", btnYellow: "bg-[oklch(0.85_0.18_85)] text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] shadow-[3px_3px_0px_oklch(0.15_0.02_280)] hover: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: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)] hover:shadow-[3px_3px_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:shadow-none transition-all duration-150", input: "w-full bg-white border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-3 py-2 text-[oklch(0.15_0.02_280)] text-sm font-[Space_Grotesk] focus:outline-none focus:shadow-[4px_4px_0px_oklch(0.15_0.02_280)] focus:-translate-x-0.5 focus:-translate-y-0.5 transition-all duration-150", }; return (

{/* Ambient bg */}

{/* Nav */}

Swatch Catalog

{/* Hero */}

Swatch Catalog

Track, preview & compare your paint samples

{/* Stats row */}

{[ { label: "Total Swatches", val: swatches.length, hdr: "bg-[oklch(0.55_0.24_28)] text-white" }, { label: "Rooms Tagged", val: [...new Set(swatches.map(s=>s.room))].length, hdr: "bg-[oklch(0.85_0.18_85)] text-[oklch(0.15_0.02_280)]" }, { label: "Brands", val: [...new Set(swatches.map(s=>s.brand).filter(Boolean))].length, hdr: "bg-[oklch(0.52_0.18_255)] text-white" }, { label: "With Preview", val: swatches.filter(s=>s.hasPreview).length, hdr: "bg-[oklch(0.62_0.19_145)] text-[oklch(0.15_0.02_280)]" }, ].map(({label,val,hdr}) => (

{label}

{val}

))}

{/* Add Form */} {view === "add" && (

New Swatch

Paint Name * merge({name:e.target.value})} placeholder="e.g. Agreeable Gray" required />

Brand merge({brand:e.target.value})} placeholder="e.g. Sherwin-Williams" />

Color

merge({hex:e.target.value})} className="w-12 h-10 border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] cursor-pointer p-0.5 bg-white" /> merge({hex:e.target.value})} placeholder="#ffffff" />

Room

Notes

merge({notes:e.target.value})} placeholder="Finish, undertones, pairing ideas..." />
              </div>
              <div className="sm:col-span-2 flex gap-3 justify-end">
                <button type="button" onClick={()=>setView("gallery")} className={`${c.btnGhost} px-4 py-2 text-xs font-bold uppercase tracking-[0.06em] rounded-[4px]`}>Cancel</button>
                <button type="submit" className={`${c.btnPrimary} px-5 py-2 text-xs font-bold uppercase tracking-[0.06em] rounded-[4px]`}>Save Swatch</button>
              </div>
            </form>
          </div>
        )}

{/* Gallery */}
        {view === "gallery" && (
          <>
            {/* Filter row */}
            <div className="flex gap-2 flex-wrap mb-4">
              {["all",...rooms].map(r=>(
                <button key={r} onClick={()=>setFilterRoom(r)} className={`px-3 py-1 text-[0.65rem] font-bold uppercase tracking-[0.08em] rounded-[4px] border-[3px] border-[oklch(0.15_0.02_280)] transition-all duration-150 ${filterRoom===r ? "bg-[oklch(0.15_0.02_280)] text-white" : "bg-white hover:bg-[oklch(0.85_0.18_85)]"}`}>
                  {r === "all" ? "All Rooms" : r.replace("-"," ")}
                </button>
              ))}
            </div>

{filtered.length === 0 && (
              <div className={`${c.card} border-[3px] ${c.border} ${c.shadow} rounded-[4px] p-10 text-center`}>
                <p className={`${c.muted} text-sm uppercase tracking-[0.1em] font-bold`}>No swatches yet</p>
                <button onClick={()=>setView("add")} className={`${c.btnYellow} mt-4 px-5 py-2 text-xs font-bold uppercase tracking-[0.06em] rounded-[4px]`}>Add First Swatch</button>
              </div>
            )}

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {filtered.map(swatch => {
                const lum = luminance(swatch.hex || "#888888");
                const textOnColor = lum > 140 ? "oklch(0.15 0.02 280)" : "white";
                return (
                  <div key={swatch._id} className={`${c.card} border-[3px] ${c.border} ${c.shadow} rounded-[4px] overflow-hidden hover:shadow-[6px_6px_0px_oklch(0.15_0.02_280)] hover:-translate-x-0.5 hover:-translate-y-0.5 transition-all duration-150`}>
                    {/* Color chip */}
                    <div style={{backgroundColor: swatch.hex, minHeight:80}} className="relative flex items-end p-2">
                      <span className="mono text-xs font-bold px-2 py-0.5 rounded-[2px]" style={{backgroundColor:"oklch(0.15 0.02 280 / 0.6)",color:"white"}}>{swatch.hex}</span>
                    </div>

<div className="p-3">
                      <div className="flex items-start justify-between gap-1">
                        <div>
                          <p className="font-bold text-sm uppercase tracking-[-0.01em]">{swatch.name}</p>
                          {swatch.brand && <p className={`${c.muted} text-xs uppercase tracking-[0.06em]`}>{swatch.brand}</p>}
                        </div>
                        <span className="text-[0.6rem] font-bold uppercase tracking-[0.08em] px-2 py-0.5 border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px] whitespace-nowrap bg-[oklch(0.85_0.18_85)]">
                          {swatch.room?.replace("-"," ")}
                        </span>
                      </div>
                      {swatch.notes && <p className={`${c.muted} text-xs mt-1 leading-relaxed`}>{swatch.notes}</p>}

<div className="flex gap-2 mt-3">
                        <button
                          onClick={()=>setSelectedId(swatch._id === selectedId ? null : swatch._id)}
                          className={`${c.btnYellow} flex-1 px-2 py-1.5 text-[0.65rem] font-bold uppercase tracking-[0.06em] rounded-[4px]`}
                        >
                          {selectedId === swatch._id ? "Close" : "Preview"}
                        </button>
                        <button
                          onClick={()=>database.put({...swatch, _deleted:true})}
                          className={`${c.btnGhost} px-2 py-1.5 text-[0.65rem] font-bold uppercase tracking-[0.06em] rounded-[4px]`}
                        >
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>
                        </button>
                      </div>

{/* AI Preview */}
                      {selectedId === swatch._id && (
                        <div className="mt-3 border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] overflow-hidden">
                          <div className="bg-[oklch(0.52_0.18_255)] text-white px-2 py-1 text-[0.6rem] font-bold uppercase tracking-[0.1em]">AI Room Preview</div>
                          <div className="p-2">
                            <ImgVibes
                              prompt={`Interior room painted in ${swatch.name} (hex ${swatch.hex}), ${swatch.room?.replace("-"," ")}, realistic photo, warm lighting, modern furniture`}
                              database={database}
                              style={{width:"100%",borderRadius:2,display:"block"}}
                            />
                            <p className={`${c.muted} text-[0.6rem] uppercase tracking-[0.08em] mt-1 text-center`}>Generated preview — colors may vary</p>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </>
        )}
      </div>
    </div>
  );
}</article></body></html>

Swatch Catalog Swatch Catalog

Swatch Catalog

Swatch CatalogSwatch Catalog

Swatch Catalog