From dcf43cfce17898cc4ab7cd820fdc9677e92707e0 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 8 Oct 2025 09:44:45 +0100
Subject: [PATCH] feat: add web bookmark creation (NIP-B0, kind:39701)

- Created webBookmarkService for creating web bookmarks
- Added AddBookmarkModal component with URL, title, and description fields
- Added plus button to sidebar header (visible when logged in)
- Modal validates URL format and publishes to relays
- Auto-refreshes bookmarks after creation
- Styled modal with dark theme matching app design
- Follows NIP-B0 spec: URL in 'd' tag, title and summary tags
---
 src/components/AddBookmarkModal.tsx | 131 +++++++++++++++++++++++++
 src/components/SidebarHeader.tsx    |  35 ++++++-
 src/index.css                       | 145 ++++++++++++++++++++++++++++
 src/services/webBookmarkService.ts  |  68 +++++++++++++
 4 files changed, 378 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AddBookmarkModal.tsx
 create mode 100644 src/services/webBookmarkService.ts

diff --git a/src/components/AddBookmarkModal.tsx b/src/components/AddBookmarkModal.tsx
new file mode 100644
index 00000000..2e1af562
--- /dev/null
+++ b/src/components/AddBookmarkModal.tsx
@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import IconButton from './IconButton'
+
+interface AddBookmarkModalProps {
+  onClose: () => void
+  onSave: (url: string, title?: string, description?: string) => Promise<void>
+}
+
+const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave }) => {
+  const [url, setUrl] = useState('')
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    if (!url.trim()) {
+      setError('URL is required')
+      return
+    }
+
+    // Validate URL
+    try {
+      new URL(url)
+    } catch {
+      setError('Please enter a valid URL')
+      return
+    }
+
+    try {
+      setIsSaving(true)
+      await onSave(
+        url.trim(),
+        title.trim() || undefined,
+        description.trim() || undefined
+      )
+      onClose()
+    } catch (err) {
+      console.error('Failed to save bookmark:', err)
+      setError(err instanceof Error ? err.message : 'Failed to save bookmark')
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Add Bookmark</h2>
+          <IconButton
+            icon={faTimes}
+            onClick={onClose}
+            title="Close"
+            ariaLabel="Close modal"
+            variant="ghost"
+          />
+        </div>
+
+        <form onSubmit={handleSubmit} className="modal-form">
+          <div className="form-group">
+            <label htmlFor="bookmark-url">URL *</label>
+            <input
+              id="bookmark-url"
+              type="text"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://example.com"
+              disabled={isSaving}
+              autoFocus
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="bookmark-title">Title</label>
+            <input
+              id="bookmark-title"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Optional title"
+              disabled={isSaving}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="bookmark-description">Description</label>
+            <textarea
+              id="bookmark-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional description"
+              disabled={isSaving}
+              rows={3}
+            />
+          </div>
+
+          {error && (
+            <div className="modal-error">{error}</div>
+          )}
+
+          <div className="modal-actions">
+            <button
+              type="button"
+              onClick={onClose}
+              className="btn-secondary"
+              disabled={isSaving}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="btn-primary"
+              disabled={isSaving}
+            >
+              {isSaving ? 'Saving...' : 'Save Bookmark'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default AddBookmarkModal
+
diff --git a/src/components/SidebarHeader.tsx b/src/components/SidebarHeader.tsx
index 539788a8..77652be6 100644
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -1,12 +1,15 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faRotate, faHome } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faRotate, faHome, faPlus } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { Accounts } from 'applesauce-accounts'
 import IconButton from './IconButton'
+import AddBookmarkModal from './AddBookmarkModal'
+import { createWebBookmark } from '../services/webBookmarkService'
+import { RELAYS } from '../config/relays'
 
 interface SidebarHeaderProps {
   onToggleCollapse: () => void
@@ -18,9 +21,11 @@ interface SidebarHeaderProps {
 
 const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, onRefresh, isRefreshing }) => {
   const [isConnecting, setIsConnecting] = useState(false)
+  const [showAddModal, setShowAddModal] = useState(false)
   const navigate = useNavigate()
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
+  const relayPool = Hooks.useRelayPool()
   const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
 
   const handleLogin = async () => {
@@ -49,6 +54,19 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
     return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
   }
 
+  const handleSaveBookmark = async (url: string, title?: string, description?: string) => {
+    if (!activeAccount || !relayPool) {
+      throw new Error('Please login to create bookmarks')
+    }
+
+    await createWebBookmark(url, title, description, activeAccount, relayPool, RELAYS)
+    
+    // Refresh bookmarks after creating
+    if (onRefresh) {
+      onRefresh()
+    }
+  }
+
   const profileImage = getProfileImage()
 
   return (
@@ -70,6 +88,15 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
           ariaLabel="Home"
           variant="ghost"
         />
+        {activeAccount && (
+          <IconButton
+            icon={faPlus}
+            onClick={() => setShowAddModal(true)}
+            title="Add bookmark"
+            ariaLabel="Add bookmark"
+            variant="ghost"
+          />
+        )}
         {onRefresh && (
           <IconButton
             icon={faRotate}
@@ -119,6 +146,12 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
         )}
         </div>
       </div>
+      {showAddModal && (
+        <AddBookmarkModal
+          onClose={() => setShowAddModal(false)}
+          onSave={handleSaveBookmark}
+        />
+      )}
     </>
   )
 }
diff --git a/src/index.css b/src/index.css
index 58199fad..785b4ecf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2193,3 +2193,148 @@ body {
     opacity: 1;
   }
 }
+
+/* Add Bookmark Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  padding: 1rem;
+}
+
+.modal-content {
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 12px;
+  max-width: 500px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid #333;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #fff;
+}
+
+.modal-form {
+  padding: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #ccc;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 1rem;
+  font-family: inherit;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #646cff;
+}
+
+.form-group input:disabled,
+.form-group textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.modal-error {
+  padding: 0.75rem;
+  background: rgba(220, 53, 69, 0.1);
+  border: 1px solid #dc3545;
+  border-radius: 6px;
+  color: #dc3545;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+.btn-secondary {
+  padding: 0.75rem 1.5rem;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 6px;
+  color: #ccc;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #333;
+  border-color: #646cff;
+  color: white;
+}
+
+.btn-secondary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  padding: 0.75rem 1.5rem;
+  background: #646cff;
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #535bf2;
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
diff --git a/src/services/webBookmarkService.ts b/src/services/webBookmarkService.ts
new file mode 100644
index 00000000..a7174e21
--- /dev/null
+++ b/src/services/webBookmarkService.ts
@@ -0,0 +1,68 @@
+import { EventFactory } from 'applesauce-factory'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
+
+/**
+ * Creates a web bookmark event (NIP-B0, kind:39701)
+ * @param url The URL to bookmark
+ * @param title Optional title for the bookmark
+ * @param description Optional description
+ * @param account The user's account for signing
+ * @param relayPool The relay pool for publishing
+ * @param relays The relays to publish to
+ * @returns The signed event
+ */
+export async function createWebBookmark(
+  url: string,
+  title: string | undefined,
+  description: string | undefined,
+  account: IAccount,
+  relayPool: RelayPool,
+  relays: string[]
+): Promise<NostrEvent> {
+  if (!url || !url.trim()) {
+    throw new Error('URL is required for web bookmark')
+  }
+
+  // Validate URL format
+  try {
+    new URL(url)
+  } catch {
+    throw new Error('Invalid URL format')
+  }
+
+  const factory = new EventFactory({ signer: account })
+
+  // Build tags according to NIP-B0
+  const tags: string[][] = [
+    ['d', url], // URL as identifier
+  ]
+
+  if (title) {
+    tags.push(['title', title])
+  }
+
+  if (description) {
+    tags.push(['summary', description])
+  }
+
+  // Create the event
+  const draft = await factory.create(async () => ({
+    kind: 39701, // NIP-B0 web bookmark
+    content: '',
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  // Sign the event
+  const signedEvent = await factory.sign(draft)
+
+  // Publish to relays
+  await relayPool.publish(relays, signedEvent)
+
+  console.log('✅ Web bookmark published:', signedEvent)
+
+  return signedEvent
+}
+