Add GlideCanvasItem schema, update viewer data structure, and integrate Glide route and API endpoints for managing canvas items

packages/web/src/routes/api/glide-canvas.ts

@@ -0,0 +1,115 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { promises as fs } from "fs"
+import { join } from "path"
+import type { GlideCanvasItem } from "@/lib/jazz/schema"
+
+// Local storage for pending Glide canvas items (to be synced to Jazz by client)
+const STORAGE_PATH = "/Users/nikiv/fork-i/garden-co/jazz/glide-storage/pending-canvas-items.json"
+
+async function readPendingItems(): Promise<GlideCanvasItem[]> {
+  try {
+    const data = await fs.readFile(STORAGE_PATH, "utf-8")
+    return JSON.parse(data)
+  } catch (error) {
+    // File doesn't exist or is invalid - return empty array
+    return []
+  }
+}
+
+async function writePendingItems(items: GlideCanvasItem[]): Promise<void> {
+  await fs.writeFile(STORAGE_PATH, JSON.stringify(items, null, 2), "utf-8")
+}
+
+// POST add canvas item (from Glide browser)
+const addCanvasItem = async ({ request }: { request: Request }) => {
+  try {
+    const body = await request.json()
+    const item = body as GlideCanvasItem
+
+    // Validate required fields
+    if (!item.id || !item.type || !item.title) {
+      return new Response(
+        JSON.stringify({ error: "Missing required fields: id, type, title" }),
+        { status: 400, headers: { "content-type": "application/json" } }
+      )
+    }
+
+    // Read current pending items
+    const items = await readPendingItems()
+
+    // Check if item already exists (by id)
+    const existingIndex = items.findIndex((i) => i.id === item.id)
+    if (existingIndex >= 0) {
+      // Update existing item
+      items[existingIndex] = item
+    } else {
+      // Add new item
+      items.push(item)
+    }
+
+    // Write back to file
+    await writePendingItems(items)
+
+    console.log("[glide-canvas] Stored item:", {
+      id: item.id,
+      type: item.type,
+      title: item.title,
+      hasImage: !!item.imageData,
+    })
+
+    return new Response(JSON.stringify({ success: true, id: item.id }), {
+      status: 200,
+      headers: { "content-type": "application/json" },
+    })
+  } catch (error) {
+    console.error("Glide canvas POST error:", error)
+    return new Response(JSON.stringify({ error: "Internal server error" }), {
+      status: 500,
+      headers: { "content-type": "application/json" },
+    })
+  }
+}
+
+// GET retrieve pending canvas items (for client-side Jazz sync)
+const getCanvasItems = async ({ request }: { request: Request }) => {
+  try {
+    const items = await readPendingItems()
+    return new Response(JSON.stringify({ items }), {
+      status: 200,
+      headers: { "content-type": "application/json" },
+    })
+  } catch (error) {
+    console.error("Glide canvas GET error:", error)
+    return new Response(JSON.stringify({ error: "Internal server error" }), {
+      status: 500,
+      headers: { "content-type": "application/json" },
+    })
+  }
+}
+
+// DELETE clear pending items (after sync to Jazz)
+const clearCanvasItems = async ({ request }: { request: Request }) => {
+  try {
+    await writePendingItems([])
+    return new Response(JSON.stringify({ success: true }), {
+      status: 200,
+      headers: { "content-type": "application/json" },
+    })
+  } catch (error) {
+    console.error("Glide canvas DELETE error:", error)
+    return new Response(JSON.stringify({ error: "Internal server error" }), {
+      status: 500,
+      headers: { "content-type": "application/json" },
+    })
+  }
+}
+
+export const Route = createFileRoute("/api/glide-canvas")({
+  server: {
+    handlers: {
+      GET: getCanvasItems,
+      POST: addCanvasItem,
+      DELETE: clearCanvasItems,
+    },
+  },
+})

packages/web/src/routes/glide.tsx

@@ -0,0 +1,214 @@
+import { useState, useEffect, useCallback } from "react"
+import { createFileRoute } from "@tanstack/react-router"
+import { useAccount } from "jazz-tools/react"
+import { ViewerAccount, type GlideCanvasItem } from "@/lib/jazz/schema"
+import { Image, Trash2, ExternalLink, RefreshCw } from "lucide-react"
+
+export const Route = createFileRoute("/glide")({
+  component: GlidePage,
+  ssr: false,
+})
+
+function GlidePage() {
+  const me = useAccount(ViewerAccount)
+  const [syncing, setSyncing] = useState(false)
+  const [lastSync, setLastSync] = useState<Date | null>(null)
+
+  const root = me.$isLoaded ? me.root : null
+  const canvasList = root?.$isLoaded ? root.glideCanvas : null
+
+  // Auto-sync pending items every 5 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      void syncPendingItems()
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [root])
+
+  const syncPendingItems = useCallback(async () => {
+    if (!root?.glideCanvas?.$isLoaded || syncing) return
+
+    setSyncing(true)
+    try {
+      // Fetch pending items from API
+      const response = await fetch("/api/glide-canvas")
+      if (!response.ok) {
+        console.error("[glide] Failed to fetch pending items")
+        return
+      }
+
+      const data = (await response.json()) as { items: GlideCanvasItem[] }
+      const pendingItems = data.items
+
+      if (pendingItems.length === 0) {
+        return
+      }
+
+      console.log(`[glide] Syncing ${pendingItems.length} pending items to Jazz...`)
+
+      // Get existing IDs to avoid duplicates
+      const existingIds = new Set(
+        root.glideCanvas.$isLoaded
+          ? [...root.glideCanvas].map((item) => item.id)
+          : []
+      )
+
+      // Push new items to Jazz
+      let addedCount = 0
+      for (const item of pendingItems) {
+        if (!existingIds.has(item.id)) {
+          root.glideCanvas.$jazz.push(item)
+          addedCount++
+        }
+      }
+
+      if (addedCount > 0) {
+        console.log(`[glide] Added ${addedCount} new items to Jazz`)
+
+        // Clear pending items after successful sync
+        await fetch("/api/glide-canvas", { method: "DELETE" })
+        setLastSync(new Date())
+      }
+    } catch (error) {
+      console.error("[glide] Sync error:", error)
+    } finally {
+      setSyncing(false)
+    }
+  }, [root, syncing])
+
+  const handleManualSync = () => {
+    void syncPendingItems()
+  }
+
+  const handleDeleteItem = (index: number) => {
+    if (!root?.glideCanvas?.$isLoaded) return
+    root.glideCanvas.$jazz.splice(index, 1)
+  }
+
+  if (!me.$isLoaded || !root?.$isLoaded) {
+    return (
+      <div className="min-h-screen text-white grid place-items-center">
+        <p className="text-slate-400">Loading Jazz...</p>
+      </div>
+    )
+  }
+
+  const canvasItems: GlideCanvasItem[] = canvasList?.$isLoaded ? [...canvasList] : []
+
+  return (
+    <div className="min-h-screen text-white">
+      <div className="max-w-4xl mx-auto px-4 py-10">
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center gap-3">
+            <Image className="w-6 h-6 text-teal-400" />
+            <h1 className="text-2xl font-semibold">Glide Canvas</h1>
+          </div>
+          <div className="flex items-center gap-3">
+            {lastSync && (
+              <span className="text-xs text-slate-400">
+                Last sync: {lastSync.toLocaleTimeString()}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={handleManualSync}
+              disabled={syncing}
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-teal-600 hover:bg-teal-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <RefreshCw className={`w-4 h-4 ${syncing ? "animate-spin" : ""}`} />
+              {syncing ? "Syncing..." : "Sync Now"}
+            </button>
+          </div>
+        </div>
+
+        {canvasItems.length === 0 ? (
+          <div className="text-center py-12 text-slate-400">
+            <Image className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>No canvas items yet</p>
+            <p className="text-sm mt-1">
+              Capture screenshots from Glide browser (Ctrl+F) to see them here
+            </p>
+          </div>
+        ) : (
+          <div className="grid gap-4 sm:grid-cols-2">
+            {canvasItems.map((item, index) => (
+              <CanvasItemCard
+                key={item.id}
+                item={item}
+                index={index}
+                onDelete={handleDeleteItem}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function CanvasItemCard({
+  item,
+  index,
+  onDelete,
+}: {
+  item: GlideCanvasItem
+  index: number
+  onDelete: (index: number) => void
+}) {
+  const imageUrl = item.imageData ? `data:image/png;base64,${item.imageData}` : null
+  const createdAt = new Date(item.createdAt)
+
+  return (
+    <div className="group relative bg-[#0c0f18] border border-white/10 rounded-xl overflow-hidden hover:border-white/20 transition-colors">
+      {imageUrl && (
+        <div className="aspect-video bg-slate-900 relative overflow-hidden">
+          <img
+            src={imageUrl}
+            alt={item.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+        </div>
+      )}
+      <div className="p-4">
+        <div className="flex items-start justify-between gap-2 mb-2">
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-white truncate">{item.title}</p>
+            <p className="text-xs text-white/50 mt-1">
+              {item.type} · {createdAt.toLocaleDateString()}
+            </p>
+          </div>
+          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            {item.sourceUrl && (
+              <a
+                href={item.sourceUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
+              >
+                <ExternalLink className="w-4 h-4" />
+              </a>
+            )}
+            <button
+              type="button"
+              onClick={() => onDelete(index)}
+              className="p-2 rounded-lg text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 transition-colors"
+            >
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+        {item.metadata?.from && (
+          <p className="text-xs text-teal-400 mt-2">
+            From: {item.metadata.from as string}
+          </p>
+        )}
+        {item.position && (
+          <p className="text-xs text-white/40 mt-1">
+            Position: ({Math.round(item.position.x)}, {Math.round(item.position.y)})
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

packages/web/src/routes/settings.tsx

@@ -8,7 +8,6 @@ import {
   LogOut,
   Sparkles,
   UserRoundPen,
-  Lock,
   MessageCircle,
   HelpCircle,
   Copy,
@@ -237,12 +236,10 @@ function ProfileSection({
   profile: sessionProfile,
   onLogout,
   onChangeEmail,
-  onChangePassword,
 }: {
   profile: { name?: string | null; email: string; username?: string | null; image?: string | null; bio?: string | null; website?: string | null } | null | undefined
   onLogout: () => Promise<void>
   onChangeEmail: () => void
-  onChangePassword: () => void
 }) {
   const [loading, setLoading] = useState(true)
   const [profile, setProfile] = useState(sessionProfile)
@@ -462,23 +459,6 @@ function ProfileSection({
           </div>
         </SettingCard>
 
-        <SettingCard title="Password">
-          <SettingRow
-            title="Password"
-            description="Change your password."
-            control={
-              <button
-                type="button"
-                onClick={onChangePassword}
-                className="text-sm flex items-center gap-2 bg-white/5 hover:bg-white/10 text-white px-3 py-2 rounded-lg border border-white/10 transition-colors"
-              >
-                <Lock className="w-4 h-4" />
-                Change
-              </button>
-            }
-          />
-        </SettingCard>
-
         <SettingCard title="Session">
           <div className="flex items-start justify-between">
             <div className="flex flex-col gap-2 text-sm text-white/70">
@@ -878,10 +858,7 @@ function SettingsPage() {
   const { data: session, isPending } = authClient.useSession()
   const [activeSection, setActiveSection] = useState<SectionId>("preferences")
   const [showEmailModal, setShowEmailModal] = useState(false)
-  const [showPasswordModal, setShowPasswordModal] = useState(false)
   const [emailInput, setEmailInput] = useState("")
-  const [currentPassword, setCurrentPassword] = useState("")
-  const [newPassword, setNewPassword] = useState("")
 
   const handleLogout = async () => {
     await authClient.signOut()
@@ -893,24 +870,11 @@ function SettingsPage() {
     setShowEmailModal(true)
   }
 
-  const openPasswordModal = () => {
-    setCurrentPassword("")
-    setNewPassword("")
-    setShowPasswordModal(true)
-  }
-
   const handleEmailSubmit = (event: FormEvent) => {
     event.preventDefault()
     setShowEmailModal(false)
   }
 
-  const handlePasswordSubmit = (event: FormEvent) => {
-    event.preventDefault()
-    setShowPasswordModal(false)
-    setCurrentPassword("")
-    setNewPassword("")
-  }
-
   if (isPending) {
     return (
       <div className="min-h-screen text-white grid place-items-center">
@@ -936,7 +900,6 @@ function SettingsPage() {
                 profile={session?.user}
                 onLogout={handleLogout}
                 onChangeEmail={openEmailModal}
-                onChangePassword={openPasswordModal}
               />
             ) : activeSection === "streaming" ? (
               <StreamingSection username={session?.user?.username} />
@@ -981,53 +944,6 @@ function SettingsPage() {
         </Modal>
       ) : null}
 
-      {showPasswordModal ? (
-        <Modal
-          title="Change password"
-          description="Confirm your current password and set a new one."
-          onClose={() => setShowPasswordModal(false)}
-        >
-          <form onSubmit={handlePasswordSubmit} className="space-y-4">
-            <label className="block space-y-2">
-              <span className="text-sm text-slate-300">Current password</span>
-              <input
-                type="password"
-                required
-                value={currentPassword}
-                onChange={(event) => setCurrentPassword(event.target.value)}
-                className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
-                placeholder="Enter your current password"
-              />
-            </label>
-            <label className="block space-y-2">
-              <span className="text-sm text-slate-300">New password</span>
-              <input
-                type="password"
-                required
-                value={newPassword}
-                onChange={(event) => setNewPassword(event.target.value)}
-                className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
-                placeholder="Create a new password"
-              />
-            </label>
-            <div className="flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => setShowPasswordModal(false)}
-                className="px-4 py-2 rounded-lg text-sm text-slate-200 bg-white/5 hover:bg-white/10 border border-white/10 transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="px-4 py-2 rounded-lg text-sm font-semibold text-white bg-teal-600 hover:bg-teal-500 transition-colors"
-              >
-                Save password
-              </button>
-            </div>
-          </form>
-        </Modal>
-      ) : null}
     </>
   )
 }