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("my-rock-library"); const { doc, merge, submit } = useDocument({ type: "specimen", name: "", mineral: "", location: "", hardness: "", notes: "", createdAt: Date.now(), }); const { docs: specimens } = useLiveQuery("type", { key: "specimen", descending: true }); const [view, setView] = useState("list"); // list | add | detail | ai const [selected, setSelected] = useState(null); const [aiDesc, setAiDesc] = useState(""); const [aiResult, setAiResult] = useState(null); const [isLoading, setIsLoading] = useState(false); const handleSubmit = (e) => { e.preventDefault(); if (!doc.name.trim()) return; merge({ createdAt: Date.now() }); submit(); setView("list"); }; const handleAI = async () => { if (!aiDesc.trim()) return; setIsLoading(true); try { const res = await callAI( `You are a geologist. The user describes a rock or mineral: "${aiDesc}". Identify it and provide details.`, { schema: { properties: { name: { type: "string", description: "Common name of the rock/mineral" }, mineral: { type: "string", description: "Mineral composition" }, hardness: { type: "string", description: "Mohs hardness scale value" }, color: { type: "string", description: "Typical color(s)" }, formation: { type: "string", description: "How it forms (igneous, sedimentary, metamorphic)" }, funFact: { type: "string", description: "One interesting fact" }, }, }, } ); const data = JSON.parse(res); setAiResult(data); } finally { setIsLoading(false); } }; const saveAiResult = async () => { if (!aiResult) return; await database.put({ type: "specimen", name: aiResult.name, mineral: aiResult.mineral, location: "", hardness: aiResult.hardness, notes: `${aiResult.formation}. ${aiResult.funFact}`, createdAt: Date.now(), }); setAiResult(null); setAiDesc(""); setView("list"); }; 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)]", 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)]", btnPrimary: "bg-[oklch(0.55_0.24_28)] text-white border-[3px] border-[oklch(0.15_0.02_280)] [box-shadow:4px_4px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] active:translate-x-[2px] active:translate-y-[2px] active:[box-shadow:none] transition-all duration-150 rounded-[4px] px-4 py-2 uppercase font-bold text-[0.75rem] tracking-[0.06em] cursor-pointer", btnYellow: "bg-[oklch(0.85_0.18_85)] text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] [box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] active:translate-x-[2px] active:translate-y-[2px] active:[box-shadow:none] transition-all duration-150 rounded-[4px] px-4 py-2 uppercase font-bold text-[0.75rem] tracking-[0.06em] cursor-pointer", btnGhost: "bg-white text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] hover:[box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] transition-all duration-150 rounded-[4px] px-4 py-2 uppercase font-bold text-[0.75rem] tracking-[0.06em] cursor-pointer", input: "w-full bg-white border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] px-3 py-2 text-[0.82rem] font-['Space_Grotesk'] focus:outline-none focus:[box-shadow:4px_4px_0px_oklch(0.15_0.02_280)] focus:translate-x-[-2px] focus:translate-y-[-2px] transition-all duration-150", label: "block uppercase text-[0.6rem] tracking-[0.15em] text-[oklch(0.50_0.02_280)] mb-1 font-['Space_Grotesk']", mono: "font-['JetBrains_Mono']", }; const Spinner = () => ( ); const rocktypeColor = (mineral) => { if (!mineral) return c.blue; const m = mineral.toLowerCase(); if (m.includes("quartz") || m.includes("silicon")) return c.blue; if (m.includes("iron") || m.includes("feldspar")) return c.red; if (m.includes("calcite") || m.includes("limestone")) return c.green; return c.yellow; }; return (

{/* NAV */} {/* LIST VIEW */} {view === "list" && (

Collection

{specimens.length} specimens

{specimens.length === 0 ? (

No specimens yet. Add your first rock!

) : (

{specimens.map((s) => (

{ setSelected(s); setView("detail"); }} >

{s.name}

{s.mineral &&

{s.mineral}

}

{s.hardness && (

H {s.hardness}

)}

{s.location && (

{s.location}

)}

))}

)}

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

New Specimen

Name * merge({ name: e.target.value })} placeholder="e.g. Rose Quartz" />

Mineral / Type merge({ mineral: e.target.value })} placeholder="e.g. Quartz" />

Location Found merge({ location: e.target.value })} placeholder="e.g. Black Hills, SD" />

Mohs Hardness merge({ hardness: e.target.value })} placeholder="e.g. 7" />

Notes

merge({ notes: e.target.value })} placeholder="Color, luster, formation notes..." />
              </div>
              <div className="sm:col-span-2 flex gap-3">
                <button type="submit" className={c.btnPrimary}>Save Specimen</button>
                <button type="button" onClick={() => setView("list")} className={c.btnGhost}>Cancel</button>
              </div>
            </form>
          </div>
        )}

{/* DETAIL VIEW */}
        {view === "detail" && selected && (
          <div>
            <button onClick={() => setView("list")} className={`${c.btnGhost} mb-4 flex items-center gap-2`}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="19" y1="12" x2="5" y2="12" /><polyline points="12 19 5 12 12 5" />
              </svg>
              Back
            </button>
            <div className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden mb-4`}>
              <div className={`${rocktypeColor(selected.mineral)} h-3`} />
              <div className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h2 className="uppercase font-bold text-[1.5rem] tracking-[-0.02em] text-[oklch(0.15_0.02_280)]">{selected.name}</h2>
                    {selected.mineral && <div className={`${c.muted} uppercase text-[0.75rem] tracking-[0.1em]`}>{selected.mineral}</div>}
                  </div>
                  <button onClick={() => database.del(selected._id).then(() => setView("list"))} className={c.btnPrimary}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14H6L5 6" /><path d="M10 11v6M14 11v6" />
                    </svg>
                  </button>
                </div>
                <div className="grid grid-cols-2 gap-4 mb-4">
                  {selected.hardness && (
                    <div className={`${c.card} border-[2px] border-[oklch(0.15_0.02_280)] [box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] rounded-[4px] p-3`}>
                      <div className={c.label}>Mohs Hardness</div>
                      <div className={`${c.mono} font-bold text-[1.5rem] text-[oklch(0.15_0.02_280)]`}>{selected.hardness}</div>
                    </div>
                  )}
                  {selected.location && (
                    <div className={`${c.card} border-[2px] border-[oklch(0.15_0.02_280)] [box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] rounded-[4px] p-3`}>
                      <div className={c.label}>Location</div>
                      <div className="font-semibold text-[0.85rem] text-[oklch(0.15_0.02_280)]">{selected.location}</div>
                    </div>
                  )}
                </div>
                {selected.notes && (
                  <div>
                    <div className={c.label}>Notes</div>
                    <p className="text-[0.85rem] text-[oklch(0.15_0.02_280)] leading-relaxed">{selected.notes}</p>
                  </div>
                )}
              </div>
            </div>
            <div className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden`}>
              <div className={`${c.green} px-5 py-3`}>
                <span className="uppercase font-bold text-[oklch(0.15_0.02_280)] text-[0.8rem] tracking-[0.08em]">Specimen Image</span>
              </div>
              <div className="p-4">
                <ImgVibes
                  prompt={`Detailed photograph of ${selected.name}${selected.mineral ? `, ${selected.mineral}` : ""} rock specimen on white background, macro photography, high detail`}
                  database={database}
                  className="w-full rounded-[4px] border-[2px] border-[oklch(0.15_0.02_280)]"
                />
              </div>
            </div>
          </div>
        )}

{/* AI ID VIEW */}
        {view === "ai" && (
          <div className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden`}>
            <div className={`${c.yellow} px-5 py-3`}>
              <span className="uppercase font-bold text-[oklch(0.15_0.02_280)] text-[0.8rem] tracking-[0.08em]">AI Rock Identifier</span>
            </div>
            <div className="p-6">
              <label className={c.label}>Describe your rock</label>
              <textarea
                className={`${c.input} resize-none h-24 mb-4`}
                value={aiDesc}
                onChange={e => setAiDesc(e.target.value)}
                placeholder="e.g. Pink, translucent, glassy, six-sided crystals, found in a riverbed in South Dakota..."
              />
              <button onClick={handleAI} disabled={isLoading || !aiDesc.trim()} className={`${c.btnYellow} flex items-center gap-2 mb-6 disabled:opacity-50`}>
                {isLoading ? <><Spinner /> Identifying...</> : <>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
                  </svg>
                  Identify Rock
                </>}
              </button>

{aiResult && (
                <div className={`border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] [box-shadow:4px_4px_0px_oklch(0.15_0.02_280)] overflow-hidden`}>
                  <div className={`${c.green} px-4 py-2`}>
                    <span className="uppercase font-bold text-[oklch(0.15_0.02_280)] text-[0.8rem] tracking-[0.08em]">Identification Result</span>
                  </div>
                  <div className="p-4 bg-white">
                    <div className="text-[1.2rem] font-bold uppercase tracking-[-0.02em] text-[oklch(0.15_0.02_280)] mb-3">{aiResult.name}</div>
                    <div className="grid grid-cols-2 gap-3 mb-3">
                      {[
                        ["Mineral", aiResult.mineral],
                        ["Hardness", aiResult.hardness],
                        ["Color", aiResult.color],
                        ["Formation", aiResult.formation],
                      ].map(([label, val]) => val && (
                        <div key={label}>
                          <div className={c.label}>{label}</div>
                          <div className="text-[0.82rem] text-[oklch(0.15_0.02_280)] font-medium">{val}</div>
                        </div>
                      ))}
                    </div>
                    {aiResult.funFact && (
                      <div className={`bg-[oklch(0.85_0.18_85_/_0.2)] border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px] p-3 text-[0.8rem] text-[oklch(0.15_0.02_280)]`}>
                        <span className="uppercase font-bold text-[0.65rem] tracking-[0.1em]">Fun Fact: </span>{aiResult.funFact}
                      </div>
                    )}
                    <div className="flex gap-3 mt-4">
                      <button onClick={saveAiResult} className={c.btnPrimary}>Save to Collection</button>
                      <button onClick={() => setAiResult(null)} className={c.btnGhost}>Dismiss</button>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>