feat: add unread filter functionality in mailbox sidebar

app/[locale]/page.tsx

@@ -657,6 +657,42 @@ export default function Home() {
     }
   };
 
+  const handleUnreadFilterClick = async (mailboxId: string) => {
+    const isTogglingOff = selectedMailbox === mailboxId && searchFilters.isUnread === true;
+
+    // Select the mailbox if not already selected
+    if (selectedMailbox !== mailboxId) {
+      selectMailbox(mailboxId);
+      selectEmail(null);
+    }
+
+    // On mobile, close sidebar and go to list view
+    if (isMobile) {
+      setSidebarOpen(false);
+      setActiveView("list");
+    }
+
+    // On tablet, show the list again
+    if (isTablet) {
+      setTabletListVisible(true);
+    }
+
+    if (isTogglingOff) {
+      // Disable the unread filter and show all emails
+      clearSearchFilters();
+      if (client) {
+        await fetchEmails(client, mailboxId);
+      }
+    } else {
+      // Enable unread filter
+      clearSearchFilters();
+      setSearchFilters({ isUnread: true });
+      if (client) {
+        await advancedSearch(client);
+      }
+    }
+  };
+
   const handleLogout = () => {
     logout();
     router.push('/login');
@@ -929,6 +965,7 @@ export default function Home() {
               selectedKeyword={selectedKeyword}
               onMailboxSelect={handleMailboxSelect}
               onTagSelect={handleTagSelect}
+              onUnreadFilterClick={handleUnreadFilterClick}
               onCompose={() => {
                 setComposerMode('compose');
                 setShowComposer(true);

components/layout/sidebar.tsx

@@ -46,6 +46,7 @@ interface SidebarProps {
   onTagSelect?: (keywordId: string | null) => void;
   onCompose?: () => void;
   onSidebarClose?: () => void;
+  onUnreadFilterClick?: (mailboxId: string) => void;
   className?: string;
 }
 
@@ -84,6 +85,7 @@ function MailboxTreeItem({
   onMailboxSelect,
   onToggleExpand,
   isCollapsed,
+  onUnreadFilterClick,
 }: {
   node: MailboxNode;
   selectedMailbox: string;
@@ -91,6 +93,7 @@ function MailboxTreeItem({
   onMailboxSelect?: (id: string) => void;
   onToggleExpand: (id: string) => void;
   isCollapsed: boolean;
+  onUnreadFilterClick?: (mailboxId: string) => void;
 }) {
   const t = useTranslations('sidebar');
   const tNotifications = useTranslations('notifications');
@@ -188,14 +191,21 @@ 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 && (
-                  <span className={cn(
+                  <button
-                    "text-xs rounded-full px-2 py-0.5 font-medium",
+                    onClick={(e) => {
-                    selectedMailbox === node.id
+                      e.stopPropagation();
-                      ? "bg-primary text-primary-foreground"
+                      onUnreadFilterClick?.(node.id);
-                      : "bg-foreground text-background"
+                    }}
-                  )}>
+                    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
+                        ? "bg-primary text-primary-foreground"
+                        : "bg-foreground text-background"
+                    )}
+                    title={node.unreadEmails + " unread"}
+                  >
                     {node.unreadEmails}
-                  </span>
+                  </button>
                 )}
                 <span className="text-xs text-muted-foreground tabular-nums">
                   {node.totalEmails}
@@ -217,6 +227,7 @@ function MailboxTreeItem({
               onMailboxSelect={onMailboxSelect}
               onToggleExpand={onToggleExpand}
               isCollapsed={isCollapsed}
+              onUnreadFilterClick={onUnreadFilterClick}
             />
           ))}
         </div>
@@ -336,6 +347,7 @@ export function Sidebar({
   onTagSelect,
   onCompose,
   onSidebarClose,
+  onUnreadFilterClick,
   className,
 }: SidebarProps) {
   const { sidebarCollapsed: isCollapsed, toggleSidebarCollapsed } = useUIStore();
@@ -482,6 +494,7 @@ export function Sidebar({
                   onMailboxSelect={onMailboxSelect}
                   onToggleExpand={handleToggleExpand}
                   isCollapsed={isCollapsed}
+                  onUnreadFilterClick={onUnreadFilterClick}
                 />
               ))}
             </>