Introducing Margin Search

backend/internal/api/handler.go

···
 		r.Get("/users/{did}/tags", h.HandleGetUserTags)
 
 		r.Get("/trending-tags", h.HandleGetTrendingTags)
+		r.Get("/search", h.Search)
 
 		r.Get("/replies", h.GetReplies)
 		r.Get("/likes", h.GetLikeCount)
···
 	}
 	return result
 }
+
+func (h *Handler) Search(w http.ResponseWriter, r *http.Request) {
+	query := r.URL.Query().Get("q")
+	if query == "" {
+		http.Error(w, "q parameter required", http.StatusBadRequest)
+		return
+	}
+
+	creator := r.URL.Query().Get("creator")
+	limit := parseIntParam(r, "limit", 50)
+	offset := parseIntParam(r, "offset", 0)
+	viewerDID := h.getViewerDID(r)
+
+	annotations, _ := h.db.SearchAnnotations(query, creator, limit, offset)
+	highlights, _ := h.db.SearchHighlights(query, creator, limit, offset)
+	bookmarks, _ := h.db.SearchBookmarks(query, creator, limit, offset)
+
+	hydratedAnnotations, _ := hydrateAnnotations(h.db, annotations, viewerDID)
+	hydratedHighlights, _ := hydrateHighlights(h.db, highlights, viewerDID)
+	hydratedBookmarks, _ := hydrateBookmarks(h.db, bookmarks, viewerDID)
+
+	var feed []interface{}
+	for _, a := range hydratedAnnotations {
+		feed = append(feed, a)
+	}
+	for _, hl := range hydratedHighlights {
+		feed = append(feed, hl)
+	}
+	for _, b := range hydratedBookmarks {
+		feed = append(feed, b)
+	}
+
+	sortFeed(feed)
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"items":        feed,
+		"fetchedCount": len(feed),
+	})
+}

backend/internal/db/queries_search.go

···
+package db
+
+func (db *DB) SearchAnnotations(query string, authorDID string, limit, offset int) ([]Annotation, error) {
+	pattern := "%" + query + "%"
+
+	var baseQuery string
+	var args []interface{}
+
+	if authorDID != "" {
+		baseQuery = 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 (body_value LIKE ? OR target_source LIKE ? OR target_title LIKE ? OR tags_json LIKE ? OR selector_json LIKE ?)
+			ORDER BY created_at DESC
+			LIMIT ? OFFSET ?
+		`)
+		args = []interface{}{authorDID, pattern, pattern, pattern, pattern, pattern, limit, offset}
+	} else {
+		baseQuery = 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 body_value LIKE ? OR target_source LIKE ? OR target_title LIKE ? OR tags_json LIKE ? OR selector_json LIKE ?
+			ORDER BY created_at DESC
+			LIMIT ? OFFSET ?
+		`)
+		args = []interface{}{pattern, pattern, pattern, pattern, pattern, limit, offset}
+	}
+
+	rows, err := db.Query(baseQuery, args...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	return scanAnnotations(rows)
+}
+
+func (db *DB) SearchHighlights(query string, authorDID string, limit, offset int) ([]Highlight, error) {
+	pattern := "%" + query + "%"
+
+	var baseQuery string
+	var args []interface{}
+
+	if authorDID != "" {
+		baseQuery = 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_source LIKE ? OR target_title LIKE ? OR selector_json LIKE ? OR tags_json LIKE ?)
+			ORDER BY created_at DESC
+			LIMIT ? OFFSET ?
+		`)
+		args = []interface{}{authorDID, pattern, pattern, pattern, pattern, limit, offset}
+	} else {
+		baseQuery = 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 target_source LIKE ? OR target_title LIKE ? OR selector_json LIKE ? OR tags_json LIKE ?
+			ORDER BY created_at DESC
+			LIMIT ? OFFSET ?
+		`)
+		args = []interface{}{pattern, pattern, pattern, pattern, limit, offset}
+	}
+
+	rows, err := db.Query(baseQuery, args...)
+	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) SearchBookmarks(query string, authorDID string, limit, offset int) ([]Bookmark, error) {
+	pattern := "%" + query + "%"
+
+	var baseQuery string
+	var args []interface{}
+
+	if authorDID != "" {
+		baseQuery = db.Rebind(`
+			SELECT uri, author_did, source, source_hash, title, description, tags_json, created_at, indexed_at, cid
+			FROM bookmarks
+			WHERE author_did = ?
+			  AND (source LIKE ? OR title LIKE ? OR description LIKE ? OR tags_json LIKE ?)
+			ORDER BY created_at DESC
+			LIMIT ? OFFSET ?
+		`)
+		args = []interface{}{authorDID, pattern, pattern, pattern, pattern, limit, offset}
+	} else {
+		baseQuery = db.Rebind(`
+			SELECT uri, author_did, source, source_hash, title, description, tags_json, created_at, indexed_at, cid
+			FROM bookmarks
+			WHERE source LIKE ? OR title LIKE ? OR description LIKE ? OR tags_json LIKE ?
+			ORDER BY created_at DESC
+			LIMIT ? OFFSET ?
+		`)
+		args = []interface{}{pattern, pattern, pattern, pattern, limit, offset}
+	}
+
+	rows, err := db.Query(baseQuery, args...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var bookmarks []Bookmark
+	for rows.Next() {
+		var b Bookmark
+		if err := rows.Scan(&b.URI, &b.AuthorDID, &b.Source, &b.SourceHash, &b.Title, &b.Description, &b.TagsJSON, &b.CreatedAt, &b.IndexedAt, &b.CID); err != nil {
+			return nil, err
+		}
+		bookmarks = append(bookmarks, b)
+	}
+	return bookmarks, nil
+}

web/src/App.tsx

···
 } from "./routes/wrappers";
 import About from "./views/About";
 import AdminModeration from "./views/core/AdminModeration";
+import Search from "./views/core/Search";
 
 function RootRoute() {
   const user = useStore($user);
···
           }
         />
         <Route path="/my-feed" element={<Navigate to="/home" replace />} />
+
+        <Route
+          path="/search"
+          element={
+            <AppLayout>
+              <Search />
+            </AppLayout>
+          }
+        />
 
         <Route
           path="/annotations"

web/src/api/client.ts

···
   };
 }
 
+export async function searchItems(
+  query: string,
+  options: { creator?: string; limit?: number; offset?: number } = {},
+): Promise<FeedResponse> {
+  const params = new URLSearchParams();
+  params.append("q", query);
+  if (options.creator) params.append("creator", options.creator);
+  if (options.limit) params.append("limit", options.limit.toString());
+  if (options.offset) params.append("offset", options.offset.toString());
+
+  try {
+    const res = await apiRequest(`/api/search?${params.toString()}`, {
+      skipAuthRedirect: true,
+    });
+    if (!res.ok) throw new Error("Search failed");
+    const data = await res.json();
+    const items: AnnotationItem[] = (data.items || []).map(normalizeItem);
+    return {
+      items,
+      hasMore: items.length >= (options.limit || 50),
+      fetchedCount: items.length,
+    };
+  } catch (e) {
+    console.error("Search error:", e);
+    return { items: [], hasMore: false, fetchedCount: 0 };
+  }
+}
+
 export async function getFeed({
   source,
   type = "all",

web/src/components/navigation/RightSidebar.tsx

···
         const q = searchQuery.trim();
         if (looksLikeUrl(q)) {
           navigate(`/url/${encodeURIComponent(q)}`);
-        } else {
+        } else if (q.includes(".")) {
           navigate(`/profile/${encodeURIComponent(q)}`);
+        } else {
+          navigate(`/search?q=${encodeURIComponent(q)}`);
         }
         setSearchQuery("");
         setSuggestions([]);
···
               suggestions.length > 0 &&
               setShowSuggestions(true)
             }
-            placeholder="Search users or URLs..."
+            placeholder="Search..."
             className="w-full bg-surface-100 dark:bg-surface-800/80 rounded-lg pl-9 pr-4 py-2 text-sm text-surface-900 dark:text-white placeholder:text-surface-400 dark:placeholder:text-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:bg-white dark:focus:bg-surface-800 transition-all border border-surface-200/60 dark:border-surface-700/60"
           />
 

web/src/views/core/Search.tsx

···
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  Search as SearchIcon,
+  Loader2,
+  SlidersHorizontal,
+  MessageSquareText,
+  Highlighter,
+  Bookmark,
+} from "lucide-react";
+import { clsx } from "clsx";
+import { useStore } from "@nanostores/react";
+import { searchItems } from "../../api/client";
+import type { AnnotationItem } from "../../types";
+import Card from "../../components/common/Card";
+import { EmptyState } from "../../components/ui";
+import LayoutToggle from "../../components/ui/LayoutToggle";
+import { $user } from "../../store/auth";
+import { $feedLayout } from "../../store/feedLayout";
+
+export default function Search() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const initialQuery = searchParams.get("q") || "";
+  const user = useStore($user);
+  const layout = useStore($feedLayout);
+
+  const [query, setQuery] = useState(initialQuery);
+  const [results, setResults] = useState<AnnotationItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [myItemsOnly, setMyItemsOnly] = useState(false);
+  const [activeFilter, setActiveFilter] = useState<string | undefined>(
+    undefined,
+  );
+  const [platform, setPlatform] = useState<"all" | "margin" | "semble">("all");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const myItemsRef = useRef(myItemsOnly);
+  const fetchIdRef = useRef(0);
+
+  useEffect(() => {
+    myItemsRef.current = myItemsOnly;
+  }, [myItemsOnly]);
+
+  const filters = [
+    { id: "all", label: "All", icon: null },
+    { id: "commenting", label: "Annotations", icon: MessageSquareText },
+    { id: "highlighting", label: "Highlights", icon: Highlighter },
+    { id: "bookmarking", label: "Bookmarks", icon: Bookmark },
+  ];
+
+  const doSearch = useCallback(
+    async (q: string, newOffset = 0, append = false) => {
+      if (!q.trim()) {
+        setResults([]);
+        return;
+      }
+      const id = ++fetchIdRef.current;
+      setLoading(true);
+      const data = await searchItems(q.trim(), {
+        creator: myItemsRef.current && user ? user.did : undefined,
+        limit: 30,
+        offset: newOffset,
+      });
+      if (id !== fetchIdRef.current) return;
+      if (append) {
+        setResults((prev) => [...prev, ...data.items]);
+      } else {
+        setResults(data.items);
+      }
+      setHasMore(data.hasMore);
+      setOffset(newOffset + data.items.length);
+      setLoading(false);
+    },
+    [user],
+  );
+
+  useEffect(() => {
+    if (initialQuery) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      doSearch(initialQuery);
+    }
+  }, [initialQuery, doSearch]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (query.trim()) {
+      setSearchParams({ q: query.trim() });
+      doSearch(query.trim());
+    }
+  };
+
+  const handleDelete = (uri: string) => {
+    setResults((prev) => prev.filter((item) => item.uri !== uri));
+  };
+
+  const handleFilterChange = (id: string) => {
+    setActiveFilter(id === "all" ? undefined : id);
+  };
+
+  const filteredResults = results.filter((item) => {
+    if (activeFilter && item.motivation !== activeFilter) return false;
+    if (platform === "margin" && item.uri?.includes("network.cosmik"))
+      return false;
+    if (platform === "semble" && !item.uri?.includes("network.cosmik"))
+      return false;
+    return true;
+  });
+
+  return (
+    <div className="mx-auto max-w-2xl xl:max-w-none">
+      <form onSubmit={handleSubmit} className="mb-4">
+        <div className="relative">
+          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+            <SearchIcon
+              className="text-surface-400 dark:text-surface-500"
+              size={18}
+            />
+          </div>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search annotations, highlights, bookmarks..."
+            autoFocus
+            className="w-full pl-11 pr-4 py-3 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-xl text-sm focus:outline-none focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 placeholder:text-surface-400"
+          />
+        </div>
+      </form>
+
+      {initialQuery && (
+        <div className="sticky top-0 z-10 bg-white/95 dark:bg-surface-800/95 backdrop-blur-sm pb-3 mb-2 -mx-1 px-1 pt-1 space-y-2">
+          <div className="flex items-center gap-1.5 flex-wrap">
+            {filters.map((f) => {
+              const isActive =
+                f.id === "all" ? !activeFilter : activeFilter === f.id;
+              return (
+                <button
+                  key={f.id}
+                  onClick={() => handleFilterChange(f.id)}
+                  className={clsx(
+                    "inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full border transition-all",
+                    isActive
+                      ? "bg-primary-600 dark:bg-primary-500 text-white border-transparent shadow-sm"
+                      : "bg-white dark:bg-surface-900 text-surface-500 dark:text-surface-400 border-surface-200 dark:border-surface-700 hover:border-primary-300 dark:hover:border-primary-700 hover:text-primary-600 dark:hover:text-primary-400",
+                  )}
+                >
+                  {f.icon && <f.icon size={12} />}
+                  {f.label}
+                </button>
+              );
+            })}
+
+            {user && (
+              <button
+                type="button"
+                onClick={() => {
+                  const next = !myItemsOnly;
+                  setMyItemsOnly(next);
+                  myItemsRef.current = next;
+                  if (initialQuery) {
+                    doSearch(initialQuery);
+                  }
+                }}
+                className={clsx(
+                  "inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full border transition-all",
+                  myItemsOnly
+                    ? "bg-primary-600 dark:bg-primary-500 text-white border-transparent shadow-sm"
+                    : "bg-white dark:bg-surface-900 text-surface-500 dark:text-surface-400 border-surface-200 dark:border-surface-700 hover:border-primary-300 dark:hover:border-primary-700 hover:text-primary-600 dark:hover:text-primary-400",
+                )}
+              >
+                <SlidersHorizontal size={12} />
+                Mine
+              </button>
+            )}
+
+            <div className="ml-auto flex items-center gap-1.5">
+              <div className="inline-flex items-center rounded-lg border border-surface-200 dark:border-surface-700 p-0.5 bg-surface-50 dark:bg-surface-800/60 hidden sm:inline-flex">
+                <button
+                  onClick={() =>
+                    setPlatform(platform === "margin" ? "all" : "margin")
+                  }
+                  title="Margin only"
+                  className={clsx(
+                    "flex items-center justify-center w-7 h-7 rounded-md transition-all group",
+                    platform === "margin"
+                      ? "bg-white dark:bg-surface-700 shadow-sm"
+                      : "hover:bg-surface-100 dark:hover:bg-surface-700/50",
+                  )}
+                >
+                  {platform === "margin" ? (
+                    <img
+                      src="/logo.svg"
+                      alt="Margin"
+                      className="w-4 h-4 transition-all"
+                    />
+                  ) : (
+                    <div
+                      className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:bg-surface-600 dark:group-hover:bg-surface-300 transition-colors"
+                      style={{
+                        maskImage: "url(/logo.svg)",
+                        WebkitMaskImage: "url(/logo.svg)",
+                        maskSize: "contain",
+                        WebkitMaskSize: "contain",
+                        maskRepeat: "no-repeat",
+                        WebkitMaskRepeat: "no-repeat",
+                        maskPosition: "center",
+                        WebkitMaskPosition: "center",
+                      }}
+                    />
+                  )}
+                </button>
+                <button
+                  onClick={() =>
+                    setPlatform(platform === "semble" ? "all" : "semble")
+                  }
+                  title="Semble only"
+                  className={clsx(
+                    "flex items-center justify-center w-7 h-7 rounded-md transition-all group",
+                    platform === "semble"
+                      ? "bg-white dark:bg-surface-700 shadow-sm"
+                      : "hover:bg-surface-100 dark:hover:bg-surface-700/50",
+                  )}
+                >
+                  {platform === "semble" ? (
+                    <img
+                      src="/semble-logo.svg"
+                      alt="Semble"
+                      className="w-4 h-4 transition-all"
+                    />
+                  ) : (
+                    <div
+                      className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:bg-surface-600 dark:group-hover:bg-surface-300 transition-colors"
+                      style={{
+                        maskImage: "url(/semble-logo.svg)",
+                        WebkitMaskImage: "url(/semble-logo.svg)",
+                        maskSize: "contain",
+                        WebkitMaskSize: "contain",
+                        maskRepeat: "no-repeat",
+                        WebkitMaskRepeat: "no-repeat",
+                        maskPosition: "center",
+                        WebkitMaskPosition: "center",
+                      }}
+                    />
+                  )}
+                </button>
+              </div>
+              <LayoutToggle className="hidden sm:inline-flex" />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {loading && results.length === 0 && (
+        <div className="flex items-center justify-center py-20 animate-fade-in">
+          <Loader2 className="animate-spin text-surface-400" size={24} />
+        </div>
+      )}
+
+      {loading && results.length > 0 && (
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
+          <div className="bg-white/90 dark:bg-surface-800/90 shadow-lg rounded-full p-3 backdrop-blur-sm animate-in fade-in zoom-in-95">
+            <Loader2
+              className="animate-spin text-primary-600 dark:text-primary-400"
+              size={24}
+            />
+          </div>
+        </div>
+      )}
+
+      {!loading && initialQuery && filteredResults.length === 0 && (
+        <EmptyState
+          icon={<SearchIcon size={48} />}
+          title="No results found"
+          message={`Nothing matched "${initialQuery}". Try different keywords.`}
+        />
+      )}
+
+      {filteredResults.length > 0 && (
+        <div
+          className={clsx(
+            "transition-opacity duration-200 relative",
+            loading ? "opacity-40 pointer-events-none" : "opacity-100",
+          )}
+        >
+          <p className="text-xs text-surface-400 dark:text-surface-500 font-medium mb-3 px-1">
+            {filteredResults.length}
+            {hasMore ? "+" : ""} results for &ldquo;{initialQuery}&rdquo;
+          </p>
+
+          {layout === "mosaic" ? (
+            <div className="columns-1 sm:columns-2 gap-3 space-y-3">
+              {filteredResults.map((item) => (
+                <div key={item.uri} className="break-inside-avoid">
+                  <Card item={item} onDelete={handleDelete} layout="mosaic" />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {filteredResults.map((item) => (
+                <Card
+                  key={item.uri}
+                  item={item}
+                  onDelete={handleDelete}
+                  layout="list"
+                />
+              ))}
+            </div>
+          )}
+
+          {hasMore && (
+            <button
+              onClick={() => doSearch(initialQuery, offset, true)}
+              disabled={loading}
+              className="w-full py-3 mt-3 text-sm font-medium text-primary-600 dark:text-primary-400 bg-surface-50 dark:bg-surface-800 rounded-xl hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors disabled:opacity-50"
+            >
+              {loading ? (
+                <Loader2 className="animate-spin mx-auto" size={16} />
+              ) : (
+                "Load more"
+              )}
+            </button>
+          )}
+        </div>
+      )}
+
+      {!initialQuery && !loading && (
+        <EmptyState
+          icon={<SearchIcon size={48} />}
+          title="Search your library"
+          message="Find annotations, highlights, and bookmarks by keyword, URL, or tag."
+        />
+      )}
+    </div>
+  );
+}