feat: improve discussion discoverability with count badge and empty state hint #81

New Issue

marcel · 2026-03-26T17:56:24+01:00

marcel commented

2026-03-26 17:56:24 +01:00

Problem

New users visiting a document don't know the Discussion tab exists or has content. The tab label alone ("Diskussion") gives no indication of activity, and opening an empty tab shows a blank textarea with no guidance.

Proposed Changes

1. Comment count badge on the "Diskussion" tab

Show a small pill badge next to the tab label when there are existing comments (threads + replies). The badge is seeded from SSR data on load and updates live after new comments are posted.

2. Clickable "Start discussion" nudge above the closed panel

When there are no comments, a subtle "Diskussion starten →" link is shown just above the collapsed bottom panel. Clicking it opens the panel to the Discussion tab. The nudge is passive — it only responds to user interaction, it does not auto-open anything.

3. Empty state hint inside the discussion panel

When the discussion is empty, show a friendly speech-bubble icon + message ("Noch keine Kommentare – starte die Diskussion!") above the compose box instead of a bare textarea.

Implementation Plan

frontend/messages/{de,en,es}.json — add comment_empty_hint and comment_start_discussion translation keys

CommentThread.svelte

Render empty state (icon + hint text) when comments.length === 0
Fix onCountChange to also fire with the initial SSR-seeded count (currently only fires after client-side reload())

PanelDiscussion.svelte

Add onCountChange?: (count: number) => void prop and forward it to CommentThread

DocumentBottomPanel.svelte

Add discussionCount reactive state (seeded from SSR comments prop)
Pass onCountChange into PanelDiscussion
Render badge in the "Diskussion" tab button when discussionCount > 0
When !open && discussionCount === 0: render a subtle clickable link above the drag handle that calls openTab('discussion') on click

Verification

Document with comments → badge visible on tab
Document without comments → "Diskussion starten" nudge visible above collapsed panel; clicking it opens the panel to the Discussion tab
Document without comments, panel open on Discussion tab → empty state hint shown
Post a comment → badge increments live, nudge disappears
npm run check + npm run lint pass

## Problem New users visiting a document don't know the Discussion tab exists or has content. The tab label alone ("Diskussion") gives no indication of activity, and opening an empty tab shows a blank textarea with no guidance. ## Proposed Changes ### 1. Comment count badge on the "Diskussion" tab Show a small pill badge next to the tab label when there are existing comments (threads + replies). The badge is seeded from SSR data on load and updates live after new comments are posted. ### 2. Clickable "Start discussion" nudge above the closed panel When there are no comments, a subtle "Diskussion starten →" link is shown just above the collapsed bottom panel. Clicking it opens the panel to the Discussion tab. The nudge is passive — it only responds to user interaction, it does not auto-open anything. ### 3. Empty state hint inside the discussion panel When the discussion is empty, show a friendly speech-bubble icon + message ("Noch keine Kommentare – starte die Diskussion!") above the compose box instead of a bare textarea. ## Implementation Plan **`frontend/messages/{de,en,es}.json`** — add `comment_empty_hint` and `comment_start_discussion` translation keys **`CommentThread.svelte`** - Render empty state (icon + hint text) when `comments.length === 0` - Fix `onCountChange` to also fire with the initial SSR-seeded count (currently only fires after client-side `reload()`) **`PanelDiscussion.svelte`** - Add `onCountChange?: (count: number) => void` prop and forward it to `CommentThread` **`DocumentBottomPanel.svelte`** - Add `discussionCount` reactive state (seeded from SSR `comments` prop) - Pass `onCountChange` into `PanelDiscussion` - Render badge in the "Diskussion" tab button when `discussionCount > 0` - When `!open && discussionCount === 0`: render a subtle clickable link above the drag handle that calls `openTab('discussion')` on click ## Verification 1. Document with comments → badge visible on tab 2. Document without comments → "Diskussion starten" nudge visible above collapsed panel; clicking it opens the panel to the Discussion tab 3. Document without comments, panel open on Discussion tab → empty state hint shown 4. Post a comment → badge increments live, nudge disappears 5. `npm run check` + `npm run lint` pass

marcel referenced this issue from a commit

2026-03-26 21:12:31 +01:00

feat(#81): improve discussion discoverability

marcel referenced this issue from a commit

2026-03-26 21:12:31 +01:00

refactor(#81): replace nudge button with always-visible count badge

marcel referenced this issue from a commit

2026-03-26 21:12:32 +01:00

fix(#81): use text-primary-fg for badge text so dark mode reads correctly

marcel referenced a pull request that will close this issue

2026-03-26 21:13:32 +01:00

feat(#81): improve discussion discoverability with count badge and empty state #82