From d6cf195bfc4cd5932441209e6d9914c674301ecd Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sun, 15 Mar 2026 16:13:06 +0100
Subject: [PATCH] Fix nested button hydration error in sidebar mailbox tree

---
 components/layout/sidebar.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 559f6923..73d89de4 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -191,11 +191,20 @@ function MailboxTreeItem({
               <span className="flex-1 truncate">{node.name}</span>
               <span className="flex items-center gap-1.5 ml-2 flex-shrink-0">
                 {node.unreadEmails > 0 && (
-                  <button
+                  <span
+                    role="button"
+                    tabIndex={0}
                     onClick={(e) => {
                       e.stopPropagation();
                       onUnreadFilterClick?.(node.id);
                     }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onUnreadFilterClick?.(node.id);
+                      }
+                    }}
                     className={cn(
                       "text-xs rounded-full px-2 py-0.5 font-medium cursor-pointer hover:ring-2 hover:ring-primary/50 transition-all",
                       selectedMailbox === node.id
@@ -205,7 +214,7 @@ function MailboxTreeItem({
                     title={node.unreadEmails + " unread"}
                   >
                     {node.unreadEmails}
-                  </button>
+                  </span>
                 )}
                 <span className="text-xs text-muted-foreground tabular-nums">
                   {node.totalEmails}