From 4031332b98b19955baae59d3299ee657608dfa7f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 10 Dec 2025 12:25:38 +0200
Subject: [PATCH] feat(note_title_details): tooltips for values

---
 .../src/translations/en/translation.json      |  4 +-
 apps/client/src/widgets/NoteTitleDetails.tsx  | 46 ++++++++++++++++---
 apps/client/src/widgets/note_title.css        |  4 ++
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index dfce263d0..f11ec921c 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1750,8 +1750,8 @@
   },
   "note_title": {
     "placeholder": "type note's title here...",
-    "created_on": "Created on {{date}}",
-    "last_modified": "Last modified on {{date}}"
+    "created_on": "Created on <Value />",
+    "last_modified": "Last modified on <Value />"
   },
   "search_result": {
     "no_notes_found": "No notes have been found for given search parameters.",
diff --git a/apps/client/src/widgets/NoteTitleDetails.tsx b/apps/client/src/widgets/NoteTitleDetails.tsx
index e0cfc00c6..9a7bb054b 100644
--- a/apps/client/src/widgets/NoteTitleDetails.tsx
+++ b/apps/client/src/widgets/NoteTitleDetails.tsx
@@ -2,9 +2,11 @@ import { type ComponentChild } from "preact";
 
 import { t } from "../services/i18n";
 import { formatDateTime } from "../utils/formatters";
-import { useNoteContext } from "./react/hooks";
+import { useNoteContext, useStaticTooltip } from "./react/hooks";
 import { joinElements } from "./react/react_utils";
 import { useNoteMetadata } from "./ribbon/NoteInfoTab";
+import { Trans } from "react-i18next";
+import { useRef } from "preact/hooks";
 
 export default function NoteTitleDetails() {
     const { note } = useNoteContext();
@@ -12,12 +14,18 @@ export default function NoteTitleDetails() {
     const isHiddenNote = note?.noteId.startsWith("_");
 
     const items: ComponentChild[] = [
-        (!isHiddenNote && metadata?.dateCreated && <li>
-            {t("note_title.created_on", { date: formatDateTime(metadata.dateCreated, "medium", "none")} )}
-        </li>),
-        (!isHiddenNote && metadata?.dateModified && <li>
-            {t("note_title.last_modified", { date: formatDateTime(metadata.dateModified, "medium", "none")} )}
-        </li>)
+        (!isHiddenNote && metadata?.dateCreated &&
+            <TextWithValue
+                i18nKey="note_title.created_on"
+                value={formatDateTime(metadata.dateCreated, "medium", "none")}
+                valueTooltip={formatDateTime(metadata.dateCreated, "full", "long")}
+            />),
+        (!isHiddenNote && metadata?.dateModified &&
+            <TextWithValue
+                i18nKey="note_title.last_modified"
+                value={formatDateTime(metadata.dateModified, "medium", "none")}
+                valueTooltip={formatDateTime(metadata.dateModified, "full", "long")}
+            />)
     ].filter(item => !!item);
 
     return (
@@ -26,3 +34,27 @@ export default function NoteTitleDetails() {
         </div>
     );
 }
+
+function TextWithValue({ i18nKey, value, valueTooltip }: {
+    i18nKey: string;
+    value: string;
+    valueTooltip: string;
+}) {
+    const listItemRef = useRef<HTMLLIElement>(null);
+    useStaticTooltip(listItemRef, {
+        selector: "span.value",
+        title: valueTooltip,
+        popperConfig: { placement: "bottom" }
+    });
+
+    return (
+        <li ref={listItemRef}>
+            <Trans
+                i18nKey={i18nKey}
+                components={{
+                    Value: <span className="value">{value}</span> as React.ReactElement
+                }}
+            />
+        </li>
+    );
+}
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index d147e647d..52ca6cbb7 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -51,6 +51,10 @@ body.experimental-feature-new-layout {
         margin: 0;
         list-style-type: none;
         margin-bottom: 2em;
+
+        span.value {
+            font-weight: 500;
+        }
     }
 
     .scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)) {