add service top

src/components/services.ts

@@ -0,0 +1,42 @@
+import { describeRepo, getServiceInfo, resolveHandle } from '../lib/api.js'
+
+export async function renderServices(handle: string): Promise<string> {
+  const did = handle.startsWith('did:') ? handle : await resolveHandle(handle)
+  const collections = await describeRepo(did)
+
+  if (collections.length === 0) {
+    return ''
+  }
+
+  // Group by service
+  const serviceMap = new Map<string, { name: string; favicon: string; collections: string[] }>()
+
+  for (const col of collections) {
+    const info = getServiceInfo(col)
+    if (info) {
+      const key = info.domain
+      if (!serviceMap.has(key)) {
+        serviceMap.set(key, { name: info.name, favicon: info.favicon, collections: [] })
+      }
+      serviceMap.get(key)!.collections.push(col)
+    }
+  }
+
+  const items = Array.from(serviceMap.entries()).map(([domain, info]) => {
+    const url = `?mode=browser&handle=${handle}&service=${encodeURIComponent(domain)}`
+
+    return `
+      <a href="${url}" class="service-item" title="${info.collections.join(', ')}">
+        <img src="${info.favicon}" class="service-favicon" alt="" onerror="this.style.display='none'">
+        <span class="service-name">${info.name}</span>
+      </a>
+    `
+  }).join('')
+
+  return `<div class="services">${items}</div>`
+}
+
+export async function mountServices(container: HTMLElement, handle: string): Promise<void> {
+  const html = await renderServices(handle)
+  container.innerHTML = html
+}