Set tooltip for buttons correctly

ts/editor/ColorButtons.svelte

@@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithShortcut from "components/WithShortcut.svelte";
 
     import { squareFillIcon } from "./icons";
+    import { appendInParentheses } from "./helpers";
 
     import "./color.css";
 
@@ -36,7 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
             <IconButton
                 class="forecolor"
-                tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
+                tooltip={appendInParentheses(tr.editingSetForegroundColor(), shortcutLabel)}
                 on:click={wrapWithForecolor}
                 on:mount={createShortcut}>
                 {@html squareFillIcon}
@@ -47,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
             <ColorPicker
-                tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
+                tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
                 on:change={setWithCurrentColor}
                 on:mount={createShortcut} />
         </WithShortcut>

ts/editor/FormatInlineButtons.svelte

@@ -19,6 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         subscriptIcon,
         eraserIcon,
     } from "./icons";
+    import { appendInParentheses } from "./helpers";
 
     export let api = {};
 </script>
@@ -32,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
+                    tooltip={appendInParentheses(tr.editingBoldText(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('bold');
@@ -53,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={`${tr.editingItalicText()} (${shortcutLabel})`}
+                    tooltip={appendInParentheses(tr.editingItalicText(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('italic');
@@ -74,7 +75,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`}
+                    tooltip={appendInParentheses(tr.editingUnderlineText(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('underline');
@@ -98,7 +99,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={tr.editingSuperscript()}
+                    tooltip={appendInParentheses(tr.editingSuperscript(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('superscript');
@@ -119,7 +120,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={tr.editingSubscript()}
+                    tooltip={appendInParentheses(tr.editingSubscript(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('subscript');
@@ -135,7 +136,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
             <IconButton
-                tooltip={tr.editingRemoveFormatting()}
+                tooltip={appendInParentheses(tr.editingRemoveFormatting(), shortcutLabel)}
                 on:click={(event) => {
                     document.execCommand('removeFormat');
                 }}

ts/editor/TemplateButtons.svelte

@@ -48,7 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
-                on:click={onRecord}>
+                on:click={onRecord}
+                on:mount={createShortcut}>
                 {@html micIcon}
             </IconButton>
         </WithShortcut>
@@ -70,8 +71,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyM, KeyM"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('\\(', '\\)')}>
+                <DropdownItem
+                    on:click={() => wrap('\\(', '\\)')}
+                    on:mount={createShortcut}>
                     {tr.editingMathjaxInline()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -79,8 +83,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyM, KeyE"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('\\[', '\\]')}>
+                <DropdownItem
+                    on:click={() => wrap('\\[', '\\]')}
+                    on:mount={createShortcut}>
                     {tr.editingMathjaxBlock()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -88,8 +95,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyM, KeyC"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
+                <DropdownItem
+                    on:click={() => wrap('\\(\\ce{', '}\\)')}
+                    on:mount={createShortcut}>
                     {tr.editingMathjaxChemistry()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -97,8 +107,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyT, KeyT"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
+                <DropdownItem
+                    on:click={() => wrap('[latex]', '[/latex]')}
+                    on:mount={createShortcut}>
                     {tr.editingLatex()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -106,8 +119,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyT, KeyE"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('[$]', '[/$]')}>
+                <DropdownItem
+                    on:click={() => wrap('[$]', '[/$]')}
+                    on:mount={createShortcut}>
                     {tr.editingLatexEquation()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -115,8 +131,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyT, KeyM"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
+                <DropdownItem
+                    on:click={() => wrap('[$$]', '[/$$]')}
+                    on:mount={createShortcut}>
                     {tr.editingLatexMathEnv()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
         </DropdownMenu>

ts/sass/button_mixins.scss

@@ -7,10 +7,9 @@ $btn-base-color-day: white;
     color: var(--text-fg);
     background-color: $btn-base-color-day;
     border-color: var(--medium-border) !important;
-    margin-left: -1px;
 }
 
-@mixin btn-day($with-disabled: true) {
+@mixin btn-day($with-disabled: true, $with-margin: true) {
     .btn-day {
         @include btn-day-base;
         @content ($btn-base-color-day);
@@ -34,6 +33,10 @@ $btn-base-color-day: white;
                 box-shadow: none !important;
             }
         }
+
+        @if ($with-margin) {
+            margin-left: -1px;
+        }
     }
 }
 
@@ -43,10 +46,9 @@ $btn-base-color-night: #666;
     color: var(--text-fg);
     background-color: $btn-base-color-night;
     border-color: $btn-base-color-night;
-    margin-left: 1px;
 }
 
-@mixin btn-night($with-disabled: true) {
+@mixin btn-night($with-disabled: true, $with-margin: true) {
     .btn-night {
         @include btn-night-base;
         @content ($btn-base-color-night);
@@ -74,6 +76,10 @@ $btn-base-color-night: #666;
                 border-color: $btn-base-color-night !important;
             }
         }
+
+        @if ($with-margin) {
+            margin-left: 1px;
+        }
     }
 }