feat(mermaid): add a text for sample diagram switcher

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

@@ -2202,5 +2202,8 @@
   },
   "setup_form": {
     "more_info": "Learn more"
+  },
+  "mermaid": {
+    "sample_diagrams": "Sample diagrams:"
   }
 }

apps/client/src/widgets/layout/NoteContentSwitcher.css

@@ -7,11 +7,13 @@
     padding: 5px;
     flex-wrap: wrap;
     flex-shrink: 0;
+    font-size: 0.9rem;
+    align-items: center;
 
     .ext-badge {
         --color: var(--input-background-color);
         color: var(--main-text-color);
-        font-size: 0.9rem;
+        font-size: 1em;
         flex-shrink: 0;
     }
 }

apps/client/src/widgets/layout/NoteContentSwitcher.tsx

@@ -11,15 +11,18 @@ export interface NoteContentTemplate {
 }
 
 interface NoteContentSwitcherProps {
+    text: string;
     note: FNote;
     templates: NoteContentTemplate[];
 }
 
-export default function NoteContentSwitcher({ note, templates }: NoteContentSwitcherProps) {
+export default function NoteContentSwitcher({ text, note, templates }: NoteContentSwitcherProps) {
     const blob = useNoteSavedData(note?.noteId);
 
     return (blob?.length === 0 &&
         <div className="note-content-switcher">
+            {text}{" "}
+
             {templates.map(sample => (
                 <Badge
                     key={sample.name}

apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "preact/hooks";
 
+import { t } from "../../../services/i18n";
 import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../../services/mermaid";
 import NoteContentSwitcher from "../../layout/NoteContentSwitcher";
 import SvgSplitEditor from "../helpers/SvgSplitEditor";
@@ -38,7 +39,10 @@ export default function Mermaid(props: TypeWidgetProps) {
             renderSvg={renderSvg}
             noteType="mermaid"
             extraContent={(
-                <NoteContentSwitcher note={props.note} templates={SAMPLE_DIAGRAMS} />
+                <NoteContentSwitcher
+                    text={t("mermaid.sample_diagrams")}
+                    note={props.note}
+                    templates={SAMPLE_DIAGRAMS} />
             )}
             {...props}
         />