feat: implement email keyword management with color tagging

- Introduced a new settings section for managing email keywords (labels/tags) with associated colors.
- Updated email context menu, viewer, and list item components to support the new keyword system.
- Refactored color tag handling to accommodate both new $label: and legacy $color: prefixes.
- Added utility functions for retrieving email color tags based on keywords.
- Enhanced localization files to include translations for the new keyword management features.
- Updated the settings store to manage keyword definitions, including add, update, delete, and reorder functionalities.
- Added tests for the new keyword handling logic.

app/[locale]/page.tsx

@@ -532,22 +532,22 @@ export default function Home() {
     if (!client) return;
 
     try {
-      // Remove any existing color tags
+      // Remove any existing label/color tags
       const email = emails.find(e => e.id === emailId);
       if (!email) return;
 
       const keywords = { ...email.keywords };
 
-      // Remove old color tags - set to false for JMAP to remove them
+      // Remove old label and legacy color tags - set to false for JMAP to remove them
       Object.keys(keywords).forEach(key => {
-        if (key.startsWith("$color:")) {
+        if (key.startsWith("$label:") || key.startsWith("$color:")) {
           keywords[key] = false;
         }
       });
 
-      // Add new color tag if specified
+      // Add new label tag if specified (using new $label: prefix)
       if (color) {
-        keywords[`$color:${color}`] = true;
+        keywords[`$label:${color}`] = true;
       }
 
       // Update email keywords via JMAP

app/[locale]/settings/page.tsx

@@ -15,11 +15,12 @@ import { FilterSettings } from '@/components/settings/filter-settings';
 import { TemplateSettings } from '@/components/settings/template-settings';
 import { AdvancedSettings } from '@/components/settings/advanced-settings';
 import { FolderSettings } from '@/components/settings/folder-settings';
+import { KeywordSettings } from '@/components/settings/keyword-settings';
 import { useAuthStore } from '@/stores/auth-store';
 import { useIsDesktop } from '@/hooks/use-media-query';
 import { cn } from '@/lib/utils';
 
-type Tab = 'appearance' | 'email' | 'account' | 'identities' | 'vacation' | 'calendar' | 'filters' | 'templates' | 'folders' | 'advanced';
+type Tab = 'appearance' | 'email' | 'account' | 'identities' | 'vacation' | 'calendar' | 'filters' | 'templates' | 'folders' | 'keywords' | 'advanced';
 
 export default function SettingsPage() {
   const router = useRouter();
@@ -53,6 +54,7 @@ export default function SettingsPage() {
     ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters') }] : []),
     { id: 'templates', label: t('tabs.templates') },
     { id: 'folders', label: t('tabs.folders') },
+    { id: 'keywords', label: t('tabs.keywords') },
     { id: 'advanced', label: t('tabs.advanced') },
   ];
 
@@ -76,6 +78,7 @@ export default function SettingsPage() {
       {activeTab === 'filters' && <FilterSettings />}
       {activeTab === 'templates' && <TemplateSettings />}
       {activeTab === 'folders' && <FolderSettings />}
+      {activeTab === 'keywords' && <KeywordSettings />}
       {activeTab === 'advanced' && <AdvancedSettings />}
     </>
   );