import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; const Spinner = () => ( ); const StarIcon = () => ( ); const PlusIcon = () => ( ); const ChevronIcon = ({ up }) => ( ); const TrashIcon = () => ( ); const EyeIcon = () => ( ); const CONDITIONS = ["Perfect", "Clear", "Partly Cloudy", "Hazy", "Poor"]; const CONDITION_COLORS = { Perfect: "bg-[#4ade80] text-[#0f172a]", Clear: "bg-[#60a5fa] text-white", "Partly Cloudy": "bg-[#fbbf24] text-[#0f172a]", Hazy: "bg-[#94a3b8] text-white", Poor: "bg-[#f87171] text-white", }; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("night-sky-journal"); const { docs: entries } = useLiveQuery("_id", { descending: true, limit: 50 }); const { doc, merge, submit, reset } = useDocument({ type: "entry", date: new Date().toISOString().slice(0, 10), location: "", condition: "Clear", objects: "", notes: "", aiInsight: "", createdAt: Date.now(), }); const [showForm, setShowForm] = useState(false); const [selectedEntry, setSelectedEntry] = useState(null); const [isAnalyzing, setIsAnalyzing] = useState(false); const handleSubmit = (e) => { e.preventDefault(); submit(); setShowForm(false); }; const handleAnalyze = async () => { if (!doc.objects && !doc.notes) return; setIsAnalyzing(true); try { const prompt = `A stargazer observed the following on ${doc.date} from "${doc.location || "unknown location"}" under ${doc.condition} conditions:\nObjects spotted: ${doc.objects}\nNotes: ${doc.notes}\n\nProvide a brief, enthusiastic 3-4 sentence analysis: identify the objects, note anything interesting about them, and give one observation tip. Be concise and exciting.`; const res = await callAI(prompt, { schema: { properties: { insight: { type: "string", description: "Astronomy insight paragraph" } } }, }); const { insight } = JSON.parse(res); merge({ aiInsight: insight }); } finally { setIsAnalyzing(false); } }; const handleDelete = async (id) => { await database.del(id); if (selectedEntry?._id === id) setSelectedEntry(null); }; const c = { bg: "bg-[#f5f3ee]", card: "bg-white", ink: "text-[#1a1625]", muted: "text-[#6b6080]", border: "border-[#1a1625]", accent: "bg-[#c2410c]", accentText: "text-white", yellow: "bg-[#eab308]", yellowText: "text-[#1a1625]", green: "bg-[#16a34a]", blue: "bg-[#2563eb]", shadow: "shadow-[4px_4px_0px_#1a1625]", shadowSm: "shadow-[3px_3px_0px_#1a1625]", shadowLg: "shadow-[8px_8px_0px_#1a1625]", input: "bg-white border-[3px] border-[#1a1625] rounded-[4px] px-3 py-2 text-[#1a1625] w-full focus:outline-none focus:shadow-[4px_4px_0px_#1a1625] focus:-translate-x-0.5 focus:-translate-y-0.5 transition-all duration-150", btnPrimary: "bg-[#c2410c] text-white border-[3px] border-[#1a1625] rounded-[4px] px-4 py-2 font-bold uppercase tracking-wide text-sm shadow-[4px_4px_0px_#1a1625] hover:shadow-[6px_6px_0px_#1a1625] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-none active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed", btnSecondary: "bg-[#eab308] text-[#1a1625] border-[3px] border-[#1a1625] rounded-[4px] px-4 py-2 font-bold uppercase tracking-wide text-sm shadow-[3px_3px_0px_#1a1625] hover:shadow-[6px_6px_0px_#1a1625] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-none active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed", btnGhost: "bg-white text-[#1a1625] border-[3px] border-[#1a1625] rounded-[4px] px-3 py-1.5 font-bold uppercase tracking-wide text-xs hover:shadow-[3px_3px_0px_#1a1625] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-none active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150 cursor-pointer", }; return (

{/* Ambient background */}

{/* NAV */} {/* HERO */}

Log The Sky

Record celestial observations. Build your personal sky archive.

{/* FORM */} {showForm && (

New Observation Entry

Date merge({ date: e.target.value })} required />

Location merge({ location: e.target.value })} />

Sky Condition

Objects Spotted merge({ objects: e.target.value })} />

Observation Notes

merge({ notes: e.target.value })} />
              </div>

{doc.aiInsight && (
                <div className="md:col-span-2 bg-[#eab308]/10 border-[3px] border-[#eab308] rounded-[4px] p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <StarIcon />
                    <span className="text-[0.65rem] uppercase tracking-widest font-bold text-[#92400e]">AI Sky Analysis</span>
                  </div>
                  <p className="text-sm text-[#1a1625] leading-relaxed">{doc.aiInsight}</p>
                </div>
              )}

<div className="md:col-span-2 flex flex-wrap gap-3 items-center justify-between">
                <button type="button" className={c.btnSecondary} onClick={handleAnalyze} disabled={isAnalyzing || (!doc.objects && !doc.notes)}>
                  {isAnalyzing ? <span className="flex items-center gap-2"><Spinner /> Analyzing...</span> : <span className="flex items-center gap-2"><StarIcon /> AI Analysis</span>}
                </button>
                <div className="flex gap-3">
                  <button type="button" className={c.btnGhost} onClick={() => setShowForm(false)}>Cancel</button>
                  <button type="submit" className={c.btnPrimary}>Save Entry</button>
                </div>
              </div>
            </form>
          </div>
        )}

{/* DETAIL VIEW */}
        {selectedEntry && (
          <div className={`${c.card} border-[3px] ${c.border} rounded-[4px] ${c.shadowLg} mb-8 overflow-hidden`}>
            <div className="bg-[#1a1625] px-5 py-3 flex items-center justify-between">
              <span className="text-white font-bold uppercase tracking-wide text-sm">{selectedEntry.date} — {selectedEntry.location || "Unknown Location"}</span>
              <button onClick={() => setSelectedEntry(null)} className="text-white opacity-70 hover:opacity-100">
                <ChevronIcon up />
              </button>
            </div>
            <div className="p-5 space-y-4">
              <div className="flex flex-wrap gap-3 items-center">
                <span className={`text-[0.65rem] uppercase tracking-widest font-bold px-3 py-1 border-[2px] border-[#1a1625] rounded-[4px] ${CONDITION_COLORS[selectedEntry.condition] || "bg-gray-200"}`}>
                  {selectedEntry.condition}
                </span>
                {selectedEntry.objects && (
                  <span className="text-sm font-semibold text-[#1a1625]" style={{ fontFamily: "'JetBrains Mono', monospace" }}>{selectedEntry.objects}</span>
                )}
              </div>
              {selectedEntry.notes && (
                <div>
                  <div className={`text-[0.65rem] uppercase tracking-widest font-semibold ${c.muted} mb-1`}>Notes</div>
                  <p className="text-sm text-[#1a1625] leading-relaxed">{selectedEntry.notes}</p>
                </div>
              )}
              {selectedEntry.aiInsight && (
                <div className="bg-[#eab308]/10 border-[3px] border-[#eab308] rounded-[4px] p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <StarIcon />
                    <span className="text-[0.65rem] uppercase tracking-widest font-bold text-[#92400e]">AI Sky Analysis</span>
                  </div>
                  <p className="text-sm text-[#1a1625] leading-relaxed">{selectedEntry.aiInsight}</p>
                </div>
              )}
            </div>
          </div>
        )}

{/* ENTRIES LIST */}
        <div className={`${c.card} border-[3px] ${c.border} rounded-[4px] ${c.shadow} overflow-hidden`}>
          <div className="border-b-[3px] border-[#1a1625] px-5 py-3 flex items-center justify-between bg-[#1a1625]">
            <span className="text-white font-bold uppercase tracking-wide text-sm">Observation Sessions</span>
          </div>
          {entries.length === 0 ? (
            <div className="p-10 text-center">
              <div className={`text-[0.7rem] uppercase tracking-widest font-semibold ${c.muted} mb-2`}>No sessions logged yet</div>
              <p className={`text-sm ${c.muted}`}>Add your first stargazing entry above.</p>
            </div>
          ) : (
            <div>
              {entries.map((entry, i) => (
                <div key={entry._id}
                  className={`flex items-start gap-4 px-5 py-4 cursor-pointer hover:bg-[#eab308]/20 transition-colors duration-100 ${i < entries.length - 1 ? "border-b-[2px] border-[#1a1625]/20" : ""}`}
                  onClick={() => setSelectedEntry(selectedEntry?._id === entry._id ? null : entry)}
                >
                  <div className="min-w-[90px]">
                    <div className="text-xs font-bold text-[#1a1625] uppercase tracking-tight" style={{ fontFamily: "'JetBrains Mono', monospace" }}>{entry.date}</div>
                    <span className={`mt-1 inline-block text-[0.6rem] font-bold uppercase tracking-wide px-2 py-0.5 border-[2px] border-[#1a1625] rounded-[4px] ${CONDITION_COLORS[entry.condition] || "bg-gray-200"}`}>
                      {entry.condition}
                    </span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="font-semibold text-sm text-[#1a1625] truncate">{entry.location || "No location"}</div>
                    {entry.objects && <div className={`text-xs ${c.muted} truncate mt-0.5`}>{entry.objects}</div>}
                    {entry.aiInsight && (
                      <div className="flex items-center gap-1 mt-1">
                        <StarIcon />
                        <span className="text-[0.6rem] uppercase tracking-widest text-[#92400e] font-bold">AI insight</span>
                      </div>
                    )}
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    <button className={`${c.btnGhost} flex items-center gap-1`} onClick={e => { e.stopPropagation(); setSelectedEntry(entry); }}>
                      <EyeIcon />
                    </button>
                    <button className="bg-white text-[#c2410c] border-[2px] border-[#1a1625] rounded-[4px] p-1.5 hover:bg-[#c2410c] hover:text-white transition-colors duration-150 cursor-pointer"
                      onClick={e => { e.stopPropagation(); handleDelete(entry._id); }}>
                      <TrashIcon />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

</div>
    </div>
  );
}</article></body></html>