Migrate app storage to Atproto PDS

https://ampcode.com/threads/T-28f4c047-5e09-46a0-8eb0-04d0e7d7dd7c

README.md

···
  
 ![favicon](favicon.svg)
-# woomarks
-woomarks is an app that let's you save links in your browser storage, no account needed. 
+# woomarks (AT Protocol Edition)
+woomarks is an app that lets you save bookmarks to your AT Protocol Personal Data Server (PDS). 
 
 ![screenshot](screenshot.png)
 
-It's only frontend code, no database, backend server needed.
+This version stores bookmarks directly on the AT Protocol network using a custom lexicon, making your bookmarks portable across the decentralized web.
 
 
 
-It also can import/export to csv files or local storage.
-
-
-## Demos
-#### [Creator's personal boomarks page](https://roberto.fyi/bookmarks/).
-- Saving is closed to the public.
-- Saved links are visible to the public, as they are loaded from a csv file in the server.
-
-#### [woomarks public app](https://woomarks.com). 
-- Saving is open to the public.
-- The saved links are private and saved in the browser local storage of the users.
-
 ## Features
-- Add/Delete links
-- Search
-- Tags
-- Bookmarklet (useful for a 2-click-save)
-- Data reads from: 
-    - csv file in server (these links are public)
-    - local storage in browser (these links are visible just for the user)
-- Local storage saving.
-- Import to local storage from csv file
-- Export to csv from local storage.
-- Export to csv from csv file (useful when links are "deleted" using the app and just hidden using a local storage blacklist).
-- Export to csv from both places.
-- No external libraries. 
-- Vanilla css code.
-- Vanilla js code.
+- Add/Delete bookmarks stored on AT Protocol
+- Search and filter by tags
+- Decentralized storage on your Personal Data Server
+- Bookmarklet support for easy saving
+- Responsive design with dynamic colors and fonts
+- No backend server needed - connects directly to AT Protocol
+- Open lexicon format for interoperability
 
-## Install
+## Prerequisites
+- An AT Protocol account (e.g., Bluesky account)
+- A Personal Data Server (PDS) that supports custom lexicons
 
-#### BASIC INSTALL (3min)
- - Copy the contents of this repository to an online directory. That's all. You can start saving links.
+## AT Protocol Integration
+This app uses the standard `community.lexicon.bookmarks.bookmark` lexicon from [lexicon.community](https://github.com/lexicon-community/lexicon) to store bookmark records on your PDS. Each bookmark contains:
+- URI (required) - The bookmarked URL
+- Title (optional) - The title of the bookmarked page
+- Tags (optional array) - Organizational tags
+- Creation timestamp
 
-#### SHOWCASE YOUR LINKS
-- If you want to showcase your saved links, update the **mybookmarks.csv** file
+Using the community standard lexicon means your bookmarks are:
+- Interoperable with other AT Protocol bookmark apps
+- Portable across different implementations
+- Following established community standards
+- Owned and controlled by you on your PDS
 
-#### IMPORT FROM POCKET
-- Go to this Pocket page to export your links. https://getpocket.com/export.php?
+## Installation
 
-**Option 1** (If you want your links public)
-- Replace the mybookmarks.csv witha the content of your Pocket csv file.
+1. **Deploy the App**
+   - Copy the contents of this repository to a web server
+   - Or use a static hosting service like GitHub Pages, Netlify, or Vercel
 
-**Option 2** (If you want your links saved on your browser's local storage)
-- Add > Bulk Transfer > Paste the contents.
+2. **Login with AT Protocol**
+   - Open the app in your browser
+   - Enter your AT Protocol handle (e.g., `username.bsky.social`)
+   - Enter your app password (generate one in your AT Protocol client)
+   - Click Login
 
-#### CREATE BOOKMARKLET
-To be able to easily save bookmarks with the form prefilled, create a bookmarklet:
-- In your browser, create a new bookmark with "add woomark" () as Name
-- Paste the next code as URL.
-```
+3. **Start Bookmarking**
+   - Use the Add button to save new bookmarks
+   - Tag and organize your bookmarks
+   - Search and filter your collection
+
+## Bookmarklet Setup
+Create a bookmarklet for easy saving:
+- Create a new bookmark in your browser
+- Set the name to "Save to woomarks"
+- Use this as the URL:
+```javascript
 javascript:(function(){
 const url = encodeURIComponent(window.location.href);
 const title = encodeURIComponent(document.title);
-window.open(`https://YOURDOMAINGOESHERE.com/?title=${title}&url=${url}`, '_blank');
+window.open(`https://YOURDOMAINHERE.com/?title=${title}&url=${url}`, '_blank');
 })();
 ```
 
-#### HIDE SAVE BUTTON
- - If you are using this for your personal use (you don't want anyone else saving on your page), you can uncomment this line in **script.js** file
- and add the code you want here AND as a variable in your browser's local storage.
-
-`
- // const appcode = "notsosecretcode"; 
- `
-
- ![screenshot](screenshot_appcode.png)
-
 
 ## Design
  This design is inspired by Pocket's UI, which was very good for showing a list of articles to read later. Native bookmarking feels more utilitarian, suited for recurrent links, woomarks is more suited for read later links.
 
 ## Philosophy
-I had all my bookmarks in Pocket and it's shutting down. Same thing happened to del.icio.us. So I decided to keep the web cool and decentralized and make this little thing. The code is open and you can use it on your own website forever.
+I had all my bookmarks in Pocket and it's shutting down. Same thing happened to del.icio.us. So I decided to keep the web cool and decentralized by building on AT Protocol. Now your bookmarks live on a decentralized network that you control, not in some company's database that might disappear.
 
 ## License
 Do whatever you want with this, personal or commercial. No warranties are given.

index.html

···
   </head>
 
   <body>
+    <!-- Login Modal -->
+    <dialog id="loginDialog" class="param-dialog">
+      <form method="dialog" class="param-form">
+        <h2>Connect to AT Protocol</h2>
+        <div class="param-group">
+          <label for="handleInput" class="param-label">Handle</label>
+          <input
+            type="text"
+            id="handleInput"
+            class="param-input"
+            placeholder="user.bsky.social"
+          />
+        </div>
+        <div class="param-group">
+          <label for="passwordInput" class="param-label">Password</label>
+          <input
+            type="password"
+            id="passwordInput"
+            class="param-input"
+          />
+        </div>
+        <menu class="param-menu">
+          <button id="loginBtn" type="button" class="param-btn dark">Login</button>
+        </menu>
+      </form>
+    </dialog>
+
     <div class="topbar">
       <div style="flex-grow: 1">
         <b><a id="headerTitle" href="">woomarks</a></b>
         <a href="./faq.html">FAQ</a>
+        <span id="connectionStatus" class="connection-status"></span>
       </div>
+      <button id="logoutBtn" class="param-btn" style="display: none;">Logout</button>
       <button id="openEmptyDialogBtn" data-umami-event="Open creation modal" class="param-btn"><span class="btn-text">Add</span> ➕</button>
 
       <button id="sortToggleBtn" data-umami-event="Sort" class="param-btn"><span class="btn-text">Sort</span> ▲</button>
···
         <p id="paramDialogCount" class="param-count"></p>
 
         <menu class="param-menu">
-          <div class="menu-left">
-            <a id="importBtn" href="./transfer_page.html" class="import-link"
-              >Bulk Transfer</a
-            >
-          </div>
           <div class="menu-right">
             <button
               id="cancelBtn"
···
       </form>
     </dialog>
   </body>
+  <script type="module">
+    import { AtpAgent } from 'https://unpkg.com/@atproto/api@0.12.21/dist/index.js';
+    window.AtpAgent = AtpAgent;
+  </script>
   <script async src="./script.js"></script>
 </html>

lexicons/com/woomarks/bookmark.json

···
+{
+  "lexicon": 1,
+  "id": "com.woomarks.bookmark",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A bookmark record for woomarks",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["title", "url", "createdAt"],
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 500,
+            "description": "The title of the bookmarked page"
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "maxLength": 2000,
+            "description": "The URL being bookmarked"
+          },
+          "tags": {
+            "type": "array",
+            "items": {
+              "type": "string",
+              "maxLength": 50
+            },
+            "maxLength": 20,
+            "description": "Tags associated with the bookmark"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime",
+            "description": "When the bookmark was created"
+          }
+        }
+      }
+    }
+  }
+}

lexicons/community/lexicon/bookmarks/bookmark.json

···
+{
+  "lexicon": 1,
+  "id": "community.lexicon.bookmarks.bookmark",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A bookmark record",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["uri", "createdAt"],
+        "properties": {
+          "uri": {
+            "type": "string",
+            "format": "uri",
+            "maxLength": 2000,
+            "description": "The URI being bookmarked"
+          },
+          "title": {
+            "type": "string",
+            "maxLength": 500,
+            "description": "The title of the bookmarked resource"
+          },
+          "description": {
+            "type": "string",
+            "maxLength": 2000,
+            "description": "A description of the bookmarked resource"
+          },
+          "tags": {
+            "type": "array",
+            "items": {
+              "type": "string",
+              "maxLength": 50
+            },
+            "maxLength": 20,
+            "description": "Tags associated with the bookmark"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime",
+            "description": "When the bookmark was created"
+          }
+        }
+      }
+    }
+  }
+}

mybookmarks.csv

···
-title,url,time_added,tags,status
-"My other project is publishing classic books. | BookWormHole", https://bookwormhole.co,1750558616,books,unread
-In your website you can make public bookmarks | Like this demo, https://roberto.fyi/bookmarks,1750688281,woomarks,unread
-"If you have a website, you can install woomarks there. | Github project",https://github.com,1750707578,woomarks,unread
-Transfer your Pocket links | Bulk Transfer,/transfer_page.html,1750685963,woomarks,unread
-"Install the bookmarklet so saving takes you 2 clicks. | Bookmarklet",/faq.html#faq_bookmarklet,1750685963,woomarks,unread
-"woomarks let you save links. | No account needed. | Click the “Add” button." ,/,1750859818,woomarks,unread
+# This file is no longer used in the AT Protocol edition
+# Bookmarks are now stored on your Personal Data Server
+# Please use the main app to log in with your AT Protocol credentials

script.js

···
-// ====== Constants & Globals ======
-const LOCAL_GLOW = true;  // adds a glow to differentiate items stored locally in the browser from those stored in csv file
-const EXPORT = "all"; // choose export type "all", "csv", "local" 
-// const appcode = "notsosecretcode";  
+// ====== AT Protocol & Constants ======
+// AtpAgent is loaded via window.AtpAgent from the module import
 
+// Bookmark lexicon definition (using community standard)
+const BOOKMARK_LEXICON = "community.lexicon.bookmarks.bookmark";
+
+const LOCAL_GLOW = false; // No local storage differentiation needed
 const MAX_CHARS_PER_LINE = 15;
 const MAX_LINES = 4;
 const EST_CHAR_WIDTH = 0.6; // em
···
 ];
 
 // State variables
-let originalRows = [];
-let csvRows = [];
-let storedRows = [];
-let storedRowHashes = new Set();
+let atpAgent = null;
+let userDid = null;
+let bookmarks = [];
 let reversedOrder = false;
-let deleted = JSON.parse(localStorage.getItem("deleted_csv_rows") || "[]");
-
 
 // ====== DOM Elements ======
+const loginDialog = document.getElementById("loginDialog");
+const handleInput = document.getElementById("handleInput");
+const passwordInput = document.getElementById("passwordInput");
+const loginBtn = document.getElementById("loginBtn");
+const logoutBtn = document.getElementById("logoutBtn");
+const connectionStatus = document.getElementById("connectionStatus");
 
 const dialog = document.getElementById("paramDialog");
 const titleInput = document.getElementById("paramTitle");
···
 const saveBtn = document.getElementById("saveBtn");
 const cancelBtn = document.getElementById("cancelBtn");
 const openEmptyDialogBtn = document.getElementById("openEmptyDialogBtn");
-const appcodeInput = document.getElementById("appcode");
-const modalOverlay = document.getElementById("modalOverlay");
-const searchInput =document.getElementById("searchInput");
+const searchInput = document.getElementById("searchInput");
 const sortToggleBtn = document.getElementById("sortToggleBtn");
-const exportBtn = document.getElementById("exportBtn")
-const importArea = document.getElementById("importArea")
 
+// ====== AT Protocol Functions ======
 
-// ====== Utility Functions ======
+/**
+ * Initialize AT Protocol agent with stored session
+ */
+async function initializeATProto() {
+  const session = localStorage.getItem("atproto_session");
+  if (!session) {
+    showLoginDialog();
+    return false;
+  }
+
+  try {
+    atpAgent = new window.AtpAgent({
+      service: "https://bsky.social",
+    });
+    
+    await atpAgent.resumeSession(JSON.parse(session));
+    userDid = atpAgent.session.did;
+    
+    updateConnectionStatus("connected");
+    showMainUI();
+    await loadBookmarks();
+    return true;
+  } catch (error) {
+    console.error("Failed to resume session:", error);
+    localStorage.removeItem("atproto_session");
+    showLoginDialog();
+    return false;
+  }
+}
 
 /**
- * Hashes a string to a non-negative 32-bit integer.
- * @param {string} str
- * @returns {number}
+ * Login to AT Protocol
  */
-function hashString(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = (hash << 5) - hash + str.charCodeAt(i);
-    hash |= 0; // Convert to 32-bit int
+async function login() {
+  const handle = handleInput.value.trim();
+  const password = passwordInput.value.trim();
+
+  if (!handle || !password) return;
+
+  updateConnectionStatus("connecting");
+  
+  try {
+    atpAgent = new window.AtpAgent({
+      service: "https://bsky.social",
+    });
+
+    await atpAgent.login({
+      identifier: handle,
+      password: password,
+    });
+
+    userDid = atpAgent.session.did;
+    localStorage.setItem("atproto_session", JSON.stringify(atpAgent.session));
+    
+    updateConnectionStatus("connected");
+    loginDialog.close();
+    showMainUI();
+    await loadBookmarks();
+  } catch (error) {
+    console.error("Login failed:", error);
+    updateConnectionStatus("disconnected");
+    alert("Login failed. Please check your credentials.");
   }
-  return Math.abs(hash);
 }
 
 /**
- * Get a color pair deterministically by title.
- * @param {string} title
- * @param {Array<Array<string>>} pairs
- * @returns {[string, string]} [backgroundColor, fontColor]
+ * Logout from AT Protocol
  */
-function getColorPairByTitle(title, pairs) {
-  const hash = hashString(title);
-  const idx = hash % pairs.length;
-  const [bg, fg] = pairs[idx];
-  return (hash % 2 === 0) ? [bg, fg] : [fg, bg];
+async function logout() {
+  if (atpAgent) {
+    try {
+      await atpAgent.com.atproto.session.delete();
+    } catch (error) {
+      console.error("Logout error:", error);
+    }
+  }
+  
+  atpAgent = null;
+  userDid = null;
+  bookmarks = [];
+  localStorage.removeItem("atproto_session");
+  updateConnectionStatus("disconnected");
+  showLoginDialog();
 }
 
 /**
- * Get a font family deterministically by title.
- * @param {string} title
- * @param {string[]} fonts
- * @returns {string}
+ * Load bookmarks from PDS
  */
-function getFontByTitle(title, fonts) {
-  return fonts[hashString(title) % fonts.length];
+async function loadBookmarks() {
+  if (!atpAgent || !userDid) return;
+
+  try {
+    updateConnectionStatus("connecting");
+    
+    const response = await atpAgent.com.atproto.repo.listRecords({
+      repo: userDid,
+      collection: BOOKMARK_LEXICON,
+    });
+
+    bookmarks = response.data.records.map(record => ({
+      uri: record.uri,
+      cid: record.cid,
+      ...record.value
+    }));
+
+    renderBookmarks();
+    updateConnectionStatus("connected");
+  } catch (error) {
+    console.error("Failed to load bookmarks:", error);
+    updateConnectionStatus("disconnected");
+  }
+}
+
+/**
+ * Save a bookmark to PDS
+ */
+async function saveBookmark() {
+  const title = titleInput.value.trim();
+  const url = urlInput.value.trim();
+  const rawTags = tagsInput.value.trim();
+
+  if (!title || !url || !atpAgent || !userDid) return;
+
+  const tags = rawTags.split(",").map(t => t.trim()).filter(Boolean);
+  
+  const bookmarkRecord = {
+    $type: BOOKMARK_LEXICON,
+    uri: url,
+    title,
+    tags,
+    createdAt: new Date().toISOString(),
+  };
+
+  try {
+    updateConnectionStatus("connecting");
+    
+    const response = await atpAgent.com.atproto.repo.createRecord({
+      repo: userDid,
+      collection: BOOKMARK_LEXICON,
+      record: bookmarkRecord,
+    });
+
+    // Add to local array
+    bookmarks.push({
+      uri: response.data.uri,
+      cid: response.data.cid,
+      ...bookmarkRecord
+    });
+
+    renderBookmarks();
+    dialog.close();
+    updateConnectionStatus("connected");
+    
+    // Clear URL params and reload to clean state
+    window.history.replaceState({}, document.title, window.location.pathname);
+  } catch (error) {
+    console.error("Failed to save bookmark:", error);
+    updateConnectionStatus("disconnected");
+    alert("Failed to save bookmark. Please try again.");
+  }
 }
 
 /**
- * Parses CSV text into array of rows with cells.
- * Handles quoted commas and newlines.
- * @param {string} text CSV text
- * @returns {string[][]}
+ * Delete a bookmark from PDS
  */
-function parseCSV(text) {
-  const rows = [];
-  let row = [];
-  let cell = "";
-  let insideQuotes = false;
+async function deleteBookmark(uri) {
+  if (!atpAgent || !userDid) return;
 
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
+  try {
+    updateConnectionStatus("connecting");
+    
+    const rkey = uri.split("/").pop();
+    await atpAgent.com.atproto.repo.deleteRecord({
+      repo: userDid,
+      collection: BOOKMARK_LEXICON,
+      rkey,
+    });
 
-    if (char === '"') {
-      if (insideQuotes && text[i + 1] === '"') {
-        cell += '"';
-        i++;
-      } else {
-        insideQuotes = !insideQuotes;
-      }
-    } else if (char === "," && !insideQuotes) {
-      row.push(cell);
-      cell = "";
-    } else if ((char === "\n" || char === "\r") && !insideQuotes) {
-      if (cell || row.length) row.push(cell);
-      if (row.length) rows.push(row);
-      row = [];
-      cell = "";
-      if (char === "\r" && text[i + 1] === "\n") i++;
-    } else {
-      cell += char;
-    }
+    // Remove from local array
+    bookmarks = bookmarks.filter(bookmark => bookmark.uri !== uri);
+    renderBookmarks();
+    updateConnectionStatus("connected");
+  } catch (error) {
+    console.error("Failed to delete bookmark:", error);
+    updateConnectionStatus("disconnected");
   }
+}
 
-  if (cell || row.length) {
-    row.push(cell);
-    rows.push(row);
+// ====== UI Functions ======
+
+function updateConnectionStatus(status) {
+  connectionStatus.className = `connection-status ${status}`;
+  switch (status) {
+    case "connected":
+      connectionStatus.textContent = "Connected";
+      break;
+    case "connecting":
+      connectionStatus.textContent = "Connecting...";
+      break;
+    case "disconnected":
+      connectionStatus.textContent = "Disconnected";
+      break;
   }
+}
 
-  return rows;
+function showLoginDialog() {
+  loginDialog.showModal();
+  openEmptyDialogBtn.style.display = "none";
+  sortToggleBtn.style.display = "none";
+  searchInput.style.display = "none";
+  logoutBtn.style.display = "none";
 }
 
-/**
- * Retrieves bookmarks stored in localStorage.
- * Returns parsed array of rows.
- */
-function getBookmarks() {
-  const csvString = localStorage.getItem("strd_bookmarks");
-  if (!csvString) return [];
-  return parseCSV(csvString.trim());
+function showMainUI() {
+  openEmptyDialogBtn.style.display = "inline-block";
+  sortToggleBtn.style.display = "inline-block";
+  searchInput.style.display = "inline-block";
+  logoutBtn.style.display = "inline-block";
 }
 
+// ====== Utility Functions ======
 
 /**
- * Escapes CSV cell content if needed.
- * @param {string} cell
- * @returns {string}
+ * Hashes a string to a non-negative 32-bit integer.
  */
-function escapeCSVCell(cell) {
-  if (cell.includes(",") || cell.includes('"')) {
-    return `"${cell.replace(/"/g, '""')}"`;
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash |= 0;
   }
-  return cell;
+  return Math.abs(hash);
 }
 
 /**
- * Converts rows array to CSV string.
- * @param {string[][]} rows
- * @returns {string}
+ * Get a color pair deterministically by title.
  */
-function rowsToCSV(rows) {
-  return rows.map(row => row.map(escapeCSVCell).join(",")).join("\n");
+function getColorPairByTitle(title, pairs) {
+  const hash = hashString(title);
+  const idx = hash % pairs.length;
+  const [bg, fg] = pairs[idx];
+  return (hash % 2 === 0) ? [bg, fg] : [fg, bg];
 }
 
 /**
- * Updates the deleted rows stored in localStorage.
- * @param {string[]} currentHashes Set of hashes currently present in CSV
+ * Get a font family deterministically by title.
  */
-function syncDeletedRows(currentHashes) {
-  deleted = deleted.filter(hash => currentHashes.has(hash));
-  localStorage.setItem("deleted_csv_rows", JSON.stringify(deleted));
+function getFontByTitle(title, fonts) {
+  return fonts[hashString(title) % fonts.length];
 }
 
-// ====== Rendering & UI Functions ======
+// ====== Rendering Functions ======
 
 /**
- * Renders bookmark containers based on rows.
- * @param {string[][]} rows
- * @param {Set<string>} storedHashes
+ * Renders bookmark containers
  */
-function renderContainers(rows, storedHashes) {
+function renderBookmarks() {
   const containerWrapper = document.querySelector(".containers");
   containerWrapper.innerHTML = "";
 
   const fragment = document.createDocumentFragment();
+  const displayBookmarks = reversedOrder ? bookmarks : [...bookmarks].reverse();
 
-  rows.forEach(row => {
-    const titleRaw = row[0]?.trim();
-    const url = row[1]?.trim();
-    const tagsRaw = row[3]?.trim();
-
-    if (!titleRaw || !url) return;
-
-    const hashKey = hashString(titleRaw + url).toString();
+  displayBookmarks.forEach(bookmark => {
+    const title = bookmark.title;
+    const url = bookmark.uri;
+    const tags = bookmark.tags || [];
 
-    if (deleted.includes(hashKey)) return;
+    if (!title || !url) return;
 
-    const title = titleRaw.replace(/^https?:\/\/(www\.)?/i, "");
+    const displayTitle = title.replace(/^https?:\/\/(www\.)?/i, "");
     const [bgColor, fontColor] = getColorPairByTitle(title, COLOR_PAIRS);
     const fontFamily = getFontByTitle(title, FONT_LIST);
 
     const container = document.createElement("div");
-    container.className =
-  "container" + (LOCAL_GLOW && storedHashes.has(hashKey) ? " local-container" : "");
+    container.className = "container";
     container.style.backgroundColor = bgColor;
     container.style.color = fontColor;
     container.style.fontFamily = `'${fontFamily}', sans-serif`;
-    container.dataset.id = hashKey;
 
     // Delete Button
     const closeBtn = document.createElement("button");
     closeBtn.className = "delete-btn";
     closeBtn.textContent = "x";
     closeBtn.title = "Delete this bookmark";
-    closeBtn.setAttribute("data-umami-event", "Delete bookmark");
-    closeBtn.addEventListener("click", e => handleDelete(e, row, container, storedHashes));
+    closeBtn.addEventListener("click", e => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (confirm("Delete this bookmark?")) {
+        deleteBookmark(bookmark.uri);
+      }
+    });
     container.appendChild(closeBtn);
 
     // Anchor (bookmark link)
     const anchor = document.createElement("a");
     anchor.href = url;
     anchor.target = "_blank";
-    anchor.innerHTML = `<span style="font-size: 5vw;"><span>${title}</span></span>`;
+    anchor.innerHTML = `<span style="font-size: 5vw;"><span>${displayTitle}</span></span>`;
     container.appendChild(anchor);
 
     // Tags
-    if (tagsRaw) {
-      const tags = tagsRaw.split(",").map(t => t.trim()).filter(Boolean);
-      if (tags.length > 0) {
-        const wrapper = document.createElement("div");
-        wrapper.className = "tags-wrapper";
+    if (tags.length > 0) {
+      const wrapper = document.createElement("div");
+      wrapper.className = "tags-wrapper";
 
-        tags.forEach(tag => {
-          const tagDiv = document.createElement("div");
-          tagDiv.className = "tags tag-style";
-          tagDiv.textContent = `#${tag}`;
-          tagDiv.addEventListener("click", () => filterByTag(tag));
-          wrapper.appendChild(tagDiv);
-        });
+      tags.forEach(tag => {
+        const tagDiv = document.createElement("div");
+        tagDiv.className = "tags tag-style";
+        tagDiv.textContent = `#${tag}`;
+        tagDiv.addEventListener("click", () => filterByTag(tag));
+        wrapper.appendChild(tagDiv);
+      });
 
-        container.appendChild(wrapper);
-      }
+      container.appendChild(wrapper);
     }
 
     fragment.appendChild(container);
···
 }
 
 /**
- * Handles bookmark deletion.
- * @param {Event} e
- * @param {string[]} row
- * @param {HTMLElement} container
- * @param {Set<string>} storedHashes
- */
-function handleDelete(e, row, container, storedHashes) {
-  e.stopPropagation();
-  e.preventDefault();
-
-  const title = row[0]?.trim();
-  const url = row[1]?.trim();
-  const key = hashString(title + url).toString();
-
-  const isLocal = storedHashes.has(key);
-
-  if (isLocal) {
-    let csvData = localStorage.getItem("strd_bookmarks") || "";
-    const rows = parseCSV(csvData.trim());
-
-    // Filter out matching row
-    const filteredRows = rows.filter(r => r[0]?.trim() !== title || r[1]?.trim() !== url);
-
-    // Convert back to CSV
-    const updatedCSV = rowsToCSV(filteredRows) + "\n";
-    localStorage.setItem("strd_bookmarks", updatedCSV);
-  } else {
-    if (!deleted.includes(key)) {
-      deleted.push(key);
-      localStorage.setItem("deleted_csv_rows", JSON.stringify(deleted));
-    }
-  }
-
-  container.remove();
-}
-
-/**
- * Filter the bookmarks by clicking on a tag.
- * @param {string} tag
+ * Filter bookmarks by tag
  */
 function filterByTag(tag) {
-  const searchInput = document.getElementById("searchInput");
   searchInput.value = `#${tag}`;
   searchInput.dispatchEvent(new Event("input"));
 }
 
 /**
- * Formats text inside containers after rendering.
+ * Formats text inside containers after rendering
  */
 function runTextFormatting() {
   document.querySelectorAll(".container").forEach(container => {
···
 
     anchor.innerHTML = "";
 
-    // Replace certain separators with <hr/>
     const formattedText = originalText.replace(/(\s\|\s|\s-\s|\s–\s|\/,)/g, "<hr/>");
     const [firstPart, ...restParts] = formattedText.split("<hr/>");
     const secondPart = restParts.join("<hr/>");
···
 
     const firstSpan = document.createElement("span");
     firstSpan.innerHTML = firstPart;
-
     span.appendChild(firstSpan);
 
     if (restParts.length) {
···
   });
 }
 
-// ====== Event Handlers ======
+// ====== Search & Event Handlers ======
 
 /**
- * Debounce utility.
- * @param {Function} fn
- * @param {number} delay
+ * Debounce utility
  */
 function debounce(fn, delay) {
   let timeout;
···
   };
 }
 
-if(searchInput){
-  searchInput.addEventListener(
-    "input",
-    debounce(e => {
-      const searchTerm = e.target.value.trim();
-      updateURLSearchParam("search", searchTerm);
-      runSearch(searchTerm);
-    }, 150)
-  );
-}
-
 /**
- * Updates URL search params without reloading page.
- * @param {string} key
- * @param {string} value
- */
-function updateURLSearchParam(key, value) {
-  const params = new URLSearchParams(window.location.search);
-  if (value) params.set(key, value);
-  else params.delete(key);
-  history.replaceState(null, "", `${location.pathname}?${params.toString()}`);
-}
-
-/**
- * Search functionality for bookmarks.
- * @param {string} term
+ * Search functionality for bookmarks
  */
 function runSearch(term) {
   const searchTerm = term.toLowerCase();
···
   });
 }
 
-// Sort toggle button
-if(sortToggleBtn){
-  sortToggleBtn.addEventListener("click", () => {
-    reversedOrder = !reversedOrder;
-
-    if (reversedOrder) {
-      renderContainers(originalRows, storedRowHashes);
-      sortToggleBtn.lastChild.textContent = " ▼";
-    } else {
-      renderContainers([...originalRows].reverse(), storedRowHashes);
-        sortToggleBtn.lastChild.textContent = " ▲";
-
-    }
-  });
-}
-
-
-// ====== Dialog Logic ======
-
+/**
+ * Show dialog with URL params if present
+ */
 function showParamsIfPresent() {
-  if (!dialog) return; 
+  if (!dialog || !atpAgent) return;
+  
   const params = new URLSearchParams(window.location.search);
   const title = params.get("title");
   const url = params.get("url");
···
     urlInput.value = url;
     dialog.showModal();
   }
-
-  saveBtn.onclick = saveBookmark;
 }
 
-function saveBookmark() {
-  const newTitle = titleInput.value.trim();
-  const newUrl = urlInput.value.trim();
-  const rawTags = tagsInput.value.trim();
-
-  if (!newTitle || !newUrl) return; // Basic validation
-
-  const timestamp = Math.floor(Date.now() / 1000);
-  const status = "unread";
-
-  // Normalize tags
-  const normalizedTags = rawTags.split(",").map(t => t.trim()).filter(Boolean).join(",");
-
-  // Escape for CSV
-  const safeTitle = escapeCSVCell(newTitle);
-  const safeTags = escapeCSVCell(normalizedTags);
-
-  const line = `${safeTitle},${newUrl},${timestamp},${safeTags},${status}`;
-
-  let csvData = localStorage.getItem("strd_bookmarks") || "";
-  if (csvData && !csvData.endsWith("\n")) csvData += "\n";
-  csvData += line + "\n";
-
-  localStorage.setItem("strd_bookmarks", csvData);
+// ====== Event Listeners ======
 
-  // Save appcode if changed
-  const appcodeValue = appcodeInput?.value.trim();
-  if (appcodeValue && localStorage.getItem("appcode") !== appcodeValue) {
-    localStorage.setItem("appcode", appcodeValue);
-  }
+// Login/logout
+loginBtn.addEventListener("click", login);
+logoutBtn.addEventListener("click", logout);
 
+// Dialog
+saveBtn.addEventListener("click", saveBookmark);
+cancelBtn?.addEventListener("click", () => {
   dialog.close();
-  window.location.href = window.location.pathname; // Reload page to re-render
-}
+  window.history.replaceState({}, document.title, window.location.pathname);
+});
 
-if(cancelBtn){
-  cancelBtn.onclick = () => {
-    dialog.close();
-    window.location.href = window.location.pathname;
-  };
-}
+// Main UI
+openEmptyDialogBtn?.addEventListener("click", () => {
+  if (!atpAgent) return;
+  
+  titleInput.value = "";
+  urlInput.value = "";
+  tagsInput.value = "";
+  
+  const countInfo = document.getElementById("paramDialogCount");
+  countInfo.innerHTML = `${bookmarks.length} bookmarks in PDS`;
+  
+  dialog.showModal();
+});
 
-// Open dialog button logic with counts
-if(openEmptyDialogBtn){
+// Search
+searchInput?.addEventListener(
+  "input",
+  debounce(e => {
+    const searchTerm = e.target.value.trim();
+    const params = new URLSearchParams(window.location.search);
+    if (searchTerm) params.set("search", searchTerm);
+    else params.delete("search");
+    history.replaceState(null, "", `${location.pathname}?${params.toString()}`);
+    runSearch(searchTerm);
+  }, 150)
+);
 
-  console.log('!!! appcode', typeof appcode)
-  openEmptyDialogBtn.style.display = ( typeof appcode === "undefined" || (typeof appcode !== "undefined" && localStorage.getItem("appcode") === appcode)) ? "inline-block" : "none";
+// Sort toggle
+sortToggleBtn?.addEventListener("click", () => {
+  reversedOrder = !reversedOrder;
+  renderBookmarks();
 
-  openEmptyDialogBtn.addEventListener("click", () => {
-    titleInput.value = "";
-    urlInput.value = "";
-
-    const deletedHashes = JSON.parse(localStorage.getItem("deleted_csv_rows") || "[]");
-
-    const csvCount = csvRows.filter(row => {
-      const title = row[0]?.trim();
-      const url = row[1]?.trim();
-      if (!title || !url) return false;
-      const key = hashString(title + url).toString();
-      return !deletedHashes.includes(key);
-    }).length;
-
-    const deletedCount = csvRows.length - csvCount;
-
-    const countInfo = document.getElementById("paramDialogCount");
-    const parts = [`${csvCount} bookmarks from .csv`];
-    if (storedRows.length > 0) parts.push(`<span style="color: green;">${storedRows.length} new</span>`);
-    if (deletedCount > 0) parts.push(`<span style="color: red;">${deletedCount} deleted</span>`);
-
-    countInfo.innerHTML = parts.join(" | ");
-
-    dialog.showModal();
-  });
-}
-// Export button logic
-if(exportBtn){
-  exportBtn.addEventListener("click", () => {
-
-    // get the rows shown
-    const deletedHashes = JSON.parse(localStorage.getItem("deleted_csv_rows") || "[]");
-
-    const visibleCSVRows = csvRows.filter(row => {
-      const title = row[0]?.trim();
-      const url = row[1]?.trim();
-      if (!title || !url) return false;
-      const key = hashString(title + url).toString();
-      return !deletedHashes.includes(key);
-    });
-
-
-    let allRows = [];
-    if (EXPORT === "csv") {
-      allRows = visibleCSVRows;
-    } else if (EXPORT === "local") {
-      allRows = storedRows;
-    } else if (EXPORT === "all") {
-      allRows = [...visibleCSVRows, ...storedRows];
-    }
-
-    // create csv
-    const header = "title,url,timestamp,tags,status";
-    const csvString = [header, ...allRows.map(row => row.map(escapeCSVCell).join(","))].join("\n");
-
-    const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
-
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "mybookmarks.csv";
-    a.style.display = "none";
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-
-    // clear deleted hashes after export
-    localStorage.removeItem("deleted_csv_rows");
-  });
-}
-
-
-
-// Import logic
-document.addEventListener("DOMContentLoaded", () => {
-  const saveBtn = document.getElementById("importSaveBtn");
-
-  console.log('!!! loaded')
-  if (importArea) {
-    console.log('!! import area')
-
-    importArea.addEventListener("blur", () => {
-      const csv = importArea.value.trim();
-      if (!csv) return;
-
-      const rows = parseCSV(csv);
-      const valid = rows.filter(row =>
-        Array.isArray(row) &&
-        row.length >= 5 &&
-        row[0].trim() &&
-        row[1].trim() &&
-        !isNaN(Number(row[2])) &&
-        typeof row[4] === "string"
-      );
-
-      if (!valid.length) {
-        alert("No valid CSV rows found. Expecting title,url,timestamp,tags,status");
-        return;
-      }
-
-      const existing = localStorage.getItem("strd_bookmarks") || "";
-      const existingLines = existing.trim() ? existing.trim().split("\n") : [];
-
-      const cleanedRows = valid.map(row =>
-        row.map(escapeCSVCell).join(",")
-      );
-
-      const updated = [...existingLines, ...cleanedRows].join("\n") + "\n";
-      localStorage.setItem("strd_bookmarks", updated);
-      alert(`${cleanedRows.length} valid rows added to localStorage.`);
-    });
-  }
-
-  if (importArea && saveBtn) {
-    saveBtn.addEventListener("click", () => {
-      importArea.dispatchEvent(new Event("blur"));
-    });
+  if (reversedOrder) {
+    sortToggleBtn.lastChild.textContent = " ▼";
+  } else {
+    sortToggleBtn.lastChild.textContent = " ▲";
   }
 });
-
 
 // ====== Initialization ======
 
-fetch("mybookmarks.csv")
-  .then(response => {
-    if (!response.ok) throw new Error("Failed to load CSV");
-    return response.text();
-  })
-  .then(csv => {
-    const allRows = parseCSV(csv.trim());
-    csvRows = allRows.slice(1); // remove header
-
-    const currentCSVHashes = new Set(
-      csvRows.map(row => {
-        const title = row[0]?.trim();
-        const url = row[1]?.trim();
-        return title && url ? hashString(title + url).toString() : null;
-      }).filter(Boolean)
-    );
-
-    // Sync deleted rows with current CSV content
-    syncDeletedRows(currentCSVHashes);
-
-    storedRows = getBookmarks().filter(Boolean);
-    storedRowHashes = new Set(storedRows.map(r => hashString((r[0]?.trim() || "") + (r[1]?.trim() || "")).toString()));
-
-    originalRows = [...csvRows, ...storedRows];
-    renderContainers([...originalRows].reverse(), storedRowHashes);
-
+document.addEventListener("DOMContentLoaded", async () => {
+  updateConnectionStatus("disconnected");
+  
+  // Wait for AtpAgent to be loaded
+  let attempts = 0;
+  while (!window.AtpAgent && attempts < 50) {
+    await new Promise(resolve => setTimeout(resolve, 100));
+    attempts++;
+  }
+  
+  if (!window.AtpAgent) {
+    console.error("Failed to load AtpAgent");
+    updateConnectionStatus("disconnected");
+    return;
+  }
+  
+  const initialized = await initializeATProto();
+  if (initialized) {
+    showParamsIfPresent();
+    
     // Restore search from URL
     const initialSearch = new URLSearchParams(window.location.search).get("search");
     if (initialSearch) {
-      const searchInput = document.getElementById("searchInput");
       searchInput.value = initialSearch;
       runSearch(initialSearch);
     }
-  })
-  .catch(console.error);
-
-// Show or hide appcode input based on localStorage
-const savedAppcode = localStorage.getItem("appcode");
-
-/**
- * Enable or disable save button based on appcode input state.
- */
-function updateSaveButtonState() {
-  const localCode = localStorage.getItem("appcode") || "";
-  const inputCode = appcodeInput?.value?.trim() || "";
-  saveBtn.disabled = !(localCode === appcode || inputCode === appcode);
-}
-
-showParamsIfPresent();
-updateSaveButtonState();
-
-appcodeInput?.addEventListener("input", updateSaveButtonState);
+  }
+});

style.css

···
   }
 }
 
+/* Connection status styles */
+.connection-status {
+  font-size: 0.8em;
+  margin-left: 10px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.connection-status.connected {
+  background-color: #2ecc71;
+  color: white;
+}
+
+.connection-status.disconnected {
+  background-color: #e74c3c;
+  color: white;
+}
+
+.connection-status.connecting {
+  background-color: #f39c12;
+  color: white;
+}
+
 

transfer_page.html

···
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>transfer page | woomarks</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Doto&family=Alfa+Slab+One&family=Bebas+Neue&family=Bree+Serif&family=Caveat&family=Courier+Prime&family=Dosis&family=EB+Garamond&family=Permanent+Marker&family=Sedan+SC&family=Ultra&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
-    <link rel="stylesheet" href="style.css" />
+    <title>woomarks - AT Protocol Edition</title>
+    <script>
+      // Redirect to main page since we no longer use CSV import/export
+      window.location.href = '/index.html';
+    </script>
   </head>
-
   <body>
-    <div class="topbar">
-        <div style="flex-grow: 1">
-            <b><a id="headerTitle" href="/index.html">woomarks</a></b>
-        </div>
-    </div>
-
-    <div class="page">
-        <h1>Transfer Page</h1>
-        <textarea placeholder="Paste CSV contents" id="importArea"></textarea>
-        
-        <div style="display: flex; justify-content: flex-end; gap: 30px;">
-        <button class="param-btn" id="exportBtn"  class="export-link" data-umami-event="Export">
-          Export my links as csv
-        </button>
-
-        <button class="param-btn dark" id="importSaveBtn" data-umami-event="Import">
-          Import my links
-        </button>
-        </div>
-
-
-        <br/><br/><br/><br/><br/><br/>
-        
-             <h3>How to import your bookmarks from Pocket</h3>
-        <p>Download from their page <a href="https://getpocket.com/export">https://getpocket.com/export</a></p>
-        <p>Open the file and paste its contents in the textarea. It won't upload the content, it will put it in the local storage of your browser</p>
-
-        <h3>How to import your bookmarks from other places</h3>
-        <p>Make a csv file with this formatting and paste its contents in the textarea. You can copy paste this sample to test it.</p>
-<pre><code>title,url,time_added,tags,status
-A Parliament of Owls and a Murder of Crows: How Groups of Birds Got Their N,https://www.themarginalian.org/2024/01/04/brian-wildsmith-birds-company-terms/,1706544592,,unread
-100 Best Books of the 21st Century - The New York Times,https://www.nytimes.com/interactive/2024/books/best-books-21st-century.html,1732713693,test,unreadSeven Goldfish,https://7goldfish.com/articles/2024_Hugo_Nominees.php,1750558532,books,unread
-Some Title,https://example.com,1720984873,tag1,unread
-"Title, with comma",https://example.com,1720984000,"tag1,tag2",read
-</code></pre>      
-    </div>
-    </body>
-    <script src="./script.js"></script>
-
+    <p>Redirecting to main woomarks app...</p>
+    <p>This AT Protocol edition no longer supports CSV import/export.</p>
+    <p>If not redirected automatically, <a href="/index.html">click here</a>.</p>
+  </body>
 </html>