From 692a31772dc873f13a76a60f5e8ef71f6f3accb0 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 15 Apr 2026 09:01:23 +0300
Subject: [PATCH] feat(code): status bar indentation selector

---
 .../src/translations/en/translation.json      |  7 ++-
 apps/client/src/widgets/layout/StatusBar.tsx  | 51 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index cb20feac5e..c5479736f3 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2297,7 +2297,12 @@
     "note_paths_one": "{{count}} path",
     "note_paths_other": "{{count}} paths",
     "note_paths_title": "Note paths",
-    "code_note_switcher": "Change language mode"
+    "code_note_switcher": "Change language mode",
+    "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}})"
   },
   "attributes_panel": {
     "title": "Note Attributes"
diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx
index 16f7ad1123..10c2997f85 100644
--- a/apps/client/src/widgets/layout/StatusBar.tsx
+++ b/apps/client/src/widgets/layout/StatusBar.tsx
@@ -20,7 +20,7 @@ import { formatDateTime } from "../../utils/formatters";
 import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions";
 import Dropdown, { DropdownProps } from "../react/Dropdown";
 import { FormDropdownDivider, FormListItem } from "../react/FormList";
-import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
+import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteLabelInt, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents, useTriliumOption } from "../react/hooks";
 import Icon from "../react/Icon";
 import LinkButton from "../react/LinkButton";
 import { ParentComponent } from "../react/react_utils";
@@ -69,6 +69,7 @@ export default function StatusBar() {
 
                     <div className="actions-row">
                         <CodeNoteSwitcher {...context} />
+                        <TabWidthSwitcher {...context} />
                         <LanguageSwitcher {...context} />
                         {!isHiddenNote && <NotePaths {...context} />}
                         <AttributesButton {...attributesContext} />
@@ -436,6 +437,54 @@ function NotePaths({ note, hoistedNoteId, notePath }: StatusBarContext) {
 }
 //#endregion
 
+//#region Tab width switcher
+const TAB_WIDTH_OPTIONS = [1, 2, 3, 4, 6, 8] as const;
+
+function TabWidthSwitcher({ note }: StatusBarContext) {
+    const [ codeNoteTabWidth ] = useTriliumOption("codeNoteTabWidth");
+    const [ noteTabWidth, setNoteTabWidth ] = useNoteLabelInt(note, "tabWidth");
+    const globalTabWidth = parseInt(codeNoteTabWidth) || 4;
+    const effectiveTabWidth = noteTabWidth ?? globalTabWidth;
+    const hasPerNoteOverride = noteTabWidth != null;
+
+    return (note.type === "code" &&
+        <StatusBarDropdown
+            icon="bx bx-right-indent"
+            text={t("status_bar.tab_width", { width: effectiveTabWidth })}
+            title={t("status_bar.tab_width_title")}
+        >
+            {TAB_WIDTH_OPTIONS.map(size => (
+                <FormListItem
+                    key={size}
+                    checked={effectiveTabWidth === size}
+                    onClick={() => {
+                        if (hasPerNoteOverride) {
+                            setNoteTabWidth(size);
+                        } else {
+                            attributes.setLabel(note.noteId, "tabWidth", String(size));
+                        }
+                    }}
+                >
+                    {t("status_bar.tab_width_spaces", { count: size })}
+                </FormListItem>
+            ))}
+            <FormDropdownDivider />
+            {hasPerNoteOverride
+                ? <FormListItem
+                    icon="bx bx-x"
+                    onClick={() => attributes.removeOwnedLabelByName(note, "tabWidth")}
+                >
+                    {t("status_bar.tab_width_use_default", { width: globalTabWidth })}
+                </FormListItem>
+                : <FormListItem icon="bx bx-pin" onClick={() => attributes.setLabel(note.noteId, "tabWidth", String(effectiveTabWidth))}>
+                    {t("status_bar.tab_width_per_note")}
+                </FormListItem>
+            }
+        </StatusBarDropdown>
+    );
+}
+//#endregion
+
 //#region Code note switcher
 function CodeNoteSwitcher({ note }: StatusBarContext) {
     const [ modalShown, setModalShown ] = useState(false);