From 09f5ab9080a6e08962fb3ddb657ec69016a04eec Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Fri, 10 Apr 2026 12:20:06 +0200
Subject: [PATCH] fix: hide view counts on hover

---
 src/components/Sidebar.test.tsx            | 29 +++++++++++++++++++++-
 src/components/sidebar/SidebarSections.tsx |  4 +--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index c2d19716..27de1a2f 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, within } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import { Sidebar } from './Sidebar'
 import type { VaultEntry, SidebarSelection } from '../types'
@@ -1049,5 +1049,32 @@ describe('Sidebar', () => {
       const viewContainer = screen.getByText('Empty View').closest('div')
       expect(viewContainer?.querySelector('span:last-child')?.textContent).not.toBe('0')
     })
+
+    it('adds hover and focus classes that hide the view count chip while showing the action buttons', () => {
+      render(
+        <Sidebar
+          entries={mockEntries}
+          selection={defaultSelection}
+          onSelect={() => {}}
+          views={mockViews}
+          onEditView={() => {}}
+          onDeleteView={() => {}}
+        />
+      )
+
+      const label = screen.getByText('Active Projects')
+      const viewItem = label.closest('.group.relative') as HTMLElement
+      const navItem = label.closest('[class*="cursor-pointer"]') as HTMLElement
+      const countChip = navItem.querySelector('span:last-child') as HTMLElement
+      expect(countChip).toBeTruthy()
+      expect(viewItem.className).toContain('[&>div>span:last-child]:transition-opacity')
+      expect(viewItem.className).toContain('group-hover:[&>div>span:last-child]:opacity-0')
+      expect(viewItem.className).toContain('group-focus-within:[&>div>span:last-child]:opacity-0')
+
+      const actionButton = within(viewItem).getByTitle('Edit view')
+      const actionContainer = actionButton.parentElement as HTMLElement
+      expect(actionContainer.className).toContain('group-hover:opacity-100')
+      expect(actionContainer.className).toContain('group-focus-within:opacity-100')
+    })
   })
 })
diff --git a/src/components/sidebar/SidebarSections.tsx b/src/components/sidebar/SidebarSections.tsx
index d630a9f3..e0a31e2a 100644
--- a/src/components/sidebar/SidebarSections.tsx
+++ b/src/components/sidebar/SidebarSections.tsx
@@ -86,7 +86,7 @@ function ViewItem({
   const count = useMemo(() => evaluateView(view.definition, entries).length, [view.definition, entries])
 
   return (
-    <div className="group relative">
+    <div className="group relative [&>div>span:last-child]:transition-opacity group-hover:[&>div>span:last-child]:opacity-0 group-focus-within:[&>div>span:last-child]:opacity-0">
       <NavItem
         icon={Funnel}
         emoji={view.definition.icon}
@@ -95,7 +95,7 @@ function ViewItem({
         isActive={isActive}
         onClick={onSelect}
       />
-      <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+      <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
         {onEditView && (
           <button
             className="rounded p-0.5 text-muted-foreground hover:text-foreground"