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.

Author: Adebesin-Cell

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,14 +61,19 @@ 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() }}
       </div>
     </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>

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>

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') }}

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"

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">

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>

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 -->