feat(breadcrumb/note_info): get basic dropdown

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;
+        }
+    }
 }

apps/client/src/widgets/BreadcrumbBadges.tsx

@@ -17,10 +17,36 @@ export default function BreadcrumbBadges() {
             <ReadOnlyBadge />
             <ShareBadge />
             <BacklinksBadge />
+            <NoteInfoBadge />
         </div>
     );
 }
 
+function NoteInfoBadge() {
+    const { note } = useNoteContext();
+
+    return (note &&
+        <BadgeWithDropdown
+            icon="bx bx-info-circle"
+            className="note-info-badge"
+        >
+            <ul>
+                <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>} />
+            </ul>
+        </BadgeWithDropdown>
+    );
+}
+
+function NoteInfoValue({ text, value }: { text: string; value: ComponentChildren }) {
+    return (
+        <li>
+            <strong>{text}</strong>{": "}
+            <span>{value}</span>
+        </li>
+    );
+}
+
 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;

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 (