Support unsubscribed mailboxes

app/api/dev-jmap/[...path]/route.ts

@@ -37,6 +37,8 @@ interface MockMailbox {
   sortOrder: number;
   totalEmails: number;
   unreadEmails: number;
+  parentId?: string;
+  isSubscribed: boolean;
 }
 
 interface MockEmail {
@@ -64,12 +66,15 @@ function nextState(): string {
 }
 
 const mailboxes: MockMailbox[] = [
-  { id: 'mb-inbox', name: 'Inbox', role: 'inbox', sortOrder: 1, totalEmails: 5, unreadEmails: 2 },
-  { id: 'mb-drafts', name: 'Drafts', role: 'drafts', sortOrder: 2, totalEmails: 1, unreadEmails: 0 },
-  { id: 'mb-sent', name: 'Sent', role: 'sent', sortOrder: 3, totalEmails: 3, unreadEmails: 0 },
-  { id: 'mb-junk', name: 'Junk', role: 'junk', sortOrder: 4, totalEmails: 1, unreadEmails: 1 },
-  { id: 'mb-trash', name: 'Trash', role: 'trash', sortOrder: 5, totalEmails: 0, unreadEmails: 0 },
-  { id: 'mb-archive', name: 'Archive', role: 'archive', sortOrder: 6, totalEmails: 2, unreadEmails: 0 },
+  { id: 'mb-inbox', name: 'Inbox', role: 'inbox', sortOrder: 1, totalEmails: 5, unreadEmails: 2, isSubscribed: true },
+  { id: 'mb-drafts', name: 'Drafts', role: 'drafts', sortOrder: 2, totalEmails: 1, unreadEmails: 0, isSubscribed: true },
+  { id: 'mb-sent', name: 'Sent', role: 'sent', sortOrder: 3, totalEmails: 3, unreadEmails: 0, isSubscribed: true },
+  { id: 'mb-junk', name: 'Junk', role: 'junk', sortOrder: 4, totalEmails: 1, unreadEmails: 1, isSubscribed: true },
+  { id: 'mb-trash', name: 'Trash', role: 'trash', sortOrder: 5, totalEmails: 0, unreadEmails: 0, isSubscribed: true },
+  { id: 'mb-archive', name: 'Archive', role: 'archive', sortOrder: 6, totalEmails: 2, unreadEmails: 0, isSubscribed: true },
+  { id: 'mb-invoices', name: 'Invoices', role: null, sortOrder: 7, totalEmails: 8, unreadEmails: 0, isSubscribed: true },
+  { id: 'mb-invoices-2025', name: '2025', role: null, sortOrder: 8, totalEmails: 8, unreadEmails: 0, parentId: "mb-invoices", isSubscribed: false },
+  { id: 'mb-invoices-2026', name: '2026', role: null, sortOrder: 9, totalEmails: 8, unreadEmails: 0, parentId: "mb-invoices", isSubscribed: true },
 ];
 
 function recomputeMailboxCounts(): void {
@@ -1544,6 +1549,8 @@ function handleMailboxSet(args: MethodArgs, callId: string): MethodResult {
         sortOrder: mailboxes.length + 1,
         totalEmails: 0,
         unreadEmails: 0,
+        parentId: typeof data.parentId === 'string' ? (data.parentId as string) : undefined,
+        isSubscribed: data.isSubscribed !== false,
       });
       created[key] = { id: newId };
     }
@@ -1556,6 +1563,7 @@ function handleMailboxSet(args: MethodArgs, callId: string): MethodResult {
       if (mb) {
         if (changes.name !== undefined) mb.name = changes.name as string;
         if (changes.sortOrder !== undefined) mb.sortOrder = changes.sortOrder as number;
+        if (changes.isSubscribed !== undefined) mb.isSubscribed = changes.isSubscribed as boolean;
         updated[id] = null;
       }
     }

components/email/email-context-menu.tsx

@@ -172,7 +172,7 @@ export function EmailContextMenu({
   const filterTree = (nodes: MailboxNode[]): MailboxNode[] => {
     return nodes.reduce<MailboxNode[]>((acc, node) => {
       const filteredChildren = filterTree(node.children);
-      if (moveTargetIds.has(node.id) || filteredChildren.length > 0) {
+      if (node.isSubscribed && (moveTargetIds.has(node.id) || filteredChildren.length > 0)) {
         acc.push({ ...node, children: filteredChildren });
       }
       return acc;

components/layout/sidebar.tsx

@@ -37,7 +37,7 @@ import {
   MailOpen,
   MoreHorizontal,
 } from "lucide-react";
-import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
+import { cn, buildMailboxTree, hasSubscribedChildren, MailboxNode } from "@/lib/utils";
 import { localizeMailboxName } from "@/lib/mailbox-label";
 import {
   buildKeywordTree,
@@ -495,7 +495,7 @@ function MailboxTreeItem({
 }) {
   const tNotifications = useTranslations('notifications');
   const tSidebar = useTranslations('sidebar');
-  const hasChildren = node.children.length > 0;
+  const hasChildren = node.isSubscribed && hasSubscribedChildren(node);
   const isExpanded = expandedFolders.has(node.id);
   const Icon = getIconForMailbox(node.role, node.name, hasChildren, isExpanded, node.isShared, node.id);
   const isVirtualNode = node.id.startsWith('shared-');
@@ -544,7 +544,7 @@ function MailboxTreeItem({
 
   return (
     <>
-      <SidebarRow
+      {node.isSubscribed && (<SidebarRow
         icon={<Icon className={getIconClass(isSelected, isVirtualNode, colorful, roleKey)} />}
         label={label}
         testRole={node.role}
@@ -573,7 +573,7 @@ function MailboxTreeItem({
         isValidDropTarget={isValidDropTarget}
         isInvalidDropTarget={isInvalidDropTarget}
         onContextMenu={onContextMenu && !isVirtualNode ? (e) => onContextMenu(e, node) : undefined}
-      />
+      />)}
 
       {hasChildren && isExpanded && !isCollapsed && node.children.map((child) => (
         <MailboxTreeItem

components/settings/folder-settings.tsx

@@ -14,6 +14,7 @@ import {
   Star, Heart, Bookmark, Tag, Flag, Briefcase, Users,
   Bell, Zap, Globe, Lock, Eye, MessageSquare, Mail,
   AlertTriangle, NotebookPen, CalendarClock, BellOff,
+  EyeOff,
   type LucideIcon,
 } from 'lucide-react';
 import { cn, buildMailboxTree, type MailboxNode } from '@/lib/utils';
@@ -154,7 +155,7 @@ function SortableFolderRow({ id, title, children }: { id: string; title: string;
 export function FolderSettings() {
   const t = useTranslations('settings.folders');
   const { client } = useAuthStore();
-  const { mailboxes, fetchMailboxes, createMailbox, renameMailbox, deleteMailbox, setMailboxRole, reorderMailboxes, moveMailbox } = useEmailStore();
+  const { mailboxes, fetchMailboxes, createMailbox, renameMailbox, deleteMailbox, setMailboxRole, setMailboxSubscription, reorderMailboxes, moveMailbox } = useEmailStore();
 
   const sensors = useSensors(
     // Small activation distance so clicking the row's buttons still works.
@@ -388,6 +389,19 @@ export function FolderSettings() {
     setEditingName(mb.name);
   };
 
+  const handleFolderSubscription = async (mailboxId: string, subscribe: boolean) => {
+    if (!client) return;
+    setIsLoading(true);
+    try {
+      await setMailboxSubscription(client, mailboxId, subscribe);
+    } catch (error) {
+      console.error('Failed to update folder subscription:', error);
+      toast.error('Failed to update folder subscription');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const cancelEdit = () => {
     setEditingId(null);
     setEditingName('');
@@ -577,7 +591,7 @@ export function FolderSettings() {
                 />
               )}
             </div>
-            <span className="text-sm text-foreground truncate">{mb.name}</span>
+            <span className={cn("text-sm truncate", mb.isSubscribed ? "text-foreground" : "line-through text-muted-foreground")}>{mb.name}</span>
             {mb.role && (
               <span className="text-xs px-1.5 py-0.5 rounded-full bg-primary/10 text-primary font-medium flex-shrink-0">
                 {t(`role_${mb.role}`)}
@@ -590,6 +604,15 @@ export function FolderSettings() {
             )}
           </div>
           <div className="flex items-center gap-0.5">
+            {mb.role == null &&
+              <button
+                onClick={() => handleFolderSubscription(mb.id, !mb.isSubscribed)}
+                className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+                title={mb.isSubscribed ? t('unsubscribe_mailbox') : t('subscribe_mailbox')}
+              >
+                  {mb.isSubscribed ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
+              </button>
+            }
             {mb.myRights?.mayCreateChild && (
               <button
                 onClick={() => startCreateSubfolder(mb.id)}

lib/demo/demo-client.ts

@@ -139,7 +139,7 @@ export class DemoJMAPClient implements IJMAPClient {
     return mb;
   }
 
-  async updateMailbox(mailboxId: string, changes: { name?: string; parentId?: string | null; role?: string | null; sortOrder?: number }, _accountId?: string): Promise<void> {
+  async updateMailbox(mailboxId: string, changes: { name?: string; parentId?: string | null; role?: string | null; sortOrder?: number; isSubscribed?: boolean }, _accountId?: string): Promise<void> {
     const mb = this.data.mailboxes.find(m => m.id === mailboxId);
     if (mb) Object.assign(mb, changes);
   }

lib/jmap/client-interface.ts

@@ -104,7 +104,7 @@ export interface IJMAPClient {
   getMailboxes(accountId?: string): Promise<Mailbox[]>;
   getAllMailboxes(): Promise<Mailbox[]>;
   createMailbox(name: string, parentId?: string, accountId?: string): Promise<Mailbox>;
-  updateMailbox(mailboxId: string, changes: { name?: string; parentId?: string | null; role?: string | null; sortOrder?: number }, accountId?: string): Promise<void>;
+  updateMailbox(mailboxId: string, changes: { name?: string; parentId?: string | null; role?: string | null; sortOrder?: number; isSubscribed?: boolean }, accountId?: string): Promise<void>;
   deleteMailbox(mailboxId: string, accountId?: string): Promise<void>;
 
   // ── Emails ────────────────────────────────────────────────────

lib/jmap/client.ts

@@ -2344,7 +2344,7 @@ export class JMAPClient implements IJMAPClient {
     };
   }
 
-  async updateMailbox(mailboxId: string, changes: { name?: string; parentId?: string | null; role?: string | null; sortOrder?: number }, accountId?: string): Promise<void> {
+  async updateMailbox(mailboxId: string, changes: { name?: string; parentId?: string | null; role?: string | null; sortOrder?: number; isSubscribed?: boolean }, accountId?: string): Promise<void> {
     const targetAccountId = accountId || this.accountId;
     const response = await this.request([
       ["Mailbox/set", {

lib/utils.ts

@@ -592,4 +592,8 @@ export function getMailboxPath(
     parentId = parent.parentId;
   }
   return names.join(separator);
+}
+
+export function hasSubscribedChildren(node: MailboxNode): boolean {
+  return node.children.some(n => n.isSubscribed || hasSubscribedChildren(n))
 }

locales/de/common.json

@@ -1714,7 +1714,9 @@
       "error_delete": "Ordner konnte nicht gelöscht werden",
       "error_delete_has_children": "Ordner kann nicht gelöscht werden: Er enthält noch Unterordner. Löschen oder verschieben Sie diese zuerst.",
       "error_delete_has_email": "Ordner kann nicht gelöscht werden: Er enthält noch E-Mails. Verschieben oder löschen Sie diese zuerst.",
-      "error_role": "Ordnerrolle konnte nicht aktualisiert werden"
+      "error_role": "Ordnerrolle konnte nicht aktualisiert werden",
+      "subscribe_mailbox": "Ordner abonnieren",
+      "unsubscribe_mailbox": "Ordner abbestellen"
     },
     "advanced": {
       "title": "Erweitert",

locales/en/common.json

@@ -1737,7 +1737,9 @@
       "error_delete": "Failed to delete folder",
       "error_delete_has_children": "Cannot delete folder: it still contains subfolders. Delete or move them first.",
       "error_delete_has_email": "Cannot delete folder: it still contains emails. Move or delete them first.",
-      "error_role": "Failed to update folder role"
+      "error_role": "Failed to update folder role",
+      "subscribe_mailbox": "Subscribe to folder",
+      "unsubscribe_mailbox": "Unsubscribe from folder"
     },
     "advanced": {
       "title": "Advanced",

stores/email-store.ts

@@ -261,6 +261,7 @@ interface EmailStore {
   renameMailbox: (client: IJMAPClient, mailboxId: string, name: string) => Promise<void>;
   deleteMailbox: (client: IJMAPClient, mailboxId: string) => Promise<void>;
   setMailboxRole: (client: IJMAPClient, mailboxId: string, role: string | null) => Promise<void>;
+  setMailboxSubscription: (client: IJMAPClient, mailboxId: string, subscribed: boolean) => Promise<void>;
   reorderMailboxes: (client: IJMAPClient, orderedIds: string[]) => Promise<void>;
   moveMailbox: (client: IJMAPClient, mailboxId: string, newParentId: string | null, orderedSiblingIds?: string[]) => Promise<void>;
   emptyMailbox: (client: IJMAPClient, mailboxId: string) => Promise<void>;
@@ -3766,6 +3767,21 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
     }
   },
 
+  setMailboxSubscription: async (client, mailboxId, subscribed) => {
+    try {
+      const effectiveClient = resolveActionClient(client);
+      await effectiveClient.updateMailbox(mailboxId, { isSubscribed: subscribed });
+      if (get().viewingAccountId) {
+        await refreshMailboxesForViewingAccount(client);
+      } else {
+        await get().fetchMailboxes(client);
+      }
+    } catch (error) {
+      set({ error: error instanceof Error ? error.message : 'Failed to change mailbox subscription' });
+      throw error;
+    }
+  },
+
   reorderMailboxes: async (client, orderedIds) => {
     // Assign a 1-based sortOrder to the given sibling group in its new order.
     // sortOrder is the primary sort key (see buildMailboxTree), so this pins