From 72de7501d35005c1cb3d3b6de270600d9d431a9b Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 12 Feb 2026 12:43:21 +0000
Subject: [PATCH] Redesign comments into glass bubble format

- Top-level comments render as glass-card bubbles with subtle
  border, backdrop blur, and hover highlight
- Replies use a lighter, more compact bubble variant
- Threaded replies connected by a vertical line on the left
  instead of raw margin indentation
- Action buttons (upvote, downvote, reply, expand) styled as
  pill-shaped micro-buttons inside each bubble
- Reply form nests inline within the parent bubble
- Proper spacing and responsive padding at all nesting depths

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/CommentNode.vue        | 318 +++++++++++++++-----------
 src/components/ContentDetailModal.vue |   4 +-
 2 files changed, 186 insertions(+), 136 deletions(-)

diff --git a/src/components/CommentNode.vue b/src/components/CommentNode.vue
index 446fa38..a68e59d 100644
--- a/src/components/CommentNode.vue
+++ b/src/components/CommentNode.vue
@@ -1,118 +1,114 @@
 <template>
-  <div class="comment-thread" :style="{ marginLeft: depth > 0 ? `${Math.min(depth, 4) * 20}px` : '0' }">
-    <div class="comment-item" :class="{ 'comment-reply': depth > 0 }">
-      <div class="flex gap-3">
-        <!-- Author Avatar (robohash fallback) -->
+  <div class="comment-thread" :class="{ 'reply-thread': depth > 0 }">
+    <!-- Bubble -->
+    <div class="comment-bubble" :class="bubbleClass">
+      <!-- Author Row -->
+      <div class="flex items-center gap-2.5 mb-2">
         <img
           :src="authorAvatar"
           :alt="authorName"
-          class="w-8 h-8 rounded-full flex-shrink-0 object-cover"
+          class="w-7 h-7 rounded-full flex-shrink-0 object-cover ring-1 ring-white/10"
         />
+        <span class="text-white text-sm font-semibold truncate">{{ authorName }}</span>
+        <span class="text-white/30 text-[11px] flex-shrink-0 ml-auto">{{ timeAgo }}</span>
+      </div>
 
-        <div class="flex-1 min-w-0">
-          <!-- Author + Timestamp -->
-          <div class="flex items-center gap-2 mb-1">
-            <span class="text-white text-sm font-medium truncate">{{ authorName }}</span>
-            <span class="text-white/30 text-xs flex-shrink-0">{{ timeAgo }}</span>
-          </div>
+      <!-- Comment Content -->
+      <p class="text-white/80 text-[13px] leading-relaxed whitespace-pre-wrap pl-[38px]">{{ node.event.content }}</p>
 
-          <!-- Comment Content -->
-          <p class="text-white/70 text-sm leading-relaxed whitespace-pre-wrap">{{ node.event.content }}</p>
+      <!-- Actions Row -->
+      <div class="flex items-center gap-2 mt-2.5 pl-[38px]">
+        <!-- Upvote -->
+        <button
+          v-if="isLoggedIn"
+          @click="handleReact(true)"
+          :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="M5 15l7-7 7 7" />
+          </svg>
+          <span v-if="reactionCounts.positive > 0">{{ reactionCounts.positive }}</span>
+        </button>
 
-          <!-- Comment Actions: Reactions + Reply -->
-          <div class="flex items-center gap-3 mt-2">
-            <!-- Upvote -->
-            <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 }"
-            >
-              <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>
-              <span v-if="reactionCounts.positive > 0">{{ reactionCounts.positive }}</span>
-            </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>
 
-            <!-- Downvote -->
-            <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 }"
-            >
-              <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>
 
-            <!-- Reply -->
-            <button
-              v-if="isLoggedIn"
-              @click="showReplyForm = !showReplyForm"
-              class="comment-action-btn"
-            >
-              <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>
 
-            <!-- Expand/Collapse Replies -->
-            <button
-              v-if="node.replies.length > 0"
-              @click="showReplies = !showReplies"
-              class="comment-action-btn"
-            >
-              <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>
-              <span>{{ showReplies ? 'Hide' : `${node.replies.length}` }} {{ node.replies.length === 1 ? 'reply' : 'replies' }}</span>
-            </button>
-          </div>
-
-          <!-- Reply Form -->
-          <div v-if="showReplyForm" class="mt-3">
-            <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>
+      <!-- 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 -->
-    <template v-if="showReplies && node.replies.length > 0">
+    <!-- Nested Replies (with connecting line) -->
+    <div v-if="showReplies && node.replies.length > 0" class="replies-container">
       <CommentNode
         v-for="reply in node.replies"
         :key="reply.event.id"
@@ -123,7 +119,7 @@
         :current-user-avatar="currentUserAvatar"
         @get-profile="(pubkey: string) => $emit('getProfile', pubkey)"
       />
-    </template>
+    </div>
   </div>
 </template>
 
@@ -162,6 +158,12 @@ 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)
@@ -216,73 +218,121 @@ async function submitReply() {
 </script>
 
 <style scoped>
-.comment-item {
-  padding: 10px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+/* ── Thread Layout ──────────────────────────────────── */
+.comment-thread {
+  margin-bottom: 6px;
 }
 
-.comment-item:last-child {
-  border-bottom: none;
+.reply-thread {
+  margin-bottom: 4px;
 }
 
-.comment-reply {
-  border-left: 2px solid rgba(255, 255, 255, 0.08);
-  padding-left: 12px;
-  margin-top: 4px;
+/* Replies container with connecting left border */
+.replies-container {
+  position: relative;
+  margin-left: 20px;
+  padding-left: 16px;
+  border-left: 2px solid rgba(255, 255, 255, 0.06);
 }
 
-.comment-action-btn {
-  display: flex;
+@media (min-width: 768px) {
+  .replies-container {
+    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);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.bubble-root:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.09);
+}
+
+/* Reply bubble — subtler, more compact */
+.bubble-reply {
+  background: rgba(255, 255, 255, 0.025);
+  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: 3px 8px;
+  padding: 4px 10px;
   font-size: 12px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.45);
-  background: transparent;
-  border: none;
-  border-radius: 6px;
+  color: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid transparent;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
 }
 
-.comment-action-btn:hover:not(:disabled) {
+.bubble-action:hover:not(:disabled) {
   color: rgba(255, 255, 255, 0.8);
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
-.comment-action-btn:disabled {
+.bubble-action:disabled {
   cursor: default;
 }
 
-.comment-action-active {
+.bubble-action-active {
   color: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.12);
 }
 
-.comment-textarea {
+/* ── Reply Form ─────────────────────────────────────── */
+.reply-textarea {
   width: 100%;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
   padding: 10px 12px;
   color: white;
   font-size: 13px;
   resize: none;
   outline: none;
-  transition: border-color 0.2s ease;
+  transition: border-color 0.2s ease, background 0.2s ease;
 }
 
-.comment-textarea::placeholder {
+.reply-textarea::placeholder {
   color: rgba(255, 255, 255, 0.25);
 }
 
-.comment-textarea:focus {
-  border-color: rgba(255, 255, 255, 0.25);
+.reply-textarea:focus {
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.06);
 }
 
-.submit-comment-btn {
-  padding: 5px 14px;
+.post-btn {
+  padding: 5px 16px;
   font-size: 12px;
   font-weight: 600;
   border-radius: 8px;
@@ -293,7 +343,7 @@ async function submitReply() {
   transition: all 0.2s ease;
 }
 
-.submit-comment-btn:hover:not(:disabled) {
+.post-btn:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.95);
   transform: translateY(-1px);
 }
@@ -304,14 +354,14 @@ async function submitReply() {
   font-weight: 500;
   border-radius: 8px;
   background: transparent;
-  color: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.45);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .cancel-btn:hover {
-  color: rgba(255, 255, 255, 0.8);
-  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.75);
+  border-color: rgba(255, 255, 255, 0.15);
 }
 </style>
diff --git a/src/components/ContentDetailModal.vue b/src/components/ContentDetailModal.vue
index bd96ed6..26d38f2 100644
--- a/src/components/ContentDetailModal.vue
+++ b/src/components/ContentDetailModal.vue
@@ -177,8 +177,8 @@
                 <div class="text-white/40 text-sm">No comments yet. Be the first!</div>
               </div>
 
-              <!-- Threaded comments -->
-              <div v-else class="space-y-1">
+              <!-- Threaded comments (bubble layout) -->
+              <div v-else class="space-y-2">
                 <template v-for="node in commentTree" :key="node.event.id">
                   <CommentNode
                     :node="node"