feat(#81): improve discussion discoverability
- Add comment count badge on the Discussion tab (seeded from SSR, updated live) - Add 'Diskussion starten' nudge above collapsed panel when no comments exist - Add empty state hint with speech-bubble icon inside the discussion panel - Fix CommentThread to fire onCountChange with SSR-seeded count on mount - Add tests for all three behaviours in CommentThread and DocumentBottomPanel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -98,10 +98,16 @@ const tabs: { id: DocumentPanelTab; label: () => string }[] = [
|
||||
];
|
||||
|
||||
const panelHeight = $derived(open ? height : MIN_HEIGHT);
|
||||
|
||||
let discussionCount = $state((() => comments.reduce((s, c) => s + 1 + c.replies.length, 0))());
|
||||
|
||||
function handleCountChange(count: number) {
|
||||
discussionCount = count;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="fixed right-0 bottom-0 left-0 z-30 flex flex-col border-t border-line bg-surface shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
|
||||
class="fixed relative right-0 bottom-0 left-0 z-30 flex flex-col border-t border-line bg-surface shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
|
||||
style="height: {panelHeight}px"
|
||||
data-testid="bottom-panel"
|
||||
>
|
||||
@@ -120,6 +126,15 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
|
||||
<div class="h-1 w-12 rounded-full bg-line"></div>
|
||||
</div>
|
||||
|
||||
{#if !open && discussionCount === 0}
|
||||
<button
|
||||
data-testid="discussion-nudge"
|
||||
onclick={() => openTab('discussion')}
|
||||
class="absolute -top-7 left-1/2 -translate-x-1/2 rounded-full border border-line bg-surface px-3 py-1 font-sans text-xs whitespace-nowrap text-ink-3 shadow-sm transition-colors hover:text-ink"
|
||||
>{m.comment_start_discussion()}</button
|
||||
>
|
||||
{/if}
|
||||
|
||||
<!-- Tab bar -->
|
||||
<div class="flex shrink-0 items-center border-b border-line bg-surface px-4">
|
||||
{#each tabs as tab (tab.id)}
|
||||
@@ -131,6 +146,13 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
|
||||
aria-pressed={activeTab === tab.id && open}
|
||||
>
|
||||
{tab.label()}
|
||||
{#if tab.id === 'discussion' && discussionCount > 0}
|
||||
<span
|
||||
data-testid="discussion-count-badge"
|
||||
class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 font-sans text-[10px] font-bold text-white"
|
||||
>{discussionCount}</span
|
||||
>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
@@ -165,6 +187,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
|
||||
canComment={canComment}
|
||||
currentUserId={currentUserId}
|
||||
canAdmin={canAdmin}
|
||||
onCountChange={handleCountChange}
|
||||
/>
|
||||
{:else if activeTab === 'history'}
|
||||
<PanelHistory documentId={doc.id} />
|
||||
|
||||
Reference in New Issue
Block a user