fix: set fronters for depth 0 thread view items on router url change

src/entrypoints/background.ts

···
   putFronter,
   frontersCache,
   parseSocialAppPostUrl,
+  displayNameCache,
 } from "@/lib/utils";
 import {
   parseCanonicalResourceUri,
···
                 ...fronter,
               };
             if (item.depth === 0) await setTabFronter(item.uri, fronter);
+            const displayName = item.value.post.author.displayName;
+            // cache display name for later use
+            if (fronter.handle)
+              await displayNameCache.set(fronter.handle, displayName);
+            await displayNameCache.set(fronter.did, displayName);
             return {
               rkey: parsedUri.rkey!,
-              displayName: item.value.post.author.displayName,
+              displayName,
               depth: item.depth,
               ...fronter,
             };

src/entrypoints/content.ts

···
           body,
           authToken: getAuthToken(),
         };
+      } else if (response.url.includes("/xrpc/com.atproto.repo.deleteRecord")) {
       } else if (response.url.includes("/xrpc/com.atproto.repo.createRecord")) {
         detail = {
           type: "writeOne",
···
     respEventSetup.then((name) => (respEventName = name));
 
     const applyFronterName = (el: Element, fronters: Fronter["members"]) => {
-      if (el.getAttribute("data-fronter")) return;
+      if (el.hasAttribute("data-fronter")) return;
       const s = fronters.map((f) => f.name).join(", ");
       el.textContent += ` [f: ${s}]`;
       el.setAttribute("data-fronter", s);
···
     ) => {
       // console.log("applyFrontersToPage", fronters);
       const match = parseSocialAppPostUrl(document.URL);
-      console.log("applyFrontersToPage", match, fronters);
       if (pageChange) {
         console.log(
           "page change so clearing all elements with data-fronter attribute",
···
           el.removeAttribute("data-fronter");
         }
       }
+      console.log("applyFrontersToPage", match, fronters);
       if (fronters.size === 0) return;
       for (const el of document.getElementsByTagName("a")) {
         const path = `/${el.href.split("/").slice(3).join("/")}`;
         const fronter = fronters.get(path);
-        if (!fronter || fronter.members.length === 0) continue;
+        if (!fronter || fronter.members?.length === 0) continue;
+        if (el.hasAttribute("data-fronter")) continue;
         const isFocusedPost = fronter.depth === 0;
         if (isFocusedPost) if (match && match.rkey !== fronter.rkey) continue;
         if (isFocusedPost) if (el.ariaLabel !== fronter.displayName) continue;
···
     window.addEventListener("message", (event) => {
       if (event.data.type !== "APPLY_CACHED_FRONTERS") return;
       const applyFronters = () => {
-        const fronters = event.data.fronters as Map<string, Fronter | null>;
-        const updated = new Map(
-          fronters.entries().flatMap(([storageKey, fronter]) => {
-            if (!fronter) return [];
-            const uri = decodeStorageKey(storageKey);
-            const rkey = expect(parseResourceUri(uri)).rkey!;
-            return fronterGetSocialAppHrefs(fronter, rkey).map((href) => [
-              href,
-              fronter,
-            ]);
-          }),
-        );
-        console.log("applying cached fronters", updated);
-        applyFrontersToPage(updated, true);
+        console.log("applying cached fronters", event.data.fronters);
+        applyFrontersToPage(event.data.fronters, true);
       };
       // check if we are on profile so we can update fronters if the post tab is clicked on
       const postTabElement = document.querySelector(

src/entrypoints/isolated.content.ts

···
-import { Fronter, frontersCache, parseSocialAppPostUrl } from "@/lib/utils";
-import { ResourceUri } from "@atcute/lexicons";
+import { decodeStorageKey } from "@/lib/cache";
+import { expect } from "@/lib/result";
+import {
+  displayNameCache,
+  Fronter,
+  fronterGetSocialAppHrefs,
+  frontersCache,
+  parseSocialAppPostUrl,
+} from "@/lib/utils";
+import { parseResourceUri, ResourceUri } from "@atcute/lexicons";
 
 export default defineContentScript({
   matches: ["<all_urls>"],
···
       if (!messageTypes.includes(message.type)) return;
       window.postMessage(message);
     });
-    window.addEventListener("popstate", async (event) => {
+    const updateOnUrlChange = async () => {
+      const fronters = await frontersCache.getAll();
+      const updated = new Map<string, any>(
+        fronters.entries().flatMap(([storageKey, fronter]) => {
+          if (!fronter) return [];
+          const uri = decodeStorageKey(storageKey);
+          const rkey = expect(parseResourceUri(uri)).rkey!;
+          return fronterGetSocialAppHrefs(fronter, rkey).map((href) => [
+            href,
+            fronter,
+          ]);
+        }),
+      );
+      // add entry for current page
+      const match = parseSocialAppPostUrl(document.location.href);
+      if (match && !updated.has(`/profile/${match.actorIdentifier}`)) {
+        const maybeFronter = updated.get(
+          `/profile/${match.actorIdentifier}/post/${match.rkey}`,
+        );
+        if (maybeFronter)
+          updated.set(`/profile/${match.actorIdentifier}`, {
+            depth: 0,
+            displayName: await displayNameCache.get(match.actorIdentifier),
+            rkey: match.rkey,
+            ...maybeFronter,
+          });
+      }
       window.postMessage({
         type: "APPLY_CACHED_FRONTERS",
-        fronters: await frontersCache.getAll(),
+        fronters: updated,
       });
       // check for tab fronter for the current "post"
       await checkFronter(document.location.href);
-    });
+    };
+    window.addEventListener("popstate", updateOnUrlChange);
+    ctx.addEventListener(window, "wxt:locationchange", updateOnUrlChange);
 
     // setup response "channel"
     document.dispatchEvent(

src/lib/utils.ts

···
   const [website, actorIdentifier, rkey] = match;
   return { actorIdentifier, rkey };
 };
+
+export const displayNameCache = new PersistentCache<string>(
+  "displayNameCache",
+  1,
+);