From 2d3776cd5fafefd30543973d61e4068212872a51 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 12 Dec 2025 19:31:00 +0200 Subject: [PATCH] feat(status_bar): integrate note info badge --- .../src/translations/en/translation.json | 3 +- apps/client/src/widgets/BreadcrumbBadges.css | 24 -------- apps/client/src/widgets/BreadcrumbBadges.tsx | 32 ----------- apps/client/src/widgets/layout/Breadcrumb.tsx | 2 - apps/client/src/widgets/layout/StatusBar.css | 28 ++++++++++ apps/client/src/widgets/layout/StatusBar.tsx | 55 ++++++++++++++++--- 6 files changed, 77 insertions(+), 67 deletions(-) diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index e8ff99aab..d50f1eeda 100644 --- a/apps/client/src/translations/en/translation.json +++ b/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." } } diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css index 758678b01..582b9c7ba 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.css +++ b/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; } diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx index a7ccbae9f..0ab1d7b85 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.tsx +++ b/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 && - - - - ); -} - -function NoteInfoValue({ text, title, value }: { text: string; title?: string, value: ComponentChildren }) { - return ( -
  • - {text}{": "} - {value} -
    • - ); -} - function ReadOnlyBadge() { const { note, noteContext } = useNoteContext(); const { isReadOnly, enableEditing } = useIsNoteReadOnly(note, noteContext); diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx index ed692adeb..cc02657e0 100644 --- a/apps/client/src/widgets/layout/Breadcrumb.tsx +++ b/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 <> - ; } diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css index 42f59ed75..5b7d642b7 100644 --- a/apps/client/src/widgets/layout/StatusBar.css +++ b/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; + } + } + } + } } diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx index b94160670..8dc261864 100644 --- a/apps/client/src/widgets/layout/StatusBar.tsx +++ b/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() {
    +
    } @@ -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 && + +
      + + + {note.type} {note.mime && ({note.mime})}} /> + {note.noteId}} /> + } /> +
    +     + ); +} + +function NoteInfoValue({ text, title, value }: { text: string; title?: string, value: ComponentChildren }) { + return ( +
  • + {text}{": "} + {value} +
    • + ); +} +//#endregion