icon fixes

.claude/settings.local.json

···
       "Bash(git checkout:*)",
       "Bash(./scripts/check-db.sh:*)",
       "Bash(cargo tauri build:*)",
-      "Bash(git rm:*)"
+      "Bash(git rm:*)",
+      "Bash(diff:*)"
     ],
     "deny": [],
     "ask": []

CLAUDE.md

···
 - Both should: include any text in the tag input field when Save is pressed
 - If you change save logic in one place, update the other to match
 - Share Extension: `savePressed()` adds `newTagTextField.text` to `selectedTags` before saving
-- Main App: `saveTagChanges()` adds `newTagInput` to `finalTags` before saving
+- Main App: `saveChanges()` adds `newTagInput` to `finalTags` before saving
 
 **CRITICAL - Build Workflow (MUST FOLLOW THESE STEPS):**
 
···
    - [ ] Save URL WITH tags from Safari share sheet
    - [ ] Save URL WITHOUT tags from Safari share sheet
    - [ ] Open main app - URLs should appear
-   - [ ] Edit tags on existing URL
+   - [ ] Edit URL and tags on existing entry
+   - [ ] Delete URL from edit view
    - [ ] Save duplicate URL - should update tags
 
 **CRITICAL - Entitlements Files:**
···
 npm run tauri dev
 ```
 
-### Building
+### Build Scripts
+
+**Release build for device:**
+```bash
+npm run build:release        # Frontend-only changes (faster, uses incremental compilation)
+npm run build:release:full   # Rust code changes (forces full recompile)
+```
 
 **Build Rust library for iOS:**
 ```bash
···
 urls (id TEXT PK, url TEXT UNIQUE, created_at, updated_at, deleted_at)
 tags (id INTEGER PK, name TEXT UNIQUE, frequency, last_used, frecency_score, created_at, updated_at)
 url_tags (url_id, tag_id, created_at) -- junction table
-settings (key TEXT PK, value TEXT) -- webhook_url, last_sync
+settings (key TEXT PK, value TEXT) -- webhook_url, webhook_api_key, last_sync
 ```
 
 **Key Features:**
 - WAL mode enabled for concurrent access from main app and share extension
-- Soft deletes via `deleted_at` timestamp on urls table
+- Hard deletes for URLs (removes from urls and url_tags tables)
 - Normalized schema with junction table for URL-tag many-to-many relationships
 
 **App Group Bridge:**
···
 The app supports syncing saved URLs to an external webhook endpoint.
 
 **Features:**
-- Configure webhook URL in Settings
+- Configure webhook URL and optional API key in Settings
+- API key is sent as `Authorization: Bearer <key>` header
 - Manual "Sync All" button sends all URLs to webhook
 - Automatic sync on save (from both main app and share extension)
 - Daily auto-sync: checks `last_sync` timestamp, syncs if >24 hours since last sync
···
 
 **Settings stored in database:**
 - `webhook_url`: The configured endpoint URL
+- `webhook_api_key`: API key sent as `Authorization: Bearer <key>` header
 - `last_sync`: RFC3339 timestamp of last successful sync
 
 ### Tauri Commands
···
 - `get_tags_by_frecency()`: Returns all tags sorted by frecency score
 - `get_tags_by_frecency_for_url(url: String)`: Returns tags with domain-affinity boost for the given URL
 - `get_saved_urls()`: Returns all saved URLs sorted by most recent first
-- `update_url_tags(id: String, tags: Vec<String>)`: Updates tags for existing URL
-- `delete_url(id: String)`: Soft-deletes a URL
+- `update_url(id: String, url: String, tags: Vec<String>)`: Updates URL and tags for existing entry
+- `update_url_tags(id: String, tags: Vec<String>)`: Updates only tags for existing URL (legacy)
+- `delete_url(id: String)`: Hard-deletes a URL and its tag associations
 - `get_webhook_url()`: Returns configured webhook URL
 - `set_webhook_url(url: String)`: Saves webhook URL to settings
+- `get_webhook_api_key()`: Returns configured webhook API key
+- `set_webhook_api_key(key: String)`: Saves webhook API key to settings
 - `sync_to_webhook()`: Manually syncs all URLs to webhook
 - `auto_sync_if_needed()`: Checks last_sync timestamp, syncs if >24 hours
 - `is_dark_mode()`: Returns system dark mode preference

README.md

···
 ## Overview
 
 Peek is a mobile bookmarking app that allows you to:
-- Save URLs directly from Safari's share sheet
+- Save URLs directly from the iOS share sheet
 - Tag URLs with multiple tags
 - Automatically merge tags when saving duplicate URLs
 - Browse saved URLs sorted by recency
···
 
 ### Build Workflow
 
-The project supports two build workflows that can coexist:
+Frontend assets (CSS, JS, HTML) are **embedded in the Rust binary** at compile time. This means:
+- Changing CSS/JS requires rebuilding Rust with `cargo tauri build` (NOT just `cargo build`)
+- Simply rebuilding in Xcode won't pick up frontend changes
+- The library file to copy is in the `deps/` subdirectory
 
-1. **Swift/UI-only changes**: Build directly from Xcode (fast, skips Rust build)
-2. **Rust code changes**: Run `npm run tauri ios dev -- "iPhone 17 Pro"` from CLI first
-3. **Full rebuild**: Use CLI
+**Debug Build (Simulator):**
+```bash
+# 1. Start Vite dev server (for hot reload during development)
+npx vite --host
 
-The Xcode preBuildScript checks if `libapp.a` exists and skips the Rust build if so. To force a Rust rebuild from Xcode, delete `src-tauri/gen/apple/Externals/arm64/debug/libapp.a`.
+# 2. Build and run from Xcode with Debug scheme on simulator
+#    OR use the full embedded build:
+npm run build
+cd src-tauri
+cargo tauri build --target aarch64-apple-ios-sim --debug
+cp target/aarch64-apple-ios-sim/debug/deps/libpeek_save_lib.a gen/apple/Externals/arm64/Debug/libapp.a
+# Then build in Xcode with Debug scheme, simulator target
+```
+
+**Release Build (Device):**
+```bash
+# Use the build script:
+npm run build:release
+
+# Or manually:
+npm run build
+cd src-tauri
+cargo tauri build --target aarch64-apple-ios
+cp target/aarch64-apple-ios/release/deps/libpeek_save_lib.a gen/apple/Externals/arm64/Release/libapp.a
+# Then build in Xcode with Release scheme, device target
+```
+
+**Important Notes:**
+- Debug uses `Externals/arm64/Debug/libapp.a` and target `aarch64-apple-ios-sim`
+- Release uses `Externals/arm64/Release/libapp.a` and target `aarch64-apple-ios`
+- Always copy from the `deps/` subfolder (has embedded assets), not the root folder
+- Use `cargo tauri build`, NOT `cargo build` (the latter doesn't embed frontend assets)
+
+The Xcode preBuildScript checks if `libapp.a` exists and skips the Rust build if so. To force a Rust rebuild from Xcode, delete the corresponding `libapp.a` file.
 
 ### App Icon
 

build-release.sh

···
 #!/bin/bash
 set -e
 
+# Use --force flag to force full Rust recompile (for Rust code changes)
+FORCE_REBUILD=false
+if [ "$1" = "--force" ] || [ "$1" = "-f" ]; then
+    FORCE_REBUILD=true
+fi
+
 echo "Building frontend..."
 npm run build
 
 echo "Building Rust for iOS device (release)..."
 cd src-tauri
-touch src/lib.rs
+
+if [ "$FORCE_REBUILD" = true ]; then
+    echo "(Forcing Rust recompile...)"
+    touch src/lib.rs
+fi
+
 cargo tauri build --target aarch64-apple-ios
 
 echo "Copying library to Xcode location..."

package.json

···
     "ios": "./run-ios.sh",
     "xcode": "open src-tauri/gen/apple/tauri-app.xcodeproj",
     "archive": "./build-archive.sh",
-    "build:release": "./build-release.sh"
+    "build:release": "./build-release.sh",
+    "build:release:full": "./build-release.sh --force"
   },
   "dependencies": {
     "@tauri-apps/api": "^2",

src-tauri/gen/apple/peek-save.xcodeproj/xcshareddata/xcschemes/peek-save_iOS.xcscheme

···
       </Testables>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "debug"
+      buildConfiguration = "release"
       selectedDebuggerIdentifier = ""
       selectedLauncherIdentifier = "Xcode.IDEFoundation.Launcher.PosixSpawn"
       launchStyle = "0"

src-tauri/src/lib.rs

···
 
 // Helper function to push a single URL to webhook (fire and forget)
 async fn push_url_to_webhook(saved_url: SavedUrl) {
-    // Get webhook URL from database
-    let webhook_url = match get_connection() {
+    // Get webhook URL and API key from database
+    let (webhook_url, api_key) = match get_connection() {
         Ok(conn) => {
-            conn.query_row(
-                "SELECT value FROM settings WHERE key = 'webhook_url'",
-                [],
-                |row| row.get::<_, String>(0),
-            )
-            .ok()
+            let url = conn
+                .query_row(
+                    "SELECT value FROM settings WHERE key = 'webhook_url'",
+                    [],
+                    |row| row.get::<_, String>(0),
+                )
+                .ok();
+            let key = conn
+                .query_row(
+                    "SELECT value FROM settings WHERE key = 'webhook_api_key'",
+                    [],
+                    |row| row.get::<_, String>(0),
+                )
+                .ok();
+            (url, key)
         }
-        Err(_) => None,
+        Err(_) => (None, None),
     };
 
     if let Some(url) = webhook_url {
···
             let client = reqwest::Client::new();
             let payload = WebhookPayload { urls: vec![saved_url] };
 
-            match client.post(&url).json(&payload).send().await {
+            let mut request = client.post(&url).json(&payload);
+
+            // Add Authorization header if API key is configured
+            if let Some(key) = api_key {
+                if !key.is_empty() {
+                    request = request.header("Authorization", format!("Bearer {}", key));
+                }
+            }
+
+            match request.send().await {
                 Ok(response) => {
                     if response.status().is_success() {
                         println!("[Rust] Webhook push successful");
···
 }
 
 #[tauri::command]
+async fn update_url(id: String, url: String, tags: Vec<String>) -> Result<(), String> {
+    println!("[Rust] update_url called for id: {}, url: {}, tags: {:?}", id, url, tags);
+
+    let conn = get_connection()?;
+    let now = Utc::now().to_rfc3339();
+
+    // Verify URL exists
+    let exists: bool = conn
+        .query_row(
+            "SELECT 1 FROM urls WHERE id = ? AND deleted_at IS NULL",
+            params![&id],
+            |_| Ok(true),
+        )
+        .unwrap_or(false);
+
+    if !exists {
+        return Err("URL not found".to_string());
+    }
+
+    // Update URL value and timestamp
+    conn.execute(
+        "UPDATE urls SET url = ?, updated_at = ? WHERE id = ?",
+        params![&url, &now, &id],
+    )
+    .map_err(|e| format!("Failed to update URL: {}", e))?;
+
+    // Get existing tags for this URL
+    let mut existing_tag_stmt = conn
+        .prepare(
+            "SELECT t.name FROM tags t
+             JOIN url_tags ut ON t.id = ut.tag_id
+             WHERE ut.url_id = ?",
+        )
+        .map_err(|e| format!("Failed to prepare existing tags query: {}", e))?;
+
+    let existing_tags: std::collections::HashSet<String> = existing_tag_stmt
+        .query_map(params![&id], |row| row.get(0))
+        .map_err(|e| format!("Failed to query existing tags: {}", e))?
+        .filter_map(|r| r.ok())
+        .collect();
+
+    let new_tags_set: std::collections::HashSet<String> = tags.iter().cloned().collect();
+
+    // Determine which tags are being added vs removed
+    let tags_to_add: Vec<&String> = new_tags_set.difference(&existing_tags).collect();
+    let tags_to_remove: Vec<&String> = existing_tags.difference(&new_tags_set).collect();
+
+    // Remove only the tags that were actually removed
+    for tag_name in &tags_to_remove {
+        conn.execute(
+            "DELETE FROM url_tags WHERE url_id = ? AND tag_id = (SELECT id FROM tags WHERE name = ?)",
+            params![&id, tag_name],
+        )
+        .map_err(|e| format!("Failed to remove tag association: {}", e))?;
+    }
+
+    // Add only the tags that are new to this URL
+    for tag_name in &tags_to_add {
+        // Get or create tag
+        let tag_id: i64 = match conn.query_row(
+            "SELECT id FROM tags WHERE name = ?",
+            params![tag_name],
+            |row| row.get(0),
+        ) {
+            Ok(existing_id) => {
+                // Update existing tag stats
+                let frequency: u32 = conn
+                    .query_row(
+                        "SELECT frequency FROM tags WHERE id = ?",
+                        params![existing_id],
+                        |row| row.get(0),
+                    )
+                    .unwrap_or(0);
+
+                let new_frequency = frequency + 1;
+                let frecency = calculate_frecency(new_frequency, &now);
+
+                conn.execute(
+                    "UPDATE tags SET frequency = ?, last_used = ?, frecency_score = ?, updated_at = ? WHERE id = ?",
+                    params![new_frequency, &now, frecency, &now, existing_id],
+                )
+                .map_err(|e| format!("Failed to update tag: {}", e))?;
+
+                existing_id
+            }
+            Err(_) => {
+                // Create new tag
+                let frecency = calculate_frecency(1, &now);
+                conn.execute(
+                    "INSERT INTO tags (name, frequency, last_used, frecency_score, created_at, updated_at) VALUES (?, 1, ?, ?, ?, ?)",
+                    params![tag_name, &now, frecency, &now, &now],
+                )
+                .map_err(|e| format!("Failed to insert tag: {}", e))?;
+
+                conn.last_insert_rowid()
+            }
+        };
+
+        // Create URL-tag association
+        conn.execute(
+            "INSERT INTO url_tags (url_id, tag_id, created_at) VALUES (?, ?, ?)",
+            params![&id, tag_id, &now],
+        )
+        .map_err(|e| format!("Failed to link tag: {}", e))?;
+    }
+
+    println!("[Rust] URL updated successfully");
+
+    // Push to webhook (fire and forget)
+    let saved_url = SavedUrl {
+        id,
+        url,
+        tags,
+        saved_at: now,
+    };
+    tauri::async_runtime::spawn(async move {
+        push_url_to_webhook(saved_url).await;
+    });
+
+    Ok(())
+}
+
+#[tauri::command]
 async fn update_url_tags(id: String, tags: Vec<String>) -> Result<(), String> {
     println!("[Rust] update_url_tags called for id: {}, tags: {:?}", id, tags);
 
···
 }
 
 #[tauri::command]
+async fn get_webhook_api_key() -> Result<Option<String>, String> {
+    let conn = get_connection()?;
+
+    let key: Option<String> = conn
+        .query_row(
+            "SELECT value FROM settings WHERE key = 'webhook_api_key'",
+            [],
+            |row| row.get(0),
+        )
+        .ok();
+
+    Ok(key)
+}
+
+#[tauri::command]
+async fn set_webhook_api_key(key: String) -> Result<(), String> {
+    println!("[Rust] set_webhook_api_key called");
+    let conn = get_connection()?;
+
+    if key.is_empty() {
+        conn.execute("DELETE FROM settings WHERE key = 'webhook_api_key'", [])
+            .map_err(|e| format!("Failed to delete API key: {}", e))?;
+    } else {
+        conn.execute(
+            "INSERT OR REPLACE INTO settings (key, value) VALUES ('webhook_api_key', ?)",
+            params![&key],
+        )
+        .map_err(|e| format!("Failed to save API key: {}", e))?;
+    }
+
+    println!("[Rust] API key saved successfully");
+    Ok(())
+}
+
+#[tauri::command]
 async fn set_webhook_url(url: String) -> Result<(), String> {
     println!("[Rust] set_webhook_url called with url: {}", url);
     let conn = get_connection()?;
···
 async fn sync_to_webhook() -> Result<SyncResult, String> {
     println!("[Rust] sync_to_webhook called");
 
-    // Get webhook URL
+    // Get webhook URL and API key
     let conn = get_connection()?;
     let webhook_url: String = conn
         .query_row(
···
         return Err("No webhook URL configured".to_string());
     }
 
+    let api_key: Option<String> = conn
+        .query_row(
+            "SELECT value FROM settings WHERE key = 'webhook_api_key'",
+            [],
+            |row| row.get(0),
+        )
+        .ok();
+
     // Get all URLs (reuse existing logic)
     drop(conn); // Close connection before async call
     let urls = get_saved_urls().await?;
···
 
     // Send to webhook
     let client = reqwest::Client::new();
-    let response = client
-        .post(&webhook_url)
-        .json(&payload)
+    let mut request = client.post(&webhook_url).json(&payload);
+
+    // Add Authorization header if API key is configured
+    if let Some(key) = api_key {
+        if !key.is_empty() {
+            request = request.header("Authorization", format!("Bearer {}", key));
+        }
+    }
+
+    let response = request
         .send()
         .await
         .map_err(|e| format!("Failed to send webhook request: {}", e))?;
···
             get_saved_urls,
             get_shared_url,
             delete_url,
+            update_url,
             update_url_tags,
             is_dark_mode,
             get_webhook_url,
             set_webhook_url,
+            get_webhook_api_key,
+            set_webhook_api_key,
             sync_to_webhook,
             get_last_sync,
             auto_sync_if_needed

src/App.css

···
   overflow-wrap: break-word;
   margin-bottom: 1rem;
   padding-bottom: 0.75rem;
+}
+
+.edit-url-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 1rem;
+  color: #007aff;
+  box-sizing: border-box;
   border-bottom: 1px solid #e0e0e0;
 }
 
···
   border-bottom-color: #444;
 }
 
+body.dark .edit-url-input {
+  background: #1c1c1e;
+  border-color: #444;
+  color: #0a84ff;
+}
+
 body.dark .editing-tag {
   background: #0a84ff;
 }
···
   font-size: 16px;
 }
 
+.api-key-field {
+  position: relative;
+}
+
+.api-key-field input {
+  padding-right: 3rem;
+}
+
+.toggle-visibility-btn {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toggle-visibility-btn:hover {
+  color: #333;
+}
+
+body.dark .toggle-visibility-btn {
+  color: #999;
+}
+
+body.dark .toggle-visibility-btn:hover {
+  color: #ccc;
+}
+
 .save-webhook-btn {
   padding: 0.75rem 1rem;
   background: #007aff;
···
   cursor: not-allowed;
 }
 
+.save-settings-btn {
+  width: 100%;
+  padding: 1rem;
+  margin-top: 1rem;
+  background: #007aff;
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.save-settings-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
 .last-sync-info {
-  margin: 0.5rem 0 1rem 0;
+  margin: 1rem 0;
   font-size: 0.85rem;
   color: #666;
   text-align: center;
···
 .sync-btn {
   width: 100%;
   padding: 1rem;
+  margin-top: 1rem;
   background: #34c759;
   color: white;
   border: none;
···
 }
 
 body.dark .save-webhook-btn:disabled {
+  background: #555;
+}
+
+body.dark .save-settings-btn {
+  background: #0a84ff;
+}
+
+body.dark .save-settings-btn:disabled {
   background: #555;
 }
 

src/App.tsx

···
   const [savedUrls, setSavedUrls] = useState<SavedUrl[]>([]);
   const [allTags, setAllTags] = useState<TagStats[]>([]);
   const [editingUrlId, setEditingUrlId] = useState<string | null>(null);
+  const [editingUrlValue, setEditingUrlValue] = useState("");
   const [editingTags, setEditingTags] = useState<Set<string>>(new Set());
   const [editingUrlTags, setEditingUrlTags] = useState<TagStats[]>([]); // Domain-boosted tags for editing
   const [newTagInput, setNewTagInput] = useState("");
···
   const [showSettings, setShowSettings] = useState(false);
   const [webhookUrl, setWebhookUrl] = useState("");
   const [webhookUrlInput, setWebhookUrlInput] = useState("");
+  const [webhookApiKey, setWebhookApiKey] = useState("");
+  const [webhookApiKeyInput, setWebhookApiKeyInput] = useState("");
+  const [showApiKey, setShowApiKey] = useState(false);
   const [isSyncing, setIsSyncing] = useState(false);
   const [syncMessage, setSyncMessage] = useState<string | null>(null);
   const [lastSync, setLastSync] = useState<string | null>(null);
···
 
     loadData();
     loadWebhookUrl();
+    loadWebhookApiKey();
     loadLastSync();
     tryAutoSync();
 
···
     }
   };
 
+  const loadWebhookApiKey = async () => {
+    try {
+      const key = await invoke<string | null>("get_webhook_api_key");
+      if (key) {
+        setWebhookApiKey(key);
+        setWebhookApiKeyInput(key);
+      }
+    } catch (error) {
+      console.error("Failed to load webhook API key:", error);
+    }
+  };
+
   const loadLastSync = async () => {
     try {
       const sync = await invoke<string | null>("get_last_sync");
···
     }
   };
 
-  const saveWebhookUrl = async () => {
+  const saveWebhookSettings = async () => {
     try {
       await invoke("set_webhook_url", { url: webhookUrlInput });
+      await invoke("set_webhook_api_key", { key: webhookApiKeyInput });
       setWebhookUrl(webhookUrlInput);
-      setSyncMessage("Webhook URL saved");
+      setWebhookApiKey(webhookApiKeyInput);
+      setSyncMessage("Settings saved");
       setTimeout(() => setSyncMessage(null), 2000);
     } catch (error) {
-      console.error("Failed to save webhook URL:", error);
-      setSyncMessage("Failed to save webhook URL");
+      console.error("Failed to save webhook settings:", error);
+      setSyncMessage("Failed to save settings");
       setTimeout(() => setSyncMessage(null), 3000);
     }
   };
···
 
   const startEditing = async (item: SavedUrl) => {
     setEditingUrlId(item.id);
+    setEditingUrlValue(item.url);
     setEditingTags(new Set(item.tags));
     setNewTagInput("");
 
···
 
   const cancelEditing = () => {
     setEditingUrlId(null);
+    setEditingUrlValue("");
     setEditingTags(new Set());
     setEditingUrlTags([]);
     setNewTagInput("");
···
     }
   };
 
-  const saveTagChanges = async () => {
+  const saveChanges = async () => {
     if (!editingUrlId) return;
 
     // If there's text in the new tag field, add it first (matches share extension behavior)
···
     }
 
     const tagsArray = Array.from(finalTags);
-    console.log("[Frontend] saveTagChanges called");
+    console.log("[Frontend] saveChanges called");
     console.log("[Frontend] editingUrlId:", editingUrlId);
+    console.log("[Frontend] url:", editingUrlValue);
     console.log("[Frontend] tags to save:", tagsArray);
 
     try {
-      await invoke("update_url_tags", {
+      await invoke("update_url", {
         id: editingUrlId,
+        url: editingUrlValue,
         tags: tagsArray,
       });
-      console.log("[Frontend] update_url_tags invoke succeeded");
+      console.log("[Frontend] update_url invoke succeeded");
       await loadSavedUrls();
       await loadAllTags();
       cancelEditing();
     } catch (error) {
-      console.error("[Frontend] Failed to update tags:", error);
+      console.error("[Frontend] Failed to update URL:", error);
     }
   };
 
···
 
       return (
         <div key={item.id} className="saved-url-item editing">
-          <div className="edit-url-display">{item.url}</div>
+          <div className="edit-section">
+            <input
+              type="url"
+              className="edit-url-input"
+              value={editingUrlValue}
+              onChange={(e) => setEditingUrlValue(e.target.value)}
+              placeholder="URL"
+              autoCapitalize="none"
+              autoCorrect="off"
+            />
+          </div>
 
           <div className="edit-section">
             <div className="editing-tags">
···
             <button className="cancel-btn" onClick={cancelEditing}>
               Cancel
             </button>
-            <button className="save-btn" onClick={saveTagChanges}>
+            <button className="save-btn" onClick={saveChanges}>
               Save
             </button>
           </div>
···
           <div className="settings-section">
             <h2>Webhook Sync</h2>
             <p className="settings-description">
-              Enter a webhook URL to sync all your saved URLs. The webhook will receive a POST request with all URLs and their tags.
+              Enter a webhook URL to sync your saved URLs. URLs are automatically sent when saved, and you can also sync all URLs manually.
             </p>
 
             <div className="webhook-input">
···
                 autoCapitalize="none"
                 autoCorrect="off"
               />
+            </div>
+
+            <div className="webhook-input api-key-field">
+              <input
+                type={showApiKey ? "text" : "password"}
+                value={webhookApiKeyInput}
+                onChange={(e) => setWebhookApiKeyInput(e.target.value)}
+                placeholder="API key (optional)"
+                autoCapitalize="none"
+                autoCorrect="off"
+              />
               <button
-                onClick={saveWebhookUrl}
-                disabled={webhookUrlInput === webhookUrl}
-                className="save-webhook-btn"
+                type="button"
+                className="toggle-visibility-btn"
+                onClick={() => setShowApiKey(!showApiKey)}
               >
-                Save
+                {showApiKey ? (
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                    <line x1="1" y1="1" x2="23" y2="23"></line>
+                  </svg>
+                ) : (
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                    <circle cx="12" cy="12" r="3"></circle>
+                  </svg>
+                )}
               </button>
             </div>
+
+            <button
+              onClick={saveWebhookSettings}
+              disabled={webhookUrlInput === webhookUrl && webhookApiKeyInput === webhookApiKey}
+              className="save-settings-btn"
+            >
+              Save Settings
+            </button>
 
             {lastSync && (
               <p className="last-sync-info">

src/assets/react.svg

···
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>