feat(note_title_details): tooltips for values

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.",

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>
+    );
+}

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)) {