feat: improve visualization of tags

Previously tags where very much focused on color coding email and less about
adding additional information. They were also visualized in different ways in
different locations.

This commit gets rid of all "Color-coding" references, aligns visualization of
the tags across the whole project and tries to improve user experience of using
tags in general.

A search box is shown in the tagging control so the user can quickly search for
a tag if they have a huge (more than 10) amount of tags.

components/email/__tests__/tag-picker.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { TagPicker } from '../tag-picker';
+import { useSettingsStore, type KeywordDefinition } from '@/stores/settings-store';
+
+const TAGS: KeywordDefinition[] = [
+  { id: 'work', label: 'Work', color: 'blue' },
+  { id: 'work/clients', label: 'Clients', color: 'green' },
+  { id: 'work/clients/acme', label: 'Acme', color: 'red' },
+  { id: 'personal', label: 'Personal', color: 'purple' },
+];
+
+/** Ten tags is the point at which the filter box appears. */
+const MANY_TAGS: KeywordDefinition[] = Array.from({ length: 12 }, (_, i) => ({
+  id: `tag-${i}`,
+  label: i === 0 ? 'Invoices' : `Tag ${i}`,
+  color: 'blue',
+}));
+
+describe('TagPicker', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({ emailKeywords: TAGS, nestedTags: true });
+  });
+
+  it('names a nested tag by its own label, not the whole path', () => {
+    render(<TagPicker selectedIds={[]} onToggle={() => {}} />);
+
+    // The tree conveys the hierarchy, so a child needs only its own name.
+    expect(screen.getByText('Clients')).toBeInTheDocument();
+    expect(screen.getByText('Acme')).toBeInTheDocument();
+    expect(screen.queryByText('Work/Clients')).not.toBeInTheDocument();
+  });
+
+  it('indents each level below its parent', () => {
+    const { container } = render(<TagPicker selectedIds={[]} onToggle={() => {}} />);
+    const acme = screen.getByText('Acme');
+
+    // Two levels down: two nested indent wrappers between it and the list.
+    const indents = acme.closest('.ps-4')?.parentElement?.closest('.ps-4');
+    expect(indents).not.toBeNull();
+    expect(container.querySelectorAll('.ps-4').length).toBe(2);
+  });
+
+  it('marks the applied tags and reports toggles by id', () => {
+    const onToggle = vi.fn();
+    render(<TagPicker selectedIds={['work/clients']} onToggle={onToggle} />);
+
+    const row = screen.getByText('Clients').closest('button')!;
+    expect(row).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByText('Work').closest('button')).toHaveAttribute('aria-checked', 'false');
+
+    fireEvent.click(row);
+    expect(onToggle).toHaveBeenCalledWith('work/clients');
+  });
+
+  it('offers the clear-all row only while something is applied', () => {
+    const { rerender } = render(<TagPicker selectedIds={[]} onToggle={() => {}} onClearAll={() => {}} />);
+    expect(screen.queryByText('remove_tag')).not.toBeInTheDocument();
+
+    rerender(<TagPicker selectedIds={['work']} onToggle={() => {}} onClearAll={() => {}} />);
+    expect(screen.getByText('remove_tag')).toBeInTheDocument();
+  });
+
+  it('hides the filter box until the list is long enough to need one', () => {
+    render(<TagPicker selectedIds={[]} onToggle={() => {}} />);
+    expect(screen.queryByLabelText('tag_filter_placeholder')).not.toBeInTheDocument();
+
+    useSettingsStore.setState({ emailKeywords: MANY_TAGS });
+    render(<TagPicker selectedIds={[]} onToggle={() => {}} />);
+    expect(screen.getAllByLabelText('tag_filter_placeholder').length).toBeGreaterThan(0);
+  });
+
+  it('flattens to matches while filtering, and says so when there are none', () => {
+    useSettingsStore.setState({ emailKeywords: MANY_TAGS });
+    const { container } = render(<TagPicker selectedIds={[]} onToggle={() => {}} />);
+
+    fireEvent.change(screen.getByLabelText('tag_filter_placeholder'), { target: { value: 'invo' } });
+    expect(within(container).getByText('Invoices')).toBeInTheDocument();
+    expect(within(container).queryByText('Tag 5')).not.toBeInTheDocument();
+
+    fireEvent.change(screen.getByLabelText('tag_filter_placeholder'), { target: { value: 'zzz' } });
+    expect(within(container).getByText('tag_no_matches')).toBeInTheDocument();
+  });
+
+  it('matches the full path, so a child is reachable by its parent name', () => {
+    useSettingsStore.setState({ emailKeywords: [...TAGS, ...MANY_TAGS] });
+    const { container } = render(<TagPicker selectedIds={[]} onToggle={() => {}} />);
+
+    fireEvent.change(screen.getByLabelText('tag_filter_placeholder'), { target: { value: 'work/cli' } });
+    // Filtered rows are flat, so they carry the whole path.
+    expect(within(container).getByText('Work/Clients')).toBeInTheDocument();
+  });
+
+  it('lists tags flat when nesting is off', () => {
+    useSettingsStore.setState({ nestedTags: false });
+    const { container } = render(<TagPicker selectedIds={[]} onToggle={() => {}} />);
+
+    expect(container.querySelectorAll('.ps-4').length).toBe(0);
+    expect(screen.getByText('Clients')).toBeInTheDocument();
+  });
+});

components/email/__tests__/thread-list-item.test.tsx

@@ -118,6 +118,67 @@ describe('ThreadListItem tag badge', () => {
   });
 });
 
+describe('ThreadListItem multi-message thread', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({
+      emailKeywords: [...DEFAULT_KEYWORDS],
+      showPreview: false,
+      mailLayout: 'split',
+    });
+    useEmailStore.setState({
+      selectedEmailIds: new Set<string>(),
+      selectedMailbox: 'inbox',
+    });
+  });
+
+  function renderThread(emails: Email[], expanded = false) {
+    const [thread] = groupEmailsByThread(emails);
+    return render(
+      <ThreadListItem
+        thread={thread}
+        isExpanded={expanded}
+        expandedEmails={expanded ? emails : undefined}
+        onToggleExpand={() => {}}
+        onEmailSelect={() => {}}
+      />,
+    );
+  }
+
+  it('carries the tags of every message, not just the first', () => {
+    // A collapsed row stands in for the whole thread, so a tag applied only to
+    // a later message still has to surface.
+    renderThread([
+      makeEmail({ id: 'e1', threadId: 't1', keywords: { '$label:red': true } }),
+      makeEmail({ id: 'e2', threadId: 't1', keywords: { '$label:blue': true } }),
+    ]);
+
+    expect(screen.getByText('Red')).toBeInTheDocument();
+    expect(screen.getByText('Blue')).toBeInTheDocument();
+  });
+
+  it('names a tag shared by several messages once', () => {
+    renderThread([
+      makeEmail({ id: 'e1', threadId: 't1', keywords: { '$label:red': true } }),
+      makeEmail({ id: 'e2', threadId: 't1', keywords: { '$label:red': true } }),
+    ]);
+
+    expect(screen.getAllByText('Red')).toHaveLength(1);
+  });
+
+  it('shows each message its own tags once the thread is expanded', () => {
+    renderThread(
+      [
+        makeEmail({ id: 'e1', threadId: 't1', keywords: { '$label:red': true } }),
+        makeEmail({ id: 'e2', threadId: 't1', keywords: { '$label:blue': true } }),
+      ],
+      true,
+    );
+
+    // Once on the header and once on the message that carries it.
+    expect(screen.getAllByText('Red').length).toBeGreaterThan(1);
+  });
+});
+
 describe('ThreadListItem row content', () => {
   beforeEach(() => {
     useSettingsStore.setState({

components/email/email-context-menu.tsx

@@ -23,8 +23,6 @@ import {
   Archive,
   FolderInput,
   Tag,
-  X,
-  Check,
   Inbox,
   Send,
   File,
@@ -36,11 +34,9 @@ import {
   XCircle,
   Paperclip,
 } from "lucide-react";
-import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
+import { buildMailboxTree, MailboxNode } from "@/lib/utils";
 import { localizeMailboxName } from "@/lib/mailbox-label";
-import { useKeywordFormat } from "@/hooks/use-keyword-format";
-import { TagOptionLabel } from "./tag-option-label";
-import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
+import { TagPicker } from "./tag-picker";
 
 interface Position {
   x: number;
@@ -68,7 +64,7 @@ interface EmailContextMenuProps {
   onTogglePinned?: () => void;
   onDelete?: () => void;
   onArchive?: () => void;
-  onSetColorTag?: (color: string | null) => void;
+  onSetTag?: (tagId: string | null) => void;
   onMoveToMailbox?: (mailboxId: string) => void;
   onMarkAsSpam?: () => void;
   onUndoSpam?: () => void;
@@ -103,8 +99,8 @@ const getMailboxIcon = (role?: string) => {
   }
 };
 
-// Get all active label/color tag IDs from email keywords
-const getCurrentColors = (keywords: Record<string, boolean> | undefined): string[] => {
+/** Every tag id set on a message, reading the current prefix and the legacy one. */
+const getCurrentTagIds = (keywords: Record<string, boolean> | undefined): string[] => {
   if (!keywords) return [];
   const tags: string[] = [];
   for (const key of Object.keys(keywords)) {
@@ -137,7 +133,7 @@ export function EmailContextMenu({
   onTogglePinned,
   onDelete,
   onArchive,
-  onSetColorTag,
+  onSetTag,
   onMoveToMailbox,
   onMarkAsSpam,
   onUndoSpam,
@@ -154,15 +150,12 @@ export function EmailContextMenu({
 }: EmailContextMenuProps) {
   const t = useTranslations("context_menu");
   const tSidebar = useTranslations("sidebar");
-  const _tColor = useTranslations("email_viewer.color_tag");
   const tEmailViewer = useTranslations("email_viewer");
-  const emailKeywords = useSettingsStore((state) => state.emailKeywords);
-  const { tagNameCandidates } = useKeywordFormat();
   const isUnread = !email.keywords?.$seen;
   const isStarred = email.keywords?.$flagged;
   const isPinned = email.keywords?.['$pinned'] === true;
   const isDraft = email.keywords?.['$draft'] === true;
-  const currentColors = getCurrentColors(email.keywords);
+  const currentTagIds = getCurrentTagIds(email.keywords);
   const showBatchActions = isMultiSelect && selectedCount > 1;
   const isInJunkFolder = currentMailboxRole === 'junk';
   // Marking your own outgoing mail as spam makes no sense - hide the action
@@ -171,13 +164,6 @@ export function EmailContextMenu({
   const isScheduled = email.isScheduled === true;
   const canCancelScheduled = isScheduled && email.scheduledUndoStatus === 'pending';
 
-  // Build color options from keyword definitions in settings
-  const colorOptions = emailKeywords.map((kw) => ({
-    candidates: tagNameCandidates(kw.id),
-    value: kw.id,
-    color: KEYWORD_PALETTE[kw.color]?.dot || "bg-gray-500",
-  }));
-
   // Build mailbox tree for move-to submenu with proper hierarchy
   const moveTargetIds = new Set(
     mailboxes
@@ -383,39 +369,14 @@ export function EmailContextMenu({
 
       {/* Set tag submenu - only for single email */}
       {!showBatchActions && (
-        <ContextMenuSubMenu icon={Tag} label={t("color_tag")}>
-          <div className="max-w-[18rem]">
-            {colorOptions.map((option) => {
-              const isActive = currentColors.includes(option.value);
-              return (
-                <button
-                  key={option.value}
-                  role="menuitem"
-                  onClick={() => handleAction(() => onSetColorTag?.(option.value))}
-                  className={cn(
-                    "w-full px-3 py-1.5 text-sm text-start flex items-center gap-2 hover:bg-muted cursor-pointer",
-                    isActive && "bg-accent font-medium"
-                  )}
-                >
-                  <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                  <TagOptionLabel candidates={option.candidates} />
-                  {isActive && (
-                    <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
-                  )}
-                </button>
-              );
-            })}
+        <ContextMenuSubMenu icon={Tag} label={t("tag")}>
+          <div className="w-56 max-w-[18rem]">
+            <TagPicker
+              selectedIds={currentTagIds}
+              onToggle={(tagId) => handleAction(() => onSetTag?.(tagId))}
+              onClearAll={() => handleAction(() => onSetTag?.(null))}
+            />
           </div>
-          {currentColors.length > 0 && (
-            <>
-              <ContextMenuSeparator />
-              <ContextMenuItem
-                icon={X}
-                label={t("remove_color")}
-                onClick={() => handleAction(() => onSetColorTag?.(null))}
-              />
-            </>
-          )}
         </ContextMenuSubMenu>
       )}
 

components/email/email-hover-actions.tsx

@@ -15,7 +15,7 @@ interface EmailHoverActionsProps {
   onMarkAsRead?: (read: boolean) => void;
   onDelete?: () => void;
   onArchive?: () => void;
-  onSetColorTag?: (color: string | null) => void;
+  onSetTag?: (tagId: string | null) => void;
   onMarkAsSpam?: () => void;
   // When the email lives in a junk folder (incl. the aggregate "All Junk" view)
   // the spam quick-action flips to "not spam".
@@ -76,7 +76,7 @@ export function EmailHoverActions({
   onMarkAsRead,
   onDelete,
   onArchive,
-  onSetColorTag,
+  onSetTag,
   onMarkAsSpam,
   isInJunk = false,
   onUndoSpam,
@@ -112,7 +112,7 @@ export function EmailHoverActions({
         onArchive?.();
         break;
       case "tag":
-        onSetColorTag?.(null);
+        onSetTag?.(null);
         break;
       case "spam":
         if (isInJunk) onUndoSpam?.();

components/email/email-list.tsx

@@ -17,6 +17,7 @@ import { useContextMenu } from "@/hooks/use-context-menu";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
 import { useTranslations } from "next-intl";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { TagDisplayContext, useMeasuredTagDisplay } from "@/hooks/use-tag-display";
 import { SearchChips } from "@/components/search/search-chips";
 import { isFilterEmpty, DEFAULT_SEARCH_FILTERS } from "@/lib/jmap/search-utils";
 
@@ -39,7 +40,7 @@ interface EmailListProps {
   onTogglePinned?: (email: Email) => void;
   onDelete?: (email: Email) => void;
   onArchive?: (email: Email) => void;
-  onSetColorTag?: (emailId: string, color: string | null) => void;
+  onSetTag?: (emailId: string, tagId: string | null) => void;
   onMoveToMailbox?: (emailId: string, mailboxId: string) => void;
   onMarkAsSpam?: (email: Email) => void;
   onUndoSpam?: (email: Email) => void;
@@ -70,7 +71,7 @@ export function EmailList({
   onTogglePinned,
   onDelete,
   onArchive,
-  onSetColorTag,
+  onSetTag,
   onMarkAsSpam,
   onUndoSpam,
   onMoveToMailbox,
@@ -136,6 +137,8 @@ export function EmailList({
 
   const [isProcessing, setIsProcessing] = useState(false);
   const parentRef = useRef<HTMLDivElement>(null);
+  // One tag treatment for the whole list, measured from the scroll container.
+  const tagDisplay = useMeasuredTagDisplay(parentRef);
   const density = useSettingsStore((state) => state.density);
   const showPreview = useSettingsStore((state) => state.showPreview);
   const mailLayout = useSettingsStore((state) => state.mailLayout);
@@ -332,6 +335,7 @@ export function EmailList({
   }, [density, isFocusedMailLayout, showPreview]);
 
   return (
+    <TagDisplayContext.Provider value={tagDisplay}>
     <div className={cn("flex flex-col min-h-0", className)}>
       {/* Batch Actions Toolbar */}
       <div
@@ -543,7 +547,7 @@ export function EmailList({
                       onMarkAsRead={onMarkAsRead ? (email, read) => onMarkAsRead(email, read) : undefined}
                       onDelete={onDelete ? (email) => onDelete(email) : undefined}
                       onArchive={onArchive ? (email) => onArchive(email) : undefined}
-                      onSetColorTag={onSetColorTag}
+                      onSetTag={onSetTag}
                       onMarkAsSpam={onMarkAsSpam ? (email) => onMarkAsSpam(email) : undefined}
                       onUndoSpam={onUndoSpam ? (email) => onUndoSpam(email) : undefined}
                     />
@@ -591,7 +595,7 @@ export function EmailList({
           onTogglePinned={onTogglePinned ? () => onTogglePinned(contextMenu.data!) : undefined}
           onDelete={() => onDelete?.(contextMenu.data!)}
           onArchive={() => onArchive?.(contextMenu.data!)}
-          onSetColorTag={(color) => onSetColorTag?.(contextMenu.data!.id, color)}
+          onSetTag={(color) => onSetTag?.(contextMenu.data!.id, color)}
           onMoveToMailbox={(mailboxId) => onMoveToMailbox?.(contextMenu.data!.id, mailboxId)}
           onMarkAsSpam={() => onMarkAsSpam?.(contextMenu.data!)}
           onUndoSpam={() => onUndoSpam?.(contextMenu.data!)}
@@ -645,5 +649,6 @@ export function EmailList({
 
       <ConfirmDialog {...confirmDialogProps} />
     </div>
+    </TagDisplayContext.Provider>
   );
 }

components/email/email-viewer.tsx

@@ -12,7 +12,9 @@ import { withBasePath } from "@/lib/browser-navigation";
 import { Button } from "@/components/ui/button";
 import { Avatar } from "@/components/ui/avatar";
 import { formatFileSize, cn, buildMailboxTree, MailboxNode, formatDateTime, generateUUID } from "@/lib/utils";
-import { TagOptionLabel } from "./tag-option-label";
+import { TagBadge } from "./tag-badge";
+import { TagPicker } from "./tag-picker";
+import { useMeasuredTagDisplay } from "@/hooks/use-tag-display";
 import { useKeywordFormat } from "@/hooks/use-keyword-format";
 import { getSecurityStatus, extractListHeaders } from "@/lib/email-headers";
 import { emailToReadView } from "@/lib/plugin-projection";
@@ -76,7 +78,7 @@ import {
 import { useTranslations } from "next-intl";
 import { useRouter } from "@/i18n/navigation";
 import type { Attachment as PostalMimeAttachment } from 'postal-mime';
-import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
+import { useSettingsStore } from "@/stores/settings-store";
 import { useUIStore } from "@/stores/ui-store";
 import { useContactStore, getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
 import { toast } from "@/stores/toast-store";
@@ -117,7 +119,7 @@ interface EmailViewerProps {
   onArchive?: () => void;
   onToggleStar?: () => void;
   onMarkAsRead?: (emailId: string, read: boolean) => void;
-  onSetColorTag?: (emailId: string, color: string | null) => void;
+  onSetTag?: (emailId: string, tagId: string | null) => void;
   onDownloadAttachment?: (blobId: string, name: string, type?: string, forceDownload?: boolean) => void;
   onQuickReply?: (body: string) => Promise<void>;
   onMarkAsSpam?: () => void;
@@ -202,7 +204,7 @@ const getAttachmentDisplayName = (name: string | null | undefined, mimeType?: st
   return 'Attachment';
 };
 
-const getCurrentColors = (keywords: Record<string, boolean> | undefined): string[] => {
+const getCurrentTagIds = (keywords: Record<string, boolean> | undefined): string[] => {
   if (!keywords) return [];
   const tags: string[] = [];
   for (const key of Object.keys(keywords)) {
@@ -630,7 +632,7 @@ export function EmailViewer({
   onArchive,
   onToggleStar,
   onMarkAsRead,
-  onSetColorTag,
+  onSetTag,
   onDownloadAttachment,
   onQuickReply,
   onMarkAsSpam,
@@ -669,7 +671,7 @@ export function EmailViewer({
   const isTrustedAddressBookSender = useContactStore((state) => state.isTrustedAddressBookSender);
   const addToTrustedSendersBook = useContactStore((state) => state.addToTrustedSendersBook);
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
-  const { tagName, tagNameCandidates } = useKeywordFormat();
+  const { sortTagIds, tagColor } = useKeywordFormat();
   const toolbarPosition = useSettingsStore((state) => state.toolbarPosition);
   const showToolbarLabels = useSettingsStore((state) => state.showToolbarLabels);
   const mailLayout = useSettingsStore((state) => state.mailLayout);
@@ -712,12 +714,6 @@ export function EmailViewer({
   const isScheduled = email?.isScheduled === true;
   const canCancelScheduled = isScheduled && email?.scheduledUndoStatus === 'pending';
 
-  // Color options for email tags (from user-defined keyword settings)
-  const colorOptions = emailKeywords.map((kw) => ({
-    candidates: tagNameCandidates(kw.id),
-    value: kw.id,
-    color: KEYWORD_PALETTE[kw.color]?.dot || 'bg-gray-500',
-  }));
 
   // Tablet list visibility
   const { isTablet, isMobile } = useDeviceDetection();
@@ -822,8 +818,13 @@ export function EmailViewer({
   const moveMenuRef = useRef<HTMLDivElement>(null);
   const toolbarRef = useRef<HTMLDivElement>(null);
   const [hiddenPriorities, setHiddenPriorities] = useState<Set<number>>(new Set());
-  const currentColors = getCurrentColors(email?.keywords);
-  const currentColor = currentColors[0] ?? null;
+  const currentTagIds = getCurrentTagIds(email?.keywords);
+  const sortedTagIds = sortTagIds(currentTagIds);
+  // The header spans the reading pane, so it measures its own width rather than
+  // inheriting the message list's answer.
+  const headerTagsRef = useRef<HTMLDivElement>(null);
+  const { variant: headerTagVariant } = useMeasuredTagDisplay(headerTagsRef);
+  const currentColor = currentTagIds[0] ?? null;
 
   // Crypto-plugin rendered body (S/MIME, PGP, …) — populated by the generic
   // onRenderEmailBody hook. Verification/decryption status UI is provided by the
@@ -1021,7 +1022,7 @@ export function EmailViewer({
     showToolbarLabels,
     isLoading,
     moveTree.length,
-    colorOptions.length,
+    emailKeywords.length,
     currentColor,
     isInJunkFolder,
     isTablet,
@@ -3000,65 +3001,19 @@ export function EmailViewer({
         <div ref={tagMenuRef} className="relative">
           <button
             onClick={() => { setTagMenuOpen(!tagMenuOpen); setMoreMenuOpen(false); setMoveMenuOpen(false); }}
-            className={cn(
-              "h-8 rounded hover:bg-muted flex items-center gap-1.5 px-2",
-              currentColors.length > 0 && "bg-muted/50"
-            )}
-            title={t('set_color')}
+            className="h-8 rounded hover:bg-muted flex items-center gap-1.5 px-2"
+            title={t('set_tag')}
           >
-            {currentColors.length > 0 ? (
-              <>
-                <span className="flex items-center gap-0.5">
-                  {currentColors.slice(0, 3).map((tagId) => {
-                    const kw = emailKeywords.find(k => k.id === tagId) ?? { id: tagId, label: tagId, color: 'gray' };
-                    return <span key={tagId} className={cn("w-3 h-3 rounded-full", KEYWORD_PALETTE[kw.color]?.dot || 'bg-gray-500')} />;
-                  })}
-                </span>
-                {showToolbarLabels && currentColors.length === 1 && (
-                  <TagOptionLabel
-                    candidates={tagNameCandidates(currentColors[0])}
-                    className="max-w-40 text-xs font-medium text-foreground"
-                  />
-                )}
-              </>
-            ) : (
-              <>
-                <Tag className="w-4 h-4 text-muted-foreground" />
-                {showToolbarLabels && <span className="text-xs text-muted-foreground">{t('tag')}</span>}
-              </>
-            )}
+            <Tag className="w-4 h-4" />
+            {showToolbarLabels && <span className="text-[10px] leading-tight sm:text-sm">{t('tag')}</span>}
           </button>
           {tagMenuOpen && (
-            <div className="absolute end-0 top-full mt-1 py-1 w-40 bg-background rounded-lg shadow-lg border border-border z-10">
-              {colorOptions.map((option) => {
-                const isActive = currentColors.includes(option.value);
-                return (
-                  <button
-                    key={option.value}
-                    onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setTagMenuOpen(false); }}
-                    className={cn(
-                      "w-full px-3 py-1.5 text-sm text-start hover:bg-muted flex items-center gap-2",
-                      isActive && "bg-accent font-medium"
-                    )}
-                  >
-                    <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                    <TagOptionLabel candidates={option.candidates} />
-                    {isActive && <Check className="w-3 h-3 ms-auto flex-shrink-0 text-foreground" />}
-                  </button>
-                );
-              })}
-              {currentColors.length > 0 && (
-                <>
-                  <div className="h-px bg-border my-1" />
-                  <button
-                    onClick={() => { if (email) onSetColorTag?.(email.id, null); setTagMenuOpen(false); }}
-                    className="w-full px-3 py-1.5 text-sm text-start hover:bg-muted flex items-center gap-2 text-muted-foreground"
-                  >
-                    <X className="w-3 h-3 flex-shrink-0" />
-                    <span>{t('remove_color')}</span>
-                  </button>
-                </>
-              )}
+            <div className="absolute end-0 top-full mt-1 py-1 w-56 bg-background rounded-md shadow-lg border border-border z-10">
+              <TagPicker
+                selectedIds={currentTagIds}
+                onToggle={(tagId) => { if (email) onSetTag?.(email.id, tagId); setTagMenuOpen(false); }}
+                onClearAll={() => { if (email) onSetTag?.(email.id, null); setTagMenuOpen(false); }}
+              />
             </div>
           )}
         </div>
@@ -3250,7 +3205,7 @@ export function EmailViewer({
                 </div>
               )}
               {/* Overflow: tag - submenu */}
-              {colorOptions.length > 0 && (
+              {emailKeywords.length > 0 && (
                 <div className={cn("relative", hiddenPriorities.has(6) ? "" : "sm:hidden")}
                   onMouseEnter={() => setMoreMenuSub('tag')}
                   onMouseLeave={() => setMoreMenuSub(null)}
@@ -3264,36 +3219,12 @@ export function EmailViewer({
                     <ChevronRight className="w-3 h-3 text-muted-foreground" />
                   </button>
                   {moreMenuSub === 'tag' && (
-                    <div className="absolute end-full top-0 me-1 py-1 w-40 bg-background rounded-md shadow-lg border border-border z-10">
-                      {colorOptions.map((option) => {
-                        const isActive = currentColors.includes(option.value);
-                        return (
-                          <button
-                            key={option.value}
-                            onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setMoreMenuOpen(false); setMoreMenuSub(null); }}
-                            className={cn(
-                              "w-full px-3 py-1.5 text-sm text-start hover:bg-muted flex items-center gap-2",
-                              isActive && "bg-accent font-medium"
-                            )}
-                          >
-                            <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                            <TagOptionLabel candidates={option.candidates} />
-                            {isActive && <Check className="w-3 h-3 ms-auto flex-shrink-0 text-foreground" />}
-                          </button>
-                        );
-                      })}
-                      {currentColors.length > 0 && (
-                        <>
-                          <div className="h-px bg-border my-1" />
-                          <button
-                            onClick={() => { if (email) onSetColorTag?.(email.id, null); setMoreMenuOpen(false); setMoreMenuSub(null); }}
-                            className="w-full px-3 py-1.5 text-sm text-start hover:bg-muted flex items-center gap-2 text-muted-foreground"
-                          >
-                            <X className="w-3 h-3 flex-shrink-0" />
-                            <span>{t('remove_color')}</span>
-                          </button>
-                        </>
-                      )}
+                    <div className="absolute end-full top-0 me-1 py-1 w-56 bg-background rounded-md shadow-lg border border-border z-10">
+                      <TagPicker
+                        selectedIds={currentTagIds}
+                        onToggle={(tagId) => { if (email) onSetTag?.(email.id, tagId); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+                        onClearAll={() => { if (email) onSetTag?.(email.id, null); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+                      />
                     </div>
                   )}
                 </div>
@@ -3437,19 +3368,21 @@ export function EmailViewer({
                 {isStarred ? t('tooltips.unstar') : t('tooltips.star')}
               </button>
               {/* Tag (opens sub-view) */}
-              {colorOptions.length > 0 && (
+              {emailKeywords.length > 0 && (
                 <button
                   onClick={() => setMoreMenuSub('tag')}
                   className="w-full px-4 py-3 min-h-[44px] text-sm text-start hover:bg-muted text-foreground flex items-center gap-3"
                 >
                   <Tag className="w-5 h-5" />
                   <span className="flex-1">{t('tag')}</span>
-                  {currentColors.length > 0 && (
+                  {currentTagIds.length > 0 && (
                     <div className="flex -space-x-1 me-1">
-                      {currentColors.slice(0, 3).map((c) => {
-                        const opt = colorOptions.find((o) => o.value === c);
-                        return opt ? <span key={c} className={cn("w-3 h-3 rounded-full border border-background", opt.color)} /> : null;
-                      })}
+                      {sortedTagIds.slice(0, 3).map((tagId) => (
+                        <span
+                          key={tagId}
+                          className={cn("w-3 h-3 rounded-full border border-background", tagColor(tagId).dot)}
+                        />
+                      ))}
                     </div>
                   )}
                   <ChevronRight className="w-4 h-4 text-muted-foreground" />
@@ -3545,35 +3478,13 @@ export function EmailViewer({
             };
             return renderMobileNodes(moveTree);
           })()}
-          {moreMenuSub === 'tag' && colorOptions.length > 0 && (
-            <>
-              {colorOptions.map((option) => {
-                const isActive = currentColors.includes(option.value);
-                return (
-                  <button
-                    key={option.value}
-                    onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setMoreMenuOpen(false); setMoreMenuSub(null); }}
-                    className={cn(
-                      "w-full px-4 py-2.5 min-h-[44px] text-sm text-start hover:bg-muted flex items-center gap-3",
-                      isActive && "bg-accent font-medium"
-                    )}
-                  >
-                    <span className={cn("w-3.5 h-3.5 rounded-full flex-shrink-0", option.color)} />
-                    <TagOptionLabel candidates={option.candidates} />
-                    {isActive && <Check className="w-4 h-4 ms-auto flex-shrink-0 text-foreground" />}
-                  </button>
-                );
-              })}
-              {currentColors.length > 0 && (
-                <button
-                  onClick={() => { if (email) onSetColorTag?.(email.id, null); setMoreMenuOpen(false); setMoreMenuSub(null); }}
-                  className="w-full px-4 py-2.5 min-h-[44px] text-sm text-start hover:bg-muted flex items-center gap-3 text-muted-foreground"
-                >
-                  <X className="w-4 h-4 flex-shrink-0" />
-                  <span>{t('remove_color')}</span>
-                </button>
-              )}
-            </>
+          {moreMenuSub === 'tag' && (
+            <TagPicker
+              touch
+              selectedIds={currentTagIds}
+              onToggle={(tagId) => { if (email) onSetTag?.(email.id, tagId); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+              onClearAll={() => { if (email) onSetTag?.(email.id, null); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+            />
           )}
         </div>
       </div>
@@ -3631,28 +3542,19 @@ export function EmailViewer({
                     )} />
                   </button>
                 )}
-                {/* Color tag dots */}
-                {currentColors.length > 0 && (
-                  <span className="flex items-center gap-0.5">
-                    {currentColors.map((tagId) => {
-                      const kw = emailKeywords.find(k => k.id === tagId) ?? { id: tagId, label: tagId, color: 'gray' };
-                      const dotClass = KEYWORD_PALETTE[kw.color]?.dot || 'bg-gray-500';
-                      return (
-                        <span
-                          key={tagId}
-                          className={cn("w-2.5 h-2.5 rounded-full shrink-0", dotClass)}
-                          title={tagName(tagId)}
-                        />
-                      );
-                    })}
-                  </span>
-                )}
                 {isImportant && (
                   <span className="px-1.5 lg:px-2 py-0.5 bg-warning/15 text-warning rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0 self-center">
                     {t('important')}
                   </span>
                 )}
               </div>
+              {sortedTagIds.length > 0 && (
+                <div ref={headerTagsRef} className="mt-1.5 flex flex-wrap items-center gap-1">
+                  {sortedTagIds.map((tagId) => (
+                    <TagBadge key={tagId} tagId={tagId} variant={headerTagVariant} />
+                  ))}
+                </div>
+              )}
             </div>
             {/* Date/time on the right of subject row - hidden on mobile, shown next to sender */}
             <div className="hidden sm:block flex-shrink-0 text-end">

components/email/tag-badge.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useKeywordFormat } from "@/hooks/use-keyword-format";
+import { useShortenedText } from "@/hooks/use-shortened-text";
+
+/**
+ * How much room the surface has for a tag.
+ * - `badge` names the tag; `dot` only identifies it by colour.
+ */
+export type TagBadgeVariant = "badge" | "dot";
+
+/**
+ * The lozenge shape, shared so anything standing next to a tag lines up with
+ * it rather than approximating its padding and text size.
+ */
+export const TAG_LOZENGE_CLASS =
+  "inline-flex min-w-0 shrink-0 items-center rounded-full px-2 py-0.5 text-[11px] font-medium";
+
+/**
+ * The row a group of tags sits in. Using it for neighbouring lozenges too keeps
+ * the spacing between them the same as the spacing within them - a wider gap on
+ * one side is what makes a neighbour look indented.
+ */
+export const TAG_GROUP_CLASS = "flex shrink-0 items-center gap-1";
+
+/**
+ * A tag, drawn the one way tags are drawn.
+ *
+ * The lozenge carries the colour in its border and text rather than pairing a
+ * swatch with plain text: the name is the tag, and the colour is how you pick
+ * it out of a row at a glance. That also matches every other coloured pill in
+ * the app, all of which set a text colour alongside the background.
+ *
+ * A deep name shortens to fit its own box (`Work/../Acme`) before the browser
+ * clips it, so the outermost and innermost levels survive.
+ */
+export function TagBadge({
+  tagId,
+  variant,
+  className,
+}: {
+  tagId: string;
+  variant: TagBadgeVariant;
+  className?: string;
+}) {
+  const { tagName, tagNameCandidates, tagColor } = useKeywordFormat();
+  const [labelRef, shortenedName] = useShortenedText(tagNameCandidates(tagId));
+  const color = tagColor(tagId);
+  const name = tagName(tagId);
+
+  if (variant === "dot") {
+    return (
+      <span
+        className={cn("h-2.5 w-2.5 shrink-0 rounded-full", color.dot, className)}
+        title={name}
+        aria-label={name}
+      />
+    );
+  }
+
+  return (
+    <span
+      ref={labelRef}
+      className={cn(
+        TAG_LOZENGE_CLASS,
+        "max-w-[12rem] truncate border",
+        color.fill,
+        color.border,
+        color.text,
+        className,
+      )}
+      title={name}
+    >
+      {shortenedName}
+    </span>
+  );
+}

components/email/tag-option-label.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { useShortenedText } from "@/hooks/use-shortened-text";
-
-/**
- * A tag name inside one of the tag pickers, shortened to what that picker has
- * room for.
- *
- * The pickers differ in width - a narrow popover, a context submenu, a
- * full-width mobile sheet - so each row measures itself instead of sharing one
- * cap. `candidates` runs longest first (see `keywordRenderings`); the full name
- * stays reachable through the tooltip.
- */
-export function TagOptionLabel({
-  candidates,
-  className,
-}: {
-  candidates: string[];
-  className?: string;
-}) {
-  const [labelRef, shortenedLabel] = useShortenedText(candidates);
-
-  return (
-    <span ref={labelRef} className={cn("min-w-0 truncate", className)} title={candidates[0]}>
-      {shortenedLabel}
-    </span>
-  );
-}

components/email/tag-picker.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Check, Search, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useSettingsStore } from "@/stores/settings-store";
+import { buildKeywordTree, type KeywordNode } from "@/lib/keyword-nesting";
+import { useKeywordFormat } from "@/hooks/use-keyword-format";
+
+/** Below this many tags a filter box costs more room than it saves. */
+const SEARCH_THRESHOLD = 10;
+
+/**
+ * The list of tags to apply to a message.
+ *
+ * Shared by all four places one appears - the toolbar popover, the overflow
+ * flyout, the mobile sheet and the context menu - because they had drifted into
+ * four different dot sizes, check alignments and separators, and only one of
+ * them capped its height.
+ *
+ * Nested tags are drawn as a tree rather than repeating the parent's name on
+ * every child. Filtering flattens it: with a query the hierarchy is noise, and
+ * the full path is what gets matched.
+ */
+export function TagPicker({
+  selectedIds,
+  onToggle,
+  onClearAll,
+  touch = false,
+}: {
+  selectedIds: string[];
+  onToggle: (tagId: string) => void;
+  onClearAll?: () => void;
+  /** Larger hit areas for the mobile sheet. */
+  touch?: boolean;
+}) {
+  const t = useTranslations("email_viewer");
+  const keywords = useSettingsStore((state) => state.emailKeywords);
+  const nestedTags = useSettingsStore((state) => state.nestedTags);
+  const { tagName, tagColor } = useKeywordFormat();
+  const [query, setQuery] = useState("");
+
+  const trimmedQuery = query.trim().toLowerCase();
+  const showSearch = keywords.length >= SEARCH_THRESHOLD;
+
+  const matches = useMemo(
+    () =>
+      trimmedQuery
+        ? keywords.filter((keyword) => tagName(keyword.id).toLowerCase().includes(trimmedQuery))
+        : [],
+    // `tagName` is rebuilt whenever the definitions or the nesting setting change.
+    [keywords, trimmedQuery, tagName],
+  );
+
+  const tree = useMemo(
+    () => (nestedTags ? buildKeywordTree(keywords) : keywords.map((k) => ({ ...k, children: [], depth: 0 }))),
+    [keywords, nestedTags],
+  );
+
+  const rowClass = cn(
+    "w-full text-start flex items-center gap-2 hover:bg-muted cursor-pointer",
+    touch ? "px-4 py-2.5 min-h-[44px] text-sm gap-3" : "px-3 py-1.5 text-sm",
+  );
+  const dotClass = touch ? "w-3.5 h-3.5" : "w-3 h-3";
+  const checkClass = touch ? "w-4 h-4" : "w-3.5 h-3.5";
+
+  const renderRow = (id: string, label: string) => {
+    const isActive = selectedIds.includes(id);
+    return (
+      <button
+        key={id}
+        type="button"
+        role="menuitemcheckbox"
+        aria-checked={isActive}
+        onClick={() => onToggle(id)}
+        className={cn(rowClass, isActive && "bg-accent font-medium")}
+        title={tagName(id)}
+      >
+        <span className={cn("rounded-full flex-shrink-0", dotClass, tagColor(id).dot)} />
+        <span className="flex-1 min-w-0 truncate">{label}</span>
+        {isActive && <Check className={cn("ms-auto flex-shrink-0 text-foreground", checkClass)} />}
+      </button>
+    );
+  };
+
+  const renderBranch = (nodes: KeywordNode[]) =>
+    nodes.map((node) => (
+      <div key={node.id}>
+        {renderRow(node.id, node.depth === 0 ? tagName(node.id) : node.label)}
+        {node.children.length > 0 && <div className="ps-4">{renderBranch(node.children)}</div>}
+      </div>
+    ));
+
+  return (
+    <>
+      {showSearch && (
+        <div className={cn("relative", touch ? "px-3 pb-2" : "px-2 pb-1")}>
+          <Search className="absolute start-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={t("tag_filter_placeholder")}
+            aria-label={t("tag_filter_placeholder")}
+            className="w-full ps-8 pe-2 py-1 text-sm bg-muted border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+          />
+        </div>
+      )}
+
+      <div className="max-h-[min(20rem,60vh)] overflow-y-auto">
+        {trimmedQuery ? (
+          matches.length > 0 ? (
+            matches.map((keyword) => renderRow(keyword.id, tagName(keyword.id)))
+          ) : (
+            <p className="px-3 py-2 text-sm text-muted-foreground">{t("tag_no_matches")}</p>
+          )
+        ) : (
+          renderBranch(tree)
+        )}
+      </div>
+
+      {onClearAll && selectedIds.length > 0 && (
+        <>
+          <div className="h-px bg-border my-1" />
+          <button
+            type="button"
+            onClick={onClearAll}
+            className={cn(rowClass, "text-muted-foreground")}
+          >
+            <X className={cn("flex-shrink-0", touch ? "w-4 h-4" : "w-3 h-3")} />
+            <span>{t("remove_tag")}</span>
+          </button>
+        </>
+      )}
+    </>
+  );
+}

components/email/thread-email-item.tsx

@@ -12,6 +12,10 @@ import { useLongPress } from "@/hooks/use-long-press";
 import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useUIStore } from "@/stores/ui-store";
+import { getEmailTagIds } from "@/lib/thread-utils";
+import { useKeywordFormat } from "@/hooks/use-keyword-format";
+import { useTagDisplay } from "@/hooks/use-tag-display";
+import { TagBadge } from "./tag-badge";
 
 interface ThreadEmailItemProps {
   email: Email;
@@ -35,6 +39,11 @@ export function ThreadEmailItem({
   const isStarred = email.keywords?.$flagged;
   const isAnswered = email.keywords?.$answered;
   const isForwarded = email.keywords?.$forwarded;
+  const { sortTagIds } = useKeywordFormat();
+  const { variant: tagVariant } = useTagDisplay();
+  // A message inside an expanded thread carries its own tags; the collapsed
+  // header pools them, so without this they disappear on the way in.
+  const tagIds = sortTagIds(getEmailTagIds(email.keywords));
   const sender = email.from?.[0];
   const { selectedMailbox, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
   const density = useSettingsStore((state) => state.density);
@@ -178,6 +187,9 @@ export function ThreadEmailItem({
               {email.hasAttachment && (
                 <Paperclip className="w-3 h-3 text-muted-foreground" />
               )}
+              {tagIds.map((id) => (
+                <TagBadge key={id} tagId={id} variant={tagVariant} />
+              ))}
             </div>
 
             {/* Preview snippet */}

components/email/thread-list-item.tsx

@@ -6,12 +6,14 @@ import { Email, ThreadGroup } from "@/lib/jmap/types";
 import { cn } from "@/lib/utils";
 import { SelectableAvatar } from "@/components/email/selectable-avatar";
 import { Paperclip, Star, Pin, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare, CheckSquare, Square, Reply, Forward, CalendarClock, Folder } from "lucide-react";
-import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
+import { useSettingsStore } from "@/stores/settings-store";
 import { useUIStore } from "@/stores/ui-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useAccountStore } from "@/stores/account-store";
-import { getThreadColorTag, getEmailColorTags } from "@/lib/thread-utils";
+import { getThreadTagIds, getEmailTagIds } from "@/lib/thread-utils";
 import { useKeywordFormat } from "@/hooks/use-keyword-format";
+import { useTagDisplay } from "@/hooks/use-tag-display";
+import { TagBadge, TAG_GROUP_CLASS, TAG_LOZENGE_CLASS } from "./tag-badge";
 import { useEmailDrag } from "@/hooks/use-email-drag";
 import { useLongPress } from "@/hooks/use-long-press";
 import { ThreadEmailItem } from "./thread-email-item";
@@ -35,6 +37,28 @@ function SourceFolderTag({ name }: { name: string }) {
   );
 }
 
+/**
+ * How many messages a collapsed thread stands for.
+ *
+ * Built from the tag lozenge so it lines up with the tags it sits next to: the
+ * same shape, and the same group spacing.
+ */
+function ThreadCountPill({ count, hasUnread, title }: { count: number; hasUnread: boolean; title: string }) {
+  return (
+    <span
+      className={cn(
+        TAG_LOZENGE_CLASS,
+        "gap-0.5",
+        hasUnread ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground",
+      )}
+      title={title}
+    >
+      <MessageSquare className="w-3 h-3" />
+      {count}
+    </span>
+  );
+}
+
 interface ThreadListItemProps {
   thread: ThreadGroup;
   isExpanded: boolean;
@@ -51,7 +75,7 @@ interface ThreadListItemProps {
   onMarkAsRead?: (email: Email, read: boolean) => void;
   onDelete?: (email: Email) => void;
   onArchive?: (email: Email) => void;
-  onSetColorTag?: (emailId: string, color: string | null) => void;
+  onSetTag?: (emailId: string, tagId: string | null) => void;
   onMarkAsSpam?: (email: Email) => void;
   onUndoSpam?: (email: Email) => void;
 }
@@ -63,18 +87,18 @@ interface SingleEmailItemProps {
   onDoubleClick?: () => void;
   onContextMenu?: (e: React.MouseEvent, email: Email) => void;
   showPreview: boolean;
-  colorTag: string | null;
+  rowTint: string | null;
   onToggleStar?: () => void;
   onMarkAsRead?: (read: boolean) => void;
   onDelete?: () => void;
   onArchive?: () => void;
-  onSetColorTag?: (color: string | null) => void;
+  onSetTag?: (tagId: string | null) => void;
   onMarkAsSpam?: () => void;
   onUndoSpam?: () => void;
 }
 
 const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
-  function SingleEmailItem({ email, selected, onClick, onDoubleClick, onContextMenu, showPreview, colorTag, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam, onUndoSpam }, ref) {
+  function SingleEmailItem({ email, selected, onClick, onDoubleClick, onContextMenu, showPreview, rowTint, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetTag, onMarkAsSpam, onUndoSpam }, ref) {
     const t = useTranslations('email_viewer');
     const tBatch = useTranslations('email_list.batch_actions');
     const isUnread = !email.keywords?.$seen;
@@ -90,9 +114,9 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
       ?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
     const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
     const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
-    const emailKeywords = useSettingsStore((state) => state.emailKeywords);
-    const { tagName } = useKeywordFormat();
-      const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag);
+    const { sortTagIds, tagColor } = useKeywordFormat();
+    const { variant: tagVariant, placement: tagPlacement } = useTagDisplay();
+    const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag);
     const density = useSettingsStore((state) => state.density);
     const mailLayout = useSettingsStore((state) => state.mailLayout);
     const timeFormat = useSettingsStore((state) => state.timeFormat);
@@ -112,14 +136,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
       ? formatDateTime(email.scheduledSendAt, timeFormat)
       : null;
 
-    // Resolve color tags using keyword definitions; unknown tags fall back to gray
-    const tagIds = getEmailColorTags(email.keywords);
-    const resolvedKeywordDefs = tagIds.map(id => emailKeywords.find(k => k.id === id) ?? { id, label: id, color: 'gray' });
-    const resolvedKeywordDef = resolvedKeywordDefs[0] ?? null;
-    const resolvedColorTag = !tintListRowsByTag ? null : (() => {
-      if (colorTag) return colorTag;
-      return resolvedKeywordDef ? KEYWORD_PALETTE[resolvedKeywordDef.color]?.bg ?? null : null;
-    })();
+    const tagIds = sortTagIds(getEmailTagIds(email.keywords));
+    const resolvedRowTint = !tintListRowsByTag ? null : (rowTint ?? (tagIds[0] ? tagColor(tagIds[0]).rowTint : null));
 
     const { dragHandlers, isDragging } = useEmailDrag({
       email,
@@ -174,16 +192,16 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
         data-unread={isUnread ? 'true' : 'false'}
         className={cn(
           "relative group cursor-pointer select-none transition-shadow duration-200 border-b border-border overflow-hidden",
-          resolvedColorTag ? resolvedColorTag : (
+          resolvedRowTint ? resolvedRowTint : (
             selected
               ? "bg-accent"
               : "bg-background"
           ),
-          selected && !resolvedColorTag && "shadow-sm",
-          !resolvedColorTag && !selected && !isChecked && "hover:bg-muted hover:shadow-sm",
-          !resolvedColorTag && (selected || isChecked) && "hover:bg-accent hover:shadow-sm",
-          resolvedColorTag && "hover:brightness-95 dark:hover:brightness-110",
-          isUnread && !resolvedColorTag && "bg-accent/30",
+          selected && !resolvedRowTint && "shadow-sm",
+          !resolvedRowTint && !selected && !isChecked && "hover:bg-muted hover:shadow-sm",
+          !resolvedRowTint && (selected || isChecked) && "hover:bg-accent hover:shadow-sm",
+          resolvedRowTint && "hover:brightness-95 dark:hover:brightness-110",
+          isUnread && !resolvedRowTint && "bg-accent/30",
           isChecked && "ring-2 ring-primary/20 bg-accent/40",
           isDragging && "opacity-50 scale-[0.98] ring-2 ring-primary/30",
           isPressed && "bg-muted scale-[0.98] ring-2 ring-primary/30"
@@ -260,6 +278,13 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                     {sender?.name || sender?.email || 'Unknown'}
                   </span>
                   <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
+                    {tagIds.length > 0 && (
+                      <span className={TAG_GROUP_CLASS}>
+                        {tagIds.map((id) => (
+                          <TagBadge key={id} tagId={id} variant={tagVariant} />
+                        ))}
+                      </span>
+                    )}
                     <span className={cn(
                       'min-w-0 truncate',
                       isUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
@@ -283,13 +308,6 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                     </>
                   )}
                   {email.hasAttachment && <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />}
-                  {resolvedKeywordDefs.map((kd) => (
-                    <span
-                      key={kd.id}
-                      className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[kd.color]?.dot || 'bg-gray-400')}
-                      title={tagName(kd.id)}
-                    />
-                  ))}
                   {showSourceFolder && <SourceFolderTag name={email.sourceFolder!} />}
                   {scheduledSendLabel ? (
                     <span
@@ -328,6 +346,13 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                     )}>
                       {sender?.name || sender?.email || "Unknown"}
                     </span>
+                    {tagPlacement === 'sender' && tagIds.length > 0 && (
+                      <span className={TAG_GROUP_CLASS}>
+                        {tagIds.map((id) => (
+                          <TagBadge key={id} tagId={id} variant={tagVariant} />
+                        ))}
+                      </span>
+                  )}
                     <div className="flex items-center gap-1.5">
                       {isPinned && (
                         <Pin className="w-3.5 h-3.5 text-primary" />
@@ -353,15 +378,6 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                     </div>
                   </div>
                   <div className="flex items-center gap-1.5 flex-shrink-0">
-                    {resolvedKeywordDefs.map((kd) => (
-                      <span key={kd.id} className={cn(
-                        "inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full",
-                        KEYWORD_PALETTE[kd.color]?.bg || "bg-muted"
-                      )} title={tagName(kd.id)}>
-                        <span className={cn("w-1.5 h-1.5 rounded-full", KEYWORD_PALETTE[kd.color]?.dot || "bg-gray-400")} />
-                        {kd.label}
-                      </span>
-                    ))}
                     {showSourceFolder && <SourceFolderTag name={email.sourceFolder!} />}
                     {scheduledSendLabel ? (
                       <span
@@ -384,13 +400,22 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                   </div>
                 </div>
 
-                <div className={cn(
-                  "mb-1 line-clamp-1 text-sm",
-                  isUnread
-                    ? "font-semibold text-foreground"
-                    : "font-normal text-foreground/90"
-                )}>
-                  {email.subject || "(no subject)"}
+                <div className="mb-1 flex min-w-0 items-center gap-1.5">
+                  {tagPlacement === 'subject' && tagIds.length > 0 && (
+                      <span className={TAG_GROUP_CLASS}>
+                        {tagIds.map((id) => (
+                          <TagBadge key={id} tagId={id} variant={tagVariant} />
+                        ))}
+                      </span>
+                  )}
+                  <span className={cn(
+                    "min-w-0 flex-1 truncate text-sm",
+                    isUnread
+                      ? "font-semibold text-foreground"
+                      : "font-normal text-foreground/90"
+                  )}>
+                    {email.subject || "(no subject)"}
+                  </span>
                 </div>
 
                 {showPreview && density !== 'extra-compact' && density !== 'compact' && (
@@ -412,12 +437,12 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
         {!email.isScheduled && (
           <EmailHoverActions
             email={email}
-            backgroundClassName={resolvedColorTag ? resolvedColorTag : ((selected || isChecked) ? "bg-accent" : "bg-muted")}
+            backgroundClassName={resolvedRowTint ? resolvedRowTint : ((selected || isChecked) ? "bg-accent" : "bg-muted")}
             onToggleStar={onToggleStar}
             onMarkAsRead={onMarkAsRead}
             onDelete={onDelete}
             onArchive={onArchive}
-            onSetColorTag={onSetColorTag}
+            onSetTag={onSetTag}
             onMarkAsSpam={onMarkAsSpam}
             onUndoSpam={onUndoSpam}
             isInJunk={currentMailboxRole === 'junk'}
@@ -446,7 +471,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
     onMarkAsRead,
     onDelete,
     onArchive,
-    onSetColorTag,
+    onSetTag,
     onMarkAsSpam,
     onUndoSpam,
   }, ref) {
@@ -503,12 +528,12 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
     );
     const threadLongPressHandlers = { onTouchStart: threadOnTouchStart, onTouchEnd: threadOnTouchEnd, onTouchMove: threadOnTouchMove, onTouchCancel: threadOnTouchCancel };
 
-    const threadColor = getThreadColorTag(thread.emails);
-    const emailKeywordDefs = useSettingsStore((state) => state.emailKeywords);
-    const { tagName } = useKeywordFormat();
-      const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag);
-    const keywordDef = threadColor ? (emailKeywordDefs.find(k => k.id === threadColor) ?? { id: threadColor, label: threadColor, color: 'gray' }) : null;
-    const colorTag = (tintListRowsByTag && keywordDef) ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null;
+    const { sortTagIds, tagColor } = useKeywordFormat();
+    const { variant: tagVariant, placement: tagPlacement } = useTagDisplay();
+    const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag);
+    // A collapsed row speaks for every message under it, so it carries their tags too.
+    const tagIds = sortTagIds(getThreadTagIds(thread.emails));
+    const rowTint = (tintListRowsByTag && tagIds[0]) ? tagColor(tagIds[0]).rowTint : null;
 
     const isSelected = selectedEmailId === latestEmail.id ||
       thread.emails.some(e => e.id === selectedEmailId);
@@ -525,12 +550,12 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           onDoubleClick={onEmailDoubleClick ? () => onEmailDoubleClick(latestEmail) : undefined}
           onContextMenu={onContextMenu}
           showPreview={showPreview}
-          colorTag={colorTag}
+          rowTint={rowTint}
           onToggleStar={onToggleStar ? () => onToggleStar(latestEmail) : undefined}
           onMarkAsRead={onMarkAsRead ? (read) => onMarkAsRead(latestEmail, read) : undefined}
           onDelete={onDelete ? () => onDelete(latestEmail) : undefined}
           onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
-          onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
+          onSetTag={onSetTag ? (color) => onSetTag(latestEmail.id, color) : undefined}
           onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
           onUndoSpam={onUndoSpam ? () => onUndoSpam(latestEmail) : undefined}
         />
@@ -604,16 +629,16 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           {...threadLongPressHandlers}
           className={cn(
             "relative group cursor-pointer select-none transition-shadow duration-200 overflow-hidden",
-            colorTag ? colorTag : (
+            rowTint ? rowTint : (
               isSelected
                 ? "bg-accent"
                 : "bg-background"
             ),
-            isSelected && !colorTag && "shadow-sm",
-            !colorTag && !isSelected && !isChecked && "hover:bg-muted hover:shadow-sm",
-            !colorTag && (isSelected || isChecked) && "hover:bg-accent hover:shadow-sm",
-            colorTag && "hover:brightness-95 dark:hover:brightness-110",
-            hasUnread && !colorTag && !isSelected && "bg-accent/30",
+            isSelected && !rowTint && "shadow-sm",
+            !rowTint && !isSelected && !isChecked && "hover:bg-muted hover:shadow-sm",
+            !rowTint && (isSelected || isChecked) && "hover:bg-accent hover:shadow-sm",
+            rowTint && "hover:brightness-95 dark:hover:brightness-110",
+            hasUnread && !rowTint && !isSelected && "bg-accent/30",
             isExpanded && "border-b border-border/50",
             isChecked && "ring-2 ring-primary/20 bg-accent/40",
             isThreadPressed && "bg-muted scale-[0.98] ring-2 ring-primary/30"
@@ -713,22 +738,25 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                       />
                     )}
                     <span className={cn(
-                      'w-32 shrink-0 truncate text-sm lg:w-44',
+                      // Matches SingleEmailItem: the sender column sets where
+                      // every row's tags and subject begin, so the two have to
+                      // agree or thread rows sit 1rem further right.
+                      'w-32 shrink-0 truncate text-sm lg:w-40',
                       hasUnread ? 'font-semibold text-foreground' : 'font-medium text-foreground/80'
                     )}>
                       {displayNames.join(', ')}
                     </span>
-                    <span
-                      className={cn(
-                        'inline-flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium',
-                        hasUnread ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
-                      )}
-                      title={t('messages_tooltip', { count: emailCount })}
-                    >
-                      <MessageSquare className="w-3 h-3" />
-                      {emailCount}
-                    </span>
                     <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
+                      <span className={TAG_GROUP_CLASS}>
+                        <ThreadCountPill
+                          count={emailCount}
+                          hasUnread={hasUnread}
+                          title={t('messages_tooltip', { count: emailCount })}
+                        />
+                        {tagIds.map((id) => (
+                          <TagBadge key={id} tagId={id} variant={tagVariant} />
+                        ))}
+                      </span>
                       <span className={cn(
                         'min-w-0 truncate',
                         hasUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
@@ -752,12 +780,6 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                       </>
                     )}
                     {hasAttachment && <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />}
-                    {keywordDef && (
-                      <span
-                        className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[keywordDef.color]?.dot || 'bg-gray-400')}
-                        title={tagName(keywordDef.id)}
-                      />
-                    )}
                     {showSourceFolder && <SourceFolderTag name={latestEmail.sourceFolder!} />}
                     {scheduledSendLabel ? (
                       <span
@@ -796,17 +818,15 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                       )}>
                         {displayNames.join(", ")}
                       </span>
-                      <span
-                        className={cn(
-                          "flex-shrink-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 text-xs rounded-full font-medium",
-                          hasUnread
-                            ? "bg-primary text-primary-foreground"
-                            : "bg-muted text-muted-foreground"
-                        )}
-                        title={t('messages_tooltip', { count: emailCount })}
-                      >
-                        <MessageSquare className="w-3 h-3" />
-                        {emailCount}
+                      <span className={TAG_GROUP_CLASS}>
+                        <ThreadCountPill
+                          count={emailCount}
+                          hasUnread={hasUnread}
+                          title={t('messages_tooltip', { count: emailCount })}
+                        />
+                        {tagPlacement === 'sender' && tagIds.map((id) => (
+                          <TagBadge key={id} tagId={id} variant={tagVariant} />
+                        ))}
                       </span>
                       <div className="flex items-center gap-1.5">
                         {hasPinned && (
@@ -833,15 +853,6 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                       </div>
                     </div>
                     <div className="flex items-center gap-1.5 flex-shrink-0">
-                      {keywordDef && (
-                        <span className={cn(
-                          "inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full",
-                          KEYWORD_PALETTE[keywordDef.color]?.bg || "bg-muted"
-                        )} title={tagName(keywordDef.id)}>
-                          <span className={cn("w-1.5 h-1.5 rounded-full", KEYWORD_PALETTE[keywordDef.color]?.dot || "bg-gray-400")} />
-                          {keywordDef.label}
-                        </span>
-                      )}
                       {showSourceFolder && <SourceFolderTag name={latestEmail.sourceFolder!} />}
                       {scheduledSendLabel ? (
                         <span
@@ -864,13 +875,22 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                     </div>
                   </div>
 
-                  <div className={cn(
-                    "mb-1 line-clamp-1 text-sm",
-                    hasUnread
-                      ? "font-semibold text-foreground"
-                      : "font-normal text-foreground/90"
-                  )}>
-                    {latestEmail.subject || "(no subject)"}
+                  <div className="mb-1 flex min-w-0 items-center gap-1.5">
+                    {tagPlacement === 'subject' && tagIds.length > 0 && (
+                        <span className={TAG_GROUP_CLASS}>
+                          {tagIds.map((id) => (
+                            <TagBadge key={id} tagId={id} variant={tagVariant} />
+                          ))}
+                        </span>
+                    )}
+                    <span className={cn(
+                      "min-w-0 flex-1 truncate text-sm",
+                      hasUnread
+                        ? "font-semibold text-foreground"
+                        : "font-normal text-foreground/90"
+                    )}>
+                      {latestEmail.subject || "(no subject)"}
+                    </span>
                   </div>
 
                   {showPreview && density !== 'extra-compact' && density !== 'compact' && (
@@ -892,12 +912,12 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           {!latestEmail.isScheduled && (
             <EmailHoverActions
               email={latestEmail}
-              backgroundClassName={colorTag ? colorTag : ((isSelected || isChecked) ? "bg-accent" : "bg-muted")}
+              backgroundClassName={rowTint ? rowTint : ((isSelected || isChecked) ? "bg-accent" : "bg-muted")}
               onToggleStar={onToggleStar ? () => onToggleStar(latestEmail) : undefined}
               onMarkAsRead={onMarkAsRead ? (read) => onMarkAsRead(latestEmail, read) : undefined}
               onDelete={onDelete ? () => onDelete(latestEmail) : undefined}
               onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
-              onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
+              onSetTag={onSetTag ? (color) => onSetTag(latestEmail.id, color) : undefined}
               onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
               onUndoSpam={onUndoSpam ? () => onUndoSpam(latestEmail) : undefined}
               isInJunk={currentMailboxRole === 'junk'}

components/layout/sidebar.tsx

@@ -61,7 +61,7 @@ import { useTagDrop } from "@/hooks/use-tag-drop";
 import { useUIStore } from "@/stores/ui-store";
 import { useAuthStore } from "@/stores/auth-store";
 import { useVacationStore } from "@/stores/vacation-store";
-import { useSettingsStore, KEYWORD_PALETTE, getKeywordVisibility } from "@/stores/settings-store";
+import { useSettingsStore, getKeywordVisibility } from "@/stores/settings-store";
 import { useEmailStore } from "@/stores/email-store";
 import { toast } from "@/stores/toast-store";
 import { debug } from "@/lib/debug";
@@ -557,22 +557,6 @@ function MailboxTreeItem({
   );
 }
 
-const TAG_ICON_COLOR: Record<string, string> = {
-  red: "text-red-600/75 dark:text-red-400/75",
-  orange: "text-orange-600/75 dark:text-orange-400/75",
-  yellow: "text-yellow-600/75 dark:text-yellow-400/75",
-  green: "text-green-600/75 dark:text-green-400/75",
-  blue: "text-blue-600/75 dark:text-blue-400/75",
-  purple: "text-purple-600/75 dark:text-purple-400/75",
-  pink: "text-pink-600/75 dark:text-pink-400/75",
-  teal: "text-teal-600/75 dark:text-teal-400/75",
-  cyan: "text-cyan-600/75 dark:text-cyan-400/75",
-  indigo: "text-indigo-600/75 dark:text-indigo-400/75",
-  amber: "text-amber-600/75 dark:text-amber-400/75",
-  lime: "text-lime-600/75 dark:text-lime-400/75",
-  gray: "text-gray-500",
-};
-
 function ShowAllTagsRow({
   hiddenCount,
   showAll,
@@ -617,8 +601,8 @@ function TagItem({
   colorful: boolean;
 }) {
   const t = useTranslations('notifications');
-  const { tagNameCandidates } = useKeywordFormat();
-  const palette = KEYWORD_PALETTE[node.color];
+  const { tagNameCandidates, tagColor } = useKeywordFormat();
+  const palette = tagColor(node.id);
   const hasChildren = node.children.length > 0;
   const isExpanded = expandedTags.has(node.id);
   const isSelected = selectedKeyword === node.id;
@@ -644,12 +628,9 @@ function TagItem({
   });
 
   const tagIcon = colorful ? (
-    <Tag
-      className={cn("w-4 h-4 flex-shrink-0", TAG_ICON_COLOR[node.color] || "text-muted-foreground")}
-      fill="currentColor"
-    />
+    <Tag className={cn("w-4 h-4 flex-shrink-0", palette.icon)} fill="currentColor" />
   ) : (
-    <span className={cn("w-3 h-3 rounded-full", palette?.dot || "bg-gray-400")} />
+    <span className={cn("w-3 h-3 rounded-full", palette.dot)} />
   );
 
   return (

components/pro/pro-email-tab-body.tsx

@@ -236,7 +236,7 @@ export function ProEmailTabBody({ tabId, data }: ProEmailTabBodyProps) {
     }
   }, [client, markAsRead]);
 
-  const handleSetColorTag = useCallback((emailId: string, color: string | null) => {
+  const handleSetTag = useCallback((emailId: string, tagId: string | null) => {
     if (!email || email.id !== emailId) return;
     // Drop existing color keywords, optionally add the new one. Matches the
     // mail page's local optimistic update.
@@ -244,9 +244,8 @@ export function ProEmailTabBody({ tabId, data }: ProEmailTabBodyProps) {
     for (const kw of settingsKeywords) {
       delete keywords[`$label:${kw.id}`];
     }
-    if (color) {
-      const def = settingsKeywords.find((k) => k.color === color);
-      if (def) keywords[`$label:${def.id}`] = true;
+    if (tagId) {
+      keywords[`$label:${tagId}`] = true;
     }
     setEmailKeywordsLocal(emailId, keywords);
     setEmail({ ...email, keywords });
@@ -333,7 +332,7 @@ export function ProEmailTabBody({ tabId, data }: ProEmailTabBodyProps) {
           onArchive={handleArchive}
           onToggleStar={handleToggleStar}
           onMarkAsRead={handleMarkAsRead}
-          onSetColorTag={handleSetColorTag}
+          onSetTag={handleSetTag}
           onDownloadAttachment={handleDownloadAttachment}
           onQuickReply={handleQuickReply}
           onEditDraft={handleEditDraft}

components/settings/keyword-settings.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import {
   useSettingsStore,
   KEYWORD_PALETTE,
+  KEYWORD_PALETTE_ROWS,
   getKeywordVisibility,
   type KeywordDefinition,
   type KeywordVisibility,
@@ -25,11 +26,11 @@ import {
   type KeywordNode,
   MAX_KEYWORD_ID_LENGTH,
 } from "@/lib/keyword-nesting";
-import { formatKeyword, formatKeywordLabels, keywordRenderings } from "@/lib/keyword-format";
+import { formatKeyword, keywordRenderings } from "@/lib/keyword-format";
 import { useShortenedText } from "@/hooks/use-shortened-text";
+import { TagBadge } from "@/components/email/tag-badge";
 
-const PALETTE_KEYS = Object.keys(KEYWORD_PALETTE);
-
+/** Lighter, base and darker shade of each hue, one row per shade. */
 function KeywordColorPicker({
   value,
   onChange,
@@ -38,19 +39,23 @@ function KeywordColorPicker({
   onChange: (color: string) => void;
 }) {
   return (
-    <div className="flex flex-wrap gap-1.5">
-      {PALETTE_KEYS.map((colorKey) => (
-        <button
-          key={colorKey}
-          type="button"
-          onClick={() => onChange(colorKey)}
-          className={cn(
-            "w-6 h-6 rounded-full transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            KEYWORD_PALETTE[colorKey].dot,
-            value === colorKey && "ring-2 ring-offset-2 ring-offset-background ring-foreground"
-          )}
-          aria-label={colorKey}
-        />
+    <div className="space-y-1.5">
+      {KEYWORD_PALETTE_ROWS.map((row, index) => (
+        <div key={index} className="flex flex-wrap gap-1.5">
+          {row.map((colorKey) => (
+            <button
+              key={colorKey}
+              type="button"
+              onClick={() => onChange(colorKey)}
+              className={cn(
+                "w-6 h-6 rounded-full transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                KEYWORD_PALETTE[colorKey].dot,
+                value === colorKey && "ring-2 ring-offset-2 ring-offset-background ring-foreground"
+              )}
+              aria-label={colorKey}
+            />
+          ))}
+        </div>
       ))}
     </div>
   );
@@ -84,10 +89,7 @@ function KeywordRow({
   isDragging: boolean;
 }) {
   const t = useTranslations("settings.keywords");
-  const palette = KEYWORD_PALETTE[keyword.color];
   const hasChildren = hasChildKeywords(keyword.id, keywords);
-  const nameCandidates = keywordRenderings(formatKeywordLabels(keyword.id, keywords, nestedTags));
-  const [nameRef, shortenedName] = useShortenedText(nameCandidates);
   // Measured with the prefix attached, since that is what occupies the column.
   const keywordCandidates = (nestedTags ? keywordRenderings(keywordLevels(keyword.id)) : [keyword.id])
     .map((rendering) => KEYWORD_PREFIX + rendering);
@@ -112,14 +114,9 @@ function KeywordRow({
       )}
     >
       <GripVertical className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-50 cursor-grab" />
-      <div className={cn("w-5 h-5 rounded-full shrink-0", palette?.dot || "bg-gray-500")} />
-      <span
-        ref={nameRef}
-        className="flex-1 min-w-0 text-sm font-medium truncate"
-        title={formatKeyword(keyword.id, keywords, nestedTags)}
-      >
-        {shortenedName}
-      </span>
+      <div className="flex min-w-0 flex-1">
+        <TagBadge tagId={keyword.id} variant="badge" className="text-xs" />
+      </div>
       <span
         ref={keywordRef}
         className="hidden md:block min-w-0 max-w-52 truncate text-xs text-muted-foreground font-mono"