From afefbb8d46c3e3c9c5e25cc042ba94f5ecb10668 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sat, 21 Mar 2026 14:16:54 +0100
Subject: [PATCH] feat: add expanded visual view for filter rules
- Add VisualRuleSummary component showing conditions and actions as
labeled inline pills with IF/THEN flow layout
- Add expandedFilterView toggle to settings store (persisted)
- Fix RuleSummary to allow multi-line wrapping instead of truncating
- Use items-start on rule cards so drag handle and toggle align to top
- Add translations for expanded view keys in all 8 locales
---
components/settings/filter-settings.tsx | 149 +++++++++++++++++++-----
locales/de/common.json | 6 +
locales/en/common.json | 6 +
locales/es/common.json | 6 +
locales/fr/common.json | 6 +
locales/it/common.json | 6 +
locales/ja/common.json | 6 +
locales/nl/common.json | 6 +
locales/pt/common.json | 6 +
stores/settings-store.ts | 7 ++
10 files changed, 173 insertions(+), 31 deletions(-)
diff --git a/components/settings/filter-settings.tsx b/components/settings/filter-settings.tsx
index 1799f26e..a7101d55 100644
--- a/components/settings/filter-settings.tsx
+++ b/components/settings/filter-settings.tsx
@@ -9,6 +9,7 @@ import { SieveEditorModal } from "@/components/filters/sieve-editor-modal";
import { useFilterStore } from "@/stores/filter-store";
import { useAuthStore } from "@/stores/auth-store";
import { useEmailStore } from "@/stores/email-store";
+import { useSettingsStore } from "@/stores/settings-store";
import { toast } from "@/stores/toast-store";
import type { FilterRule } from "@/lib/jmap/sieve-types";
import {
@@ -25,31 +26,98 @@ import {
function RuleSummary({ rule }: { rule: FilterRule }) {
const t = useTranslations("settings.filters");
- const conditionSummary = rule.conditions
- .slice(0, 2)
- .map((c) => {
- const field = t(`condition_fields.${c.field}`);
- const comparator = t(`comparators.${c.comparator}`);
- return `${field} ${comparator} "${c.value}"`;
- })
- .join(rule.matchType === "all" ? ` ${t("and")} ` : ` ${t("or")} `);
+ const conditions = rule.conditions.slice(0, 2).map((c) => {
+ const field = t(`condition_fields.${c.field}`);
+ const comparator = t(`comparators.${c.comparator}`);
+ return `${field} ${comparator} "${c.value}"`;
+ });
+
+ const joiner = rule.matchType === "all" ? t("and") : t("or");
const extra = rule.conditions.length > 2
? ` (+${rule.conditions.length - 2})`
: "";
- const actionSummary = rule.actions
- .slice(0, 2)
- .map((a) => {
- const action = t(`action_types.${a.type}`);
- return a.value ? `${action} "${a.value}"` : action;
- })
- .join(", ");
+ const actions = rule.actions.slice(0, 2).map((a) => {
+ const action = t(`action_types.${a.type}`);
+ return a.value ? `${action} "${a.value}"` : action;
+ });
return (
-
- {conditionSummary}{extra} → {actionSummary}
-
+
+
+ {conditions.map((cond, i) => (
+
+ {i > 0 && {joiner} }
+ {cond}
+
+ ))}
+ {extra}
+
+ →
+
+ {actions.map((act, i) => (
+
+ {i > 0 && ", "}
+ {act}
+
+ ))}
+
+
+ );
+}
+
+function VisualRuleSummary({ rule }: { rule: FilterRule }) {
+ const t = useTranslations("settings.filters");
+
+ const joiner = rule.matchType === "all" ? t("and") : t("or");
+ const matchLabel = rule.matchType === "all" ? t("match_all_conditions") : t("match_any_condition");
+
+ return (
+
+
+
+ {t("if")}
+
+ {rule.conditions.map((c, i) => {
+ const field = t(`condition_fields.${c.field}`);
+ const comparator = t(`comparators.${c.comparator}`);
+ return (
+
+ {i > 0 && (
+ {joiner}
+ )}
+
+ {field}
+ {comparator}
+ “{c.value}”
+
+
+ );
+ })}
+ ({matchLabel})
+
+
+
+
+ {t("then")}
+
+ {rule.actions.map((a, i) => {
+ const action = t(`action_types.${a.type}`);
+ return (
+
+ {i > 0 && (
+ ›
+ )}
+
+ {action}
+ {a.value && “{a.value}”}
+
+
+ );
+ })}
+
+
- handleToggle(rule.id)}
- />
+
+ handleToggle(rule.id)}
+ />
+
{rule.name}
-
+ {expandedFilterView ? (
+
+ ) : (
+
+ )}
{deleteConfirmId === rule.id ? (
@@ -435,12 +511,23 @@ export function FilterSettings() {
- {isSaving && (
-
-
- {t("saving")}
-
- )}
+
+ {isSaving && (
+
+
+ {t("saving")}
+
+ )}
+ {!isOpaque && rules.length > 0 && (
+
+ {t("expanded_view")}
+ updateSetting("expandedFilterView", v)}
+ />
+
+ )}
+