From 87666005a6935a3a926f0bbfee83dbc7d0d1fc9f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 13 Dec 2025 12:55:24 +0200
Subject: [PATCH] feat(layout/inline-title): add an intro text

---
 apps/client/src/translations/en/translation.json | 3 ++-
 apps/client/src/widgets/layout/InlineTitle.css   | 5 ++++-
 apps/client/src/widgets/layout/InlineTitle.tsx   | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 0f5e2be95..729d41a28 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1753,7 +1753,8 @@
   "note_title": {
     "placeholder": "type note's title here...",
     "created_on": "Created on <Value />",
-    "last_modified": "Last modified on <Value />"
+    "last_modified": "Last modified on <Value />",
+    "note_type_switcher_label": "Switch from {{type}} to:"
   },
   "search_result": {
     "no_notes_found": "No notes have been found for given search parameters.",
diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css
index bdaa1bba1..a0e3f6edd 100644
--- a/apps/client/src/widgets/layout/InlineTitle.css
+++ b/apps/client/src/widgets/layout/InlineTitle.css
@@ -50,10 +50,13 @@ body.prefers-centered-content .inline-title {
     min-height: 60px;
     --badge-radius: 12px;
 
+    >* {
+        flex-shrink: 0;
+    }
+
     .ext-badge {
         --color: var(--input-background-color);
         color: var(--main-text-color);
-        flex-shrink: 0;
         font-size: 0.9rem;
     }
 }
diff --git a/apps/client/src/widgets/layout/InlineTitle.tsx b/apps/client/src/widgets/layout/InlineTitle.tsx
index e802bebc4..91335ed64 100644
--- a/apps/client/src/widgets/layout/InlineTitle.tsx
+++ b/apps/client/src/widgets/layout/InlineTitle.tsx
@@ -6,7 +6,7 @@ import { ComponentChild } from "preact";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { Trans } from "react-i18next";
 
-import FNote from "../../entities/fnote";
+import { t } from "../../services/i18n";
 import { ViewScope } from "../../services/link";
 import { NOTE_TYPES } from "../../services/note_types";
 import server from "../../services/server";
@@ -135,12 +135,14 @@ function NoteTypeSwitcher() {
     const blob = useNoteBlob(note);
     const currentNoteType = useNoteProperty(note, "type");
     const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []);
+    const currentNoteTypeData = useMemo(() => noteTypes.find(t => t.type === currentNoteType), [ noteTypes, currentNoteType ]);
 
     return (note?.type === "text" &&
         <div
             className="note-type-switcher"
             onWheel={onWheelHorizontalScroll}
         >
+            <div className="intro">{t("note_title.note_type_switcher_label", { type: currentNoteTypeData?.title.toLocaleLowerCase() })}</div>
             {blob?.contentLength === 0 && noteTypes.map(noteType => noteType.type !== currentNoteType && (
                 <Badge
                     key={noteType.type}