Merge branch 'develop' into feature/port_ts

package-lock.json

@@ -25,7 +25,7 @@
         "cheerio": "1.0.0",
         "chokidar": "4.0.3",
         "cls-hooked": "4.2.2",
-        "codemirror": "5.65.18",
+        "codemirror": "5.65.19",
         "compression": "1.8.0",
         "cookie-parser": "1.4.7",
         "csrf-csrf": "3.1.0",
@@ -43,7 +43,7 @@
         "express": "4.21.2",
         "express-rate-limit": "7.5.0",
         "express-session": "1.18.1",
-        "force-graph": "1.49.4",
+        "force-graph": "1.49.5",
         "fs-extra": "11.3.0",
         "helmet": "8.1.0",
         "html": "1.0.0",
@@ -70,7 +70,7 @@
         "marked": "15.0.7",
         "mermaid": "11.5.0",
         "mime-types": "2.1.35",
-        "multer": "1.4.5-lts.1",
+        "multer": "1.4.5-lts.2",
         "normalize-strings": "1.1.1",
         "normalize.css": "8.0.1",
         "panzoom": "9.4.3",
@@ -164,7 +164,7 @@
         "bootstrap": "5.3.3",
         "cross-env": "7.0.3",
         "css-loader": "7.1.2",
-        "electron": "34.3.3",
+        "electron": "35.0.3",
         "eslint": "9.22.0",
         "esm": "3.2.25",
         "globals": "16.0.0",
@@ -175,6 +175,7 @@
         "lorem-ipsum": "2.0.8",
         "mind-elixir": "4.4.3",
         "mini-css-extract-plugin": "2.9.2",
+        "node-abi": "4.2.0",
         "nodemon": "3.1.9",
         "postcss-loader": "8.1.1",
         "prettier": "3.5.3",
@@ -183,13 +184,13 @@
         "sass": "1.86.0",
         "sass-loader": "16.0.5",
         "split.js": "1.6.5",
-        "supertest": "7.0.0",
+        "supertest": "7.1.0",
         "svg-pan-zoom": "3.6.2",
         "swagger-jsdoc": "6.2.8",
         "ts-loader": "9.5.2",
         "tslib": "2.8.1",
         "tsx": "4.19.3",
-        "typedoc": "0.28.0",
+        "typedoc": "0.28.1",
         "typescript": "5.8.2",
         "typescript-eslint": "8.27.0",
         "vitest": "3.0.9",
@@ -1653,6 +1654,19 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/@electron/rebuild/node_modules/node-abi": {
+      "version": "3.74.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.74.0.tgz",
+      "integrity": "sha512-c5XK0MjkGBrQPGYG24GBADZud0NCbznxNx0ZkS+ebUTrmV1qTDxPxSL8zEAPURXSbLRWVexxmP4986BziahL5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@electron/remote": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.2.tgz",
@@ -8547,9 +8561,9 @@
       }
     },
     "node_modules/codemirror": {
-      "version": "5.65.18",
+      "version": "5.65.19",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.18.tgz",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.19.tgz",
-      "integrity": "sha512-Gaz4gHnkbHMGgahNt3CA5HBk5lLQBqmD/pBgeB4kQU6OedZmqMBjlRF0LSrp2tJ4wlLNPm2FfaUd1pDy0mdlpA==",
+      "integrity": "sha512-+aFkvqhaAVr1gferNMuN8vkTSrWIFvzlMV9I2KBLCWS2WpZ2+UAkZjlMZmEuT+gcXTi6RrGQCkWq1/bDtGqhIA==",
       "license": "MIT"
     },
     "node_modules/color-convert": {
@@ -10137,14 +10151,14 @@
       }
     },
     "node_modules/electron": {
-      "version": "34.3.3",
+      "version": "35.0.3",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-34.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-35.0.3.tgz",
-      "integrity": "sha512-7m1FiO1mwc1K/UqqnnkG7Ik/kAngDzmLfHwcl+xaWgCQ+Sts9rlEqzOh6g1GHhDqebrbs4bO/aU+NDi32fCciQ==",
+      "integrity": "sha512-kjQAYEWXSr2TyK19IZoF85dzFIBaYuX7Yp/C+34b5Y/jmI2z270CGie+RjmEGMMitsy0G8YJKftukhYMuWlK6g==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@electron/get": "^2.0.0",
-        "@types/node": "^20.9.0",
+        "@types/node": "^22.7.7",
         "extract-zip": "^2.0.1"
       },
       "bin": {
@@ -10858,15 +10872,6 @@
         "global-agent": "^3.0.0"
       }
     },
-    "node_modules/electron/node_modules/@types/node": {
-      "version": "20.17.24",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.24.tgz",
-      "integrity": "sha512-d7fGCyB96w9BnWQrOsJtpyiSaBcAYYr75bnK6ZRjDbql2cGLj/3GsL5OYmLPNq76l7Gf2q4Rv9J2o6h5CrD9sA==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~6.19.2"
-      }
-    },
     "node_modules/electron/node_modules/fs-extra": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
@@ -10890,12 +10895,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/electron/node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "license": "MIT"
-    },
     "node_modules/electron/node_modules/universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -12232,9 +12231,9 @@
       }
     },
     "node_modules/force-graph": {
-      "version": "1.49.4",
+      "version": "1.49.5",
-      "resolved": "https://registry.npmjs.org/force-graph/-/force-graph-1.49.4.tgz",
+      "resolved": "https://registry.npmjs.org/force-graph/-/force-graph-1.49.5.tgz",
-      "integrity": "sha512-TMbbXg3n0pjI8cmgNlv1IKEGewnd9LdwKVJ4cj4XzZXqP/Q5aSjsyuxzIITtkfDJ+KDsiLql1FHu19Lqrq41uQ==",
+      "integrity": "sha512-mCTLxsaOPfp4Jq4FND8sHTpa8aZDLNXgkwAN98IDZ8Ve3nralz0gNsmE4Nx6NFm48olJ0gzCQYYLJrrYDqifew==",
       "license": "MIT",
       "dependencies": {
         "@tweenjs/tween.js": "18 - 25",
@@ -15869,9 +15868,9 @@
       "license": "MIT"
     },
     "node_modules/multer": {
-      "version": "1.4.5-lts.1",
+      "version": "1.4.5-lts.2",
-      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.2.tgz",
-      "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
+      "integrity": "sha512-VzGiVigcG9zUAoCNU+xShztrlr1auZOlurXynNvO9GiWD1/mTBbUljOKY+qMeazBqXgRnjzeEgJI/wyjJUHg9A==",
       "license": "MIT",
       "dependencies": {
         "append-field": "^1.0.0",
@@ -15978,15 +15977,16 @@
       "license": "MIT"
     },
     "node_modules/node-abi": {
-      "version": "3.71.0",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.71.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-4.2.0.tgz",
-      "integrity": "sha512-SZ40vRiy/+wRTf21hxkkEjPJZpARzUMVcJoQse2EF8qkUWbbO2z7vd5oA/H6bVH6SZQ5STGcu0KRDS7biNRfxw==",
+      "integrity": "sha512-admQxilhDcmFJbUl4LQzGu+QyEijW9rctKRH2P7LNavAvln1bdK9OcujM3yi2KysKI41dxTrDtp6QfGEZeCbkg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "semver": "^7.3.5"
+        "semver": "^7.6.3"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=22.12.0"
       }
     },
     "node_modules/node-addon-api": {
@@ -17377,6 +17377,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/prebuild-install/node_modules/node-abi": {
+      "version": "3.74.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.74.0.tgz",
+      "integrity": "sha512-c5XK0MjkGBrQPGYG24GBADZud0NCbznxNx0ZkS+ebUTrmV1qTDxPxSL8zEAPURXSbLRWVexxmP4986BziahL5w==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -19730,9 +19742,9 @@
       }
     },
     "node_modules/supertest": {
-      "version": "7.0.0",
+      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/supertest/-/supertest-7.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/supertest/-/supertest-7.1.0.tgz",
-      "integrity": "sha512-qlsr7fIC0lSddmA3tzojvzubYxvlGtzumcdHgPwbFWMISQwL22MhM2Y3LNt+6w9Yyx7559VW5ab70dgphm8qQA==",
+      "integrity": "sha512-5QeSO8hSrKghtcWEoPiO036fxH0Ii2wVQfFZSP0oqQhmjk8bOLhDFXr4JrvaFmPuEWUoq4znY3uSi8UzLKxGqw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -20605,9 +20617,9 @@
       }
     },
     "node_modules/typedoc": {
-      "version": "0.28.0",
+      "version": "0.28.1",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.28.0.tgz",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.28.1.tgz",
-      "integrity": "sha512-UU+xxZXrpnUhEulBYRwY2afoYFC24J2fTFovOs3llj2foGShCoKVQL6cQCfQ+sBAOdiFn2dETpZ9xhah+CL3RQ==",
+      "integrity": "sha512-Mn2VPNMaxoe/hlBiLriG4U55oyAa3Xo+8HbtEwV7F5WEOPXqtxzGuMZhJYHaqFJpajeQ6ZDUC2c990NAtTbdgw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {

package.json

@@ -85,7 +85,7 @@
     "cheerio": "1.0.0",
     "chokidar": "4.0.3",
     "cls-hooked": "4.2.2",
-    "codemirror": "5.65.18",
+    "codemirror": "5.65.19",
     "compression": "1.8.0",
     "cookie-parser": "1.4.7",
     "csrf-csrf": "3.1.0",
@@ -103,7 +103,7 @@
     "express": "4.21.2",
     "express-rate-limit": "7.5.0",
     "express-session": "1.18.1",
-    "force-graph": "1.49.4",
+    "force-graph": "1.49.5",
     "fs-extra": "11.3.0",
     "helmet": "8.1.0",
     "html": "1.0.0",
@@ -130,7 +130,7 @@
     "marked": "15.0.7",
     "mermaid": "11.5.0",
     "mime-types": "2.1.35",
-    "multer": "1.4.5-lts.1",
+    "multer": "1.4.5-lts.2",
     "normalize-strings": "1.1.1",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
@@ -221,7 +221,7 @@
     "bootstrap": "5.3.3",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
-    "electron": "34.3.3",
+    "electron": "35.0.3",
     "eslint": "9.22.0",
     "esm": "3.2.25",
     "globals": "16.0.0",
@@ -232,6 +232,7 @@
     "lorem-ipsum": "2.0.8",
     "mind-elixir": "4.4.3",
     "mini-css-extract-plugin": "2.9.2",
+    "node-abi": "4.2.0",
     "nodemon": "3.1.9",
     "postcss-loader": "8.1.1",
     "prettier": "3.5.3",
@@ -240,13 +241,13 @@
     "sass": "1.86.0",
     "sass-loader": "16.0.5",
     "split.js": "1.6.5",
-    "supertest": "7.0.0",
+    "supertest": "7.1.0",
     "svg-pan-zoom": "3.6.2",
     "swagger-jsdoc": "6.2.8",
     "ts-loader": "9.5.2",
     "tslib": "2.8.1",
     "tsx": "4.19.3",
-    "typedoc": "0.28.0",
+    "typedoc": "0.28.1",
     "typescript": "5.8.2",
     "typescript-eslint": "8.27.0",
     "vitest": "3.0.9",

src/public/app/widgets/type_widgets/options/appearance/fonts.ts

@@ -65,10 +65,10 @@ const TPL = `
         <div class="col-6">
             <label for="main-font-size">${t("fonts.size")}</label>
 
-            <div class="input-group main-font-size-input-group">
+            <label class="input-group tn-number-unit-pair main-font-size-input-group">
                 <input id="main-font-size" type="number" class="main-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 
@@ -83,10 +83,10 @@ const TPL = `
         <div class="col-6">
             <label for="tree-font-size">${t("fonts.size")}</label>
 
-            <div class="input-group tree-font-size-input-group">
+            <label class="input-group tn-number-unit-pair tree-font-size-input-group">
                 <input id="tree-font-size" type="number" class="tree-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 
@@ -101,10 +101,10 @@ const TPL = `
         <div class="col-6">
             <label for="detail-font-size">${t("fonts.size")}</label>
 
-            <div class="input-group detail-font-size-input-group">
+            <label class="input-group tn-number-unit-pair detail-font-size-input-group">
                 <input id="detail-font-size" type="number" class="detail-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 
@@ -119,10 +119,10 @@ const TPL = `
         <div class="col-6">
             <label for="monospace-font-size">${t("fonts.size")}</label>
 
-            <div class="input-group monospace-font-size-input-group">
+            <label class="input-group tn-number-unit-pair monospace-font-size-input-group">
                 <input id="monospace-font-size" type="number" class="monospace-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 

src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts

@@ -14,7 +14,10 @@ const TPL = `
     <div class="form-group row">
         <div class="col-md-6">
             <label for="max-content-width">${t("max_content_width.max_width_label")}</label>
-            <input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
+            <label class="input-group tn-number-unit-pair">
+                <input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
+                <span class="input-group-text">${t("max_content_width.max_width_unit")}</span>
+            </label>
         </div>
     </div>
 

src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts

@@ -10,7 +10,10 @@ const TPL = `
 
     <div class="form-group">
         <label for="auto-readonly-size-code">${t("code_auto_read_only_size.label")}</label>
-        <input id="auto-readonly-size-code" class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
+        <label class="input-group tn-number-unit-pair">
+            <input id="auto-readonly-size-code" class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
+            <span class="input-group-text">${t("code_auto_read_only_size.unit")}</span>
+        </label>
     </div>
 </div>`;
 

src/public/app/widgets/type_widgets/options/images/images.ts

@@ -30,12 +30,18 @@ const TPL = `
     <div class="image-compression-enabled-wraper">
         <div class="form-group">
             <label>${t("images.max_image_dimensions")}</label>
-            <input class="image-max-width-height form-control options-number-input" type="number" min="1">
+            <label class="input-group tn-number-unit-pair">
+                <input class="image-max-width-height form-control options-number-input" type="number" min="1">
+                <span class="input-group-text">${t("images.max_image_dimensions_unit")}</span>
+            </label>
         </div>
 
         <div class="form-group">
             <label>${t("images.jpeg_quality_description")}</label>
-            <input class="image-jpeg-quality form-control options-number-input" min="10" max="100" type="number">
+            <label class="input-group tn-number-unit-pair">
+                <input class="image-jpeg-quality form-control options-number-input" min="10" max="100" type="number">
+                <span class="input-group-text">%</span>
+            </label>
         </div>
     </div>
 </div>

src/public/app/widgets/type_widgets/options/other/revision_snapshots_limit.ts

@@ -12,7 +12,10 @@ const TPL = `
 
     <div class="form-group">
         <label>${t("revisions_snapshot_limit.snapshot_number_limit_label")}</label>
-        <input class="revision-snapshot-number-limit form-control options-number-input" type="number" min="-1">
+        <label class="input-group tn-number-unit-pair">
+            <input class="revision-snapshot-number-limit form-control options-number-input" type="number" min="-1">
+            <span class="input-group-text">${t("revisions_snapshot_limit.snapshot_number_limit_unit")}</span>
+        </label>
     </div>
 
     <button class="erase-excess-revision-snapshots-now-button btn btn-sm">

src/public/app/widgets/type_widgets/options/sync.ts

@@ -14,11 +14,6 @@ const TPL = `
             <input id="sync-server-host" class="sync-server-host form-control" placeholder="https://<host>:<port>">
         </div>
 
-        <div class="form-group">
-            <label for="sync-server-timeout" >${t("sync_2.timeout")}</label>
-            <input id="sync-server-timeout" class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
-        </div>
-
         <div class="form-group">
             <label for="sync-proxy form-control" >${t("sync_2.proxy_label")}</label>
             <input id="sync-proxy form-control" class="sync-proxy form-control" placeholder="https://<host>:<port>">
@@ -27,6 +22,14 @@ const TPL = `
             <p class="form-text">${t("sync_2.special_value_description")}</p>
         </div>
 
+        <div class="form-group">
+            <label for="sync-server-timeout">${t("sync_2.timeout")}</label>
+            <label class="input-group tn-number-unit-pair">
+                <input id="sync-server-timeout" class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
+                <span class="input-group-text">${t("sync_2.timeout_unit")}</span>
+            </label>
+        </div>
+
         <div style="display: flex; justify-content: space-between;">
             <button class="btn btn-primary">${t("sync_2.save")}</button>
 

src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts

@@ -9,7 +9,10 @@ const TPL = `
     ${t("table_of_contents.description")}
 
     <div class="form-group">
-        <input type="number" class="min-toc-headings form-control options-number-input options-number-input" min="0" max="9999999999999999" step="1" />
+        <label class="input-group tn-number-unit-pair">
+            <input type="number" class="min-toc-headings form-control options-number-input options-number-input" min="0" max="9999999999999999" step="1" />
+            <span class="input-group-text">${t("table_of_contents.unit")}</span>
+        </label>
     </div>
 
     <p class="form-text">${t("table_of_contents.disable_info")}</p>

src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts

@@ -10,7 +10,10 @@ const TPL = `
 
     <div class="form-group">
         <label for="auto-readonly-size-text">${t("text_auto_read_only_size.label")}</label>
-        <input id="auto-readonly-size-text" class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
+        <label class="input-group tn-number-unit-pair">
+            <input id="auto-readonly-size-text" class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
+            <span class="input-group-text">${t("text_auto_read_only_size.unit")}</span>
+        </label>
     </div>
 </div>`;
 

src/public/stylesheets/theme-next-dark.css

@@ -174,6 +174,14 @@
     --promoted-attribute-card-background-color: var(--card-background-color);
     --promoted-attribute-card-shadow-color: #000000b3;
 
+    --floating-button-shadow-color: #00000080;
+    --floating-button-background-color: #494949d2;
+    --floating-button-color: var(--button-text-color);
+    --floating-button-hover-background: #ffffff20;
+    --floating-button-hover-color: white;
+    --floating-button-hide-button-background: gray;
+    --floating-button-separator-color: #00000080;
+
     --right-pane-item-hover-background: #ffffff26;
     --right-pane-item-hover-color: white;
 

src/public/stylesheets/theme-next-light.css

@@ -167,6 +167,14 @@
     --promoted-attribute-card-background-color: var(--card-background-color);
     --promoted-attribute-card-shadow-color: #00000033;
 
+    --floating-button-shadow-color: #0000001f;
+    --floating-button-background-color: #e4e4e4cc;
+    --floating-button-color: var(--button-text-color);
+    --floating-button-hover-background: #00000017;
+    --floating-button-hover-color: black;
+    --floating-button-hide-button-background: gray;
+    --floating-button-separator-color: #c0c0c0d1;
+
     --new-tab-button-background: #d8d8d8;
     --new-tab-button-color: #3a3a3a;
     --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

src/public/stylesheets/theme-next/base.css

@@ -3,7 +3,6 @@
 @import url(./dialogs.css);
 @import url(./pages.css);
 @import url(./ribbon.css);
-@import url(./notes/empty.css);
 @import url(./notes/text.css);
 
 @font-face {
@@ -54,6 +53,11 @@
 
     --center-pane-border-radius: 10px;
 
+    --floating-button-height: 34px;
+    --floating-button-width: 40px;
+    --floating-button-icon-size: 20px;
+    --floating-button-show-hide-button-size: 26px;
+
     --menu-padding-size: 8px;
     --menu-item-icon-vert-offset: -2px;
 

src/public/stylesheets/theme-next/dialogs.css

@@ -385,3 +385,14 @@ div.tn-tool-dialog {
 .delete-notes-list .note-path {
     padding-left: 8px;
 }
+
+/*
+ * ATTRIBUTE DETAIL DIALOG
+ */
+
+/* Labels */
+.attr-edit-table th {
+    padding-right: 12px;
+    font-weight: normal;
+    white-space: nowrap;
+}

src/public/stylesheets/theme-next/forms.css

@@ -220,6 +220,7 @@ input::selection,
     border-radius: 6px;
     padding-right: 8px;
     color: var(--quick-search-color);
+    flex-wrap: nowrap;
 }
 
 .input-group:hover {
@@ -302,6 +303,24 @@ input::selection,
     font-style: italic;
 }
 
+/*
+    Numeric input with measurement unit as a sufix
+
+    <label class="input-group tn-number-unit-pair">
+        <input ... >
+        <span class="input-group-text">meters</span>
+    </label>
+*/
+
+label.input-group.tn-number-unit-pair {
+    width: fit-content;
+}
+
+label.input-group.tn-number-unit-pair input {
+    width: 120px !important;
+    padding-inline-end: 0;
+}
+
 /* Combo box-like dropdown buttons */
 
 .select-button.dropdown-toggle::after {

src/public/stylesheets/theme-next/notes/empty.css

@@ -1,11 +0,0 @@
-/* The container */
-div.note-detail-empty {
-    max-width: 70%;
-    margin: 50px auto;
-}
-
-/* The search results list */
-.note-detail-empty span.aa-dropdown-menu {
-    margin-top: 1em;
-    border: unset;
-}

src/public/stylesheets/theme-next/notes/text.css

@@ -133,104 +133,3 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     background: var(--accented-background-color);
     color: var(--main-text-color);
 }
-
-/*
- * Search in text panel
- */
-
-.find-replace-widget {
-    container-type: inline-size;
-    border-top: 3px solid var(--root-background) !important;
-}
-
-.find-replace-widget > div {
-    padding: 8px;
-}
-
-.find-replace-widget > div + div {
-    padding-top: 0;
-}
-
-div.find-replace-widget div.find-widget-found-wrapper > span {
-    min-width: 50px;
-    font-style: normal;
-    font-weight: normal;
-}
-
-/* The up / down buttons of the "Find in text" input */
-.find-replace-widget .input-group button {
-    font-size: 1.3em;
-}
-
-.find-replace-widget .form-check {
-    padding-left: 0;
-    white-space: nowrap;
-}
-
-.find-replace-widget .form-check .form-check-input {
-    margin-left: 0;
-}
-
-/* Narrow version */
-@container (max-width: 600px) {
-    .find-replace-widget > *,
-    .find-replace-widget input,
-    .find-replace-widget button.btn.btn-sm {
-        font-size: .9em;
-    }
-
-    .find-widget-box {
-        position: relative;
-        justify-content: center;
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-
-    .find-widget-box,
-    .replace-widget-box {
-        padding-right: 3em !important;
-    }
-
-    .find-widget-close-button {
-        position: absolute;
-        top: .85em;
-        right: .5em;
-    }
-
-    .find-widget-box > * {
-        margin: unset !important;
-    }
-
-    div.find-widget-search-term-input-group {
-        margin-bottom: 8px;
-        max-width: unset;
-        width: 100%;
-    }
-
-    .find-widget-found-wrapper,
-    .find-widget-found-wrapper > span {
-        min-width: 0 !important;
-    }
-
-    .find-widget-spacer {
-        display: none;
-    }
-
-    .form-check {
-        min-height: unset;
-        margin-bottom: unset;
-    }
-
-    .replace-widget-box {
-        gap: 8px;
-    }
-
-    .replace-widget-box > * {
-        margin-right: unset !important;
-    }
-
-    div.replace-widget-box button.btn.btn-sm {
-        min-width: unset;
-        white-space: nowrap;
-    }
-}

src/public/stylesheets/theme-next/pages.css

@@ -101,6 +101,22 @@
     color: var(--tab-close-button-hover-background);
 }
 
+/*
+ * EMPTY NOTE PAGE
+ */
+
+/* The container */
+div.note-detail-empty {
+    max-width: 70%;
+    margin: 50px auto;
+}
+
+/* The search results list */
+.note-detail-empty span.aa-dropdown-menu {
+    margin-top: 1em;
+    border: unset;
+}
+
 /*
  * OPTIONS PAGES
  */
@@ -124,6 +140,11 @@
     height: 1em;
 }
 
+/* Add a gap between consecutive buttons */
+.note-detail-content-widget-content.options button.btn + button.btn {
+    margin-inline-start: 8px;
+}
+
 .note-detail-content-widget-content.options:has(.shortcuts-options-section)::after {
     height: 0;
 }
@@ -211,15 +232,6 @@
     font-size: .85em;
 }
 
-/* Appeareance */
-
-.main-font-size-input-group,
-.tree-font-size-input-group,
-.detail-font-size-input-group,
-.monospace-font-size-input-group {
-    width: fit-content;
-}
-
 /* Shortcuts */
 
 .note-detail-content-widget-content:has(.shortcuts-options-section) {

src/public/stylesheets/theme-next/ribbon.css

@@ -154,14 +154,3 @@ div.editability-dropdown a.dropdown-item {
 .note-info-widget {
     container: info-section / inline-size;
 }
-
-/*
- * Attribute detail dialog
- */
-
-/* Labels */
-.attr-edit-table th {
-    padding-right: 12px;
-    font-weight: normal;
-    white-space: nowrap;
-}

src/public/stylesheets/theme-next/shell.css

@@ -36,21 +36,19 @@ body.mobile {
 
 /* #region Mica */
 body.background-effects.platform-win32 {
+    --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.15);
+    --launcher-pane-horiz-background-color: rgba(255, 255, 255, 0.7);
+    --launcher-pane-vert-background-color: rgba(255, 255, 255, 0.055);
     --tab-background-color: transparent;
     --new-tab-button-background: transparent;
-    --active-tab-background-color: var(--launcher-pane-background-color); /* TODO: fix */
+    --active-tab-background-color: var(--launcher-pane-horiz-background-color);
     --background-material: tabbed;
 }
 
-body.background-effects.platform-win32 #launcher-pane {
-    --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15);
-    --launcher-pane-background-color: rgba(255, 255, 255, 0.7);
-}
-
 @media (prefers-color-scheme: dark) {
     body.background-effects.platform-win32 #launcher-pane {
-        --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5);
+        --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.5);
-        --launcher-pane-background-color: rgba(255, 255, 255, 0.09);
+        --launcher-pane-horiz-background-color: rgba(255, 255, 255, 0.09);
     }
 }
 
@@ -60,10 +58,6 @@ body.background-effects.platform-win32.layout-vertical {
     --background-material: mica;
 }
 
-body.background-effects.platform-win32.layout-vertical #launcher-pane {
-    --launcher-pane-background-color: rgba(255, 255, 255, 0.055);
-}
-
 body.background-effects.platform-win32,
 body.background-effects.platform-win32 #root-widget,
 body.background-effects.platform-win32 #launcher-pane .launcher-button {
@@ -1304,6 +1298,252 @@ div.promoted-attribute-cell .multiplicity:has(span) {
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
 }
 
+/*
+ * Floating buttons
+ */
+
+ /* Floating buttons container */
+.floating-buttons-children {
+    opacity: 1;
+    overflow: hidden;
+    transform-origin: right;
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    background: var(--floating-button-background-color);
+    backdrop-filter: blur(10px) saturate(6);
+    border-radius: 8px;
+    transition: transform 250ms ease-out,
+                opacity 250ms ease-out;
+}
+
+ /* Floating buttons container (collapsed) */
+.floating-buttons-children.temporarily-hidden {
+    display: flex !important;
+    opacity: 0;
+    transform: scaleX(0);
+    pointer-events: none;
+}
+
+/* Floating buttons */
+
+.floating-buttons-children > * {
+    margin: 0 !important;
+}
+
+div.floating-buttons-children > button,
+div.floating-buttons-children .floating-button {
+    width: var(--floating-button-width);
+    height: var(--floating-button-height);
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    font-size: var(--floating-button-icon-size);
+    align-items: center;
+    color: var(--floating-button-color);
+}
+
+div.floating-buttons-children > button:hover,
+div.floating-buttons-children .floating-button:hover {
+    background: var(--floating-button-hover-background);
+    color: var(--floating-button-hover-color);
+}
+
+ /* Show / hide buttons */
+
+div.floating-buttons-children .close-floating-buttons-button,
+div.floating-buttons .show-floating-buttons-button {
+    margin-top: calc((var(--floating-button-height) - var(--floating-button-show-hide-button-size)) / 2);
+    width: var(--floating-button-show-hide-button-size);
+    height: var(--floating-button-show-hide-button-size);
+    padding: 0;
+    border: 0;
+    font-size: calc(var(--floating-button-show-hide-button-size) * .8);
+}
+
+div.floating-buttons .show-floating-buttons-button {
+    box-shadow: 0 2px 4px var(--left-pane-background-color);
+    background: var(--left-pane-item-action-button-background);
+    color: var(--left-pane-item-action-button-color);
+    backdrop-filter: blur(10px);
+    animation: floating-buttons-show-hide-button-animation 400ms ease-out;
+}
+
+@keyframes floating-buttons-show-hide-button-animation {
+    from {
+        transform: rotate(180deg);
+    } to {
+        transform: rotate(0);
+    }
+}
+
+div.floating-buttons-children:not(.temporarily-hidden) .close-floating-buttons-button {
+    animation: floating-buttons-show-hide-button-animation 400ms ease-out;
+}
+
+div.floating-buttons-children .close-floating-buttons-button {
+    color: var(--floating-button-hide-button-background);
+    border-radius: 0;
+}
+
+div.floating-buttons-children .close-floating-buttons {
+    border-left: 2px solid var(--floating-button-separator-color);
+}
+
+div.floating-buttons-children .close-floating-buttons:has(.close-floating-buttons-button:hover) {
+    background: var(--floating-button-hover-background);
+}
+
+div.floating-buttons-children .close-floating-buttons {
+    margin-left: 0 !important;
+}
+
+/* Backlink count */
+
+.floating-buttons .backlinks-ticker {
+    height: 100%;
+    padding: 0 10px;
+    border-radius: 0;
+    border-left: 2px solid var(--floating-button-separator-color);
+    border-right: 2px solid var(--floating-button-separator-color);
+    background: transparent;
+    user-select: none;
+}
+
+.floating-buttons .backlinks-ticker:has(.backlinks-count:hover) {
+    background: var(--floating-button-hover-background);
+}
+
+/* Copy image reference */
+
+.floating-buttons .copy-image-reference-button .hidden-image-copy {
+    /* Take out of the the hidden image from flexbox to prevent the layout being affected */
+    position: absolute;
+}
+
+/* Code buttons */
+
+.floating-buttons .code-buttons-widget {
+    gap: 0;
+}
+
+/* The highlight animation */
+
+@keyframes floating-button-highlight {
+    from {
+        opacity: .25;
+    } to {
+        opacity: 1;
+    }
+}
+
+.floating-buttons .bx-tada {
+    animation: floating-button-highlight 300ms linear alternate-reverse infinite;
+}
+
+.floating-buttons .bx-tada::before {
+    font-size: var(--floating-button-icon-size);
+}
+
+/*
+ * Find and replace bar
+ */
+
+ .find-replace-widget {
+    container-type: inline-size;
+    border-top: 3px solid var(--root-background) !important;
+}
+
+.find-replace-widget > div {
+    padding: 8px;
+}
+
+.find-replace-widget > div + div {
+    padding-top: 0;
+}
+
+div.find-replace-widget div.find-widget-found-wrapper > span {
+    min-width: 50px;
+    font-style: normal;
+    font-weight: normal;
+}
+
+/* The up / down buttons of the "Find in text" input */
+.find-replace-widget .input-group button {
+    font-size: 1.3em;
+}
+
+.find-replace-widget .form-check {
+    padding-left: 0;
+    white-space: nowrap;
+}
+
+.find-replace-widget .form-check .form-check-input {
+    margin-left: 0;
+}
+
+/* Narrow version */
+@container (max-width: 600px) {
+    .find-replace-widget > *,
+    .find-replace-widget input,
+    .find-replace-widget button.btn.btn-sm {
+        font-size: .9em;
+    }
+
+    .find-widget-box {
+        position: relative;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .find-widget-box,
+    .replace-widget-box {
+        padding-right: 3em !important;
+    }
+
+    .find-widget-close-button {
+        position: absolute;
+        top: .85em;
+        right: .5em;
+    }
+
+    .find-widget-box > * {
+        margin: unset !important;
+    }
+
+    div.find-widget-search-term-input-group {
+        margin-bottom: 8px;
+        max-width: unset;
+        width: 100%;
+    }
+
+    .find-widget-found-wrapper,
+    .find-widget-found-wrapper > span {
+        min-width: 0 !important;
+    }
+
+    .find-widget-spacer {
+        display: none;
+    }
+
+    .form-check {
+        min-height: unset;
+        margin-bottom: unset;
+    }
+
+    .replace-widget-box {
+        gap: 8px;
+    }
+
+    .replace-widget-box > * {
+        margin-right: unset !important;
+    }
+
+    div.replace-widget-box button.btn.btn-sm {
+        min-width: unset;
+        white-space: nowrap;
+    }
+}
+
 /*
  * RIGHT PANE: TABLE OF CONTENTS AND HIGHLIGHT LIST
  */

src/public/translations/en/translation.json

@@ -1090,7 +1090,8 @@
   "max_content_width": {
     "title": "Content Width",
     "default_description": "Trilium by default limits max content width to improve readability for maximized screens on wide screens.",
-    "max_width_label": "Max content width in pixels",
+    "max_width_label": "Max content width",
+    "max_width_unit": "pixels",
     "apply_changes_description": "To apply content width changes, click on",
     "reload_button": "reload frontend",
     "reload_description": "changes from appearance options"
@@ -1128,7 +1129,8 @@
   "code_auto_read_only_size": {
     "title": "Automatic Read-Only Size",
     "description": "Automatic read-only note size is the size after which notes will be displayed in a read-only mode (for performance reasons).",
-    "label": "Automatic read-only size (code notes)"
+    "label": "Automatic read-only size (code notes)",
+    "unit": "characters"
   },
   "code-editor-options": {
     "title": "Editor"
@@ -1149,7 +1151,8 @@
     "download_images_automatically": "Download images automatically for offline use.",
     "download_images_description": "Pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline.",
     "enable_image_compression": "Enable image compression",
-    "max_image_dimensions": "Max width / height of an image in pixels (image will be resized if it exceeds this setting).",
+    "max_image_dimensions": "Max width / height of an image (image will be resized if it exceeds this setting).",
+    "max_image_dimensions_unit": "pixels",
     "jpeg_quality_description": "JPEG quality (10 - worst quality, 100 - best quality, 50 - 85 is recommended)"
   },
   "attachment_erasure_timeout": {
@@ -1181,6 +1184,7 @@
     "note_revisions_snapshot_limit_title": "Note Revision Snapshot Limit",
     "note_revisions_snapshot_limit_description": "The note revision snapshot number limit refers to the maximum number of revisions that can be saved for each note. Where -1 means no limit, 0 means delete all revisions. You can set the maximum revisions for a single note through the #versioningLimit label.",
     "snapshot_number_limit_label": "Note revision snapshot number limit:",
+    "snapshot_number_limit_unit": "snapshots",
     "erase_excess_revision_snapshots": "Erase excess revision snapshots now",
     "erase_excess_revision_snapshots_prompt": "Excess revision snapshots have been erased."
   },
@@ -1223,13 +1227,15 @@
   "table_of_contents": {
     "title": "Table of Contents",
     "description": "Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number:",
+    "unit": "headings",
     "disable_info": "You can also use this option to effectively disable TOC by setting a very high number.",
     "shortcut_info": "You can configure a keyboard shortcut for quickly toggling the right pane (including TOC) in the Options -> Shortcuts (name 'toggleRightPane')."
   },
   "text_auto_read_only_size": {
     "title": "Automatic Read-Only Size",
     "description": "Automatic read-only note size is the size after which notes will be displayed in a read-only mode (for performance reasons).",
-    "label": "Automatic read-only size (text notes)"
+    "label": "Automatic read-only size (text notes)",
+    "unit": "characters"
   },
   "i18n": {
     "title": "Localization",
@@ -1329,7 +1335,8 @@
   "sync_2": {
     "config_title": "Sync Configuration",
     "server_address": "Server instance address",
-    "timeout": "Sync timeout (milliseconds)",
+    "timeout": "Sync timeout",
+    "timeout_unit": "milliseconds",
     "proxy_label": "Sync proxy server (optional)",
     "note": "Note",
     "note_description": "If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only).",

src/public/translations/ro/translation.json

@@ -353,7 +353,8 @@
   "code_auto_read_only_size": {
     "description": "Marchează pragul în care o notiță de o anumită dimensiune va fi afișată în mod de citire (pentru motive de performanță).",
     "label": "Pragul de dimensiune pentru setarea modului de citire automat (la notițe de cod)",
-    "title": "Pragul de mod de citire automat"
+    "title": "Pragul de mod de citire automat",
+    "unit": "caractere"
   },
   "code_buttons": {
     "execute_button_title": "Execută scriptul",
@@ -697,7 +698,8 @@
     "enable_image_compression": "Activează compresia imaginilor",
     "images_section_title": "Imagini",
     "jpeg_quality_description": "Calitatea JPEG (10 - cea mai slabă calitate, 100 - cea mai bună calitate, se recomandă între 50 și 85)",
-    "max_image_dimensions": "Lungimea/lățimea maximă a unei imagini în pixeli (imaginea va fi redimensionată dacă depășește acest prag)."
+    "max_image_dimensions": "Lungimea/lățimea maximă a unei imagini (imaginea va fi redimensionată dacă depășește acest prag).",
+    "max_image_dimensions_unit": "pixeli"
   },
   "import": {
     "chooseImportFile": "Selectați fișierul de importat",
@@ -772,7 +774,8 @@
   "max_content_width": {
     "apply_changes_description": "Pentru a aplica schimbările de lățime a conținutului, dați click pe",
     "default_description": "În mod implicit Trilium limitează lățimea conținutului pentru a îmbunătăți lizibilitatea pentru ferestrele maximizate pe ecrane late.",
-    "max_width_label": "Lungimea maximă a conținutului în pixeli",
+    "max_width_label": "Lungimea maximă a conținutului",
+    "max_width_unit": "pixeli",
     "reload_button": "reîncarcă interfața",
     "reload_description": "schimbări din opțiunile de afișare",
     "title": "Lățime conținut"
@@ -1215,10 +1218,12 @@
     "test_button": "Probează sincronizarea",
     "test_description": "Această opțiune va testa conexiunea și comunicarea cu serverul de sincronizare. Dacă serverul de sincronizare nu este inițializat, acest lucru va rula și o sincronizare cu documentul local.",
     "test_title": "Probează sincronizarea",
-    "timeout": "Timp limită de sincronizare (millisecunde)"
+    "timeout": "Timp limită de sincronizare",
+    "timeout_unit": "milisecunde"
   },
   "table_of_contents": {
     "description": "Tabela de conținut va apărea în notițele de tip text atunci când notița are un număr de titluri mai mare decât cel definit. Acest număr se poate personaliza:",
+    "unit": "titluri",
     "disable_info": "De asemenea se poate dezactiva tabela de conținut setând o valoare foarte mare.",
     "shortcut_info": "Se poate configura și o scurtatură pentru a comuta rapid vizibilitatea panoului din dreapta (inclusiv tabela de conținut) în Opțiuni -> Scurtături (denumirea „toggleRightPane”).",
     "title": "Tabelă de conținut"
@@ -1226,7 +1231,8 @@
   "text_auto_read_only_size": {
     "description": "Marchează pragul în care o notiță de o anumită dimensiune va fi afișată în mod de citire (pentru motive de performanță).",
     "label": "Pragul de dimensiune pentru setarea modului de citire automat (la notițe text)",
-    "title": "Pragul de mod de citire automat"
+    "title": "Pragul de mod de citire automat",
+    "unit": "caractere"
   },
   "theme": {
     "auto_theme": "Temă auto (se adaptează la schema de culori a sistemului)",
@@ -1481,7 +1487,8 @@
     "erase_excess_revision_snapshots_prompt": "Reviziile excesive au fost șterse.",
     "note_revisions_snapshot_limit_description": "Limita numărului de revizii se referă la numărul maxim de revizii pentru fiecare notiță. -1 reprezintă nicio limită, 0 înseamnă ștergerea tuturor reviziilor. Se poate seta valoarea individual pentru o notiță prin eticheta #versioningLimit.",
     "note_revisions_snapshot_limit_title": "Limita de revizii a notițelor",
-    "snapshot_number_limit_label": "Numărul maxim de revizii pentru notițe:"
+    "snapshot_number_limit_label": "Numărul maxim de revizii pentru notițe:",
+    "snapshot_number_limit_unit": "revizii"
   },
   "search_result": {
     "no_notes_found": "Nu au fost găsite notițe pentru parametrii de căutare dați.",