From c2ccd865270de7c77eb6eb22a2be10920af1ec86 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Wed, 18 Mar 2026 20:54:55 +0100
Subject: [PATCH 01/10] fix(blog): UI improvements and Instagram-style comment
 redesign (#2136, #2137)

Redesign nested comments to use a flat, single-indent layout with
collapsible reply threads. Fix blog content alignment, button hover
states, Bluesky embed icon positioning, prose link hover effects,
and federated articles shadow/alignment.
---
 app/components/BlueskyComment.vue             | 43 +++--------
 app/components/BlueskyCommentThread.vue       | 72 +++++++++++++++++++
 app/components/BlueskyComments.vue            |  7 +-
 app/components/Link/Base.vue                  |  2 +-
 .../global/BlogPostFederatedArticles.vue      |  4 +-
 app/components/global/BlogPostWrapper.vue     | 17 ++++-
 .../global/BlueskyPostEmbed.client.vue        | 14 ++--
 7 files changed, 110 insertions(+), 49 deletions(-)
 create mode 100644 app/components/BlueskyCommentThread.vue

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index 12fe336a1f..d54aa7d62d 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -13,11 +13,10 @@ function getCommentUrl(comment: Comment): string {
 }
 const props = defineProps<{
   comment: Comment
-  depth: number
+  isReply?: boolean
+  replyingTo?: string
 }>()
 
-const MaxDepth = 4
-
 function getFeatureUrl(feature: RichtextFeature): string | undefined {
   if (feature.$type === 'app.bsky.richtext.facet#link') return feature.uri
   if (feature.$type === 'app.bsky.richtext.facet#mention')
@@ -41,7 +40,7 @@ function getHostname(uri: string): string {
 </script>
 
 <template>
-  <div :class="depth === 0 ? 'flex gap-3' : 'flex gap-3 mt-3'">
+  <div class="flex gap-3">
     <!-- Avatar -->
     <a
       :href="`https://bsky.app/profile/${comment.author.handle}`"
@@ -53,7 +52,7 @@ function getHostname(uri: string): string {
         v-if="comment.author.avatar"
         :src="comment.author.avatar"
         :alt="comment.author.displayName || comment.author.handle"
-        :class="['rounded-full', depth === 0 ? 'w-10 h-10' : 'w-8 h-8']"
+        :class="['rounded-full', isReply ? 'w-8 h-8' : 'w-10 h-10']"
         width="40"
         height="40"
         loading="lazy"
@@ -62,7 +61,7 @@ function getHostname(uri: string): string {
         v-else
         :class="[
           'rounded-full bg-border flex items-center justify-center text-fg-muted',
-          depth === 0 ? 'w-10 h-10' : 'w-8 h-8 text-sm',
+          isReply ? 'w-8 h-8 text-sm' : 'w-10 h-10',
         ]"
       >
         {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
@@ -70,6 +69,11 @@ function getHostname(uri: string): string {
     </a>
 
     <div class="flex-1 min-w-0">
+      <!-- Replying to label -->
+      <div v-if="replyingTo" class="text-xs text-fg-subtle mb-0.5">
+        {{ $t('blog.atproto.replying_to', { name: replyingTo }) }}
+      </div>
+
       <!-- Author info + timestamp -->
       <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0">
         <a
@@ -171,33 +175,6 @@ function getHostname(uri: string): string {
           {{ $t('blog.atproto.repost_count', { count: comment.repostCount }, comment.repostCount) }}
         </span>
       </div>
-
-      <!-- Nested replies -->
-      <template v-if="comment.replies.length > 0">
-        <div v-if="depth < MaxDepth" class="mt-2 ps-2 border-is-2 border-border flex flex-col">
-          <BlueskyComment
-            v-for="reply in comment.replies"
-            :key="reply.uri"
-            :comment="reply"
-            :depth="depth + 1"
-          />
-        </div>
-        <a
-          v-else
-          :href="getCommentUrl(comment.replies[0]!)"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="mt-2 block text-sm link"
-        >
-          {{
-            $t(
-              'blog.atproto.more_replies',
-              { count: comment.replies.length },
-              comment.replies.length,
-            )
-          }}
-        </a>
-      </template>
     </div>
   </div>
 </template>
diff --git a/app/components/BlueskyCommentThread.vue b/app/components/BlueskyCommentThread.vue
new file mode 100644
index 0000000000..6a9fc6d0b4
--- /dev/null
+++ b/app/components/BlueskyCommentThread.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { Comment } from '#shared/types/blog-post'
+
+const props = defineProps<{
+  comment: Comment
+}>()
+
+interface FlatReply {
+  comment: Comment
+  replyingTo?: string
+}
+
+function flattenReplies(comment: Comment): FlatReply[] {
+  const result: FlatReply[] = []
+  function walk(replies: Comment[], parentName: string, isDirectReply: boolean) {
+    for (const reply of replies) {
+      result.push({
+        comment: reply,
+        replyingTo: isDirectReply ? undefined : parentName,
+      })
+      if (reply.replies.length > 0) {
+        walk(reply.replies, reply.author.displayName || reply.author.handle, false)
+      }
+    }
+  }
+  walk(comment.replies, comment.author.displayName || comment.author.handle, true)
+  return result
+}
+
+const flatReplies = computed(() => flattenReplies(props.comment))
+const totalReplyCount = computed(() => flatReplies.value.length)
+const showReplies = ref(false)
+</script>
+
+<template>
+  <div>
+    <!-- Top-level comment -->
+    <BlueskyComment :comment="comment" />
+
+    <!-- Replies section -->
+    <div v-if="totalReplyCount > 0" class="ms-13 mt-2">
+      <!-- Toggle button -->
+      <button
+        v-if="!showReplies"
+        class="text-sm text-accent font-medium hover:underline cursor-pointer"
+        @click="showReplies = true"
+      >
+        {{ $t('blog.atproto.view_replies', { count: totalReplyCount }, totalReplyCount) }}
+      </button>
+
+      <!-- Expanded replies -->
+      <template v-else>
+        <button
+          class="text-sm text-accent font-medium hover:underline mb-3 cursor-pointer"
+          @click="showReplies = false"
+        >
+          {{ $t('blog.atproto.hide_replies') }}
+        </button>
+
+        <div class="flex flex-col gap-4">
+          <BlueskyComment
+            v-for="reply in flatReplies"
+            :key="reply.comment.uri"
+            :comment="reply.comment"
+            :replying-to="reply.replyingTo"
+            is-reply
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/app/components/BlueskyComments.vue b/app/components/BlueskyComments.vue
index 54655a46c1..d990d46c74 100644
--- a/app/components/BlueskyComments.vue
+++ b/app/components/BlueskyComments.vue
@@ -100,12 +100,7 @@ const postUrl = computed(() => data.value?.postUrl)
           </LinkBase>
         </div>
 
-        <BlueskyComment
-          v-for="reply in thread.replies"
-          :key="reply.uri"
-          :comment="reply"
-          :depth="0"
-        />
+        <BlueskyCommentThread v-for="reply in thread.replies" :key="reply.uri" :comment="reply" />
 
         <LinkBase v-if="postUrl" variant="button-primary" :to="postUrl">
           {{ $t('blog.atproto.like_or_reply_on_bluesky') }}
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index ba62e47ca8..d7361fdb7a 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -101,7 +101,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
       'text-xs px-2 py-0.5': isButtonSmall,
       'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+      'text-bg bg-fg hover:(bg-fg/80 text-bg) focus-visible:(bg-fg/80 text-bg) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'button-primary',
     }"
     :to="to"
diff --git a/app/components/global/BlogPostFederatedArticles.vue b/app/components/global/BlogPostFederatedArticles.vue
index 82d99c3f7d..248fcf3287 100644
--- a/app/components/global/BlogPostFederatedArticles.vue
+++ b/app/components/global/BlogPostFederatedArticles.vue
@@ -41,7 +41,7 @@ const federatedArticles = computed(() => {
 </script>
 
 <template>
-  <aside class="px-4 sm:-mx-6 sm:px-6 sm:-my-3 sm:py-3 sm:rounded-md">
+  <aside class="sm:-mx-6 sm:px-6 sm:-my-3 sm:py-3 sm:rounded-md">
     <h2 class="font-mono text-xl font-medium text-fg mt-0">
       {{ headline }}
     </h2>
@@ -55,7 +55,7 @@ const federatedArticles = computed(() => {
         rel="noopener noreferrer"
         v-for="article in federatedArticles"
         :key="article.url"
-        class="grid grid-cols-[auto_1fr] gap-x-5 no-underline hover:no-underline rounded-lg border border-border p-4 transition-shadow hover:shadow-lg hover:shadow-gray-500/50"
+        class="grid grid-cols-[auto_1fr] gap-x-5 no-underline hover:no-underline rounded-lg border border-border p-4 transition-all hover:shadow-md hover:shadow-black/5 dark:hover:shadow-white/5 hover:border-border-hover"
       >
         <AuthorAvatar v-if="article.author" :author="article.author" size="md" class="row-span-2" />
         <div class="flex flex-col">
diff --git a/app/components/global/BlogPostWrapper.vue b/app/components/global/BlogPostWrapper.vue
index 14508945b2..b2e27956d8 100644
--- a/app/components/global/BlogPostWrapper.vue
+++ b/app/components/global/BlogPostWrapper.vue
@@ -58,7 +58,7 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
         <AuthorList :authors="post.authors" variant="expanded" />
       </div>
     </div>
-    <article class="max-w-prose mx-auto p-2 prose dark:prose-invert">
+    <article class="max-w-prose mx-auto prose dark:prose-invert">
       <div class="text-sm text-fg-muted font-mono mb-4">
         <DateTime :datetime="frontmatter.date" year="numeric" month="short" day="numeric" />
       </div>
@@ -77,4 +77,19 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
 :deep(.markdown-body) {
   @apply prose dark:prose-invert;
 }
+
+:deep(.prose a:not(.not-prose a)) {
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--fg-subtle);
+  transition:
+    text-decoration-color 0.2s,
+    color 0.2s;
+}
+
+:deep(.prose a:not(.not-prose a):hover) {
+  text-decoration-color: var(--fg);
+  color: var(--fg);
+}
 </style>
diff --git a/app/components/global/BlueskyPostEmbed.client.vue b/app/components/global/BlueskyPostEmbed.client.vue
index c8513a7703..2ef0cc1f6c 100644
--- a/app/components/global/BlueskyPostEmbed.client.vue
+++ b/app/components/global/BlueskyPostEmbed.client.vue
@@ -107,10 +107,16 @@ const postUrl = computed(() => {
     :href="postUrl ?? '#'"
     target="_blank"
     rel="noopener noreferrer"
-    class="not-prose block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200"
+    class="not-prose block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200 relative"
   >
+    <!-- Bluesky icon -->
+    <span
+      class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle absolute top-4 end-4 sm:top-5 sm:end-5"
+      aria-hidden="true"
+    />
+
     <!-- Author row -->
-    <div class="flex items-center gap-3 mb-3">
+    <div class="flex items-center gap-3 mb-3 pe-7">
       <img
         v-if="post.author.avatar"
         :src="`${post.author.avatar}?size=48`"
@@ -126,10 +132,6 @@ const postUrl = computed(() => {
         </div>
         <div class="text-sm text-fg-subtle truncate">@{{ post.author.handle }}</div>
       </div>
-      <span
-        class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
-        aria-hidden="true"
-      />
     </div>
 
     <!-- Post text -->

From f649c3b833420276adde906dbba16fd4c0dfd28e Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Wed, 18 Mar 2026 21:05:12 +0100
Subject: [PATCH 02/10] fix(i18n): add comment thread i18n keys for view/hide
 replies

---
 i18n/locales/en.json | 5 ++++-
 i18n/schema.json     | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index bf6c3e39c8..744f74e3b8 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -109,7 +109,10 @@
       "reply_count": "{count} reply | {count} replies",
       "like_count": "{count} like | {count} likes",
       "repost_count": "{count} repost | {count} reposts",
-      "more_replies": "{count} more reply... | {count} more replies..."
+      "more_replies": "{count} more reply... | {count} more replies...",
+      "replying_to": "Replying to {name}",
+      "view_replies": "View {count} reply | View {count} replies",
+      "hide_replies": "Hide replies"
     }
   },
   "settings": {
diff --git a/i18n/schema.json b/i18n/schema.json
index 04ca60bce3..92655d1b5e 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -333,6 +333,15 @@
             },
             "more_replies": {
               "type": "string"
+            },
+            "replying_to": {
+              "type": "string"
+            },
+            "view_replies": {
+              "type": "string"
+            },
+            "hide_replies": {
+              "type": "string"
             }
           },
           "additionalProperties": false

From e3afaaee3f2fbb62d1e7c813efdcae8ebf69b717 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Wed, 18 Mar 2026 21:12:59 +0100
Subject: [PATCH 03/10] fix: add a11y skip for BlueskyCommentThread and remove
 unused more_replies i18n key

---
 i18n/locales/az-AZ.json                   |  3 +-
 i18n/locales/cs-CZ.json                   |  3 +-
 i18n/locales/de-DE.json                   |  3 +-
 i18n/locales/en.json                      |  1 -
 i18n/locales/es.json                      |  3 +-
 i18n/locales/fr-FR.json                   |  3 +-
 i18n/locales/id-ID.json                   |  3 +-
 i18n/locales/ja-JP.json                   |  3 +-
 i18n/locales/pl-PL.json                   |  3 +-
 i18n/locales/pt-BR.json                   | 76 +++++++++++++++++++++++
 i18n/locales/ru-RU.json                   |  3 +-
 i18n/locales/tr-TR.json                   |  3 +-
 i18n/locales/uk-UA.json                   |  3 +-
 i18n/locales/zh-CN.json                   |  3 +-
 i18n/schema.json                          |  3 -
 test/unit/a11y-component-coverage.spec.ts |  2 +
 16 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index aae98eeef1..6b87283d76 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -106,8 +106,7 @@
       "updating": "Yenilənir...",
       "reply_count": "{count} cavab",
       "like_count": "{count} bəyənmə",
-      "repost_count": "{count} yenidən paylaşım",
-      "more_replies": "{count} cavab daha..."
+      "repost_count": "{count} yenidən paylaşım"
     }
   },
   "settings": {
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 83a47443ad..920eb4b9d6 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -106,8 +106,7 @@
       "updating": "Aktualizace ...",
       "reply_count": "{count} odpověď | {count} odpovědi | {count} odpovědí",
       "like_count": "{count} lajk | {count} lajky | {count} lajků",
-      "repost_count": "{count} repost | {count} reposty | {count} repostů",
-      "more_replies": "{count} další odpověď ... | {count} další odpovědi ... | {count} dalších odpovědí ..."
+      "repost_count": "{count} repost | {count} reposty | {count} repostů"
     }
   },
   "settings": {
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index dfe3e2588c..537b155822 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -106,8 +106,7 @@
       "updating": "(wird aktualisiert...)",
       "reply_count": "{count} Antwort | {count} Antworten",
       "like_count": "{count} Like | {count} Likes",
-      "repost_count": "{count} Repost | {count} Reposts",
-      "more_replies": "{count} weitere Antwort anzeigen | {count} weitere Antworten anzeigen"
+      "repost_count": "{count} Repost | {count} Reposts"
     }
   },
   "settings": {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7c4d1c7684..da1bd89981 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -109,7 +109,6 @@
       "reply_count": "{count} reply | {count} replies",
       "like_count": "{count} like | {count} likes",
       "repost_count": "{count} repost | {count} reposts",
-      "more_replies": "{count} more reply... | {count} more replies...",
       "replying_to": "Replying to {name}",
       "view_replies": "View {count} reply | View {count} replies",
       "hide_replies": "Hide replies"
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 72995686a9..cf76f0716b 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -108,8 +108,7 @@
       "updating": "Actualizando...",
       "reply_count": "{count} respuesta | {count} respuestas",
       "like_count": "{count} me gusta | {count} me gusta",
-      "repost_count": "{count} republicación | {count} republicaciones",
-      "more_replies": "{count} respuesta más... | {count} respuestas más..."
+      "repost_count": "{count} republicación | {count} republicaciones"
     }
   },
   "settings": {
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 120a69877f..d16ab3d200 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -106,8 +106,7 @@
       "updating": "Mise à jour...",
       "reply_count": "{count} réponse | {count} réponses",
       "like_count": "{count} j'aime | {count} j'aime",
-      "repost_count": "{count} repartage | {count} repartages",
-      "more_replies": "{count} réponse de plus... | {count} réponses de plus..."
+      "repost_count": "{count} repartage | {count} repartages"
     }
   },
   "settings": {
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index 0f13dd00e5..d89db85b9e 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -108,8 +108,7 @@
       "updating": "Memperbarui...",
       "reply_count": "{count} balasan | {count} balasan",
       "like_count": "{count} suka | {count} suka",
-      "repost_count": "{count} repost | {count} repost",
-      "more_replies": "{count} balasan lainnya... | {count} balasan lainnya..."
+      "repost_count": "{count} repost | {count} repost"
     }
   },
   "settings": {
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index a63e8f8343..cead26d230 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -106,8 +106,7 @@
       "updating": "更新中...",
       "reply_count": "{count} 件の返信",
       "like_count": "{count} 件のいいね",
-      "repost_count": "{count} 件のリポスト",
-      "more_replies": "さらに {count} 件のリプライを表示..."
+      "repost_count": "{count} 件のリポスト"
     }
   },
   "settings": {
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 8a63c9cb8d..1c4873c2f5 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -106,8 +106,7 @@
       "updating": "Aktualizowanie...",
       "reply_count": "{count} odpowiedzi | {count} odpowiedź | {count} odpowiedzi | {count} odpowiedzi | {count} odpowiedzi",
       "like_count": "{count} polubień | {count} polubienie | {count} polubienia | {count} polubień | {count} polubień",
-      "repost_count": "{count} udostępnień | {count} udostępnienie | {count} udostępnienia | {count} udostępnień | {count} udostępnień",
-      "more_replies": "{count} odpowiedzi więcej... | {count} odpowiedź więcej... | {count} odpowiedzi więcej... | {count} odpowiedzi więcej... | {count} odpowiedzi więcej..."
+      "repost_count": "{count} udostępnień | {count} udostępnienie | {count} udostępnienia | {count} udostępnień | {count} udostępnień"
     }
   },
   "settings": {
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index 58120f42df..235e4d66fe 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -1347,5 +1347,81 @@
     "selection": "0 selecionados | 1 selecionado | {count} selecionados",
     "shortcut": "Pressione \"{key}\" para focar nas ações",
     "button_close_aria_label": "Fechar barra de ações"
+  },
+  "blog": {
+    "title": "Blog",
+    "meta_description": "Insights e atualizações da comunidade npmx",
+    "heading": "blog",
+    "draft_banner": "Este é um rascunho não publicado. Pode estar incompleto ou conter imprecisões.",
+    "atproto": {
+      "comments": "Comentários",
+      "could_not_load_comments": "Não foi possível carregar comentários.",
+      "like_count": "{count} curtida | {count} curtidas",
+      "like_or_reply_on_bluesky": "Curta esta postagem ou adicione seu comentário no Bluesky",
+      "likes_on_bluesky": "Curtidas no Bluesky",
+      "loading_comments": "Carregando comentários...",
+      "no_comments_yet": "Nenhum comentário ainda.",
+      "reply_count": "{count} resposta | {count} respostas",
+      "reply_on_bluesky": "Responder no Bluesky",
+      "repost_count": "{count} repostagem | {count} repostagens",
+      "updating": "Atualizando...",
+      "view_on_bluesky": "Ver no Bluesky"
+    },
+    "author": {
+      "view_profile": "Veja o perfil de {name} no Bluesky"
+    },
+    "draft_badge": "Rascunho"
+  },
+  "error": {
+    "401": "Não autorizado",
+    "404": "Página não encontrada",
+    "500": "Erro do Servidor Interno",
+    "503": "Serviço não disponível",
+    "default": "Algo deu errado"
+  },
+  "profile": {
+    "description": "Descrição",
+    "display_name": "Nome visível",
+    "invite": {
+      "compose_text": "Olá, {'@'}{handle}! Você já conferiu npmx.dev? É um navegador para o registro npm rápido, moderno e de código aberto.\nhttps://npmx.dev",
+      "message": "Parece que eles ainda não estão usando o npmx. Quer contar a eles sobre isso?",
+      "share_button": "Compartilhar no Bluesky"
+    },
+    "likes": "Curtidas",
+    "no_description": "Sem descrição",
+    "not_found": "Perfil não encontrado",
+    "not_found_message": "O perfil de {handle} não foi encontrado.",
+    "seo_description": "Perfil npmx de {handle}",
+    "seo_title": "{handle} - npmx",
+    "website": "Site",
+    "website_placeholder": "https://example.com"
+  },
+  "pds": {
+    "community": {
+      "description": "Algumas das {count} contas que já estão chamando npmx.social sua casa:",
+      "empty": "Nenhum membro da comunidade para exibir.",
+      "error": "Falha ao carregar a comunidade PDS.",
+      "loading": "Carregando comunidade PDS...",
+      "new_accounts": "...e mais {count} que são novos na atmosfera",
+      "title": "Quem está aqui",
+      "view_profile": "Veja o perfil de {handle}"
+    },
+    "join": {
+      "description": "Esteja você criando sua primeira conta na atmosfera ou migrando uma já existente, você pertence aqui. Você pode migrar sua conta atual sem perder seu controle, suas postagens ou seus seguidores.",
+      "migrate": "Migrar com PDS MOOver",
+      "title": "Junte-se à comunidade"
+    },
+    "meta_description": "O AT Protocol Personal Data Server (PDS) oficial para a comunidade npmx.",
+    "server": {
+      "infrastructure_label": "Infraestrutura:",
+      "infrastructure_value": "Hospedado em Hetzner",
+      "learn_more": "Aprenda como o npmx usa a atmosfera",
+      "location_label": "Localização:",
+      "location_value": "Nuremberga, Alemanha",
+      "privacy_label": "Privacidade:",
+      "privacy_value": "Sujeito às rigorosas leis de proteção de dados da UE",
+      "title": "Detalhes do servidor"
+    },
+    "title": "npmx.social"
   }
 }
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 0e2a77bf85..200fc0b073 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -106,8 +106,7 @@
       "updating": "Обновление…",
       "reply_count": "{count} ответ | {count} ответа | {count} ответов",
       "like_count": "{count} лайк | {count} лайка | {count} лайков",
-      "repost_count": "{count} репост | {count} репоста | {count} репостов",
-      "more_replies": "Ещё {count} ответ… | Ещё {count} ответа… | Ещё {count} ответов…"
+      "repost_count": "{count} репост | {count} репоста | {count} репостов"
     }
   },
   "settings": {
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index ac6066ce08..33955a959f 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -106,8 +106,7 @@
       "updating": "Güncelleniyor...",
       "reply_count": "{count} yanıt",
       "like_count": "{count} beğeni",
-      "repost_count": "{count} yeniden paylaşım",
-      "more_replies": "{count} yanıt daha..."
+      "repost_count": "{count} yeniden paylaşım"
     }
   },
   "settings": {
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index fac79a98cd..559560af81 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -108,8 +108,7 @@
       "updating": "Оновлення...",
       "reply_count": "{count} відповідь | {count} відповіді | {count} відповідей",
       "like_count": "{count} вподобайка | {count} вподобайки | {count} вподобайок",
-      "repost_count": "{count} репост | {count} репости | {count} репостів",
-      "more_replies": "ще {count} відповідь... | ще {count} відповіді... | ще {count} відповідей..."
+      "repost_count": "{count} репост | {count} репости | {count} репостів"
     }
   },
   "settings": {
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index e6cc3aa6f6..d698c451a8 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -106,8 +106,7 @@
       "updating": "更新中...",
       "reply_count": "{count} 条回复 | {count} 条回复",
       "like_count": "{count} 个赞 | {count} 个赞",
-      "repost_count": "{count} 次转发 | {count} 次转发",
-      "more_replies": "还有 {count} 条回复... | 还有 {count} 条回复..."
+      "repost_count": "{count} 次转发 | {count} 次转发"
     }
   },
   "settings": {
diff --git a/i18n/schema.json b/i18n/schema.json
index cfa76b6967..25fff2bdfa 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -331,9 +331,6 @@
             "repost_count": {
               "type": "string"
             },
-            "more_replies": {
-              "type": "string"
-            },
             "replying_to": {
               "type": "string"
             },
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index f6f6ea845a..96133c1224 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -47,6 +47,8 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'SkeletonBlock.vue': 'Already covered indirectly via other component tests',
   'SkeletonInline.vue': 'Already covered indirectly via other component tests',
   'Button/Group.vue': "Wrapper component, tests wouldn't make much sense here",
+  'BlueskyCommentThread.vue':
+    'Wrapper component - manages collapsible reply thread, tested via BlueskyComment',
 }
 
 /**

From 81df1b58f7041e5a75c85bc2dd4051e7d5fa0c96 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Wed, 18 Mar 2026 21:38:42 +0100
Subject: [PATCH 04/10] fix(blog): Medium-style nested comments with responsive
 layout

Nested comments use inline avatar on mobile (Medium-style) for full
content width, and classic avatar-column on desktop. Each nesting
level costs ~12px on mobile instead of ~44px, eliminating horizontal
scroll. Removes BlueskyCommentThread in favor of recursive depth.
---
 app/components/BlueskyComment.vue         | 80 ++++++++++++++++++-----
 app/components/BlueskyCommentThread.vue   | 72 --------------------
 app/components/BlueskyComments.vue        |  7 +-
 i18n/locales/az-AZ.json                   |  3 +-
 i18n/locales/cs-CZ.json                   |  3 +-
 i18n/locales/de-DE.json                   |  3 +-
 i18n/locales/en.json                      |  4 +-
 i18n/locales/es.json                      |  3 +-
 i18n/locales/fr-FR.json                   |  3 +-
 i18n/locales/id-ID.json                   |  3 +-
 i18n/locales/ja-JP.json                   |  3 +-
 i18n/locales/pl-PL.json                   |  3 +-
 i18n/locales/ru-RU.json                   |  3 +-
 i18n/locales/tr-TR.json                   |  3 +-
 i18n/locales/uk-UA.json                   |  3 +-
 i18n/locales/zh-CN.json                   |  3 +-
 i18n/schema.json                          |  8 +--
 test/unit/a11y-component-coverage.spec.ts |  2 -
 18 files changed, 97 insertions(+), 112 deletions(-)
 delete mode 100644 app/components/BlueskyCommentThread.vue

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index d54aa7d62d..b8ad0b133e 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -13,10 +13,11 @@ function getCommentUrl(comment: Comment): string {
 }
 const props = defineProps<{
   comment: Comment
-  isReply?: boolean
-  replyingTo?: string
+  depth: number
 }>()
 
+const MaxDepth = 4
+
 function getFeatureUrl(feature: RichtextFeature): string | undefined {
   if (feature.$type === 'app.bsky.richtext.facet#link') return feature.uri
   if (feature.$type === 'app.bsky.richtext.facet#mention')
@@ -40,19 +41,23 @@ function getHostname(uri: string): string {
 </script>
 
 <template>
-  <div class="flex gap-3">
-    <!-- Avatar -->
+  <!--
+    Depth 0: classic avatar-column layout (all screens)
+    Depth 1+: Medium-style inline avatar on mobile, avatar-column on desktop
+  -->
+  <div :class="depth === 0 ? 'flex gap-3' : 'sm:flex sm:gap-3'">
+    <!-- Column avatar: always shown at depth 0, desktop-only at depth 1+ -->
     <a
       :href="`https://bsky.app/profile/${comment.author.handle}`"
       target="_blank"
       rel="noopener noreferrer"
-      class="shrink-0"
+      :class="['shrink-0', depth > 0 ? 'hidden sm:block' : '']"
     >
       <img
         v-if="comment.author.avatar"
         :src="comment.author.avatar"
         :alt="comment.author.displayName || comment.author.handle"
-        :class="['rounded-full', isReply ? 'w-8 h-8' : 'w-10 h-10']"
+        :class="['rounded-full', depth === 0 ? 'w-10 h-10' : 'w-8 h-8']"
         width="40"
         height="40"
         loading="lazy"
@@ -61,7 +66,7 @@ function getHostname(uri: string): string {
         v-else
         :class="[
           'rounded-full bg-border flex items-center justify-center text-fg-muted',
-          isReply ? 'w-8 h-8 text-sm' : 'w-10 h-10',
+          depth === 0 ? 'w-10 h-10' : 'w-8 h-8 text-sm',
         ]"
       >
         {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
@@ -69,22 +74,40 @@ function getHostname(uri: string): string {
     </a>
 
     <div class="flex-1 min-w-0">
-      <!-- Replying to label -->
-      <div v-if="replyingTo" class="text-xs text-fg-subtle mb-0.5">
-        {{ $t('blog.atproto.replying_to', { name: replyingTo }) }}
-      </div>
-
       <!-- Author info + timestamp -->
-      <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0">
+      <div class="flex flex-wrap items-center gap-x-2 gap-y-0">
+        <!-- Inline avatar: mobile-only for nested comments -->
+        <a
+          v-if="depth > 0"
+          :href="`https://bsky.app/profile/${comment.author.handle}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="shrink-0 sm:hidden"
+        >
+          <img
+            v-if="comment.author.avatar"
+            :src="comment.author.avatar"
+            :alt="comment.author.displayName || comment.author.handle"
+            class="w-6 h-6 rounded-full"
+            width="24"
+            height="24"
+            loading="lazy"
+          />
+          <div
+            v-else
+            class="w-6 h-6 rounded-full bg-border flex items-center justify-center text-fg-muted text-xs"
+          >
+            {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
+          </div>
+        </a>
         <a
           :href="`https://bsky.app/profile/${comment.author.handle}`"
           target="_blank"
           rel="noopener noreferrer"
-          class="font-medium text-fg hover:underline"
+          :class="['font-medium text-fg hover:underline', depth > 0 ? 'text-sm' : '']"
         >
           {{ comment.author.displayName || comment.author.handle }}
         </a>
-        <span class="text-fg-subtle text-sm">@{{ comment.author.handle }}</span>
         <span class="text-fg-subtle text-sm">·</span>
         <a
           :href="getCommentUrl(props.comment)"
@@ -175,6 +198,33 @@ function getHostname(uri: string): string {
           {{ $t('blog.atproto.repost_count', { count: comment.repostCount }, comment.repostCount) }}
         </span>
       </div>
+
+      <!-- Nested replies -->
+      <template v-if="comment.replies.length > 0">
+        <div v-if="depth < MaxDepth" class="mt-3 ps-3 border-is-2 border-border flex flex-col gap-3">
+          <BlueskyComment
+            v-for="reply in comment.replies"
+            :key="reply.uri"
+            :comment="reply"
+            :depth="depth + 1"
+          />
+        </div>
+        <a
+          v-else
+          :href="getCommentUrl(comment.replies[0]!)"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="mt-2 block text-sm link"
+        >
+          {{
+            $t(
+              'blog.atproto.more_replies',
+              { count: comment.replies.length },
+              comment.replies.length,
+            )
+          }}
+        </a>
+      </template>
     </div>
   </div>
 </template>
diff --git a/app/components/BlueskyCommentThread.vue b/app/components/BlueskyCommentThread.vue
deleted file mode 100644
index 6a9fc6d0b4..0000000000
--- a/app/components/BlueskyCommentThread.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import type { Comment } from '#shared/types/blog-post'
-
-const props = defineProps<{
-  comment: Comment
-}>()
-
-interface FlatReply {
-  comment: Comment
-  replyingTo?: string
-}
-
-function flattenReplies(comment: Comment): FlatReply[] {
-  const result: FlatReply[] = []
-  function walk(replies: Comment[], parentName: string, isDirectReply: boolean) {
-    for (const reply of replies) {
-      result.push({
-        comment: reply,
-        replyingTo: isDirectReply ? undefined : parentName,
-      })
-      if (reply.replies.length > 0) {
-        walk(reply.replies, reply.author.displayName || reply.author.handle, false)
-      }
-    }
-  }
-  walk(comment.replies, comment.author.displayName || comment.author.handle, true)
-  return result
-}
-
-const flatReplies = computed(() => flattenReplies(props.comment))
-const totalReplyCount = computed(() => flatReplies.value.length)
-const showReplies = ref(false)
-</script>
-
-<template>
-  <div>
-    <!-- Top-level comment -->
-    <BlueskyComment :comment="comment" />
-
-    <!-- Replies section -->
-    <div v-if="totalReplyCount > 0" class="ms-13 mt-2">
-      <!-- Toggle button -->
-      <button
-        v-if="!showReplies"
-        class="text-sm text-accent font-medium hover:underline cursor-pointer"
-        @click="showReplies = true"
-      >
-        {{ $t('blog.atproto.view_replies', { count: totalReplyCount }, totalReplyCount) }}
-      </button>
-
-      <!-- Expanded replies -->
-      <template v-else>
-        <button
-          class="text-sm text-accent font-medium hover:underline mb-3 cursor-pointer"
-          @click="showReplies = false"
-        >
-          {{ $t('blog.atproto.hide_replies') }}
-        </button>
-
-        <div class="flex flex-col gap-4">
-          <BlueskyComment
-            v-for="reply in flatReplies"
-            :key="reply.comment.uri"
-            :comment="reply.comment"
-            :replying-to="reply.replyingTo"
-            is-reply
-          />
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
diff --git a/app/components/BlueskyComments.vue b/app/components/BlueskyComments.vue
index d990d46c74..54655a46c1 100644
--- a/app/components/BlueskyComments.vue
+++ b/app/components/BlueskyComments.vue
@@ -100,7 +100,12 @@ const postUrl = computed(() => data.value?.postUrl)
           </LinkBase>
         </div>
 
-        <BlueskyCommentThread v-for="reply in thread.replies" :key="reply.uri" :comment="reply" />
+        <BlueskyComment
+          v-for="reply in thread.replies"
+          :key="reply.uri"
+          :comment="reply"
+          :depth="0"
+        />
 
         <LinkBase v-if="postUrl" variant="button-primary" :to="postUrl">
           {{ $t('blog.atproto.like_or_reply_on_bluesky') }}
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index 6b87283d76..ff2ea54b20 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -106,7 +106,8 @@
       "updating": "Yenilənir...",
       "reply_count": "{count} cavab",
       "like_count": "{count} bəyənmə",
-      "repost_count": "{count} yenidən paylaşım"
+      "repost_count": "{count} yenidən paylaşım",
+      "more_replies": "daha {count} cavab... | daha {count} cavab..."
     }
   },
   "settings": {
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 920eb4b9d6..9c4c0ceea4 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -106,7 +106,8 @@
       "updating": "Aktualizace ...",
       "reply_count": "{count} odpověď | {count} odpovědi | {count} odpovědí",
       "like_count": "{count} lajk | {count} lajky | {count} lajků",
-      "repost_count": "{count} repost | {count} reposty | {count} repostů"
+      "repost_count": "{count} repost | {count} reposty | {count} repostů",
+      "more_replies": "ještě {count} odpověď… | ještě {count} odpovědi… | ještě {count} odpovědí…"
     }
   },
   "settings": {
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index 537b155822..edb70bb55d 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -106,7 +106,8 @@
       "updating": "(wird aktualisiert...)",
       "reply_count": "{count} Antwort | {count} Antworten",
       "like_count": "{count} Like | {count} Likes",
-      "repost_count": "{count} Repost | {count} Reposts"
+      "repost_count": "{count} Repost | {count} Reposts",
+      "more_replies": "noch {count} Antwort… | noch {count} Antworten…"
     }
   },
   "settings": {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index da1bd89981..6ac22bfa3f 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -109,9 +109,7 @@
       "reply_count": "{count} reply | {count} replies",
       "like_count": "{count} like | {count} likes",
       "repost_count": "{count} repost | {count} reposts",
-      "replying_to": "Replying to {name}",
-      "view_replies": "View {count} reply | View {count} replies",
-      "hide_replies": "Hide replies"
+      "more_replies": "{count} more reply... | {count} more replies..."
     }
   },
   "settings": {
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index cf76f0716b..72995686a9 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -108,7 +108,8 @@
       "updating": "Actualizando...",
       "reply_count": "{count} respuesta | {count} respuestas",
       "like_count": "{count} me gusta | {count} me gusta",
-      "repost_count": "{count} republicación | {count} republicaciones"
+      "repost_count": "{count} republicación | {count} republicaciones",
+      "more_replies": "{count} respuesta más... | {count} respuestas más..."
     }
   },
   "settings": {
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index d16ab3d200..64c9081cdb 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -106,7 +106,8 @@
       "updating": "Mise à jour...",
       "reply_count": "{count} réponse | {count} réponses",
       "like_count": "{count} j'aime | {count} j'aime",
-      "repost_count": "{count} repartage | {count} repartages"
+      "repost_count": "{count} repartage | {count} repartages",
+      "more_replies": "{count} réponse supplémentaire... | {count} réponses supplémentaires..."
     }
   },
   "settings": {
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index d89db85b9e..2b9b0ea3a0 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -108,7 +108,8 @@
       "updating": "Memperbarui...",
       "reply_count": "{count} balasan | {count} balasan",
       "like_count": "{count} suka | {count} suka",
-      "repost_count": "{count} repost | {count} repost"
+      "repost_count": "{count} repost | {count} repost",
+      "more_replies": "{count} balasan lagi... | {count} balasan lagi..."
     }
   },
   "settings": {
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index cead26d230..83dbdac234 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -106,7 +106,8 @@
       "updating": "更新中...",
       "reply_count": "{count} 件の返信",
       "like_count": "{count} 件のいいね",
-      "repost_count": "{count} 件のリポスト"
+      "repost_count": "{count} 件のリポスト",
+      "more_replies": "さらに{count}件の返信…"
     }
   },
   "settings": {
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 1c4873c2f5..06fc4955dd 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -106,7 +106,8 @@
       "updating": "Aktualizowanie...",
       "reply_count": "{count} odpowiedzi | {count} odpowiedź | {count} odpowiedzi | {count} odpowiedzi | {count} odpowiedzi",
       "like_count": "{count} polubień | {count} polubienie | {count} polubienia | {count} polubień | {count} polubień",
-      "repost_count": "{count} udostępnień | {count} udostępnienie | {count} udostępnienia | {count} udostępnień | {count} udostępnień"
+      "repost_count": "{count} udostępnień | {count} udostępnienie | {count} udostępnienia | {count} udostępnień | {count} udostępnień",
+      "more_replies": "jeszcze {count} odpowiedź… | jeszcze {count} odpowiedzi… | jeszcze {count} odpowiedzi…"
     }
   },
   "settings": {
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 200fc0b073..28082b42a5 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -106,7 +106,8 @@
       "updating": "Обновление…",
       "reply_count": "{count} ответ | {count} ответа | {count} ответов",
       "like_count": "{count} лайк | {count} лайка | {count} лайков",
-      "repost_count": "{count} репост | {count} репоста | {count} репостов"
+      "repost_count": "{count} репост | {count} репоста | {count} репостов",
+      "more_replies": "ещё {count} ответ... | ещё {count} ответа... | ещё {count} ответов..."
     }
   },
   "settings": {
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index 33955a959f..038e03aae2 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -106,7 +106,8 @@
       "updating": "Güncelleniyor...",
       "reply_count": "{count} yanıt",
       "like_count": "{count} beğeni",
-      "repost_count": "{count} yeniden paylaşım"
+      "repost_count": "{count} yeniden paylaşım",
+      "more_replies": "{count} yanıt daha... | {count} yanıt daha..."
     }
   },
   "settings": {
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index 559560af81..fac79a98cd 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -108,7 +108,8 @@
       "updating": "Оновлення...",
       "reply_count": "{count} відповідь | {count} відповіді | {count} відповідей",
       "like_count": "{count} вподобайка | {count} вподобайки | {count} вподобайок",
-      "repost_count": "{count} репост | {count} репости | {count} репостів"
+      "repost_count": "{count} репост | {count} репости | {count} репостів",
+      "more_replies": "ще {count} відповідь... | ще {count} відповіді... | ще {count} відповідей..."
     }
   },
   "settings": {
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index d698c451a8..54549edf67 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -106,7 +106,8 @@
       "updating": "更新中...",
       "reply_count": "{count} 条回复 | {count} 条回复",
       "like_count": "{count} 个赞 | {count} 个赞",
-      "repost_count": "{count} 次转发 | {count} 次转发"
+      "repost_count": "{count} 次转发 | {count} 次转发",
+      "more_replies": "还有 {count} 条回复..."
     }
   },
   "settings": {
diff --git a/i18n/schema.json b/i18n/schema.json
index 25fff2bdfa..fe5e5adc93 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -331,13 +331,7 @@
             "repost_count": {
               "type": "string"
             },
-            "replying_to": {
-              "type": "string"
-            },
-            "view_replies": {
-              "type": "string"
-            },
-            "hide_replies": {
+            "more_replies": {
               "type": "string"
             }
           },
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 96133c1224..f6f6ea845a 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -47,8 +47,6 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'SkeletonBlock.vue': 'Already covered indirectly via other component tests',
   'SkeletonInline.vue': 'Already covered indirectly via other component tests',
   'Button/Group.vue': "Wrapper component, tests wouldn't make much sense here",
-  'BlueskyCommentThread.vue':
-    'Wrapper component - manages collapsible reply thread, tested via BlueskyComment',
 }
 
 /**

From a33452257cfa0d4411dff2525e84130c6f4dbf3b Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 18 Mar 2026 20:40:01 +0000
Subject: [PATCH 05/10] [autofix.ci] apply automated fixes

---
 app/components/BlueskyComment.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index b8ad0b133e..2f1dfcf06d 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -201,7 +201,10 @@ function getHostname(uri: string): string {
 
       <!-- Nested replies -->
       <template v-if="comment.replies.length > 0">
-        <div v-if="depth < MaxDepth" class="mt-3 ps-3 border-is-2 border-border flex flex-col gap-3">
+        <div
+          v-if="depth < MaxDepth"
+          class="mt-3 ps-3 border-is-2 border-border flex flex-col gap-3"
+        >
           <BlueskyComment
             v-for="reply in comment.replies"
             :key="reply.uri"

From 23260f0a9b569d40b875e25f9cbba1599abea681 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Thu, 19 Mar 2026 04:07:37 +0100
Subject: [PATCH 06/10] fix: apply PR review feedback

- Use hover:shadow-fg/5 for federated articles shadow
- Scope prose link hover to exclude no-underline links
- Add group hover for Bluesky icon (blue on card hover)
- Revert button-primary hover to original accent style
- Use separate class/v-bind for avatar shrink-0
- Fix pt-BR duplicate JSON keys from merge conflict
---
 app/components/BlueskyComment.vue             |  3 +-
 app/components/Link/Base.vue                  |  2 +-
 .../global/BlogPostFederatedArticles.vue      |  2 +-
 app/components/global/BlogPostWrapper.vue     |  4 +-
 .../global/BlueskyPostEmbed.client.vue        |  4 +-
 i18n/locales/pt-BR.json                       | 76 -------------------
 6 files changed, 8 insertions(+), 83 deletions(-)

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index 2f1dfcf06d..b9aefa3a20 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -51,7 +51,8 @@ function getHostname(uri: string): string {
       :href="`https://bsky.app/profile/${comment.author.handle}`"
       target="_blank"
       rel="noopener noreferrer"
-      :class="['shrink-0', depth > 0 ? 'hidden sm:block' : '']"
+      class="shrink-0"
+      :class="depth > 0 ? 'hidden sm:block' : ''"
     >
       <img
         v-if="comment.author.avatar"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index d7361fdb7a..ba62e47ca8 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -101,7 +101,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
       'text-xs px-2 py-0.5': isButtonSmall,
       'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-fg/80 text-bg) focus-visible:(bg-fg/80 text-bg) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+      'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'button-primary',
     }"
     :to="to"
diff --git a/app/components/global/BlogPostFederatedArticles.vue b/app/components/global/BlogPostFederatedArticles.vue
index 248fcf3287..62a39ac846 100644
--- a/app/components/global/BlogPostFederatedArticles.vue
+++ b/app/components/global/BlogPostFederatedArticles.vue
@@ -55,7 +55,7 @@ const federatedArticles = computed(() => {
         rel="noopener noreferrer"
         v-for="article in federatedArticles"
         :key="article.url"
-        class="grid grid-cols-[auto_1fr] gap-x-5 no-underline hover:no-underline rounded-lg border border-border p-4 transition-all hover:shadow-md hover:shadow-black/5 dark:hover:shadow-white/5 hover:border-border-hover"
+        class="grid grid-cols-[auto_1fr] gap-x-5 no-underline hover:no-underline rounded-lg border border-border p-4 transition-all hover:shadow-md hover:shadow-fg/5 hover:border-border-hover"
       >
         <AuthorAvatar v-if="article.author" :author="article.author" size="md" class="row-span-2" />
         <div class="flex flex-col">
diff --git a/app/components/global/BlogPostWrapper.vue b/app/components/global/BlogPostWrapper.vue
index b2e27956d8..372be4ba67 100644
--- a/app/components/global/BlogPostWrapper.vue
+++ b/app/components/global/BlogPostWrapper.vue
@@ -78,7 +78,7 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
   @apply prose dark:prose-invert;
 }
 
-:deep(.prose a:not(.not-prose a)) {
+:deep(.prose a:not(.not-prose a):not([class*='no-underline'])) {
   text-decoration: underline;
   text-underline-offset: 0.2rem;
   text-decoration-thickness: 1px;
@@ -88,7 +88,7 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
     color 0.2s;
 }
 
-:deep(.prose a:not(.not-prose a):hover) {
+:deep(.prose a:not(.not-prose a):not([class*='no-underline']):hover) {
   text-decoration-color: var(--fg);
   color: var(--fg);
 }
diff --git a/app/components/global/BlueskyPostEmbed.client.vue b/app/components/global/BlueskyPostEmbed.client.vue
index 2ef0cc1f6c..8e767e7b8c 100644
--- a/app/components/global/BlueskyPostEmbed.client.vue
+++ b/app/components/global/BlueskyPostEmbed.client.vue
@@ -107,11 +107,11 @@ const postUrl = computed(() => {
     :href="postUrl ?? '#'"
     target="_blank"
     rel="noopener noreferrer"
-    class="not-prose block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200 relative"
+    class="not-prose block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200 relative group"
   >
     <!-- Bluesky icon -->
     <span
-      class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle absolute top-4 end-4 sm:top-5 sm:end-5"
+      class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle group-hover:text-blue-500 absolute top-4 end-4 sm:top-5 sm:end-5"
       aria-hidden="true"
     />
 
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index 235e4d66fe..58120f42df 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -1347,81 +1347,5 @@
     "selection": "0 selecionados | 1 selecionado | {count} selecionados",
     "shortcut": "Pressione \"{key}\" para focar nas ações",
     "button_close_aria_label": "Fechar barra de ações"
-  },
-  "blog": {
-    "title": "Blog",
-    "meta_description": "Insights e atualizações da comunidade npmx",
-    "heading": "blog",
-    "draft_banner": "Este é um rascunho não publicado. Pode estar incompleto ou conter imprecisões.",
-    "atproto": {
-      "comments": "Comentários",
-      "could_not_load_comments": "Não foi possível carregar comentários.",
-      "like_count": "{count} curtida | {count} curtidas",
-      "like_or_reply_on_bluesky": "Curta esta postagem ou adicione seu comentário no Bluesky",
-      "likes_on_bluesky": "Curtidas no Bluesky",
-      "loading_comments": "Carregando comentários...",
-      "no_comments_yet": "Nenhum comentário ainda.",
-      "reply_count": "{count} resposta | {count} respostas",
-      "reply_on_bluesky": "Responder no Bluesky",
-      "repost_count": "{count} repostagem | {count} repostagens",
-      "updating": "Atualizando...",
-      "view_on_bluesky": "Ver no Bluesky"
-    },
-    "author": {
-      "view_profile": "Veja o perfil de {name} no Bluesky"
-    },
-    "draft_badge": "Rascunho"
-  },
-  "error": {
-    "401": "Não autorizado",
-    "404": "Página não encontrada",
-    "500": "Erro do Servidor Interno",
-    "503": "Serviço não disponível",
-    "default": "Algo deu errado"
-  },
-  "profile": {
-    "description": "Descrição",
-    "display_name": "Nome visível",
-    "invite": {
-      "compose_text": "Olá, {'@'}{handle}! Você já conferiu npmx.dev? É um navegador para o registro npm rápido, moderno e de código aberto.\nhttps://npmx.dev",
-      "message": "Parece que eles ainda não estão usando o npmx. Quer contar a eles sobre isso?",
-      "share_button": "Compartilhar no Bluesky"
-    },
-    "likes": "Curtidas",
-    "no_description": "Sem descrição",
-    "not_found": "Perfil não encontrado",
-    "not_found_message": "O perfil de {handle} não foi encontrado.",
-    "seo_description": "Perfil npmx de {handle}",
-    "seo_title": "{handle} - npmx",
-    "website": "Site",
-    "website_placeholder": "https://example.com"
-  },
-  "pds": {
-    "community": {
-      "description": "Algumas das {count} contas que já estão chamando npmx.social sua casa:",
-      "empty": "Nenhum membro da comunidade para exibir.",
-      "error": "Falha ao carregar a comunidade PDS.",
-      "loading": "Carregando comunidade PDS...",
-      "new_accounts": "...e mais {count} que são novos na atmosfera",
-      "title": "Quem está aqui",
-      "view_profile": "Veja o perfil de {handle}"
-    },
-    "join": {
-      "description": "Esteja você criando sua primeira conta na atmosfera ou migrando uma já existente, você pertence aqui. Você pode migrar sua conta atual sem perder seu controle, suas postagens ou seus seguidores.",
-      "migrate": "Migrar com PDS MOOver",
-      "title": "Junte-se à comunidade"
-    },
-    "meta_description": "O AT Protocol Personal Data Server (PDS) oficial para a comunidade npmx.",
-    "server": {
-      "infrastructure_label": "Infraestrutura:",
-      "infrastructure_value": "Hospedado em Hetzner",
-      "learn_more": "Aprenda como o npmx usa a atmosfera",
-      "location_label": "Localização:",
-      "location_value": "Nuremberga, Alemanha",
-      "privacy_label": "Privacidade:",
-      "privacy_value": "Sujeito às rigorosas leis de proteção de dados da UE",
-      "title": "Detalhes do servidor"
-    },
-    "title": "npmx.social"
   }
 }

From 8ecca3743c2531e59d5e7d8c1f1f3fa790f808d0 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Thu, 19 Mar 2026 04:09:10 +0100
Subject: [PATCH 07/10] fix(blog): add spacing between comment author and text

---
 app/components/BlueskyComment.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index b9aefa3a20..8d6098810b 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -121,7 +121,7 @@ function getHostname(uri: string): string {
       </div>
 
       <!-- Comment text with rich segments -->
-      <p class="text-fg-muted whitespace-pre-wrap">
+      <p class="text-fg-muted whitespace-pre-wrap mt-2 mb-3">
         <template v-for="(segment, i) in processedSegments" :key="i">
           <a
             v-if="segment.url"
@@ -190,7 +190,7 @@ function getHostname(uri: string): string {
       <!-- Like/repost counts -->
       <div
         v-if="comment.likeCount > 0 || comment.repostCount > 0"
-        class="mt-2 flex gap-4 text-sm text-fg-subtle"
+        class="mt-1 flex gap-4 text-sm text-fg-subtle"
       >
         <span v-if="comment.likeCount > 0">
           {{ $t('blog.atproto.like_count', { count: comment.likeCount }, comment.likeCount) }}

From 520a5df9e1fa9a2d81d38420af5735ac0d27ed15 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Fri, 20 Mar 2026 22:56:37 +0100
Subject: [PATCH 08/10] fix: use Intl.Segmenter for avatar first character
 extraction

Handles unicode characters made up of multiple code points correctly.
---
 app/components/BlueskyComment.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index 8d6098810b..dbb56ab1ab 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -38,6 +38,11 @@ function getHostname(uri: string): string {
     return uri
   }
 }
+
+function firstChar(str: string): string {
+  const segmenter = new Intl.Segmenter({ granularity: 'grapheme' })
+  return Array.from(segmenter.segment(str))[0]?.segment ?? ''
+}
 </script>
 
 <template>
@@ -70,7 +75,7 @@ function getHostname(uri: string): string {
           depth === 0 ? 'w-10 h-10' : 'w-8 h-8 text-sm',
         ]"
       >
-        {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
+        {{ firstChar(comment.author.displayName || comment.author.handle).toUpperCase() }}
       </div>
     </a>
 
@@ -98,7 +103,7 @@ function getHostname(uri: string): string {
             v-else
             class="w-6 h-6 rounded-full bg-border flex items-center justify-center text-fg-muted text-xs"
           >
-            {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
+            {{ firstChar(comment.author.displayName || comment.author.handle).toUpperCase() }}
           </div>
         </a>
         <a

From 652014cc225a50fd8e12dbff70ce1d49884097a3 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Fri, 20 Mar 2026 23:06:54 +0100
Subject: [PATCH 09/10] fix: correct Intl.Segmenter constructor signature

---
 app/components/BlueskyComment.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index dbb56ab1ab..6422009f81 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -40,7 +40,7 @@ function getHostname(uri: string): string {
 }
 
 function firstChar(str: string): string {
-  const segmenter = new Intl.Segmenter({ granularity: 'grapheme' })
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
   return Array.from(segmenter.segment(str))[0]?.segment ?? ''
 }
 </script>

From e1aaaa7db4308f57a292a6edabc93e2dda8e62dc Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Fri, 20 Mar 2026 17:51:12 -0700
Subject: [PATCH 10/10] fix: small segmenter optimisation

---
 app/components/BlueskyComment.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index 6422009f81..c9078f0e06 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -39,8 +39,9 @@ function getHostname(uri: string): string {
   }
 }
 
+let segmenter: Intl.Segmenter | null = null
 function firstChar(str: string): string {
-  const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+  segmenter ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' })
   return Array.from(segmenter.segment(str))[0]?.segment ?? ''
 }
 </script>