Emphasize atproto handle (@ + larger font) (v0.4.4) (#109)

* Emphasize the atproto handle in the credentials list (@ + larger font)

Show the handle as "@handle" in a larger, bold font so it stands out, with
the DID de-emphasized in parentheses. Applied to both the server (ssr.ts)
and client (profile.html) renderers; integration assertions updated.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Release v0.4.4

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: sergeychernyshev

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@startup-api/cloudflare",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"

package.json

@@ -451,7 +451,8 @@ <h3>Link another account</h3>
       }
       function credentialIdentifier(c) {
         if (c.provider === 'atproto') {
-          return c.handle ? `${c.handle} (${c.subject_id})` : c.subject_id;
+          if (!c.handle) return c.subject_id;
+          return `<span style="font-size: 1.05rem; font-weight: 600;">@${c.handle}</span> <span style="opacity: 0.6;">(${c.subject_id})</span>`;
         }
         return c.email || c.subject_id;
       }

public/users/profile.html

@@ -214,10 +214,14 @@ function providerLabel(provider: string): string {
   return provider.charAt(0).toUpperCase() + provider.slice(1);
 }
 
-/** The identifier shown under the provider name. atproto shows the handle with the DID in parens. */
+/**
+ * The identifier shown under the provider name. atproto emphasizes the handle (larger, with an `@`)
+ * and de-emphasizes the DID in parentheses.
+ */
 function credentialIdentifier(c: any): string {
   if (c.provider === 'atproto') {
-    return c.handle ? `${c.handle} (${c.subject_id})` : c.subject_id;
+    if (!c.handle) return c.subject_id;
+    return `<span style="font-size: 1.05rem; font-weight: 600;">@${c.handle}</span> <span style="opacity: 0.6;">(${c.subject_id})</span>`;
   }
   return c.email || c.subject_id;
 }

src/handlers/ssr.ts

@@ -344,9 +344,10 @@ describe('Integration Tests', () => {
     expect(html).toContain('twitch@example.com');
     expect(html).toContain('providers="google,twitch,patreon"');
     expect(html).not.toContain('{{ssr:profile_name}}');
-    // atproto credential: branded label + "handle (did)" identifier, not the bare provider key.
+    // atproto credential: branded label + "@handle (did)" identifier, not the bare provider key.
     expect(html).toContain('Atmosphere / ATproto');
-    expect(html).toContain('tester.bsky.social (did:plc:abc123)');
+    expect(html).toContain('@tester.bsky.social');
+    expect(html).toContain('(did:plc:abc123)');
     // The old Bluesky butterfly mark must not appear anywhere on the rendered page (SSR or client script).
     expect(html).not.toContain('M12 10.5C10.9');
   });