refactor: improve how the fronter links look in query output

src/entrypoints/popup/App.svelte

···
     import FronterList from "@/components/FronterList.svelte";
 
     let recordAtUri = $state("");
-    let queryResult = $state("");
+    let queryResult = $state<{
+        handle: string;
+        fronters: { name: string; uri?: string }[];
+    } | null>(null);
+    let queryError = $state("");
     let isQuerying = $state(false);
     let fronters = $state<string[]>([]);
     let pkFronters = $state<string[]>([]);
···
     let isFromCurrentTab = $state(false);
 
     const makeOutput = (record: any) => {
-        const fronters = record.members
-            .map((f: any) => {
-                if (!f.uri) return f.name;
-                const publicUri = getMemberPublicUri(f.uri);
-                if (!publicUri) return f.name;
-                return `<a href="${publicUri}">${f.name}</a>`;
-            })
-            .join(", ");
-        return [
-            `HANDLE: ${record.handle ?? `handle.invalid (${record.did})`}`,
-            `FRONTER(S): ${fronters}`,
-        ].join("<br>");
+        const fronters = record.members.map((f: any) => ({
+            name: f.name,
+            uri: f.uri ? getMemberPublicUri(f.uri) : undefined,
+        }));
+        return {
+            handle: record.handle ?? `handle.invalid (${record.did})`,
+            fronters,
+        };
     };
 
     const queryRecord = async (recordUri: ResourceUri) => {
         if (!recordAtUri.trim()) return;
 
         isQuerying = true;
-        queryResult = "";
+        queryResult = null;
 
         try {
             if (!isResourceUri(recordUri)) throw "INVALID_RESOURCE_URI";
             const result = expect(await getFronter(recordUri));
-            queryResult = makeOutput(result) || "NO_FRONTER_FOUND";
+            queryResult = makeOutput(result);
         } catch (error) {
-            queryResult = `ERROR: ${error}`;
+            queryResult = null;
+            queryError = `ERROR: ${error}`;
         } finally {
             isQuerying = false;
         }
···
     };
 
     const clearResult = () => {
-        queryResult = "";
+        queryResult = null;
+        queryError = "";
         recordAtUri = "";
         isFromCurrentTab = false;
     };
···
                             {/if}
                         </div>
                         <div class="clear-button-container">
-                            {#if queryResult && !isQuerying}
+                            {#if (queryResult || queryError) && !isQuerying}
                                 <button
                                     class="clear-button"
                                     onclick={clearResult}
···
                                     >
                                     <div class="loading-bar"></div>
                                 </div>
+                            {:else if queryError}
+                                <div class="result-text error">
+                                    {queryError}
+                                </div>
                             {:else if queryResult}
-                                <div
-                                    class="result-text"
-                                    class:error={queryResult.startsWith(
-                                        "ERROR:",
-                                    )}
-                                >
-                                    {@html queryResult}
+                                <div class="result-text">
+                                    <div>HANDLE: {queryResult.handle}</div>
+                                    <div>
+                                        FRONTER(S):
+                                        {#each queryResult.fronters as fronter, i}
+                                            {#if fronter.uri}
+                                                <a
+                                                    href={fronter.uri}
+                                                    class="fronter-link"
+                                                    >{fronter.name}</a
+                                                >
+                                            {:else}
+                                                {fronter.name}
+                                            {/if}
+                                            {#if i < queryResult.fronters.length - 1},
+                                            {/if}
+                                        {/each}
+                                    </div>
                                 </div>
                             {:else}
                                 <div class="placeholder-text">
···
 
     .result-text.error {
         color: #ff4444;
+    }
+
+    .fronter-link {
+        color: #00ff41;
+        text-decoration: none;
+        font-weight: 700;
+        transition: all 0.2s ease;
+        position: relative;
+        border-bottom: 1px solid transparent;
+    }
+
+    .fronter-link:hover {
+        color: #33ff66;
+        border-bottom-color: #00ff41;
+    }
+
+    .fronter-link:active {
+        color: #ffffff;
     }
 
     .placeholder-text {