feat(layout/inline-title): bring back creation and modification date

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

@@ -1,12 +1,15 @@
-.component.inline-title-row {
+.component.inline-title {
     contain: none;
 }
 
-.inline-title-row {
+.inline-title {
     padding-bottom: 2em;
     padding-inline-start: 24px;
-    display: flex;
-    align-items: center;
+
+    & > .inline-title-row {
+        display: flex;
+        align-items: center;
+    }
 
     &.hidden {
         display: none !important;

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

@@ -6,7 +6,12 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import NoteIcon from "../note_icon";
 import NoteTitleWidget from "../note_title";
-import { useNoteContext } from "../react/hooks";
+import { useNoteContext, useStaticTooltip } from "../react/hooks";
+import { ComponentChild } from "preact";
+import { joinElements } from "../react/react_utils";
+import { useNoteMetadata } from "../ribbon/NoteInfoTab";
+import { formatDateTime } from "../../utils/formatters";
+import { Trans } from "react-i18next";
 
 export default function InlineTitle() {
     const { note, parentComponent } = useNoteContext();
@@ -41,10 +46,14 @@ export default function InlineTitle() {
     return (
         <div
             ref={containerRef}
-            className={clsx("inline-title-row", !shown && "hidden")}
+            className={clsx("inline-title", !shown && "hidden")}
         >
-            <NoteIcon />
-            <NoteTitleWidget />
+            <div class="inline-title-row">
+                <NoteIcon />
+                <NoteTitleWidget />
+            </div>
+
+            <NoteTitleDetails />
         </div>
     );
 }
@@ -53,3 +62,55 @@ function shouldShow(note: FNote | null | undefined) {
     if (!note) return false;
     return note.type === "text";
 }
+
+export function NoteTitleDetails() {
+    const { note, noteContext } = useNoteContext();
+    const { metadata } = useNoteMetadata(note);
+    const isHiddenNote = note?.noteId.startsWith("_");
+    const isDefaultView = noteContext?.viewScope?.viewMode === "default";
+
+    const items: ComponentChild[] = [
+        (isDefaultView && !isHiddenNote && metadata?.dateCreated &&
+            <TextWithValue
+                i18nKey="note_title.created_on"
+                value={formatDateTime(metadata.dateCreated, "medium", "none")}
+                valueTooltip={formatDateTime(metadata.dateCreated, "full", "long")}
+            />),
+        (isDefaultView && !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 items.length && (
+        <div className="title-details">
+            {joinElements(items, " • ")}
+        </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>
+    );
+}