From 2e44397c8838861c0fbb699d8f2496b6883b55f7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 11 Dec 2025 00:18:56 +0200 Subject: [PATCH 1/8] feat(breadcrumb/note_info): get basic dropdown --- apps/client/src/widgets/BreadcrumbBadges.css | 8 ++++++ apps/client/src/widgets/BreadcrumbBadges.tsx | 28 ++++++++++++++++++- .../client/src/widgets/ribbon/NoteInfoTab.tsx | 2 +- 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css index 7d6405159..e3cd4f750 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.css +++ b/apps/client/src/widgets/BreadcrumbBadges.css @@ -68,4 +68,12 @@ padding: 0; } } + + .dropdown-note-info-badge { + ul { + list-style-type: none; + padding: 0.5em; + margin: 0; + } + } } diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx index 0e3cf986f..32c2fd187 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.tsx +++ b/apps/client/src/widgets/BreadcrumbBadges.tsx @@ -17,10 +17,36 @@ export default function BreadcrumbBadges() { + ); } +function NoteInfoBadge() { + const { note } = useNoteContext(); + + return (note && + +
    + {note.type} {note.mime && ({note.mime})}} /> + {note.noteId}} /> +
+ + ); +} + +function NoteInfoValue({ text, value }: { text: string; value: ComponentChildren }) { + return ( +
  • + {text}{": "} + {value} +
    • + ); +} + function ReadOnlyBadge() { const { note, noteContext } = useNoteContext(); const { isReadOnly, enableEditing } = useIsNoteReadOnly(note, noteContext); @@ -83,7 +109,7 @@ function BacklinksBadge() { } interface BadgeProps { - text: string; + text?: string; icon?: string; className: string; tooltip?: string; diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx index 888412867..739b7012a 100644 --- a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx +++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx @@ -13,7 +13,7 @@ import FNote from "../../entities/fnote"; const isNewLayout = isExperimentalFeatureEnabled("new-layout"); -export default function NoteInfoTab({ note }: TabContext) { +export default function NoteInfoTab({ note }: { note: FNote | null | undefined }) { const { isLoading, metadata, noteSizeResponse, subtreeSizeResponse, requestSizeInfo } = useNoteMetadata(note); return ( From e5696713de672abd97ea185034b9ac66f2053f58 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 11 Dec 2025 00:23:32 +0200 Subject: [PATCH 2/8] feat(breadcrumb/note_info): modification/creation date --- apps/client/src/widgets/BreadcrumbBadges.tsx | 5 +++++ apps/client/src/widgets/NoteTitleDetails.tsx | 18 ++---------------- apps/client/src/widgets/ribbon/NoteInfoTab.tsx | 1 - 3 files changed, 7 insertions(+), 17 deletions(-) diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx index 32c2fd187..5bf68eff0 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.tsx +++ b/apps/client/src/widgets/BreadcrumbBadges.tsx @@ -5,10 +5,12 @@ 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, useStaticTooltip } from "./react/hooks"; import Icon from "./react/Icon"; +import { useNoteMetadata } from "./ribbon/NoteInfoTab"; import { useShareInfo } from "./shared_info"; export default function BreadcrumbBadges() { @@ -24,6 +26,7 @@ export default function BreadcrumbBadges() { function NoteInfoBadge() { const { note } = useNoteContext(); + const { isLoading, metadata, noteSizeResponse, subtreeSizeResponse, requestSizeInfo } = useNoteMetadata(note); return (note &&
      + + {note.type} {note.mime && ({note.mime})}} /> {note.noteId}} />
    diff --git a/apps/client/src/widgets/NoteTitleDetails.tsx b/apps/client/src/widgets/NoteTitleDetails.tsx index 58f4da0f7..c9992578f 100644 --- a/apps/client/src/widgets/NoteTitleDetails.tsx +++ b/apps/client/src/widgets/NoteTitleDetails.tsx @@ -9,26 +9,12 @@ import { useRef } from "preact/hooks"; export default 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 && - ), - (isDefaultView && !isHiddenNote && metadata?.dateModified && - ) - ].filter(item => !!item); + const items: ComponentChild[] = [].filter(item => !!item); - return ( + return items.length && (
    {joinElements(items, " • ")}
    diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx index 739b7012a..d5af83799 100644 --- a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx +++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx @@ -1,6 +1,5 @@ import { useEffect, useState } from "preact/hooks"; import { t } from "../../services/i18n"; -import { TabContext } from "./ribbon-interface"; import { MetadataResponse, NoteSizeResponse, SubtreeSizeResponse } from "@triliumnext/commons"; import server from "../../services/server"; import Button from "../react/Button"; From 4b74ad5577a767bac939f62fdfaa2163df00f67b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 11 Dec 2025 00:34:25 +0200 Subject: [PATCH 3/8] feat(breadcrumb/note_info): note size --- apps/client/src/widgets/BreadcrumbBadges.tsx | 14 +++++-- .../client/src/widgets/ribbon/NoteInfoTab.tsx | 42 +++++++++++-------- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx index 5bf68eff0..610796c7e 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.tsx +++ b/apps/client/src/widgets/BreadcrumbBadges.tsx @@ -10,7 +10,7 @@ import { BacklinksList, useBacklinkCount } from "./FloatingButtonsDefinitions"; import Dropdown, { DropdownProps } from "./react/Dropdown"; import { useIsNoteReadOnly, useNoteContext, useStaticTooltip } from "./react/hooks"; import Icon from "./react/Icon"; -import { useNoteMetadata } from "./ribbon/NoteInfoTab"; +import { NoteSizeWidget, useNoteMetadata } from "./ribbon/NoteInfoTab"; import { useShareInfo } from "./shared_info"; export default function BreadcrumbBadges() { @@ -26,18 +26,20 @@ export default function BreadcrumbBadges() { function NoteInfoBadge() { const { note } = useNoteContext(); - const { isLoading, metadata, noteSizeResponse, subtreeSizeResponse, requestSizeInfo } = useNoteMetadata(note); + const { metadata, ...sizeProps } = useNoteMetadata(note); return (note &&
      {note.type} {note.mime && ({note.mime})}} /> {note.noteId}} /> + } />
    ); @@ -161,8 +163,14 @@ function BadgeWithDropdown({ children, tooltip, className, dropdownOptions, ...p hideToggleArrow title={tooltip} titlePosition="bottom" - dropdownOptions={{ popperConfig: { placement: "bottom", strategy: "fixed" } }} {...dropdownOptions} + dropdownOptions={{ + ...dropdownOptions?.dropdownOptions, + popperConfig: { + ...dropdownOptions?.dropdownOptions?.popperConfig, + placement: "bottom", strategy: "fixed" + } + }} >{children} ); } diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx index d5af83799..8180f74a6 100644 --- a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx +++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx @@ -13,7 +13,7 @@ import FNote from "../../entities/fnote"; const isNewLayout = isExperimentalFeatureEnabled("new-layout"); export default function NoteInfoTab({ note }: { note: FNote | null | undefined }) { - const { isLoading, metadata, noteSizeResponse, subtreeSizeResponse, requestSizeInfo } = useNoteMetadata(note); + const { metadata, ...sizeProps } = useNoteMetadata(note); return (
    @@ -41,23 +41,7 @@ export default function NoteInfoTab({ note }: { note: FNote | null | undefined }
    {t("note_info_widget.note_size")}: - {!isLoading && !noteSizeResponse && !subtreeSizeResponse && ( -
    @@ -66,6 +50,28 @@ export default function NoteInfoTab({ note }: { note: FNote | null | undefined } ); } +export function NoteSizeWidget({ isLoading, noteSizeResponse, subtreeSizeResponse, requestSizeInfo }: Omit, "metadata">) { + return <> + {!isLoading && !noteSizeResponse && !subtreeSizeResponse && ( +
    ); } -function NoteInfoBadge() { - const { note } = useNoteContext(); +export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) { const { metadata, ...sizeProps } = useNoteMetadata(note); return (note && @@ -156,7 +155,7 @@ function BadgeWithDropdown({ children, tooltip, className, dropdownOptions, ...p }) { return ( } noDropdownListStyle noSelectButtonStyle From 68591fb51161ff114fc8748b9de5377453d2c596 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 11 Dec 2025 16:48:49 +0200 Subject: [PATCH 7/8] feat(note_info): hide ribbon on new layout --- apps/client/src/widgets/ribbon/RibbonDefinition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/ribbon/RibbonDefinition.ts b/apps/client/src/widgets/ribbon/RibbonDefinition.ts index a76e97140..e2779e287 100644 --- a/apps/client/src/widgets/ribbon/RibbonDefinition.ts +++ b/apps/client/src/widgets/ribbon/RibbonDefinition.ts @@ -132,7 +132,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [ { title: t("note_info_widget.title"), icon: "bx bx-info-circle", - show: ({ note }) => !!note, + show: ({ note }) => !isNewLayout && !!note, content: NoteInfoTab, toggleCommand: "toggleRibbonTabNoteInfo" } From a51820f5df7b83242e2eed912f8488d21116fdc5 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 11 Dec 2025 16:57:04 +0200 Subject: [PATCH 8/8] chore(note_info): address requested changes --- apps/client/src/widgets/BreadcrumbBadges.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx index 51c346749..9f8b0de93 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.tsx +++ b/apps/client/src/widgets/BreadcrumbBadges.tsx @@ -34,8 +34,8 @@ export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) { dropdownOptions={{ dropdownOptions: { autoClose: "outside" } }} >
      - - + + {note.type} {note.mime && ({note.mime})}} /> {note.noteId}} /> } />