track result clicks in a cookie and render the top 5

main.tsx

···
   </html>
 );
 
-const SearchPage = () => (
+const RecentSearches = ({
+  recentRecords,
+  actors,
+}: {
+  recentRecords: IndexedRecord[];
+  actors: Map<string, Actor>;
+}) => {
+  return (
+    <div class="border border-cyan-500/50 bg-black/70 backdrop-blur-sm mb-4">
+      <div class="border-b border-cyan-500/30 px-3 sm:px-4 py-2 bg-cyan-500/10">
+        <div class="text-cyan-400 text-[10px] sm:text-xs uppercase tracking-wider">
+          RECENT_ACTIVITY // QUICK_ACCESS
+        </div>
+      </div>
+      <div class="p-2 sm:p-3">
+        <div class="flex gap-2 overflow-x-auto scrollbar-thin scrollbar-thumb-cyan-500/30 scrollbar-track-black/50">
+          {recentRecords.map((record, index) => {
+            const actor = actors.get(record.did);
+            const isRepo = record.collection === "sh.tangled.repo";
+            const repo = isRepo
+              ? (record.value as unknown as ShTangledRepo)
+              : null;
+            const profile = !isRepo
+              ? (record.value as unknown as AppBskyActorProfile)
+              : null;
+
+            const url =
+              isRepo && actor?.handle && repo?.name
+                ? `https://tangled.sh/@${actor.handle}/${repo.name}`
+                : !isRepo && actor?.handle
+                ? `https://tangled.sh/@${actor.handle}`
+                : "#";
+
+            return (
+              <div class="flex-shrink-0 flex items-center gap-2 px-3 py-2 border border-cyan-500/20 bg-black/50 hover:bg-cyan-500/5 transition-all text-xs group">
+                <a
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center gap-2 no-underline"
+                  //@ts-expect-error hyperscript
+                  _={`on click 
+                      fetch /track-click {method:'POST', headers: {'Content-Type': 'application/json'}, body: '{"uri": "${record.uri}"}' } as text`}
+                >
+                  <span class="text-cyan-400">
+                    [{String(index + 1).padStart(2, "0")}]
+                  </span>
+                  <span class="text-green-400 font-mono max-w-[150px] truncate">
+                    {isRepo ? repo?.name : profile?.displayName || actor?.handle}
+                  </span>
+                  <span class="text-pink-400/70 text-[10px]">
+                    {isRepo ? "R" : "P"}
+                  </span>
+                </a>
+                <button
+                  type="button"
+                  class="ml-1 text-red-400 hover:text-red-300 leading-none text-xs font-mono"
+                  title="Remove from recent"
+                  //@ts-expect-error hyperscript
+                  _={`on click 
+                      halt the event
+                      fetch /remove-recent {method:'POST', headers: {'Content-Type': 'application/json'}, body: '{"uri": "${record.uri}"}' } as text
+                      then window.location.reload()`}
+                >
+                  [-]
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SearchPage = ({
+  recentRecords,
+  actors,
+}: {
+  recentRecords?: IndexedRecord[];
+  actors?: Map<string, Actor>;
+}) => (
   <Layout>
     <div class="w-full max-w-4xl relative z-10 min-h-screen sm:min-h-0 px-3 sm:px-6">
       <div
···
       </div>
 
       <div id="search-container" class="">
+        <div id="recent-container">
+          {recentRecords && recentRecords.length > 0 && actors && (
+            <RecentSearches recentRecords={recentRecords} actors={actors} />
+          )}
+        </div>
         <div
           id="loading"
           class="htmx-indicator items-center justify-center py-8"
···
   });
 
   return (
-    <div class="border border-cyan-500/50 bg-black/70 backdrop-blur-sm">
-      <div class="border-b border-cyan-500/30 px-3 sm:px-4 py-2 bg-cyan-500/10">
-        <div class="text-cyan-400 text-[10px] sm:text-xs uppercase tracking-wider flex flex-col sm:flex-row justify-between gap-1 sm:gap-0">
-          <span class="truncate">SEARCH_RESULTS // QUERY: "{query}"</span>
-          <span class="text-[10px] sm:text-xs">
-            TYPE: {searchType.toUpperCase()}
-          </span>
+    <>
+      <div class="border border-cyan-500/50 bg-black/70 backdrop-blur-sm">
+        <div class="border-b border-cyan-500/30 px-3 sm:px-4 py-2 bg-cyan-500/10">
+          <div class="text-cyan-400 text-[10px] sm:text-xs uppercase tracking-wider flex flex-col sm:flex-row justify-between gap-1 sm:gap-0">
+            <span class="truncate">SEARCH_RESULTS // QUERY: "{query}"</span>
+            <span class="text-[10px] sm:text-xs">
+              TYPE: {searchType.toUpperCase()}
+            </span>
+          </div>
         </div>
-      </div>
 
-      {displayResults.length === 0 ? (
-        <div class="p-3 sm:p-4 text-red-400 border-l-2 border-red-500 text-sm">
-          ERROR: NO_RESULTS_FOUND // QUERY: "{query}"
-        </div>
-      ) : (
-        <div class="p-3 sm:p-4">
-          <div class="text-green-400 text-[10px] sm:text-xs mb-3 sm:mb-4 flex items-center gap-2">
-            <span class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-green-400 rounded-full animate-pulse"></span>
-            FOUND {displayResults.length} RESULT
-            {displayResults.length !== 1 ? "S" : ""} // STATUS: OK
+        {displayResults.length === 0 ? (
+          <div class="p-3 sm:p-4 text-red-400 border-l-2 border-red-500 text-sm">
+            ERROR: NO_RESULTS_FOUND // QUERY: "{query}"
           </div>
+        ) : (
+          <div class="p-3 sm:p-4">
+            <div class="text-green-400 text-[10px] sm:text-xs mb-3 sm:mb-4 flex items-center gap-2">
+              <span class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-green-400 rounded-full animate-pulse"></span>
+              FOUND {displayResults.length} RESULT
+              {displayResults.length !== 1 ? "S" : ""} // STATUS: OK
+            </div>
 
-          <div class="space-y-3 sm:space-y-4 sm:max-h-80 sm:overflow-y-auto">
-            {displayResults.map((record, index) => {
-              const actor = actors.get(record.did);
-              const isRepo = record.collection === "sh.tangled.repo";
-              const repo = isRepo
-                ? (record.value as unknown as ShTangledRepo)
-                : null;
-              const profile = !isRepo
-                ? (record.value as unknown as AppBskyActorProfile)
-                : null;
-
-              const repoUrl =
-                isRepo && actor?.handle && repo?.name
-                  ? `https://tangled.sh/@${actor.handle}/${repo.name}`
+            <div class="space-y-3 sm:space-y-4 sm:max-h-80 sm:overflow-y-auto">
+              {displayResults.map((record, index) => {
+                const actor = actors.get(record.did);
+                const isRepo = record.collection === "sh.tangled.repo";
+                const repo = isRepo
+                  ? (record.value as unknown as ShTangledRepo)
                   : null;
-
-              const profileUrl =
-                !isRepo && actor?.handle
-                  ? `https://tangled.sh/@${actor.handle}`
+                const profile = !isRepo
+                  ? (record.value as unknown as AppBskyActorProfile)
                   : null;
 
-              const clickUrl = repoUrl || profileUrl;
+                const repoUrl =
+                  isRepo && actor?.handle && repo?.name
+                    ? `https://tangled.sh/@${actor.handle}/${repo.name}`
+                    : null;
 
-              const ResultContainer = clickUrl ? "a" : "div";
-              const containerProps = clickUrl
-                ? {
-                    href: clickUrl,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                  }
-                : {};
+                const profileUrl =
+                  !isRepo && actor?.handle
+                    ? `https://tangled.sh/@${actor.handle}`
+                    : null;
 
-              return (
-                <ResultContainer
-                  class="border border-cyan-500/30 bg-black/50 hover:bg-cyan-500/5 transition-all block no-underline overflow-hidden"
-                  {...containerProps}
-                >
-                  <div class="border-b border-cyan-500/20 px-2 sm:px-3 py-1 bg-cyan-500/5 flex justify-between items-center">
-                    <div class="text-cyan-400 text-[10px] sm:text-xs">
-                      [{String(index + 1).padStart(3, "0")}]{" "}
-                      <span class="hidden sm:inline">
-                        {isRepo ? "REPO" : "PROFILE"}_ENTRY
-                      </span>
-                      <span class="sm:hidden">{isRepo ? "REPO" : "PROF"}</span>
+                const clickUrl = repoUrl || profileUrl;
+
+                const ResultContainer = clickUrl ? "a" : "div";
+
+                const containerProps = clickUrl
+                  ? {
+                      href: clickUrl,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      _: `on click 
+                          fetch /track-click {method:'POST', headers: {'Content-Type': 'application/json'}, body: '{"uri": "${record.uri}"}' } as text`,
+                    }
+                  : {};
+
+                return (
+                  <ResultContainer
+                    class="border border-cyan-500/30 bg-black/50 hover:bg-cyan-500/5 transition-all block no-underline overflow-hidden"
+                    {...containerProps}
+                  >
+                    <div class="border-b border-cyan-500/20 px-2 sm:px-3 py-1 bg-cyan-500/5 flex justify-between items-center">
+                      <div class="text-cyan-400 text-[10px] sm:text-xs">
+                        [{String(index + 1).padStart(3, "0")}]{" "}
+                        <span class="hidden sm:inline">
+                          {isRepo ? "REPO" : "PROFILE"}_ENTRY
+                        </span>
+                        <span class="sm:hidden">
+                          {isRepo ? "REPO" : "PROF"}
+                        </span>
+                      </div>
+                      <div class="text-pink-400 text-[10px] sm:text-xs">
+                        ID:{" "}
+                        {isRepo
+                          ? record.uri.split("/").pop()?.slice(-8)
+                          : record.did.slice(-8)}
+                      </div>
                     </div>
-                    <div class="text-pink-400 text-[10px] sm:text-xs">
-                      ID: {isRepo ? record.uri.split('/').pop()?.slice(-8) : record.did.slice(-8)}
-                    </div>
-                  </div>
+
+                    <div class="p-2 sm:p-3">
+                      <div class="flex items-start gap-2 sm:gap-3">
+                        {(() => {
+                          // For profiles, use their own avatar
+                          const avatarProfile = isRepo
+                            ? ownerProfiles.get(record.did)
+                            : profile;
 
-                  <div class="p-2 sm:p-3">
-                    <div class="flex items-start gap-2 sm:gap-3">
-                      {(() => {
-                        // For profiles, use their own avatar
-                        const avatarProfile = isRepo
-                          ? ownerProfiles.get(record.did)
-                          : profile;
+                          if (avatarProfile?.avatar) {
+                            return (
+                              <img
+                                src={recordBlobToCdnUrl(
+                                  record as IndexedRecord,
+                                  avatarProfile.avatar,
+                                  "avatar"
+                                )}
+                                alt={
+                                  avatarProfile.displayName ||
+                                  actor?.handle ||
+                                  "Avatar"
+                                }
+                                class="w-7 h-7 sm:w-8 sm:h-8 rounded border border-cyan-500/50 flex-shrink-0"
+                              />
+                            );
+                          }
 
-                        if (avatarProfile?.avatar) {
                           return (
-                            <img
-                              src={recordBlobToCdnUrl(
-                                record as IndexedRecord,
-                                avatarProfile.avatar,
-                                "avatar"
-                              )}
-                              alt={
-                                avatarProfile.displayName ||
-                                actor?.handle ||
-                                "Avatar"
-                              }
-                              class="w-7 h-7 sm:w-8 sm:h-8 rounded border border-cyan-500/50 flex-shrink-0"
-                            />
+                            <div class="w-7 h-7 sm:w-8 sm:h-8 border border-cyan-500/50 bg-cyan-500/10 flex items-center justify-center flex-shrink-0">
+                              <span class="text-cyan-400 text-[10px] sm:text-xs">
+                                {(
+                                  profile?.displayName ||
+                                  repo?.name ||
+                                  actor?.handle ||
+                                  "?"
+                                )
+                                  .charAt(0)
+                                  .toUpperCase()}
+                              </span>
+                            </div>
                           );
-                        }
+                        })()}
 
-                        return (
-                          <div class="w-7 h-7 sm:w-8 sm:h-8 border border-cyan-500/50 bg-cyan-500/10 flex items-center justify-center flex-shrink-0">
-                            <span class="text-cyan-400 text-[10px] sm:text-xs">
-                              {(
-                                profile?.displayName ||
-                                repo?.name ||
-                                actor?.handle ||
-                                "?"
-                              )
-                                .charAt(0)
-                                .toUpperCase()}
-                            </span>
+                        <div class="flex-1 min-w-0">
+                          <div class="flex flex-wrap items-center gap-2 mb-1">
+                            <div class="text-green-400 font-mono font-semibold text-sm sm:text-base truncate flex-1">
+                              {isRepo
+                                ? repo?.name || "UNNAMED_REPO"
+                                : profile?.displayName ||
+                                  actor?.handle ||
+                                  "UNNAMED_PROFILE"}
+                            </div>
+                            {isRepo && starCounts.get(record.uri) && (
+                              <div class="flex items-center gap-1 px-1.5 sm:px-2 py-0.5 sm:py-1 bg-yellow-500/20 border border-yellow-500/50 rounded text-[10px] sm:text-xs flex-shrink-0">
+                                <span class="text-yellow-400">★</span>
+                                <span class="text-yellow-300 font-mono">
+                                  {starCounts.get(record.uri)}
+                                </span>
+                              </div>
+                            )}
                           </div>
-                        );
-                      })()}
 
-                      <div class="flex-1 min-w-0">
-                        <div class="flex flex-wrap items-center gap-2 mb-1">
-                          <div class="text-green-400 font-mono font-semibold text-sm sm:text-base truncate flex-1">
-                            {isRepo
-                              ? repo?.name || "UNNAMED_REPO"
-                              : profile?.displayName ||
-                                actor?.handle ||
-                                "UNNAMED_PROFILE"}
-                          </div>
-                          {isRepo && starCounts.get(record.uri) && (
-                            <div class="flex items-center gap-1 px-1.5 sm:px-2 py-0.5 sm:py-1 bg-yellow-500/20 border border-yellow-500/50 rounded text-[10px] sm:text-xs flex-shrink-0">
-                              <span class="text-yellow-400">★</span>
-                              <span class="text-yellow-300 font-mono">
-                                {starCounts.get(record.uri)}
-                              </span>
+                          {(actor?.handle || profile?.displayName) && (
+                            <div class="text-pink-400 text-xs sm:text-sm mb-1 sm:mb-2 font-mono truncate">
+                              {isRepo
+                                ? `OWNER: ${
+                                    actor?.handle ||
+                                    record.did.slice(0, 16) + "..."
+                                  }`
+                                : `HANDLE: @${actor?.handle || "unknown"}`}
                             </div>
                           )}
-                        </div>
 
-                        {(actor?.handle || profile?.displayName) && (
-                          <div class="text-pink-400 text-xs sm:text-sm mb-1 sm:mb-2 font-mono truncate">
+                          <div class="text-cyan-300/80 text-xs sm:text-sm font-mono leading-relaxed line-clamp-3">
                             {isRepo
-                              ? `OWNER: ${
-                                  actor?.handle ||
-                                  record.did.slice(0, 16) + "..."
-                                }`
-                              : `HANDLE: @${actor?.handle || "unknown"}`}
+                              ? repo?.description || "NO_DESCRIPTION_AVAILABLE"
+                              : profile?.description || "NO_BIO_AVAILABLE"}
                           </div>
-                        )}
-
-                        <div class="text-cyan-300/80 text-xs sm:text-sm font-mono leading-relaxed line-clamp-3">
-                          {isRepo
-                            ? repo?.description || "NO_DESCRIPTION_AVAILABLE"
-                            : profile?.description || "NO_BIO_AVAILABLE"}
                         </div>
                       </div>
                     </div>
-                  </div>
-                </ResultContainer>
-              );
-            })}
+                  </ResultContainer>
+                );
+              })}
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </>
   );
 };
 
···
   const url = new URL(req.url);
 
   if (url.pathname === "/" && req.method === "GET") {
-    const html = renderToString(<SearchPage />);
+    // Parse cookies to get recent URIs
+    const cookieHeader = req.headers.get("cookie") || "";
+    const cookies = Object.fromEntries(
+      cookieHeader.split("; ").map((c) => {
+        const [key, ...value] = c.split("=");
+        return [key, value.join("=")];
+      })
+    );
+
+    let recentUris: string[] = [];
+    if (cookies.recent_uris) {
+      try {
+        recentUris = JSON.parse(decodeURIComponent(cookies.recent_uris));
+      } catch {
+        // Invalid cookie data, ignore
+      }
+    }
+
+    // Fetch the recent records and their actors
+    let recentRecords: IndexedRecord[] = [];
+    const actors = new Map<string, Actor>();
+
+    if (recentUris.length > 0) {
+      try {
+        const response = await client.getSliceRecords({
+          where: { uri: { in: recentUris } },
+          limit: 5,
+        });
+        recentRecords = response.records;
+
+        // Sort by the order in recentUris to maintain recent order
+        recentRecords.sort(
+          (a, b) => recentUris.indexOf(a.uri) - recentUris.indexOf(b.uri)
+        );
+
+        // Fetch actors for handles
+        const ownerDids = [
+          ...new Set(recentRecords.map((record) => record.did)),
+        ];
+        if (ownerDids.length > 0) {
+          const actorResults = await client.getActors({
+            where: { did: { in: ownerDids } },
+            limit: 5,
+          });
+          for (const actor of actorResults.actors) {
+            actors.set(actor.did, actor);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching recent records:", error);
+      }
+    }
+
+    const html = renderToString(
+      <SearchPage recentRecords={recentRecords} actors={actors} />
+    );
     return new Response(html, {
       headers: { "content-type": "text/html; charset=utf-8" },
     });
+  }
+
+  if (url.pathname === "/remove-recent" && req.method === "POST") {
+    try {
+      const { uri } = await req.json();
+
+      // Get existing recent URIs
+      const cookieHeader = req.headers.get("cookie") || "";
+      const cookies = Object.fromEntries(
+        cookieHeader.split("; ").map((c) => {
+          const [key, ...value] = c.split("=");
+          return [key, value.join("=")];
+        })
+      );
+
+      let recentUris: string[] = [];
+      if (cookies.recent_uris) {
+        try {
+          recentUris = JSON.parse(decodeURIComponent(cookies.recent_uris));
+        } catch {
+          // Invalid cookie data, ignore
+        }
+      }
+
+      // Remove the specified URI
+      recentUris = recentUris.filter((u) => u !== uri);
+
+      // Set cookie for 30 days
+      const expires = new Date();
+      expires.setDate(expires.getDate() + 30);
+      const cookieValue = encodeURIComponent(JSON.stringify(recentUris));
+
+      return new Response("", {
+        status: 200,
+        headers: {
+          "Set-Cookie": `recent_uris=${cookieValue}; Expires=${expires.toUTCString()}; Path=/; SameSite=Lax`,
+        },
+      });
+    } catch (error) {
+      console.error("Error removing recent:", error);
+      return new Response("", { status: 200 });
+    }
+  }
+
+  if (url.pathname === "/track-click" && req.method === "POST") {
+    try {
+      const { uri } = await req.json();
+
+      // Get existing recent URIs
+      const cookieHeader = req.headers.get("cookie") || "";
+      const cookies = Object.fromEntries(
+        cookieHeader.split("; ").map((c) => {
+          const [key, ...value] = c.split("=");
+          return [key, value.join("=")];
+        })
+      );
+
+      let recentUris: string[] = [];
+      if (cookies.recent_uris) {
+        try {
+          recentUris = JSON.parse(decodeURIComponent(cookies.recent_uris));
+        } catch {
+          // Invalid cookie data, ignore
+        }
+      }
+
+      // Remove if exists (to move to front)
+      recentUris = recentUris.filter((u) => u !== uri);
+      // Add to front
+      recentUris.unshift(uri);
+      // Keep only last 5
+      recentUris = recentUris.slice(0, 5);
+
+      // Set cookie for 30 days
+      const expires = new Date();
+      expires.setDate(expires.getDate() + 30);
+      const cookieValue = encodeURIComponent(JSON.stringify(recentUris));
+
+      return new Response("", {
+        status: 200,
+        headers: {
+          "Set-Cookie": `recent_uris=${cookieValue}; Expires=${expires.toUTCString()}; Path=/; SameSite=Lax`,
+        },
+      });
+    } catch (error) {
+      console.error("Error tracking click:", error);
+      return new Response("", { status: 200 });
+    }
   }
 
   if (url.pathname === "/search" && req.method === "POST") {