add toolbar customization over drag & drop

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

@@ -1806,6 +1806,35 @@
       "multiline-toolbar": "Display the toolbar on multiple lines if it doesn't fit."
     }
   },
+  "toolbar_customization": {
+    "title": "Toolbar customization",
+    "description": "Arrange toolbar buttons by dragging rows up and down. The order here matches the left-to-right order in the editor. Click a chip below to add it, or drag it into the list above.",
+    "tab_classic": "Classic toolbar",
+    "tab_floating": "Floating toolbar",
+    "active_section": "Active toolbar items — top = leftmost in editor",
+    "available_section": "Available items — click to add",
+    "all_active": "All items are already in the toolbar",
+    "drop_to_remove": "Drop here to remove from toolbar",
+    "release_to_remove_from_toolbar": "Release to remove from toolbar",
+    "drag_to_remove_from_toolbar": "Drag here to remove from toolbar",
+    "release_to_remove": "Release to remove",
+    "drag_here": "Drag items from below, or click a chip to add",
+    "pool_hint": "Click a chip to append it, or drag it into the list above to insert at a specific position",
+    "add_separator": "Separator",
+    "add_separator_hint": "Add a visual separator | between items",
+    "add_group": "Group (···)",
+    "add_group_hint": "Add a dropdown group that appears as a ··· button in the editor. Drag items onto the group row to fill it.",
+    "group_empty": "Drop items here or drag from the pool below",
+    "separator": "separator",
+    "drop_on_group": "Drop a pool item here to add it to this group",
+    "expand": "Expand group",
+    "collapse": "Collapse group",
+    "remove_item": "Remove from toolbar",
+    "save": "Save & Reload",
+    "save_title": "Save changes and reload the page to apply the new toolbar layout",
+    "reset": "Reset to defaults",
+    "reset_title": "Remove all customizations and restore the built-in toolbar layout"
+  },
   "electron_context_menu": {
     "add-term-to-dictionary": "Add \"{{term}}\" to dictionary",
     "cut": "Cut",

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

@@ -22,13 +22,15 @@ import { getHtml } from "../../react/RawHtml";
 import AutoReadOnlySize from "./components/AutoReadOnlySize";
 import CheckboxList from "./components/CheckboxList";
 import OptionsSection from "./components/OptionsSection";
+import ToolbarCustomization from "./toolbar_customization";
 
 const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
 export default function TextNoteSettings() {
     return (
         <>
             <FormattingToolbar />
+            <ToolbarCustomization />
             <EditorFeatures />
             <HeadingStyle />
             <CodeBlockStyle />