Implement seeing and sharing your notes on an specific page

backend/internal/api/handler.go

···
 		r.Get("/users/{did}/annotations", h.GetUserAnnotations)
 		r.Get("/users/{did}/highlights", h.GetUserHighlights)
 		r.Get("/users/{did}/bookmarks", h.GetUserBookmarks)
+		r.Get("/users/{did}/targets", h.GetUserTargetItems)
 
 		r.Get("/replies", h.GetReplies)
 		r.Get("/likes", h.GetLikeCount)
···
 		"creator":    did,
 		"items":      enriched,
 		"totalItems": len(enriched),
+	})
+}
+
+func (h *Handler) GetUserTargetItems(w http.ResponseWriter, r *http.Request) {
+	did := chi.URLParam(r, "did")
+	if decoded, err := url.QueryUnescape(did); err == nil {
+		did = decoded
+	}
+
+	source := r.URL.Query().Get("source")
+	if source == "" {
+		source = r.URL.Query().Get("url")
+	}
+	if source == "" {
+		http.Error(w, "source or url parameter required", http.StatusBadRequest)
+		return
+	}
+
+	limit := parseIntParam(r, "limit", 50)
+	offset := parseIntParam(r, "offset", 0)
+
+	urlHash := db.HashURL(source)
+
+	annotations, _ := h.db.GetAnnotationsByAuthorAndTargetHash(did, urlHash, limit, offset)
+	highlights, _ := h.db.GetHighlightsByAuthorAndTargetHash(did, urlHash, limit, offset)
+
+	enrichedAnnotations, _ := hydrateAnnotations(h.db, annotations, h.getViewerDID(r))
+	enrichedHighlights, _ := hydrateHighlights(h.db, highlights, h.getViewerDID(r))
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"@context":    "http://www.w3.org/ns/anno.jsonld",
+		"creator":     did,
+		"source":      source,
+		"sourceHash":  urlHash,
+		"annotations": enrichedAnnotations,
+		"highlights":  enrichedHighlights,
 	})
 }
 

backend/internal/db/queries_annotations.go

···
 	return scanAnnotations(rows)
 }
 
+func (db *DB) GetAnnotationsByAuthorAndTargetHash(authorDID, targetHash string, limit, offset int) ([]Annotation, error) {
+	rows, err := db.Query(db.Rebind(`
+		SELECT uri, author_did, motivation, body_value, body_format, body_uri, target_source, target_hash, target_title, selector_json, tags_json, created_at, indexed_at, cid
+		FROM annotations
+		WHERE author_did = ? AND target_hash = ?
+		ORDER BY created_at DESC
+		LIMIT ? OFFSET ?
+	`), authorDID, targetHash, limit, offset)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	return scanAnnotations(rows)
+}
+
 func (db *DB) GetAnnotationsByURIs(uris []string) ([]Annotation, error) {
 	if len(uris) == 0 {
 		return []Annotation{}, nil

backend/internal/db/queries_highlights.go

···
 	return highlights, nil
 }
 
+func (db *DB) GetHighlightsByAuthorAndTargetHash(authorDID, targetHash string, limit, offset int) ([]Highlight, error) {
+	rows, err := db.Query(db.Rebind(`
+		SELECT uri, author_did, target_source, target_hash, target_title, selector_json, color, tags_json, created_at, indexed_at, cid
+		FROM highlights
+		WHERE author_did = ? AND target_hash = ?
+		ORDER BY created_at DESC
+		LIMIT ? OFFSET ?
+	`), authorDID, targetHash, limit, offset)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var highlights []Highlight
+	for rows.Next() {
+		var h Highlight
+		if err := rows.Scan(&h.URI, &h.AuthorDID, &h.TargetSource, &h.TargetHash, &h.TargetTitle, &h.SelectorJSON, &h.Color, &h.TagsJSON, &h.CreatedAt, &h.IndexedAt, &h.CID); err != nil {
+			return nil, err
+		}
+		highlights = append(highlights, h)
+	}
+	return highlights, nil
+}
+
 func (db *DB) DeleteHighlight(uri string) error {
 	_, err := db.Exec(db.Rebind(`DELETE FROM highlights WHERE uri = ?`), uri)
 	return err

web/src/App.jsx

···
 import MobileNav from "./components/MobileNav";
 import Feed from "./pages/Feed";
 import Url from "./pages/Url";
+import UserUrl from "./pages/UserUrl";
 import Profile from "./pages/Profile";
 import Login from "./pages/Login";
 import New from "./pages/New";
···
               path="/:handle/bookmark/:rkey"
               element={<AnnotationDetail />}
             />
+            <Route path="/:handle/url/*" element={<UserUrl />} />
             <Route path="/collection/*" element={<CollectionDetail />} />
             <Route path="/privacy" element={<Privacy />} />
             <Route path="/terms" element={<Terms />} />

web/src/api/client.js

···
   );
 }
 
+export async function getUserTargetItems(did, url, limit = 50, offset = 0) {
+  return request(
+    `${API_BASE}/users/${encodeURIComponent(did)}/targets?source=${encodeURIComponent(url)}&limit=${limit}&offset=${offset}`,
+  );
+}
+
 export async function getHighlights(creatorDid, limit = 50, offset = 0) {
   return request(
     `${API_BASE}/highlights?creator=${encodeURIComponent(creatorDid)}&limit=${limit}&offset=${offset}`,

web/src/context/ThemeContext.jsx

···
 import { createContext, useContext, useEffect, useState } from "react";
 
 const ThemeContext = createContext({
-    theme: "system",
-    setTheme: () => null,
+  theme: "system",
+  setTheme: () => null,
 });
 
 export function ThemeProvider({ children }) {
-    const [theme, setTheme] = useState(() => {
-        return localStorage.getItem("theme") || "system";
-    });
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem("theme") || "system";
+  });
 
-    useEffect(() => {
-        localStorage.setItem("theme", theme);
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
 
-        const root = window.document.documentElement;
-        root.classList.remove("light", "dark");
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
 
-        delete root.dataset.theme;
+    delete root.dataset.theme;
 
-        if (theme === "system") {
-            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-                .matches
-                ? "dark"
-                : "light";
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
 
-            if (systemTheme === "light") {
-                root.dataset.theme = "light";
-            } else {
-                root.dataset.theme = "dark";
-            }
-            return;
-        }
+      if (systemTheme === "light") {
+        root.dataset.theme = "light";
+      } else {
+        root.dataset.theme = "dark";
+      }
+      return;
+    }
 
-        if (theme === "light") {
-            root.dataset.theme = "light";
-        }
-    }, [theme]);
+    if (theme === "light") {
+      root.dataset.theme = "light";
+    }
+  }, [theme]);
 
-    useEffect(() => {
-        if (theme !== "system") return;
+  useEffect(() => {
+    if (theme !== "system") return;
 
-        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        const handleChange = () => {
-            const root = window.document.documentElement;
-            if (mediaQuery.matches) {
-                delete root.dataset.theme;
-            } else {
-                root.dataset.theme = "light";
-            }
-        };
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      const root = window.document.documentElement;
+      if (mediaQuery.matches) {
+        delete root.dataset.theme;
+      } else {
+        root.dataset.theme = "light";
+      }
+    };
 
-        mediaQuery.addEventListener("change", handleChange);
-        return () => mediaQuery.removeEventListener("change", handleChange);
-    }, [theme]);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme]);
 
-    const value = {
-        theme,
-        setTheme: (newTheme) => {
-            setTheme(newTheme);
-        },
-    };
+  const value = {
+    theme,
+    setTheme: (newTheme) => {
+      setTheme(newTheme);
+    },
+  };
 
-    return (
-        <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-    );
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
 export function useTheme() {
-    const context = useContext(ThemeContext);
-    if (context === undefined)
-        throw new Error("useTheme must be used within a ThemeProvider");
-    return context;
+  const context = useContext(ThemeContext);
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
 }

web/src/css/feed.css

···
     font-size: 1.5rem;
   }
 }
+
+.user-url-page {
+  max-width: 800px;
+}
+
+.url-target-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  margin-bottom: 24px;
+}
+
+.url-target-label {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.url-target-link {
+  color: var(--accent);
+  font-size: 0.95rem;
+  word-break: break-all;
+  text-decoration: none;
+}
+
+.url-target-link:hover {
+  text-decoration: underline;
+}
+
+.share-notes-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 16px;
+  background: var(--accent-subtle);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-md);
+  margin-bottom: 16px;
+}
+
+.share-notes-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+}
+
+.share-notes-actions {
+  display: flex;
+  gap: 8px;
+}
+
+@media (max-width: 640px) {
+  .share-notes-banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .share-notes-actions {
+    justify-content: flex-end;
+  }
+}

web/src/css/login.css

···
     width: 48px;
     height: 48px;
   }
-}
+}

web/src/pages/Url.jsx

···
 import { useState } from "react";
+import { Link } from "react-router-dom";
 import AnnotationCard, { HighlightCard } from "../components/AnnotationCard";
 import { getByTarget } from "../api/client";
+import { useAuth } from "../context/AuthContext";
 import { PenIcon, AlertIcon, SearchIcon } from "../components/Icons";
+import { Copy, Check, ExternalLink } from "lucide-react";
 
 export default function Url() {
+  const { user } = useAuth();
   const [url, setUrl] = useState("");
   const [annotations, setAnnotations] = useState([]);
   const [highlights, setHighlights] = useState([]);
···
   const [searched, setSearched] = useState(false);
   const [error, setError] = useState(null);
   const [activeTab, setActiveTab] = useState("all");
+  const [copied, setCopied] = useState(false);
 
   const handleSearch = async (e) => {
     e.preventDefault();
···
       setError(err.message);
     } finally {
       setLoading(false);
+    }
+  };
+
+  const myAnnotations = user
+    ? annotations.filter((a) => (a.creator?.did || a.author?.did) === user.did)
+    : [];
+  const myHighlights = user
+    ? highlights.filter((h) => (h.creator?.did || h.author?.did) === user.did)
+    : [];
+  const myItemsCount = myAnnotations.length + myHighlights.length;
+
+  const getShareUrl = () => {
+    if (!user?.handle || !url) return null;
+    return `${window.location.origin}/${user.handle}/url/${url}`;
+  };
+
+  const handleCopyShareLink = async () => {
+    const shareUrl = getShareUrl();
+    if (!shareUrl) return;
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      prompt("Copy this link:", shareUrl);
     }
   };
 
···
               </button>
             </div>
           </div>
+
+          {user && myItemsCount > 0 && (
+            <div className="share-notes-banner">
+              <div className="share-notes-info">
+                <ExternalLink size={16} />
+                <span>
+                  You have {myItemsCount} note{myItemsCount !== 1 ? "s" : ""} on
+                  this page
+                </span>
+              </div>
+              <div className="share-notes-actions">
+                <Link
+                  to={`/${user.handle}/url/${encodeURIComponent(url)}`}
+                  className="btn btn-ghost btn-sm"
+                >
+                  View
+                </Link>
+                <button
+                  onClick={handleCopyShareLink}
+                  className="btn btn-primary btn-sm"
+                >
+                  {copied ? (
+                    <>
+                      <Check size={14} /> Copied!
+                    </>
+                  ) : (
+                    <>
+                      <Copy size={14} /> Copy Share Link
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+          )}
+
           <div className="feed">{renderResults()}</div>
         </>
       )}

web/src/pages/UserUrl.jsx

···
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import AnnotationCard, { HighlightCard } from "../components/AnnotationCard";
+import { getUserTargetItems } from "../api/client";
+import {
+  PenIcon,
+  HighlightIcon,
+  SearchIcon,
+  BlueskyIcon,
+} from "../components/Icons";
+
+export default function UserUrl() {
+  const { handle, "*": urlPath } = useParams();
+  const targetUrl = urlPath || "";
+
+  const [profile, setProfile] = useState(null);
+  const [annotations, setAnnotations] = useState([]);
+  const [highlights, setHighlights] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [activeTab, setActiveTab] = useState("all");
+
+  useEffect(() => {
+    async function fetchData() {
+      if (!targetUrl) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+
+        const profileRes = await fetch(
+          `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`,
+        );
+        let did = handle;
+        if (profileRes.ok) {
+          const profileData = await profileRes.json();
+          setProfile(profileData);
+          did = profileData.did;
+        }
+
+        const data = await getUserTargetItems(did, targetUrl);
+        setAnnotations(data.annotations || []);
+        setHighlights(data.highlights || []);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [handle, targetUrl]);
+
+  const displayName = profile?.displayName || profile?.handle || handle;
+  const displayHandle =
+    profile?.handle || (handle?.startsWith("did:") ? null : handle);
+  const avatarUrl = profile?.avatar;
+
+  const getInitial = () => {
+    return (displayName || displayHandle || "??")
+      ?.substring(0, 2)
+      .toUpperCase();
+  };
+
+  const totalItems = annotations.length + highlights.length;
+  const bskyProfileUrl = displayHandle
+    ? `https://bsky.app/profile/${displayHandle}`
+    : `https://bsky.app/profile/${handle}`;
+
+  const renderResults = () => {
+    if (activeTab === "annotations" && annotations.length === 0) {
+      return (
+        <div className="empty-state">
+          <div className="empty-state-icon">
+            <PenIcon size={32} />
+          </div>
+          <h3 className="empty-state-title">No annotations</h3>
+        </div>
+      );
+    }
+
+    if (activeTab === "highlights" && highlights.length === 0) {
+      return (
+        <div className="empty-state">
+          <div className="empty-state-icon">
+            <HighlightIcon size={32} />
+          </div>
+          <h3 className="empty-state-title">No highlights</h3>
+        </div>
+      );
+    }
+
+    return (
+      <>
+        {(activeTab === "all" || activeTab === "annotations") &&
+          annotations.map((a) => <AnnotationCard key={a.uri} annotation={a} />)}
+        {(activeTab === "all" || activeTab === "highlights") &&
+          highlights.map((h) => <HighlightCard key={h.uri} highlight={h} />)}
+      </>
+    );
+  };
+
+  if (!targetUrl) {
+    return (
+      <div className="user-url-page">
+        <div className="empty-state">
+          <div className="empty-state-icon">
+            <SearchIcon size={32} />
+          </div>
+          <h3 className="empty-state-title">No URL specified</h3>
+          <p className="empty-state-text">
+            Please provide a URL to view annotations.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="user-url-page">
+      <header className="profile-header">
+        <a
+          href={bskyProfileUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="profile-avatar-link"
+        >
+          <div className="profile-avatar">
+            {avatarUrl ? (
+              <img src={avatarUrl} alt={displayName} />
+            ) : (
+              <span>{getInitial()}</span>
+            )}
+          </div>
+        </a>
+        <div className="profile-info">
+          <h1 className="profile-name">{displayName}</h1>
+          {displayHandle && (
+            <a
+              href={bskyProfileUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="profile-bluesky-link"
+            >
+              <BlueskyIcon size={16} />@{displayHandle}
+            </a>
+          )}
+        </div>
+      </header>
+
+      <div className="url-target-info">
+        <span className="url-target-label">Annotations on:</span>
+        <a
+          href={targetUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="url-target-link"
+        >
+          {targetUrl}
+        </a>
+      </div>
+
+      {loading && (
+        <div className="feed">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="card">
+              <div
+                className="skeleton skeleton-text"
+                style={{ width: "40%" }}
+              />
+              <div className="skeleton skeleton-text" />
+              <div
+                className="skeleton skeleton-text"
+                style={{ width: "60%" }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {error && (
+        <div className="empty-state">
+          <div className="empty-state-icon">⚠️</div>
+          <h3 className="empty-state-title">Error</h3>
+          <p className="empty-state-text">{error}</p>
+        </div>
+      )}
+
+      {!loading && !error && totalItems === 0 && (
+        <div className="empty-state">
+          <div className="empty-state-icon">
+            <SearchIcon size={32} />
+          </div>
+          <h3 className="empty-state-title">No items found</h3>
+          <p className="empty-state-text">
+            {displayName} hasn&apos;t annotated this page yet.
+          </p>
+        </div>
+      )}
+
+      {!loading && !error && totalItems > 0 && (
+        <>
+          <div className="url-results-header">
+            <h2 className="feed-title">
+              {totalItems} item{totalItems !== 1 ? "s" : ""}
+            </h2>
+            <div className="feed-filters">
+              <button
+                className={`filter-tab ${activeTab === "all" ? "active" : ""}`}
+                onClick={() => setActiveTab("all")}
+              >
+                All ({totalItems})
+              </button>
+              <button
+                className={`filter-tab ${activeTab === "annotations" ? "active" : ""}`}
+                onClick={() => setActiveTab("annotations")}
+              >
+                Annotations ({annotations.length})
+              </button>
+              <button
+                className={`filter-tab ${activeTab === "highlights" ? "active" : ""}`}
+                onClick={() => setActiveTab("highlights")}
+              >
+                Highlights ({highlights.length})
+              </button>
+            </div>
+          </div>
+          <div className="feed">{renderResults()}</div>
+        </>
+      )}
+    </div>
+  );
+}