diff --git a/components/settings/__tests__/keyword-settings.test.tsx b/components/settings/__tests__/keyword-settings.test.tsx
index ccf7be677..a3dc8a6df 100644
--- a/components/settings/__tests__/keyword-settings.test.tsx
+++ b/components/settings/__tests__/keyword-settings.test.tsx
@@ -23,10 +23,21 @@ describe('KeywordSettings', () => {
});
});
- it('shows keyword JMAP id', () => {
+ // settings-28: the stored keyword is no line of its own; with the advanced
+ // settings on it is the tag's tooltip.
+ it('does not show the stored keyword under each tag', () => {
render();
- expect(screen.getByText('$label:red')).toBeInTheDocument();
- expect(screen.getByText('$label:blue')).toBeInTheDocument();
+ expect(screen.queryByText('$label:red')).toBeNull();
+ expect(screen.queryByTitle('$label:red')).toBeNull();
+ });
+
+ it('shows the stored keyword as a tooltip with the advanced settings on', () => {
+ useSettingsStore.setState({ showAdvancedSettings: true });
+ render();
+ expect(screen.queryByText('$label:red')).toBeNull();
+ expect(screen.getByTitle('$label:red')).toBeInTheDocument();
+ expect(screen.getByTitle('$label:blue')).toBeInTheDocument();
+ useSettingsStore.setState({ showAdvancedSettings: false });
});
// MO-06: the tag order was drag-only.
@@ -180,7 +191,7 @@ describe('KeywordSettings', () => {
render();
expect(screen.getByText('Work/Clients')).toBeInTheDocument();
- expect(screen.getByText('$label:work/clients')).toBeInTheDocument();
+ expect(screen.queryByText('$label:work/clients')).toBeNull();
});
it('rejects a path that would exceed the 128-byte keyword limit of Stalwart', () => {
diff --git a/components/settings/keyword-settings.tsx b/components/settings/keyword-settings.tsx
index ffd0db089..7d36ed63a 100644
--- a/components/settings/keyword-settings.tsx
+++ b/components/settings/keyword-settings.tsx
@@ -28,12 +28,10 @@ import {
getParentKeywordId,
hasChildKeywords,
isKeywordDescendant,
- keywordLevels,
type KeywordNode,
MAX_KEYWORD_ID_LENGTH,
} from "@/lib/keyword-nesting";
-import { formatKeyword, keywordRenderings } from "@/lib/keyword-format";
-import { useShortenedText } from "@/hooks/use-shortened-text";
+import { formatKeyword } from "@/lib/keyword-format";
import { TagBadge } from "@/components/email/tag-badge";
/** Lighter, base and darker shade of each hue, one row per shade. */
@@ -70,7 +68,6 @@ export function KeywordColorPicker({
function KeywordRow({
keyword,
keywords,
- nestedTags,
onEdit,
onDelete,
onVisibilityChange,
@@ -86,7 +83,6 @@ function KeywordRow({
}: {
keyword: KeywordDefinition;
keywords: KeywordDefinition[];
- nestedTags: boolean;
onEdit: () => void;
onDelete: () => void;
onVisibilityChange: (visibility: KeywordVisibility) => void;
@@ -103,10 +99,9 @@ function KeywordRow({
const t = useTranslations("settings.keywords");
const hasChildren = hasChildKeywords(keyword.id, keywords);
const tagLabel = keyword.label || keyword.id;
- // 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);
- const [keywordRef, shortenedKeyword] = useShortenedText(keywordCandidates);
+ // The keyword the server stores is a detail for people who asked for the
+ // advanced settings: a tooltip on the tag, not a line of its own.
+ const showAdvanced = useSettingsStore((s) => s.showAdvancedSettings);
const visibilityOptions = [
{ value: "show", label: t("visibility.show") },
{ value: "unread", label: t("visibility.unread") },
@@ -128,16 +123,12 @@ function KeywordRow({
>
{/* On a phone the name gets a line of its own, the controls wrap under it. */}
-