gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-29 10:44:25 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

fix(status_bar): note info requesting update on each keystroke

Browse Source
This commit is contained in:
Elian Doran 2025-12-24 10:38:57 +02:00
parent d6d75a0e48
commit 3600192933
No known key found for this signature in database
1 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/client/src/widgets/layout/StatusBar.tsx
View File

@ -1,9 +1,9 @@
import "./StatusBar.css";
import { KeyboardActionNames, Locale } from "@triliumnext/commons";
import { Locale, NoteType } from "@triliumnext/commons";
import { Dropdown as BootstrapDropdown } from "bootstrap";
import clsx from "clsx";
import { type ComponentChildren } from "preact";
import { type ComponentChildren, RefObject } from "preact";
import { createPortal } from "preact/compat";
import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
@ -216,13 +216,12 @@ interface NoteInfoContext extends StatusBarContext {
setSimilarNotesShown: (value: boolean) => void;
}
export function NoteInfoBadge({ note, similarNotesShown, setSimilarNotesShown }: NoteInfoContext) {
export function NoteInfoBadge(context: NoteInfoContext) {
const dropdownRef = useRef<BootstrapDropdown>(null);
const { metadata, ...sizeProps } = useNoteMetadata(note);
const [ originalFileName ] = useNoteLabel(note, "originalFileName");
const [ dropdownShown, setDropdownShown ] = useState(false);
const { note, similarNotesShown, setSimilarNotesShown } = context;
const noteType = useNoteProperty(note, "type");
const noteTypeMapping = useMemo(() => NOTE_TYPES.find(t => t.type === noteType), [ noteType ]);
const enabled = note && noteType && noteTypeMapping;
const enabled = note && noteType;
// Keyboard shortcut.
useTriliumEvent("toggleRibbonTabNoteInfo", () => enabled && dropdownRef.current?.show());
@ -234,13 +233,30 @@ export function NoteInfoBadge({ note, similarNotesShown, setSimilarNotesShown }:
title={t("status_bar.note_info_title")}
dropdownRef={dropdownRef}
dropdownContainerClassName="dropdown-note-info"
dropdownOptions={{ autoClose: "outside" }}
dropdownOptions={{autoClose: "outside" }}
onShown={() => setDropdownShown(true)}
onHidden={() => setDropdownShown(false)}
>
{dropdownShown && <NoteInfoContent {...context} dropdownRef={dropdownRef} noteType={noteType} />}
</StatusBarDropdown>
);
}
function NoteInfoContent({ note, setSimilarNotesShown, noteType, dropdownRef }: NoteInfoContext & {
dropdownRef: RefObject<BootstrapDropdown>;
noteType: NoteType;
}) {
const { metadata, ...sizeProps } = useNoteMetadata(note);
const [ originalFileName ] = useNoteLabel(note, "originalFileName");
const noteTypeMapping = useMemo(() => NOTE_TYPES.find(t => t.type === noteType), [ noteType ]);
return (
<>
<ul>
{originalFileName && <NoteInfoValue text={t("file_properties.original_file_name")} value={originalFileName} />}
<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={<><Icon icon={`bx ${noteTypeMapping.icon ?? NOTE_TYPE_ICONS[noteType]}`}/>{" "}{noteTypeMapping?.title}</>} />
{noteTypeMapping && <NoteInfoValue text={t("note_info_widget.type")} value={<><Icon icon={`bx ${noteTypeMapping.icon ?? NOTE_TYPE_ICONS[noteType]}`}/>{" "}{noteTypeMapping?.title}</>} />}
{note.mime && <NoteInfoValue text={t("note_info_widget.mime")} value={note.mime} />}
<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} />} />
@ -253,7 +269,7 @@ export function NoteInfoBadge({ note, similarNotesShown, setSimilarNotesShown }:
setSimilarNotesShown(true);
}}
/>
</StatusBarDropdown>
</>
);
}