void;
}
-// Color tag mapping - using lighter backgrounds for better readability
-const colorTags = {
- red: "bg-red-50 dark:bg-red-950/30",
- orange: "bg-orange-50 dark:bg-orange-950/30",
- yellow: "bg-yellow-50 dark:bg-yellow-950/30",
- green: "bg-green-50 dark:bg-green-950/30",
- blue: "bg-blue-50 dark:bg-blue-950/30",
- purple: "bg-purple-50 dark:bg-purple-950/30",
- pink: "bg-pink-50 dark:bg-pink-950/30",
-} as const;
-
-const getEmailColor = (keywords: Record
| undefined) => {
- if (!keywords) return null;
- for (const key of Object.keys(keywords)) {
- if (key.startsWith("$color:") && keywords[key] === true) {
- const color = key.replace("$color:", "");
- return colorTags[color as keyof typeof colorTags] || null;
- }
- }
- return null;
-};
-
export function EmailListItem({ email, selected, onClick, onContextMenu }: EmailListItemProps) {
const t = useTranslations('email_viewer');
const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox } = useEmailStore();
const showPreview = useSettingsStore((state) => state.showPreview);
+ const emailKeywords = useSettingsStore((state) => state.emailKeywords);
const { identities } = useAuthStore();
const isChecked = selectedEmailIds.has(email.id);
const isUnread = !email.keywords?.$seen;
const isStarred = email.keywords?.$flagged;
const isImportant = email.keywords?.["$important"];
const sender = email.from?.[0];
- const colorTag = getEmailColor(email.keywords);
+
+ // Resolve color tag using keyword definitions from settings
+ const colorTagId = getEmailColorTag(email.keywords);
+ const keywordDef = colorTagId ? emailKeywords.find(k => k.id === colorTagId) : null;
+ const colorTag = keywordDef ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null;
// Drag and drop functionality
const { dragHandlers, isDragging } = useEmailDrag({
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 2e409274..e7c2cf89 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -50,7 +50,7 @@ import {
Keyboard,
} from "lucide-react";
import { useTranslations } from "next-intl";
-import { useSettingsStore } from "@/stores/settings-store";
+import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
import { useUIStore } from "@/stores/ui-store";
import { useDeviceDetection } from "@/hooks/use-media-query";
import { useAuthStore } from "@/stores/auth-store";
@@ -113,8 +113,10 @@ const getFileIcon = (name?: string, type?: string) => {
const getCurrentColor = (keywords: Record | undefined) => {
if (!keywords) return null;
for (const key of Object.keys(keywords)) {
- if (key.startsWith("$color:") && keywords[key] === true) {
- return key.replace("$color:", "");
+ if ((key.startsWith("$label:") || key.startsWith("$color:")) && keywords[key] === true) {
+ return key.startsWith("$label:")
+ ? key.slice("$label:".length)
+ : key.slice("$color:".length);
}
}
return null;
@@ -184,20 +186,17 @@ export function EmailViewer({
const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
+ const emailKeywords = useSettingsStore((state) => state.emailKeywords);
// Detect if current mailbox is Junk folder
const isInJunkFolder = currentMailboxRole === 'junk';
- // Color options for email tags (using translations)
- const colorOptions = [
- { name: t("color_tag.red"), value: "red", color: "bg-red-500" },
- { name: t("color_tag.orange"), value: "orange", color: "bg-orange-500" },
- { name: t("color_tag.yellow"), value: "yellow", color: "bg-yellow-500" },
- { name: t("color_tag.green"), value: "green", color: "bg-green-500" },
- { name: t("color_tag.blue"), value: "blue", color: "bg-blue-500" },
- { name: t("color_tag.purple"), value: "purple", color: "bg-purple-500" },
- { name: t("color_tag.pink"), value: "pink", color: "bg-pink-500" },
- ];
+ // Color options for email tags (from user-defined keyword settings)
+ const colorOptions = emailKeywords.map((kw) => ({
+ name: kw.label,
+ value: kw.id,
+ color: KEYWORD_PALETTE[kw.color]?.dot || 'bg-gray-500',
+ }));
// Tablet list visibility
const { isTablet } = useDeviceDetection();
@@ -804,17 +803,13 @@ export function EmailViewer({
className="h-8 w-8 rounded hover:bg-muted flex items-center justify-center"
title={t('set_color')}
>
-
+ {(() => {
+ const kw = currentColor ? emailKeywords.find(k => k.id === currentColor) : null;
+ const dotClass = kw ? KEYWORD_PALETTE[kw.color]?.dot : null;
+ return dotClass
+ ?
+ : ;
+ })()}
{/* Colors appear on hover */}
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index d5ee48e7..a504f118 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -6,10 +6,10 @@ import { Email, ThreadGroup } from "@/lib/jmap/types";
import { cn } from "@/lib/utils";
import { Avatar } from "@/components/ui/avatar";
import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare } from "lucide-react";
-import { useSettingsStore } from "@/stores/settings-store";
+import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
import { useUIStore } from "@/stores/ui-store";
import { useEmailStore } from "@/stores/email-store";
-import { getThreadColorTag } from "@/lib/thread-utils";
+import { getThreadColorTag, getEmailColorTag } from "@/lib/thread-utils";
import { useEmailDrag } from "@/hooks/use-email-drag";
import { ThreadEmailItem } from "./thread-email-item";
import { useTranslations } from "next-intl";
@@ -26,16 +26,6 @@ interface ThreadListItemProps {
onOpenConversation?: (thread: ThreadGroup) => void;
}
-const colorTags = {
- red: "bg-red-50 dark:bg-red-950/30",
- orange: "bg-orange-50 dark:bg-orange-950/30",
- yellow: "bg-yellow-50 dark:bg-yellow-950/30",
- green: "bg-green-50 dark:bg-green-950/30",
- blue: "bg-blue-50 dark:bg-blue-950/30",
- purple: "bg-purple-50 dark:bg-purple-950/30",
- pink: "bg-pink-50 dark:bg-pink-950/30",
-} as const;
-
interface SingleEmailItemProps {
email: Email;
selected: boolean;
@@ -51,8 +41,17 @@ const SingleEmailItem = React.forwardRef(
const isStarred = email.keywords?.$flagged;
const sender = email.from?.[0];
const { selectedMailbox, selectedEmailIds, toggleEmailSelection, selectRangeEmails } = useEmailStore();
+ const emailKeywords = useSettingsStore((state) => state.emailKeywords);
const isChecked = selectedEmailIds.has(email.id);
+ // Resolve color from keyword definitions if not passed directly
+ const resolvedColorTag = (() => {
+ if (colorTag) return colorTag;
+ const tagId = getEmailColorTag(email.keywords);
+ const kw = tagId ? emailKeywords.find(k => k.id === tagId) : null;
+ return kw ? KEYWORD_PALETTE[kw.color]?.bg ?? null : null;
+ })();
+
const { dragHandlers, isDragging } = useEmailDrag({
email,
sourceMailboxId: selectedMailbox,
@@ -80,15 +79,15 @@ const SingleEmailItem = React.forwardRef(
{...dragHandlers}
className={cn(
"relative group cursor-pointer transition-all duration-200 border-b border-border",
- colorTag ? colorTag : (
+ resolvedColorTag ? resolvedColorTag : (
selected
? "bg-accent"
: "bg-background"
),
- selected && !colorTag && "shadow-sm",
- !colorTag && !selected && "hover:bg-muted hover:shadow-sm",
- colorTag && "hover:brightness-95 dark:hover:brightness-110",
- isUnread && !colorTag && "bg-accent/30",
+ selected && !resolvedColorTag && "shadow-sm",
+ !resolvedColorTag && !selected && "hover:bg-muted hover:shadow-sm",
+ resolvedColorTag && "hover:brightness-95 dark:hover:brightness-110",
+ isUnread && !resolvedColorTag && "bg-accent/30",
isChecked && "ring-2 ring-primary/20 bg-accent/40",
isDragging && "opacity-50 scale-[0.98] ring-2 ring-primary/30"
)}
@@ -192,7 +191,9 @@ export const ThreadListItem = React.forwardRef state.emailKeywords);
+ const keywordDef = threadColor ? emailKeywordDefs.find(k => k.id === threadColor) : null;
+ const colorTag = keywordDef ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null;
const isSelected = selectedEmailId === latestEmail.id ||
thread.emails.some(e => e.id === selectedEmailId);
diff --git a/components/settings/keyword-settings.tsx b/components/settings/keyword-settings.tsx
new file mode 100644
index 00000000..e9b27827
--- /dev/null
+++ b/components/settings/keyword-settings.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useSettingsStore, KEYWORD_PALETTE, DEFAULT_KEYWORDS, type KeywordDefinition } from "@/stores/settings-store";
+import { SettingsSection } from "./settings-section";
+import { Plus, Pencil, Trash2, GripVertical, Check, X, RotateCcw } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const PALETTE_KEYS = Object.keys(KEYWORD_PALETTE);
+
+function KeywordColorPicker({
+ value,
+ onChange,
+}: {
+ value: string;
+ onChange: (color: string) => void;
+}) {
+ return (
+
+ {PALETTE_KEYS.map((colorKey) => (
+
+ );
+}
+
+function KeywordRow({
+ keyword,
+ onEdit,
+ onDelete,
+}: {
+ keyword: KeywordDefinition;
+ onEdit: () => void;
+ onDelete: () => void;
+}) {
+ const t = useTranslations("settings.keywords");
+ const palette = KEYWORD_PALETTE[keyword.color];
+
+ return (
+
+
+
+
{keyword.label}
+
{"$label:" + keyword.id}
+
+
+
+
+
setLabel(e.target.value)}
+ className="w-full px-2.5 py-1.5 text-sm rounded-md border border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+ placeholder={t("label_placeholder")}
+ autoFocus
+ maxLength={30}
+ onKeyDown={(e) => e.key === "Enter" && handleSave()}
+ />
+ {isDuplicate && (
+
{t("id_exists")}
+ )}
+
+
+
+
+
+
+
+
+
+
+ {emailKeywords.map((keyword) =>
+ editingId === keyword.id ? (
+
id !== keyword.id)}
+ onSave={handleEdit}
+ onCancel={() => setEditingId(null)}
+ />
+ ) : (
+ {
+ setEditingId(keyword.id);
+ setIsAdding(false);
+ }}
+ onDelete={() => handleDelete(keyword.id)}
+ />
+ )
+ )}
+
+ {isAdding ? (
+ setIsAdding(false)}
+ />
+ ) : (
+
+
+
+