From 4b74ad5577a767bac939f62fdfaa2163df00f67b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 11 Dec 2025 00:34:25 +0200
Subject: [PATCH] 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 &&
         <BadgeWithDropdown
             icon="bx bx-info-circle"
             className="note-info-badge"
+            dropdownOptions={{ dropdownOptions: { autoClose: "outside" } }}
         >
             <ul>
                 <NoteInfoValue text={t("note_info_widget.created")} value={metadata?.dateCreated ? formatDateTime(metadata.dateCreated) : ""} />
                 <NoteInfoValue text={t("note_info_widget.modified")} value={metadata?.dateModified ? 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")} value={<NoteSizeWidget {...sizeProps} />} />
             </ul>
         </BadgeWithDropdown>
     );
@@ -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}</Dropdown>
     );
 }
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 (
         <div className="note-info-widget">
@@ -41,23 +41,7 @@ export default function NoteInfoTab({ note }: { note: FNote | null | undefined }
                     <div className="note-info-item">
                         <span title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</span>
                         <span className="note-info-size-col-span">
-                            {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
-                                <Button
-                                    className="calculate-button"
-                                    icon="bx bx-calculator"
-                                    text={t("note_info_widget.calculate")}
-                                    onClick={requestSizeInfo}
-                                />
-                            )}
-
-                            <span className="note-sizes-wrapper selectable-text">
-                                <span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
-                                {" "}
-                                {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
-                                    <span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
-                                }
-                                {isLoading && <LoadingSpinner />}
-                            </span>
+                            <NoteSizeWidget {...sizeProps} />
                         </span>
                     </div>
                 </>
@@ -66,6 +50,28 @@ export default function NoteInfoTab({ note }: { note: FNote | null | undefined }
     );
 }
 
+export function NoteSizeWidget({ isLoading, noteSizeResponse, subtreeSizeResponse, requestSizeInfo }: Omit<ReturnType<typeof useNoteMetadata>, "metadata">) {
+    return <>
+        {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
+            <Button
+                className="calculate-button"
+                icon="bx bx-calculator"
+                text={t("note_info_widget.calculate")}
+                onClick={requestSizeInfo}
+            />
+        )}
+
+        <span className="note-sizes-wrapper selectable-text">
+            <span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
+            {" "}
+            {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
+                <span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
+            }
+            {isLoading && <LoadingSpinner />}
+        </span>
+    </>;
+}
+
 export function useNoteMetadata(note: FNote | null | undefined) {
     const [ isLoading, setIsLoading ] = useState(false);
     const [ noteSizeResponse, setNoteSizeResponse ] = useState<NoteSizeResponse>();