marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Show the discussion count badge on every state (including 0) instead of
a separate nudge button. Simpler, less intrusive, and works without
needing an extra element near the panel.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-26 18:43:48 +01:00
parent bf82ebfe1d
commit 20f6de4424
2 changed files with 10 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/lib/components/DocumentBottomPanel.svelte
View File

@@ -107,7 +107,7 @@ function handleCountChange(count: number) {
</script>
<div
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)]"
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)]"
style="height: {panelHeight}px"
data-testid="bottom-panel"
>
@@ -126,15 +126,6 @@ function handleCountChange(count: number) {
<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)}
@@ -146,7 +137,7 @@ function handleCountChange(count: number) {
aria-pressed={activeTab === tab.id && open}
>
{tab.label()}
{#if tab.id === 'discussion' && discussionCount > 0}
{#if tab.id === 'discussion'}
<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"