From f60369d2c8774d85f73f49dd51a82e8046d9146c Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Thu, 22 Jan 2026 22:23:14 +0900
Subject: [PATCH] fix at.link profile

---
 src/web/components/link.ts | 37 +++++++++++++++++++---
 src/web/main.ts            |  7 ++--
 src/web/styles/main.css    | 65 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 102 insertions(+), 7 deletions(-)

diff --git a/src/web/components/link.ts b/src/web/components/link.ts
index ad2f61a..2434ac1 100644
--- a/src/web/components/link.ts
+++ b/src/web/components/link.ts
@@ -29,6 +29,37 @@ function buildUrl(service: string, username: string): string {
   return config.urlTemplate.replace('{username}', username)
 }
 
+// Render compact link buttons for profile area
+export function renderLinkButtons(data: LinkCollection | null): string {
+  if (!data || !data.links || data.links.length === 0) {
+    return ''
+  }
+
+  const domainMap: Record<string, string> = {
+    github: 'github.com',
+    x: 'x.com',
+    youtube: 'youtube.com',
+  }
+
+  const buttons = data.links.map(link => {
+    const { service, username } = link
+    const config = serviceConfig[service as keyof typeof serviceConfig]
+    if (!config) return ''
+
+    const url = buildUrl(service, username)
+    const domain = domainMap[service] || service
+
+    return `
+      <a href="${url}" class="link-btn link-btn-${service}" title="${domain}" target="_blank" rel="noopener noreferrer">
+        <span class="link-btn-icon">${config.icon}</span>
+        <span class="link-btn-name">${domain}/${username}</span>
+      </a>
+    `
+  }).join('')
+
+  return `<div class="link-buttons">${buttons}</div>`
+}
+
 // Render link item for display
 function renderLinkItem(link: LinkItem): string {
   const { service, username } = link
@@ -99,8 +130,7 @@ export function renderLinkPage(data: LinkCollection | null, handle: string, isOw
     return `
       <div class="link-container">
         <div class="link-header">
-          <h2>Links</h2>
-          <div class="link-header-actions">
+                    <div class="link-header-actions">
             <a href="${jsonUrl}" class="json-btn">json</a>
             ${editBtn}
           </div>
@@ -116,8 +146,7 @@ export function renderLinkPage(data: LinkCollection | null, handle: string, isOw
   return `
     <div class="link-container">
       <div class="link-header">
-        <h2>Links</h2>
-        <div class="link-header-actions">
+                <div class="link-header-actions">
           <a href="${jsonUrl}" class="json-btn">json</a>
           ${editBtn}
         </div>
diff --git a/src/web/main.ts b/src/web/main.ts
index 2d299ef..0bfb58a 100644
--- a/src/web/main.ts
+++ b/src/web/main.ts
@@ -15,7 +15,7 @@ import { renderFooter } from './components/footer'
 import { renderChatListPage, renderChatThreadPage, renderChatEditForm } from './components/chat'
 import { renderCardPage } from './components/card'
 import { renderRsePage } from './components/rse'
-import { renderLinkPage } from './components/link'
+import { renderLinkPage, renderLinkButtons } from './components/link'
 import { checkMigrationStatus, renderMigrationPage, setupMigrationButton } from './components/card-migrate'
 import { showLoading, hideLoading } from './components/loading'
 
@@ -357,8 +357,9 @@ async function render(route: Route): Promise<void> {
       }
 
     } else {
-      // User page: compact collection buttons + posts (use pre-loaded collections)
-      html += `<div id="browser">${renderCollectionButtons(collections, handle)}</div>`
+      // User page: compact collection buttons + link buttons + posts
+      const links = await getLinks(did)
+      html += `<div id="browser" class="browser-row">${renderCollectionButtons(collections, handle)}${renderLinkButtons(links)}</div>`
 
       // Language selector above content
       html += renderLangSelector(langList)
diff --git a/src/web/styles/main.css b/src/web/styles/main.css
index c7efa9e..5bf1dd1 100644
--- a/src/web/styles/main.css
+++ b/src/web/styles/main.css
@@ -2007,6 +2007,71 @@ body {
   height: 16px;
 }
 
+/* Browser row layout */
+.browser-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.browser-row .collection-buttons {
+  margin-bottom: 0;
+}
+
+/* Link buttons (compact, next to collection buttons) */
+.link-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.link-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border-radius: 6px;
+  text-decoration: none;
+  color: #fff;
+  font-size: 12px;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.link-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.link-btn-icon {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.link-btn-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.link-btn-name {
+  font-weight: 500;
+}
+
+/* Link button colors */
+.link-btn-github {
+  background: #24292e;
+}
+
+.link-btn-x {
+  background: #000000;
+}
+
+.link-btn-youtube {
+  background: #ff0000;
+}
+
 .no-collections,
 .no-records {
   padding: 20px;