Redesign comment replies as glass bubbles

- Top-level comments keep their existing layout (avatar, name,
  timestamp, text, action bar)
- Replies now render in a rounded glass bubble with subtle
  background and border, chat-message style (flat top-left
  corner, rounded on the other three)
- Smaller avatars and more compact action buttons for replies
- Reply form pulled outside the comment layout for cleaner
  nesting at all depths
- Better spacing between comment threads

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/CommentNode.vue

@@ -1,114 +1,117 @@
 <template>
-  <div class="comment-thread" :class="{ 'reply-thread': depth > 0 }">
+  <div class="comment-thread" :style="{ marginLeft: depth > 0 ? `${Math.min(depth, 3) * 24}px` : '0' }">
-    <!-- Bubble -->
+
-    <div class="comment-bubble" :class="bubbleClass">
+    <!-- ===== TOP-LEVEL COMMENT ===== -->
-      <!-- Author Row -->
+    <div v-if="depth === 0" class="comment-item">
-      <div class="flex items-center gap-2.5 mb-2">
+      <div class="flex gap-3">
         <img
           :src="authorAvatar"
           :alt="authorName"
-          class="w-7 h-7 rounded-full flex-shrink-0 object-cover ring-1 ring-white/10"
+          class="w-8 h-8 rounded-full flex-shrink-0 object-cover"
         />
-        <span class="text-white text-sm font-semibold truncate">{{ authorName }}</span>
+        <div class="flex-1 min-w-0">
-        <span class="text-white/30 text-[11px] flex-shrink-0 ml-auto">{{ timeAgo }}</span>
+          <div class="flex items-center gap-2 mb-1">
-      </div>
+            <span class="text-white text-sm font-medium truncate">{{ authorName }}</span>
+            <span class="text-white/30 text-xs flex-shrink-0">{{ timeAgo }}</span>
+          </div>
+          <p class="text-white/70 text-sm leading-relaxed whitespace-pre-wrap">{{ node.event.content }}</p>
 
-      <!-- Comment Content -->
+          <!-- Actions -->
-      <p class="text-white/80 text-[13px] leading-relaxed whitespace-pre-wrap pl-[38px]">{{ node.event.content }}</p>
+          <div class="flex items-center gap-3 mt-2">
-
+            <button v-if="isLoggedIn" @click="handleReact(true)" :disabled="hasVoted" class="comment-action-btn" :class="{ 'comment-action-active': userVote === '+' }" :style="{ opacity: userVote === '+' ? 1 : hasVoted ? 0.4 : 1 }">
-      <!-- Actions Row -->
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /></svg>
-      <div class="flex items-center gap-2 mt-2.5 pl-[38px]">
+              <span v-if="reactionCounts.positive > 0">{{ reactionCounts.positive }}</span>
-        <!-- Upvote -->
+            </button>
-        <button
+            <button v-if="isLoggedIn" @click="handleReact(false)" :disabled="hasVoted" class="comment-action-btn" :class="{ 'comment-action-active': userVote === '-' }" :style="{ opacity: userVote === '-' ? 1 : hasVoted ? 0.4 : 1 }">
-          v-if="isLoggedIn"
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
-          @click="handleReact(true)"
+              <span v-if="reactionCounts.negative > 0">{{ reactionCounts.negative }}</span>
-          :disabled="hasVoted"
+            </button>
-          class="bubble-action"
+            <button v-if="isLoggedIn" @click="showReplyForm = !showReplyForm" class="comment-action-btn">
-          :class="{ 'bubble-action-active': userVote === '+' }"
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" /></svg>
-          :style="{ opacity: userVote === '+' ? 1 : hasVoted ? 0.35 : 1 }"
+              <span>Reply</span>
-        >
+            </button>
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <button v-if="node.replies.length > 0" @click="showReplies = !showReplies" class="comment-action-btn">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+              <svg class="w-3.5 h-3.5 transition-transform" :class="{ 'rotate-180': showReplies }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
-          </svg>
+              <span>{{ showReplies ? 'Hide' : `${node.replies.length}` }} {{ node.replies.length === 1 ? 'reply' : 'replies' }}</span>
-          <span v-if="reactionCounts.positive > 0">{{ reactionCounts.positive }}</span>
+            </button>
-        </button>
-
-        <!-- Downvote -->
-        <button
-          v-if="isLoggedIn"
-          @click="handleReact(false)"
-          :disabled="hasVoted"
-          class="bubble-action"
-          :class="{ 'bubble-action-active': userVote === '-' }"
-          :style="{ opacity: userVote === '-' ? 1 : hasVoted ? 0.35 : 1 }"
-        >
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-          <span v-if="reactionCounts.negative > 0">{{ reactionCounts.negative }}</span>
-        </button>
-
-        <!-- Reply -->
-        <button
-          v-if="isLoggedIn"
-          @click="showReplyForm = !showReplyForm"
-          class="bubble-action"
-          :class="{ 'bubble-action-active': showReplyForm }"
-        >
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
-          </svg>
-          <span>Reply</span>
-        </button>
-
-        <!-- Expand/Collapse Replies -->
-        <button
-          v-if="node.replies.length > 0"
-          @click="showReplies = !showReplies"
-          class="bubble-action ml-auto"
-        >
-          <svg class="w-3.5 h-3.5 transition-transform duration-200" :class="{ 'rotate-180': showReplies }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-          <span>{{ showReplies ? 'Hide' : node.replies.length }} {{ node.replies.length === 1 ? 'reply' : 'replies' }}</span>
-        </button>
-      </div>
-
-      <!-- Inline Reply Form -->
-      <div v-if="showReplyForm" class="mt-3 pl-[38px]">
-        <div class="flex gap-2.5">
-          <img
-            :src="currentUserAvatar"
-            class="w-6 h-6 rounded-full flex-shrink-0 object-cover ring-1 ring-white/10"
-            alt="You"
-          />
-          <div class="flex-1">
-            <textarea
-              v-model="replyText"
-              placeholder="Write a reply..."
-              class="reply-textarea"
-              rows="2"
-              @keydown.meta.enter="submitReply"
-              @keydown.ctrl.enter="submitReply"
-            ></textarea>
-            <div class="flex items-center gap-2 justify-end mt-1.5">
-              <button @click="showReplyForm = false" class="cancel-btn">Cancel</button>
-              <button
-                @click="submitReply"
-                :disabled="!replyText.trim() || isPostingReply"
-                class="post-btn"
-                :class="{ 'opacity-40 cursor-not-allowed': !replyText.trim() || isPostingReply }"
-              >
-                {{ isPostingReply ? '...' : 'Reply' }}
-              </button>
-            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Nested Replies (with connecting line) -->
+    <!-- ===== REPLY BUBBLE ===== -->
-    <div v-if="showReplies && node.replies.length > 0" class="replies-container">
+    <div v-else class="reply-bubble-wrap">
+      <div class="flex items-start gap-2.5">
+        <img
+          :src="authorAvatar"
+          :alt="authorName"
+          class="w-6 h-6 rounded-full flex-shrink-0 object-cover mt-0.5"
+        />
+        <div class="flex-1 min-w-0">
+          <div class="reply-bubble">
+            <div class="flex items-center gap-2 mb-0.5">
+              <span class="text-white/90 text-xs font-semibold truncate">{{ authorName }}</span>
+              <span class="text-white/25 text-[10px] flex-shrink-0">{{ timeAgo }}</span>
+            </div>
+            <p class="text-white/70 text-[13px] leading-relaxed whitespace-pre-wrap">{{ node.event.content }}</p>
+          </div>
+
+          <!-- Reply actions (compact) -->
+          <div class="flex items-center gap-2 mt-1 ml-1">
+            <button v-if="isLoggedIn" @click="handleReact(true)" :disabled="hasVoted" class="reply-action-btn" :class="{ 'reply-action-active': userVote === '+' }" :style="{ opacity: userVote === '+' ? 1 : hasVoted ? 0.35 : 1 }">
+              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /></svg>
+              <span v-if="reactionCounts.positive > 0">{{ reactionCounts.positive }}</span>
+            </button>
+            <button v-if="isLoggedIn" @click="handleReact(false)" :disabled="hasVoted" class="reply-action-btn" :class="{ 'reply-action-active': userVote === '-' }" :style="{ opacity: userVote === '-' ? 1 : hasVoted ? 0.35 : 1 }">
+              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+              <span v-if="reactionCounts.negative > 0">{{ reactionCounts.negative }}</span>
+            </button>
+            <button v-if="isLoggedIn" @click="showReplyForm = !showReplyForm" class="reply-action-btn">
+              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" /></svg>
+            </button>
+            <button v-if="node.replies.length > 0" @click="showReplies = !showReplies" class="reply-action-btn">
+              <svg class="w-3 h-3 transition-transform" :class="{ 'rotate-180': showReplies }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+              <span>{{ node.replies.length }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Reply Form (shared by both layouts) -->
+    <div v-if="showReplyForm" class="reply-form-wrap" :style="{ marginLeft: depth > 0 ? '34px' : '44px' }">
+      <div class="flex gap-2">
+        <img
+          :src="currentUserAvatar"
+          class="w-6 h-6 rounded-full flex-shrink-0 object-cover"
+          alt="You"
+        />
+        <div class="flex-1">
+          <textarea
+            v-model="replyText"
+            placeholder="Write a reply..."
+            class="comment-textarea text-sm"
+            rows="2"
+            @keydown.meta.enter="submitReply"
+            @keydown.ctrl.enter="submitReply"
+          ></textarea>
+          <div class="flex items-center gap-2 justify-end mt-1.5">
+            <button @click="showReplyForm = false" class="cancel-btn">Cancel</button>
+            <button
+              @click="submitReply"
+              :disabled="!replyText.trim() || isPostingReply"
+              class="submit-comment-btn text-xs"
+              :class="{ 'opacity-40 cursor-not-allowed': !replyText.trim() || isPostingReply }"
+            >
+              {{ isPostingReply ? '...' : 'Reply' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Nested Replies -->
+    <template v-if="showReplies && node.replies.length > 0">
       <CommentNode
         v-for="reply in node.replies"
         :key="reply.event.id"
@@ -119,7 +122,7 @@
         :current-user-avatar="currentUserAvatar"
         @get-profile="(pubkey: string) => $emit('getProfile', pubkey)"
       />
-    </div>
+    </template>
   </div>
 </template>
 
@@ -158,12 +161,6 @@ const authorAvatar = computed(() => {
   return `https://robohash.org/${props.node.event.pubkey}.png`
 })
 
-// Dynamic bubble class based on nesting depth
-const bubbleClass = computed(() => {
-  if (props.depth === 0) return 'bubble-root'
-  return 'bubble-reply'
-})
-
 // Time formatting
 const timeAgo = computed(() => {
   const now = Math.floor(Date.now() / 1000)
@@ -218,121 +215,119 @@ async function submitReply() {
 </script>
 
 <style scoped>
-/* ── Thread Layout ──────────────────────────────────── */
+/* ── Top-level comment ────────────────────────────────── */
-.comment-thread {
+.comment-item {
-  margin-bottom: 6px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }
 
-.reply-thread {
+.comment-item:last-child {
-  margin-bottom: 4px;
+  border-bottom: none;
 }
 
-/* Replies container with connecting left border */
+/* ── Reply bubble ─────────────────────────────────────── */
-.replies-container {
+.reply-bubble-wrap {
-  position: relative;
+  padding: 4px 0;
-  margin-left: 20px;
-  padding-left: 16px;
-  border-left: 2px solid rgba(255, 255, 255, 0.06);
 }
 
-@media (min-width: 768px) {
+.reply-bubble {
-  .replies-container {
+  background: rgba(255, 255, 255, 0.06);
-    margin-left: 24px;
-    padding-left: 20px;
-  }
-}
-
-/* ── Bubble Base ────────────────────────────────────── */
-.comment-bubble {
-  padding: 14px 16px;
-  border-radius: 16px;
-  transition: all 0.2s ease;
-}
-
-/* Top-level comment bubble — prominent glass card */
-.bubble-root {
-  background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 4px 16px 16px 16px;
+  padding: 10px 14px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
 
-.bubble-root:hover {
+/* ── Reply form ───────────────────────────────────────── */
-  background: rgba(255, 255, 255, 0.06);
+.reply-form-wrap {
-  border-color: rgba(255, 255, 255, 0.09);
+  padding: 6px 0 2px;
 }
 
-/* Reply bubble — subtler, more compact */
+/* ── Top-level comment actions ────────────────────────── */
-.bubble-reply {
+.comment-action-btn {
-  background: rgba(255, 255, 255, 0.025);
+  display: flex;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  border-radius: 14px;
-  padding: 12px 14px;
-}
-
-.bubble-reply:hover {
-  background: rgba(255, 255, 255, 0.045);
-  border-color: rgba(255, 255, 255, 0.07);
-}
-
-/* ── Action Buttons ─────────────────────────────────── */
-.bubble-action {
-  display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 4px 10px;
+  padding: 3px 8px;
   font-size: 12px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, 0.45);
-  background: rgba(255, 255, 255, 0.03);
+  background: transparent;
-  border: 1px solid transparent;
+  border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
 }
 
-.bubble-action:hover:not(:disabled) {
+.comment-action-btn:hover:not(:disabled) {
   color: rgba(255, 255, 255, 0.8);
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.08);
 }
 
-.bubble-action:disabled {
+.comment-action-btn:disabled {
   cursor: default;
 }
 
-.bubble-action-active {
+.comment-action-active {
   color: rgba(255, 255, 255, 0.9);
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.12);
 }
 
-/* ── Reply Form ─────────────────────────────────────── */
+/* ── Reply bubble actions (more compact) ──────────────── */
-.reply-textarea {
+.reply-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.35);
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.reply-action-btn:hover:not(:disabled) {
+  color: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.reply-action-btn:disabled {
+  cursor: default;
+}
+
+.reply-action-active {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+/* ── Shared form styles ───────────────────────────────── */
+.comment-textarea {
   width: 100%;
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
+  border-radius: 10px;
   padding: 10px 12px;
   color: white;
   font-size: 13px;
   resize: none;
   outline: none;
-  transition: border-color 0.2s ease, background 0.2s ease;
+  transition: border-color 0.2s ease;
 }
 
-.reply-textarea::placeholder {
+.comment-textarea::placeholder {
   color: rgba(255, 255, 255, 0.25);
 }
 
-.reply-textarea:focus {
+.comment-textarea:focus {
-  border-color: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.25);
-  background: rgba(255, 255, 255, 0.06);
 }
 
-.post-btn {
+.submit-comment-btn {
-  padding: 5px 16px;
+  padding: 5px 14px;
   font-size: 12px;
   font-weight: 600;
   border-radius: 8px;
@@ -343,7 +338,7 @@ async function submitReply() {
   transition: all 0.2s ease;
 }
 
-.post-btn:hover:not(:disabled) {
+.submit-comment-btn:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.95);
   transform: translateY(-1px);
 }
@@ -354,14 +349,14 @@ async function submitReply() {
   font-weight: 500;
   border-radius: 8px;
   background: transparent;
-  color: rgba(255, 255, 255, 0.45);
+  color: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .cancel-btn:hover {
-  color: rgba(255, 255, 255, 0.75);
+  color: rgba(255, 255, 255, 0.8);
-  border-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.2);
 }
 </style>

src/components/ContentDetailModal.vue

@@ -177,7 +177,7 @@
                 <div class="text-white/40 text-sm">No comments yet. Be the first!</div>
               </div>
 
-              <!-- Threaded comments (bubble layout) -->
+              <!-- Threaded comments -->
               <div v-else class="space-y-2">
                 <template v-for="node in commentTree" :key="node.event.id">
                   <CommentNode