feat(status_bar): integrate note info badge

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

@@ -2158,6 +2158,7 @@
     "execute_sql_description": "This note is a SQL note. Click to execute the SQL query."
   },
   "status_bar": {
-    "language_title": "Change the language of the entire content"
+    "language_title": "Change the language of the entire content",
+    "note_info_title": "View information about this note such as the creation/modification date or the note size."
   }
 }

apps/client/src/widgets/BreadcrumbBadges.css

@@ -61,30 +61,6 @@
         min-width: 500px;
     }
 
-    &.dropdown-note-info-badge {
-        .dropdown-menu.show ul {
-            list-style-type: none;
-            padding: 0.5em;
-            margin: 0;
-            display: table;
-
-            li {
-                display: table-row;
-
-                > strong {
-                    display: table-cell;
-                    padding: 0.2em 0;
-                }
-
-                > span {
-                    display: table-cell;
-                    user-select: text;
-                    padding-left: 2em;
-                }
-            }
-        }
-    }
-
     .breadcrumb-badge {
         border-radius: 0;
     }

apps/client/src/widgets/BreadcrumbBadges.tsx

@@ -5,14 +5,11 @@ import { ComponentChildren, MouseEventHandler } from "preact";
 import { useRef } from "preact/hooks";
 
 import { t } from "../services/i18n";
-import { formatDateTime } from "../utils/formatters";
 import { BacklinksList, useBacklinkCount } from "./FloatingButtonsDefinitions";
 import Dropdown, { DropdownProps } from "./react/Dropdown";
 import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean, useStaticTooltip } from "./react/hooks";
 import Icon from "./react/Icon";
-import { NoteSizeWidget, useNoteMetadata } from "./ribbon/NoteInfoTab";
 import { useShareInfo } from "./shared_info";
-import FNote from "../entities/fnote";
 
 export default function BreadcrumbBadges() {
     return (
@@ -26,35 +23,6 @@ export default function BreadcrumbBadges() {
     );
 }
 
-export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) {
-    const { metadata, ...sizeProps } = useNoteMetadata(note);
-
-    return (note &&
-        <BadgeWithDropdown
-            icon="bx bx-info-circle"
-            className="note-info-badge"
-            dropdownOptions={{ dropdownOptions: { autoClose: "outside" } }}
-        >
-            <ul>
-                <NoteInfoValue text={t("note_info_widget.created")} value={formatDateTime(metadata?.dateCreated)} />
-                <NoteInfoValue text={t("note_info_widget.modified")} value={formatDateTime(metadata?.dateModified)} />
-                <NoteInfoValue text={t("note_info_widget.type")} value={<span>{note.type} {note.mime && <span>({note.mime})</span>}</span>} />
-                <NoteInfoValue text={t("note_info_widget.note_id")} value={<code>{note.noteId}</code>} />
-                <NoteInfoValue text={t("note_info_widget.note_size")} title={t("note_info_widget.note_size_info")} value={<NoteSizeWidget {...sizeProps} />} />
-            </ul>
-        </BadgeWithDropdown>
-    );
-}
-
-function NoteInfoValue({ text, title, value }: { text: string; title?: string, value: ComponentChildren }) {
-    return (
-        <li>
-            <strong title={title}>{text}{": "}</strong>
-            <span>{value}</span>
-        </li>
-    );
-}
-
 function ReadOnlyBadge() {
     const { note, noteContext } = useNoteContext();
     const { isReadOnly, enableEditing } = useIsNoteReadOnly(note, noteContext);

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

@@ -14,7 +14,6 @@ import NoteLink from "../react/NoteLink";
 import link_context_menu from "../../menus/link_context_menu";
 import { TitleEditor } from "../collections/board";
 import server from "../../services/server";
-import { NoteInfoBadge } from "../BreadcrumbBadges";
 
 const COLLAPSE_THRESHOLD = 5;
 const INITIAL_ITEMS = 2;
@@ -122,7 +121,6 @@ function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { inde
     if (index === notePathLength - 1) {
         return <>
             <BreadcrumbLastItem notePath={notePath} />
-            <NoteInfoBadge note={noteContext?.note} />
         </>;
     }
 

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

@@ -12,6 +12,8 @@
 
     > .actions-row {
         padding: 0.1em;
+        display: flex;
+        gap: 0.1em;
 
         .status-bar-dropdown-button {
             background: transparent;
@@ -37,4 +39,30 @@
             padding: 0.1em 0.25em;
         }
     }
+
+    .dropdown-note-info {
+        width: max-content;
+
+        ul {
+            list-style-type: none;
+            padding: 0.5em;
+            margin: 0;
+            display: table;
+
+            li {
+                display: table-row;
+
+                > strong {
+                    display: table-cell;
+                    padding: 0.2em 0;
+                }
+
+                > span {
+                    display: table-cell;
+                    user-select: text;
+                    padding-left: 2em;
+                }
+            }
+        }
+    }
 }

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

@@ -1,19 +1,23 @@
 import "./StatusBar.css";
 
+import { Locale } from "@triliumnext/commons";
+import clsx from "clsx";
+import { createPortal } from "preact/compat";
+import { useState } from "preact/hooks";
+
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { openInAppHelpFromUrl } from "../../services/utils";
+import { formatDateTime } from "../../utils/formatters";
+import Dropdown, { DropdownProps } from "../react/Dropdown";
 import { FormDropdownDivider, FormListItem } from "../react/FormList";
 import { useNoteContext } from "../react/hooks";
-import { ContentLanguagesModal, NoteLanguageSelector, useLanguageSwitcher } from "../ribbon/BasicPropertiesTab";
-import Breadcrumb from "./Breadcrumb";
-import { useState } from "preact/hooks";
-import { createPortal } from "preact/compat";
-import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
-import Dropdown, { DropdownProps } from "../react/Dropdown";
-import { Locale } from "@triliumnext/commons";
-import clsx from "clsx";
 import Icon from "../react/Icon";
+import { ContentLanguagesModal, useLanguageSwitcher } from "../ribbon/BasicPropertiesTab";
+import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab";
+import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
+import Breadcrumb from "./Breadcrumb";
+
 
 interface StatusBarContext {
     note: FNote;
@@ -31,6 +35,7 @@ export default function StatusBar() {
                 </div>
 
                 <div className="actions-row">
+                    <NoteInfoBadge {...context} />
                     <LanguageSwitcher {...context} />
                 </div>
             </>}
@@ -64,6 +69,7 @@ function StatusBarDropdown({ children, icon, text, buttonClassName, titleOptions
     );
 }
 
+//#region Language Switcher
 function LanguageSwitcher({ note }: StatusBarContext) {
     const [ modalShown, setModalShown ] = useState(false);
     const { locales, DEFAULT_LOCALE, currentNoteLanguage, setCurrentNoteLanguage } = useLanguageSwitcher(note);
@@ -113,3 +119,36 @@ export function getLocaleName(locale: Locale | null | undefined) {
         .replace("_", "-")
         .toLocaleUpperCase();
 }
+//#endregion
+
+//#region Note info
+export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) {
+    const { metadata, ...sizeProps } = useNoteMetadata(note);
+
+    return (note &&
+        <StatusBarDropdown
+            icon="bx bx-info-circle"
+            title={t("status_bar.note_info_title")}
+            dropdownContainerClassName="dropdown-note-info"
+            dropdownOptions={{ autoClose: "outside" }}
+        >
+            <ul>
+                <NoteInfoValue text={t("note_info_widget.created")} value={formatDateTime(metadata?.dateCreated)} />
+                <NoteInfoValue text={t("note_info_widget.modified")} value={formatDateTime(metadata?.dateModified)} />
+                <NoteInfoValue text={t("note_info_widget.type")} value={<span>{note.type} {note.mime && <span>({note.mime})</span>}</span>} />
+                <NoteInfoValue text={t("note_info_widget.note_id")} value={<code>{note.noteId}</code>} />
+                <NoteInfoValue text={t("note_info_widget.note_size")} title={t("note_info_widget.note_size_info")} value={<NoteSizeWidget {...sizeProps} />} />
+            </ul>
+        </StatusBarDropdown>
+    );
+}
+
+function NoteInfoValue({ text, title, value }: { text: string; title?: string, value: ComponentChildren }) {
+    return (
+        <li>
+            <strong title={title}>{text}{": "}</strong>
+            <span>{value}</span>
+        </li>
+    );
+}
+//#endregion