fix

pds/src/components/HandleBrowser.jsx

@@ -1,12 +1,32 @@
 import React, { useState } from 'react'
 import { listAllCollections } from '../lib/atproto.js'
 
-const SERVICE_ICONS = {
+const getServiceIcon = (service) => {
-  'app.bsky': 'https://bsky.app/favicon.ico',
+  // Known domain mappings
-  'chat.bsky': 'https://bsky.app/favicon.ico',
+  const domainMap = {
-  'ai.syui': 'https://syui.ai/favicon.ico',
+    'app.bsky': 'bsky.app',
-  'tools.ozone': 'https://ozone.tools/favicon.ico',
+    'chat.bsky': 'bsky.app',
-  'com.atproto': 'https://atproto.com/favicon.ico'
+    'ai.syui': 'syui.ai',
+    'tools.ozone': 'ozone.tools',
+    'com.atproto': 'atproto.com'
+  }
+
+  // If in map, use it
+  if (domainMap[service]) {
+    return `https://www.google.com/s2/favicons?domain=${domainMap[service]}&sz=32`
+  }
+
+  // Otherwise, try to infer domain from service name
+  // Format: prefix.domain → domain.tld (e.g., app.bsky → bsky.app)
+  const parts = service.split('.')
+  if (parts.length >= 2) {
+    // Take last 2 parts and reverse
+    const domain = parts.slice(-2).reverse().join('.')
+    return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
+  }
+
+  // Fallback: use service as-is
+  return `https://www.google.com/s2/favicons?domain=${service}&sz=32`
 }
 
 const groupCollectionsByService = (collections) => {
@@ -212,9 +232,7 @@ export function HandleBrowser() {
                     onClick={() => handleServiceClick(service)}
                     className="service-item"
                   >
-                    {SERVICE_ICONS[service] && (
+                    <img src={getServiceIcon(service)} alt={service} className="service-icon" />
-                      <img src={SERVICE_ICONS[service]} alt={service} className="service-icon" />
-                    )}
                     <span className="service-name">{service}</span>
                     <span className="service-count">{services[service].length} collections · {totalRecords} records</span>
                   </button>