diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index c5479736f3..0f74650dd1 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2301,8 +2301,15 @@
"tab_width": "Tab Width: {{width}}",
"tab_width_title": "Change tab width",
"tab_width_spaces": "{{count}} spaces",
- "tab_width_per_note": "Set for this note",
- "tab_width_use_default": "Use default ({{width}})"
+ "tab_width_spaces_short": "Spaces: {{width}}",
+ "tab_width_tabs": "Tabs ({{width}})",
+ "tab_width_use_default": "Use default ({{width}})",
+ "tab_width_use_default_style": "Use default ({{style}})",
+ "tab_width_display_header": "Display width",
+ "tab_width_reindent_header": "Re-indent content to",
+ "tab_width_style_header": "Indent using",
+ "tab_width_style_spaces": "Spaces",
+ "tab_width_style_tabs": "Tabs"
},
"attributes_panel": {
"title": "Note Attributes"
diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx
index c6b356ab88..0fc541a828 100644
--- a/apps/client/src/widgets/layout/StatusBar.tsx
+++ b/apps/client/src/widgets/layout/StatusBar.tsx
@@ -19,7 +19,7 @@ import { openInAppHelpFromUrl } from "../../services/utils";
import { formatDateTime } from "../../utils/formatters";
import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions";
import Dropdown, { DropdownProps } from "../react/Dropdown";
-import { FormDropdownDivider, FormListItem } from "../react/FormList";
+import { FormDropdownDivider, FormListHeader, FormListItem } from "../react/FormList";
import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteLabelInt, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents, useTriliumOptionInt } from "../react/hooks";
import Icon from "../react/Icon";
import LinkButton from "../react/LinkButton";
@@ -459,18 +459,15 @@ function TabWidthSwitcher({ note, noteContext }: StatusBarContext) {
const effectiveTabWidth = noteTabWidth ?? globalTabWidth;
const hasPerNoteOverride = noteTabWidth != null;
- const changeTabWidth = async (newWidth: number | null) => {
- const oldWidth = effectiveTabWidth;
- const resolvedNewWidth = newWidth ?? globalTabWidth;
- setNoteTabWidth(newWidth);
- if (oldWidth === resolvedNewWidth) return;
-
+ const reindentTo = async (newWidth: number) => {
+ if (newWidth === effectiveTabWidth) return;
const editor = await noteContext.getCodeEditor();
if (!editor) return;
- const reindented = reindentSpaces(editor.getText(), oldWidth, resolvedNewWidth);
+ const reindented = reindentSpaces(editor.getText(), effectiveTabWidth, newWidth);
if (reindented !== editor.getText()) {
editor.setText(reindented);
}
+ setNoteTabWidth(newWidth);
};
return (note.type === "code" &&
@@ -479,21 +476,32 @@ function TabWidthSwitcher({ note, noteContext }: StatusBarContext) {
text={t("status_bar.tab_width", { width: effectiveTabWidth })}
title={t("status_bar.tab_width_title")}
>
+
{TAB_WIDTH_OPTIONS.map(size => (
changeTabWidth(size)}
+ onClick={() => setNoteTabWidth(size)}
>
{t("status_bar.tab_width_spaces", { count: size })}
))}
- {hasPerNoteOverride && <>
-
- changeTabWidth(null)}>
+ {hasPerNoteOverride &&
+ setNoteTabWidth(null)}>
{t("status_bar.tab_width_use_default", { width: globalTabWidth })}
- >}
+ }
+
+
+ {TAB_WIDTH_OPTIONS.map(size => (
+ reindentTo(size)}
+ >
+ {t("status_bar.tab_width_spaces", { count: size })}
+
+ ))}
);
}