feat(options): add tab width selector

apps/client/src/translations/en/translation.json

@@ -1930,7 +1930,9 @@
     "theme_group_light": "Light themes",
     "theme_group_dark": "Dark themes",
     "copy_title": "Copy to clipboard",
-    "click_to_copy": "Click to copy"
+    "click_to_copy": "Click to copy",
+    "tab_width": "Tab width",
+    "tab_width_unit": "spaces"
   },
   "classic_editor_toolbar": {
     "title": "Formatting"

apps/client/src/widgets/type_widgets/options/text_notes.tsx

@@ -264,6 +264,7 @@ function CodeBlockStyle() {
     }, []);
     const [ codeBlockTheme, setCodeBlockTheme ] = useTriliumOption("codeBlockTheme");
     const [ codeBlockWordWrap, setCodeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
+    const [ codeBlockTabWidth, setCodeBlockTabWidth ] = useTriliumOption("codeBlockTabWidth");
 
     return (
         <OptionsSection title={t("highlighting.title")}>
@@ -285,6 +286,15 @@ function CodeBlockStyle() {
                 onChange={setCodeBlockWordWrap}
             />
 
+            <OptionsRow name="code-block-tab-width" label={t("code_block.tab_width")}>
+                <FormTextBoxWithUnit
+                    type="number" min={1} max={16} step={1}
+                    unit={t("code_block.tab_width_unit")}
+                    currentValue={codeBlockTabWidth}
+                    onBlur={setCodeBlockTabWidth}
+                />
+            </OptionsRow>
+
             <CodeBlockPreview theme={codeBlockTheme} wordWrap={codeBlockWordWrap} />
         </OptionsSection>
     );

apps/server/src/routes/api/options.ts

@@ -30,6 +30,7 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "theme",
     "codeBlockTheme",
     "codeBlockWordWrap",
+    "codeBlockTabWidth",
     "codeNoteTheme",
     "syncServerHost",
     "syncServerTimeout",

apps/server/src/services/options_init.ts

@@ -216,6 +216,7 @@ const defaultOptions: DefaultOption[] = [
         isSynced: false
     },
     { name: "codeBlockWordWrap", value: "false", isSynced: true },
+    { name: "codeBlockTabWidth", value: "4", isSynced: true },
 
     // Text note configuration
     { name: "textNoteEditorType", value: "ckeditor-balloon", isSynced: true },

packages/commons/src/lib/options_interface.ts

@@ -160,6 +160,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     disableTray: boolean;
     editedNotesOpenInRibbon: boolean;
     codeBlockWordWrap: boolean;
+    codeBlockTabWidth: number;
     textNoteEditorMultilineToolbar: boolean;
     /** Whether keyboard auto-completion for emojis is triggered when typing `:`. */
     textNoteEmojiCompletionEnabled: boolean;