lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign comment replies as glass bubbles

Browse Source 
- 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>
This commit is contained in:
Dorian
2026-02-12 12:45:22 +00:00
parent 72de7501d3
commit 793df81798
2 changed files with 179 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
src/components/CommentNode.vue
View File

@@ -1,92 +1,96 @@
<template>
<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">
<div class="comment-thread" :style="{ marginLeft: depth > 0 ? `${Math.min(depth, 3) * 24}px` : '0' }">
<!-- ===== TOP-LEVEL COMMENT ===== -->
<div v-if="depth === 0" class="comment-item">
<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>
<span class="text-white/30 text-[11px] flex-shrink-0 ml-auto">{{ timeAgo }}</span>
<div class="flex-1 min-w-0">
<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>
<p class="text-white/70 text-sm leading-relaxed whitespace-pre-wrap">{{ node.event.content }}</p>
<!-- Comment Content -->
<p class="text-white/80 text-[13px] leading-relaxed whitespace-pre-wrap pl-[38px]">{{ 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>
<!-- Actions -->
<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 }">
<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>
<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>
<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 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>
</div>
</div>
</div>
<!-- Inline Reply Form -->
<div v-if="showReplyForm" class="mt-3 pl-[38px]">
<div class="flex gap-2.5">
<!-- ===== REPLY BUBBLE ===== -->
<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 ring-1 ring-white/10"
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="reply-textarea"
class="comment-textarea text-sm"
rows="2"
@keydown.meta.enter="submitReply"
@keydown.ctrl.enter="submitReply"
@@ -96,7 +100,7 @@
<button
@click="submitReply"
:disabled="!replyText.trim() || isPostingReply"
class="post-btn"
class="submit-comment-btn text-xs"
:class="{ 'opacity-40 cursor-not-allowed': !replyText.trim() || isPostingReply }"
>
{{ isPostingReply ? '...' : 'Reply' }}
@@ -105,10 +109,9 @@
</div>
</div>
</div>
</div>
<!-- Nested Replies (with connecting line) -->
<div v-if="showReplies && node.replies.length > 0" class="replies-container">
<!-- 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 ──────────────────────────────────── */
.comment-thread {
margin-bottom: 6px;
/* ── Top-level comment ────────────────────────────────── */
.comment-item {
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.reply-thread {
margin-bottom: 4px;
.comment-item:last-child {
border-bottom: none;
}
/* 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);
/* ── Reply bubble ─────────────────────────────────────── */
.reply-bubble-wrap {
padding: 4px 0;
}
@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);
.reply-bubble {
background: rgba(255, 255, 255, 0.06);
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 {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.09);
/* ── Reply form ───────────────────────────────────────── */
.reply-form-wrap {
padding: 6px 0 2px;
}
/* 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;
/* ── Top-level comment actions ────────────────────────── */
.comment-action-btn {
display: 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);
background: rgba(255, 255, 255, 0.03);
border: 1px solid transparent;
border-radius: 8px;
color: rgba(255, 255, 255, 0.45);
background: transparent;
border: none;
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);
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
}
.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-textarea {
/* ── Reply bubble actions (more compact) ──────────────── */
.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);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
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 {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
.comment-textarea:focus {
border-color: rgba(255, 255, 255, 0.25);
}
.post-btn {
padding: 5px 16px;
.submit-comment-btn {
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);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.5);
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);
border-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
</style>

2
src/components/ContentDetailModal.vue
View File

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