minimum prototype of simplified handle page

src/components/repoIcons.tsx

···
   return matchingKey ? iconMappings[matchingKey] : null;
 }
 
+function reverseDomain(collection: string) {
+  // Split by dot, reverse, join with dot
+  return collection.split(".").reverse().join(".");
+}
+
 function RepoIcons({
   collections,
   did,
···
 }) {
   let uniqueTypes = Array.from(
     collections
-      .map((collection) => ({
-        id: collection,
-        Icon: getIconForCollection(collection)?.icon ?? <ShieldQuestionIcon />,
-        displayName: getIconForCollection(collection)?.label ?? "Unknown",
-        linkTemplate: getIconForCollection(collection)?.linkTemplate,
-      }))
+      .map((collection) => {
+        const iconObj = getIconForCollection(collection);
+        return {
+          id: collection,
+          Icon: iconObj?.icon ?? <ShieldQuestionIcon />,
+          displayName: iconObj?.label ?? "Unknown",
+          // If linkTemplate exists, use it; else generate URL from reversed domain
+          linkTemplate:
+            iconObj?.linkTemplate ??
+            `https://${reverseDomain(collection)}/{did}`,
+        };
+      })
       .reduce((acc, current) => {
         if (
           !Array.from(acc.values()).some(
···
     <a
       href={linkTemplate?.replace("{handle}", handle).replace("{did}", did)}
       key={id}
+      target="_blank"
+      rel="noopener noreferrer"
     >
       <div className="w-8 h-8 p-1 mr-2 rounded-full dark:bg-neutral-800 border border-neutral-500/50 text-white">
         {typeof Icon === "string" ? (

src/routes/at:/$handle.index.tsx

···
           <div className="pt-2">
             <h2 className="text-xl font-bold mb-1">Collections</h2>
             <ul className="list-inside space-y-1">
-              {data.collections.map((c, i) => (
-                <Fragment key={c}>
-                  {c.split(".").slice(0, 2).join(".") !=
-                    (i > 0 &&
-                      data.collections[i - 1]
-                        .split(".")
-                        .slice(0, 2)
-                        .join(".")) && (
-                    <div className="w-min pt-2">
-                      {c.split(".").slice(0, 2).join(".")}{" "}
-                    </div>
-                  )}
-                  <li>
+              {Array.from(
+                data.collections
+                  .reduce((map, c) => {
+                    const prefix = c.split(".").slice(0, 2).join(".");
+                    if (!map.has(prefix)) {
+                      map.set(prefix, prefix);
+                    }
+                    return map;
+                  }, new Map<string, string>())
+                  .values(),
+              ).map((prefix) => {
+                const domain = prefix.split(".").reverse().join(".");
+                const faviconUrl = `https://www.google.com/s2/favicons?sz=64&domain=${domain}`;
+                return (
+                  <li key={prefix} className="flex items-center gap-2">
+                    <img
+                      src={faviconUrl}
+                      alt={`${domain} favicon`}
+                      className="w-4 h-4 rounded-sm flex-shrink-0"
+                      onError={(e) => {
+                        // Hide image if favicon not found
+                        (e.target as HTMLImageElement).style.display = "none";
+                      }}
+                    />
                     <Link
-                      className="ml-4 text-blue-600 dark:text-blue-400 hover:no-underline border-b hover:border-border border-transparent w-min"
+                      className="text-blue-600 dark:text-blue-400 hover:no-underline border-b hover:border-border border-transparent flex-1 break-all"
                       to="/at:/$handle/$collection"
                       params={{
-                        handle: handle, // Use original handle for navigation consistency
-                        collection: c,
+                        handle: handle,
+                        collection: prefix,
                       }}
+                      title={`https://${domain}`}
                     >
-                      {c}
+                      {`https://${domain}`}
                     </Link>
                   </li>
-                </Fragment>
-              ))}
+                );
+              })}
             </ul>
           </div>
         )}
···
           </Accordion>
         )}
         {/* Backlinks Section */}
-        {data?.did && (
+        {/* {data?.did && (
           <div className="pt-4 pb-8 flex flex-col gap-2">
             <AllBacklinksViewer aturi={data.did} />
           </div>
-        )}
+        )} */}
       </div>
     </div>
   );