feat: Add nesting of tags in a tree

- levels are joined by forward slashes in the keywords - behaviour is opt-in for now - long paths are shortened if there is not enough display room Closes #687.
2026-07-29 17:18:38 +02:00
parent ce97a54aaa
commit ca0ba818b7
22 changed files with 1084 additions and 95 deletions
@@ -38,6 +38,8 @@ import {
 } from "lucide-react";
 import { cn, 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";

 interface Position {
@@ -155,6 +157,7 @@ export function EmailContextMenu({
  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;
@@ -170,7 +173,7 @@ export function EmailContextMenu({

  // Build color options from keyword definitions in settings
  const colorOptions = emailKeywords.map((kw) => ({
-    name: kw.label,
+    candidates: tagNameCandidates(kw.id),
    value: kw.id,
    color: KEYWORD_PALETTE[kw.color]?.dot || "bg-gray-500",
  }));
@@ -381,26 +384,28 @@ export function EmailContextMenu({
      {/* Set tag submenu - only for single email */}
      {!showBatchActions && (
        <ContextMenuSubMenu icon={Tag} label={t("color_tag")}>
-          {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)} />
-                <span className="flex-1">{option.name}</span>
-                {isActive && (
-                  <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
-                )}
-              </button>
-            );
-          })}
+          <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>
+              );
+            })}
+          </div>
          {currentColors.length > 0 && (
            <>
              <ContextMenuSeparator />
@@ -16,6 +16,7 @@ import { useUIStore } from "@/stores/ui-store";
 import { EmailIdentityBadge } from "./email-identity-badge";
 import { EmailHoverActions } from "./email-hover-actions";
 import { getEmailColorTags } from "@/lib/thread-utils";
+import { useKeywordFormat } from "@/hooks/use-keyword-format";

 interface EmailListItemProps {
  email: Email;
@@ -40,6 +41,7 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
  const density = useSettingsStore((state) => state.density);
  const mailLayout = useSettingsStore((state) => state.mailLayout);
  const emailKeywords = useSettingsStore((state) => state.emailKeywords);
+  const { tagName } = useKeywordFormat();
  const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag);
  const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
  const { identities } = useAuthStore();
@@ -232,7 +234,11 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
                )}
                {email.hasAttachment && <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />}
                {keywordDefs.map((kd) => (
-                  <span key={kd.id} className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[kd.color]?.dot || 'bg-gray-400')} />
+                  <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)}
+                  />
                ))}
                <span className={cn(
                  'text-xs tabular-nums',
@@ -290,7 +296,7 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
                    <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>
@@ -12,6 +12,8 @@ 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 { useKeywordFormat } from "@/hooks/use-keyword-format";
 import { getSecurityStatus, extractListHeaders } from "@/lib/email-headers";
 import { emailToReadView } from "@/lib/plugin-projection";
 import { generateEmailSource } from "@/lib/email-source";
@@ -667,6 +669,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 toolbarPosition = useSettingsStore((state) => state.toolbarPosition);
  const showToolbarLabels = useSettingsStore((state) => state.showToolbarLabels);
  const mailLayout = useSettingsStore((state) => state.mailLayout);
@@ -711,7 +714,7 @@ export function EmailViewer({

  // Color options for email tags (from user-defined keyword settings)
  const colorOptions = emailKeywords.map((kw) => ({
-    name: kw.label,
+    candidates: tagNameCandidates(kw.id),
    value: kw.id,
    color: KEYWORD_PALETTE[kw.color]?.dot || 'bg-gray-500',
  }));
@@ -3012,9 +3015,10 @@ export function EmailViewer({
                  })}
                </span>
                {showToolbarLabels && currentColors.length === 1 && (
-                  <span className="text-xs font-medium text-foreground">
-                    {emailKeywords.find(k => k.id === currentColors[0])?.label ?? currentColors[0]}
-                  </span>
+                  <TagOptionLabel
+                    candidates={tagNameCandidates(currentColors[0])}
+                    className="max-w-40 text-xs font-medium text-foreground"
+                  />
                )}
              </>
            ) : (
@@ -3038,7 +3042,7 @@ export function EmailViewer({
                    )}
                  >
                    <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                    <span className="truncate">{option.name}</span>
+                    <TagOptionLabel candidates={option.candidates} />
                    {isActive && <Check className="w-3 h-3 ms-auto flex-shrink-0 text-foreground" />}
                  </button>
                );
@@ -3273,7 +3277,7 @@ export function EmailViewer({
                            )}
                          >
                            <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                            <span className="truncate">{option.name}</span>
+                            <TagOptionLabel candidates={option.candidates} />
                            {isActive && <Check className="w-3 h-3 ms-auto flex-shrink-0 text-foreground" />}
                          </button>
                        );
@@ -3555,7 +3559,7 @@ export function EmailViewer({
                    )}
                  >
                    <span className={cn("w-3.5 h-3.5 rounded-full flex-shrink-0", option.color)} />
-                    <span className="truncate">{option.name}</span>
+                    <TagOptionLabel candidates={option.candidates} />
                    {isActive && <Check className="w-4 h-4 ms-auto flex-shrink-0 text-foreground" />}
                  </button>
                );
@@ -3634,7 +3638,11 @@ export function EmailViewer({
                      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 flex-shrink-0", dotClass)} title={kw.label} />
+                        <span
+                          key={tagId}
+                          className={cn("w-2.5 h-2.5 rounded-full shrink-0", dotClass)}
+                          title={tagName(tagId)}
+                        />
                      );
                    })}
                  </span>
@@ -0,0 +1,29 @@
+"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>
+  );
+}
@@ -11,6 +11,7 @@ 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 { useKeywordFormat } from "@/hooks/use-keyword-format";
 import { useEmailDrag } from "@/hooks/use-email-drag";
 import { useLongPress } from "@/hooks/use-long-press";
 import { ThreadEmailItem } from "./thread-email-item";
@@ -90,7 +91,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
    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 tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag);
+    const { tagName } = useKeywordFormat();
+      const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag);
    const density = useSettingsStore((state) => state.density);
    const mailLayout = useSettingsStore((state) => state.mailLayout);
    const timeFormat = useSettingsStore((state) => state.timeFormat);
@@ -282,7 +284,11 @@ 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')} />
+                    <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 ? (
@@ -351,7 +357,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                      <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>
@@ -499,7 +505,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro

    const threadColor = getThreadColorTag(thread.emails);
    const emailKeywordDefs = useSettingsStore((state) => state.emailKeywords);
-    const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag);
+    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;

@@ -746,7 +753,10 @@ 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')} />
+                      <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 ? (
@@ -827,7 +837,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                        <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>