initial commit on Federted servers

web/components/bookmark-detail-sheet.tsx

@@ -0,0 +1,391 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Textarea } from '@/components/ui/textarea'
+import { ExternalLink, Edit, Save, X, Trash2, Share2, Globe, Users, Calendar, Clock, Mail, Tag } from 'lucide-react'
+import { toast } from 'sonner'
+import type { Bookmark } from '@/components/app-shell'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { BookmarkExtras } from '@/components/bookmark-extras'
+import { fetchReference } from '@/lib/reference-data'
+import { format } from 'date-fns'
+
+interface Props {
+  bookmark: Bookmark | null
+  onClose: () => void
+  onUpdate: () => void
+}
+
+export function BookmarkDetailSheet({ bookmark, onClose, onUpdate }: Props) {
+  const [editing, setEditing] = useState(false)
+  const [notes, setNotes] = useState('')
+  const [kanban, setKanban] = useState('INBOX')
+  const [dueDate, setDueDate] = useState('')
+  const [alertAt, setAlertAt] = useState('')
+  const [isPublic, setIsPublic] = useState(false)
+  const [imapEnabled, setImapEnabled] = useState(false)
+  const [imapQuery, setImapQuery] = useState('')
+  const [shareSearch, setShareSearch] = useState('')
+  const [shareResults, setShareResults] = useState<any[]>([])
+  const [saving, setSaving] = useState(false)
+  const [effectiveId, setEffectiveId] = useState<string | null>(null)
+  const [columns, setColumns] = useState<any[]>([])
+  const [contacts, setContacts] = useState<any[]>([])
+  const [columnId, setColumnId] = useState('')
+  const [contactId, setContactId] = useState('')
+  const [title, setTitle] = useState('')
+  const [url, setUrl] = useState('')
+  const [description, setDescription] = useState('')
+  const [tagIds, setTagIds] = useState<string[]>([])
+  const [allTags, setAllTags] = useState<{ id: string; name: string; color: string; ownerId?: string }[]>([])
+  // Review CR-04: set when a save hit a 409. The form keeps the unsaved
+  // draft; the banner is the explicit, persistent resolution path (a toast
+  // action alone would sit under the sheet's stacking context and vanish).
+  const [conflict, setConflict] = useState(false)
+  const canEdit = !!bookmark && effectiveId === bookmark.ownerId
+  useEffect(() => {
+    if (!bookmark) return
+    let cancelled = false
+    // Cached + deduplicated: opening the sheet repeatedly no longer fires
+    // four identical requests each time (fetchReference never rejects).
+    ;(async () => {
+      const [me, cols, people, tags] = await Promise.all([
+        fetchReference<{ effectiveUser?: { id: string } }>('me'),
+        fetchReference<any[]>('columns'),
+        fetchReference<any[]>('contacts'),
+        fetchReference<{ id: string; name: string; color: string; ownerId?: string }[]>('tags'),
+      ])
+      if (cancelled) return
+      if (me?.effectiveUser?.id) setEffectiveId(me.effectiveUser.id)
+      if (cols) setColumns(cols)
+      if (people) setContacts(people)
+      if (tags) setAllTags(tags)
+    })()
+    return () => { cancelled = true }
+  }, [bookmark])
+
+  useEffect(() => {
+    if (bookmark) {
+      const timer = setTimeout(() => {
+      setNotes(bookmark?.notes ?? '')
+      setKanban(bookmark?.kanbanStatus ?? 'INBOX')
+      setDueDate(bookmark?.dueDate ? new Date(bookmark.dueDate).toISOString().split('T')[0] : '')
+      setAlertAt(bookmark?.alertAt ? format(new Date(bookmark.alertAt), "yyyy-MM-dd'T'HH:mm") : '')
+      setIsPublic(bookmark?.isPublic ?? false)
+      setImapEnabled(bookmark?.imapWatchEnabled ?? false)
+      setImapQuery(bookmark?.imapQuery ?? '')
+      setEditing(false)
+      setColumnId(bookmark.kanbanColumnId || '')
+      setContactId(bookmark.contactId || '')
+      setTitle(bookmark.title || '')
+      setUrl(bookmark.url)
+      setDescription(bookmark.description || '')
+      setTagIds(bookmark.tags.map(({ tag }) => tag.id))
+      // A refreshed bookmark prop (after an explicit reload) clears the
+      // conflict state along with the form.
+      setConflict(false)
+      }, 0)
+      return () => clearTimeout(timer)
+    }
+  }, [bookmark])
+
+  const handleSave = useCallback(async () => {
+    if (!bookmark) return
+    setSaving(true)
+    try {
+      const res = await fetch(`/api/bookmarks/${bookmark.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          notes,
+          title,
+          url,
+          description: description || null,
+          tagIds: tagIds.length === bookmark.tags.length && bookmark.tags.every(({ tag }) => tagIds.includes(tag.id)) ? undefined : tagIds,
+          kanbanColumnId: columnId || null,
+          contactId: contactId || null,
+          kanbanStatus: kanban,
+          dueDate: dueDate || null,
+          alertAt: alertAt ? new Date(alertAt).toISOString() : null,
+          isPublic,
+          imapWatchEnabled: imapEnabled,
+          imapQuery: imapQuery || null,
+          // Optimistic concurrency (review CR-04): the save carries the
+          // version this form was opened from; a newer edit elsewhere is a
+          // 409 and this draft is NOT lost silently.
+          version: bookmark.version ?? 0,
+        }),
+      })
+      if (res.ok) {
+        toast.success('Bookmark updated')
+        setEditing(false)
+        setConflict(false)
+        onUpdate()
+      } else if (res.status === 409) {
+        // Review CR-04: keep the unsaved form exactly as it is; the inline
+        // conflict banner below is the explicit resolution path. Reloading
+        // is a deliberate user choice so anything worth keeping can be
+        // copied first.
+        setConflict(true)
+        toast.error('This bookmark was changed elsewhere — your edits were NOT saved')
+      } else {
+        toast.error('Failed to update')
+      }
+    } catch { toast.error('Error saving') }
+    setSaving(false)
+  }, [bookmark, notes, title, url, description, tagIds, columnId, contactId, kanban, dueDate, alertAt, isPublic, imapEnabled, imapQuery, onUpdate])
+
+  const handleDelete = useCallback(async () => {
+    if (!bookmark || !confirm('Delete this bookmark?')) return
+    const response = await fetch(`/api/bookmarks/${bookmark.id}`, { method: 'DELETE' })
+    if (!response.ok) { toast.error('Could not delete bookmark'); return }
+    toast.success('Bookmark deleted')
+    onClose()
+    onUpdate()
+  }, [bookmark, onClose, onUpdate])
+
+  const searchUsers = useCallback(async (q: string) => {
+    setShareSearch(q)
+    if (q.length < 2) { setShareResults([]); return }
+    try {
+      const res = await fetch(`/api/users/search?q=${encodeURIComponent(q)}`)
+      if (res.ok) setShareResults(await res.json())
+    } catch { /* ignore */ }
+  }, [])
+
+  const shareWith = useCallback(async (userId: string) => {
+    if (!bookmark) return
+    const response = await fetch(`/api/bookmarks/${bookmark.id}/share`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ userIds: [userId] }),
+    })
+    if (!response.ok) { toast.error('Could not share bookmark'); return }
+    toast.success('Shared!')
+    setShareSearch('')
+    setShareResults([])
+    onUpdate()
+  }, [bookmark, onUpdate])
+
+  const togglePublic = useCallback(async () => {
+    if (!bookmark) return
+    const response = await fetch(`/api/bookmarks/${bookmark.id}/share`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ isPublic: !isPublic }),
+    })
+    if (!response.ok) { toast.error('Could not change public access'); return }
+    setIsPublic(!isPublic)
+    toast.success(isPublic ? 'Made private' : 'Made public')
+    onUpdate()
+  }, [bookmark, isPublic, onUpdate])
+
+  const domain = (() => { try { return bookmark ? new URL(bookmark.url).hostname : '' } catch { return '' } })()
+
+  return (
+    <Sheet open={!!bookmark} onOpenChange={() => onClose()}>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            {bookmark?.favicon && (
+              <img src={bookmark.favicon} alt="" referrerPolicy="no-referrer" className="h-5 w-5 rounded" onError={(e: any) => { e.target.style.display = 'none' }} />
+            )}
+            <span className="truncate">{bookmark?.title ?? 'Untitled'}</span>
+          </SheetTitle>
+        </SheetHeader>
+
+        <div className="mt-4 space-y-6">
+          {/* URL */}
+          <a
+            href={bookmark?.url ?? '#'}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 rounded-lg bg-primary/10 px-4 py-3 text-sm font-medium text-primary hover:bg-primary/20 transition-colors"
+          >
+            <ExternalLink className="h-4 w-4 shrink-0" />
+            <span className="truncate">{bookmark?.url ?? ''}</span>
+          </a>
+
+          {canEdit && <div className="space-y-3">
+            <label className="block text-xs font-medium" htmlFor="bookmark-url">URL<Input id="bookmark-url" value={url} onChange={e => setUrl(e.target.value)} className="mt-1" /></label>
+            <label className="block text-xs font-medium" htmlFor="bookmark-description">Description<Textarea id="bookmark-description" value={description} onChange={e => setDescription(e.target.value)} rows={2} className="mt-1" /></label>
+          </div>}
+
+          {/* OG Preview */}
+          {bookmark?.ogImage && (
+            <div className="rounded-lg border overflow-hidden">
+              <img src={bookmark.ogImage} alt="" referrerPolicy="no-referrer" className="w-full aspect-video object-cover" onError={(e: any) => { e.target.style.display = 'none' }} />
+              <div className="p-3">
+                <p className="text-sm font-medium">{bookmark?.ogTitle ?? bookmark?.title}</p>
+                <p className="text-xs text-muted-foreground mt-1">{bookmark?.ogDescription}</p>
+                <p className="text-xs text-muted-foreground mt-1">{domain}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Tags */}
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-1.5 flex items-center gap-1"><Tag className="h-3 w-3" /> Tags</p>
+            <div className="flex flex-wrap gap-1.5">
+              {(bookmark?.tags ?? []).map((bt: any) => (
+                <Badge key={bt?.tag?.id} variant="secondary" style={{ backgroundColor: `${bt?.tag?.color ?? '#6366f1'}20`, color: bt?.tag?.color ?? '#6366f1' }}>
+                  {bt?.tag?.name ?? ''}
+                </Badge>
+              ))}
+              {(bookmark?.tags?.length ?? 0) === 0 && <span className="text-xs text-muted-foreground">No tags</span>}
+            </div>
+            {canEdit && bookmark && <div className="mt-2 space-y-1">
+              {[...new Map([...allTags, ...bookmark.tags.map(({ tag }) => tag)].map(tag => [tag.id, tag])).values()].map(tag => <label key={tag.id} className="flex items-center gap-2 text-sm">
+                <input type="checkbox" checked={tagIds.includes(tag.id)} onChange={e => setTagIds(previous => e.target.checked ? [...previous, tag.id] : previous.filter(id => id !== tag.id))} />{tag.name}
+                {/* Group-wide tag sharing is a product decision; make the audience
+                    visible before a tag is attached to private material (review). */}
+                {tag.ownerId && effectiveId && tag.ownerId !== effectiveId && (
+                  <span className="text-xs text-muted-foreground">(shared tag — everyone with this tag can see bookmarks under it)</span>
+                )}
+              </label>)}
+            </div>}
+          </div>
+
+          {/* Notes */}
+          {canEdit && <div className="space-y-2"><label className="text-xs font-medium">Title</label><Input value={title} onChange={e => setTitle(e.target.value)} /></div>}
+          <div>
+            <div className="flex items-center justify-between mb-1.5">
+              <p className="text-xs font-medium text-muted-foreground">Notes</p>
+              <Button disabled={!canEdit} variant="ghost" size="xs" onClick={() => setEditing(!editing)}>
+                {editing ? <X className="h-3 w-3" /> : <Edit className="h-3 w-3" />}
+              </Button>
+            </div>
+            {editing ? (
+              <Textarea value={notes} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setNotes(e.target.value)} rows={6} placeholder="Markdown notes..." />
+            ) : (
+              <div className="prose prose-sm dark:prose-invert max-w-none rounded-lg bg-muted/50 p-3 min-h-[60px]">
+                {notes ? <ReactMarkdown remarkPlugins={[remarkGfm]}>{notes}</ReactMarkdown> : <span className="text-muted-foreground text-xs">No notes</span>}
+              </div>
+            )}
+          </div>
+
+          {/* Kanban Status */}
+          <fieldset disabled={!canEdit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-3">
+            <label className="text-xs font-medium">Column<select className="mt-1 w-full rounded border bg-background p-2" value={columnId} onChange={e => setColumnId(e.target.value)}><option value="">Use legacy status</option>{columns.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}</select></label>
+            <label className="text-xs font-medium">Contact<select className="mt-1 w-full rounded border bg-background p-2" value={contactId} onChange={e => setContactId(e.target.value)}><option value="">No contact</option>{contacts.map(c => <option key={c.id} value={c.id}>{c.displayName}</option>)}</select></label>
+          </div>
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-1.5">Status</p>
+            <div className="flex gap-1.5">
+              {['INBOX', 'TODO', 'IN_PROGRESS', 'DONE'].map((s: string) => (
+                <Button
+                  key={s}
+                  variant={kanban === s ? 'default' : 'outline'}
+                  size="xs"
+                  onClick={() => setKanban(s)}
+                >
+                  {s.replace('_', ' ')}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          {/* Due Date & Alert */}
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1.5 flex items-center gap-1"><Calendar className="h-3 w-3" /> Due Date</p>
+              <Input type="date" value={dueDate} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDueDate(e.target.value)} />
+            </div>
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1.5 flex items-center gap-1"><Clock className="h-3 w-3" /> Alert</p>
+              <Input type="datetime-local" value={alertAt} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAlertAt(e.target.value)} />
+            </div>
+          </div>
+
+          {/* Contact */}
+          {bookmark?.contact && (
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1.5 flex items-center gap-1"><Users className="h-3 w-3" /> Contact</p>
+              <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2">
+                <div className="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center text-xs font-bold text-primary">
+                  {(bookmark.contact?.displayName ?? '?')[0]?.toUpperCase()}
+                </div>
+                <div>
+                  <p className="text-sm font-medium">{bookmark.contact?.displayName}</p>
+                  <p className="text-xs text-muted-foreground">{bookmark.contact?.email}</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* IMAP Watch */}
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-1.5 flex items-center gap-1"><Mail className="h-3 w-3" /> Mailbox Watch</p>
+            <div className="flex items-center gap-2">
+              <label className="flex items-center gap-2 text-sm">
+                <input type="checkbox" checked={imapEnabled} onChange={() => setImapEnabled(!imapEnabled)} className="rounded" />
+                Enabled
+              </label>
+              {imapEnabled && (
+                <Input placeholder="Search query (subject/from)" value={imapQuery} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setImapQuery(e.target.value)} className="flex-1" />
+              )}
+            </div>
+          </div>
+
+          {/* Sharing */}
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-1.5 flex items-center gap-1"><Share2 className="h-3 w-3" /> Sharing</p>
+            <div className="space-y-2">
+              <Button variant={isPublic ? 'default' : 'outline'} size="sm" onClick={togglePublic} className="gap-1.5">
+                <Globe className="h-3 w-3" />
+                {isPublic ? 'Public' : 'Private'}
+              </Button>
+              {isPublic && (
+                <div className="space-y-1 text-xs text-muted-foreground">
+                  <p>
+                    Public link: <code className="bg-muted px-1 rounded">/share/bookmark/{bookmark?.id}</code>
+                  </p>
+                  <p>Anyone with the link sees the title, description, <span className="font-medium text-foreground">notes</span>, due date, tags and preview. Contacts, alerts, mailbox watches and your identity stay private.</p>
+                </div>
+              )}
+              <Input placeholder="Search users to share with..." value={shareSearch} onChange={(e: React.ChangeEvent<HTMLInputElement>) => searchUsers(e.target.value)} />
+              {shareResults.map((u: any) => (
+                <button key={u?.id} onClick={() => shareWith(u?.id)} className="flex items-center gap-2 w-full rounded-md px-2 py-1.5 hover:bg-muted text-sm">
+                  <span className="h-6 w-6 rounded-full bg-primary/20 flex items-center justify-center text-xs font-bold text-primary">
+                    {(u?.name ?? u?.email ?? '?')[0]?.toUpperCase()}
+                  </span>
+                  {u?.name ?? u?.email}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Actions */}
+          </fieldset>
+          {conflict && canEdit && (
+            <div role="alert" className="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm space-y-2">
+              <p className="font-medium text-destructive">This bookmark was changed elsewhere</p>
+              <p className="text-muted-foreground">
+                Your edits are kept in this form but were NOT saved — saving again would overwrite the
+                newer version. Copy anything you want to keep, then load the latest version.
+              </p>
+              <Button size="sm" variant="outline" onClick={() => onUpdate()}>Load latest version</Button>
+            </div>
+          )}
+          {bookmark && <BookmarkExtras bookmark={bookmark} canEdit={canEdit} onUpdate={onUpdate} />}
+          {!canEdit && <p className="text-xs text-muted-foreground">Shared bookmark — read only</p>}
+          {canEdit &&
+          <div className="flex items-center gap-2 pt-2 border-t">
+            <Button onClick={handleSave} loading={saving} className="flex-1 gap-1.5">
+              <Save className="h-4 w-4" /> Save Changes
+            </Button>
+            <Button variant="destructive" size="icon" onClick={handleDelete}>
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}