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

chore(layout/status_bar): enforce single pane opened at a time

Browse Source
This commit is contained in:
Elian Doran 2025-12-14 23:35:16 +02:00
parent f1bb786a49
commit 749074ea94
No known key found for this signature in database
1 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,6 @@ import server from "../../services/server";
import { openInAppHelpFromUrl } from "../../services/utils"; import { openInAppHelpFromUrl } from "../../services/utils";
import { formatDateTime } from "../../utils/formatters"; import { formatDateTime } from "../../utils/formatters";
import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions"; import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions";
import Collapsible from "../react/Collapsible";
import Dropdown, { DropdownProps } from "../react/Dropdown"; import Dropdown, { DropdownProps } from "../react/Dropdown";
import { FormDropdownDivider, FormListItem } from "../react/FormList"; import { FormDropdownDivider, FormListItem } from "../react/FormList";
import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks"; import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
@ -44,19 +43,27 @@ interface StatusBarContext {
export default function StatusBar() { export default function StatusBar() {
const { note, notePath, noteContext, viewScope, hoistedNoteId } = useActiveNoteContext(); const { note, notePath, noteContext, viewScope, hoistedNoteId } = useActiveNoteContext();
const [ attributesShown, setAttributesShown ] = useState(false); const [ activePane, setActivePane ] = useState<"attributes" | "similar-notes" | null>(null);
const [ similarNotesShown, setSimilarNotesShown ] = useState(false);
const context: StatusBarContext | undefined | null = note && noteContext && { note, notePath, noteContext, viewScope, hoistedNoteId }; const context: StatusBarContext | undefined | null = note && noteContext && { note, notePath, noteContext, viewScope, hoistedNoteId };
const attributesContext: AttributesProps | undefined | null = context && { ...context, attributesShown, setAttributesShown }; const attributesContext: AttributesProps | undefined | null = context && {
...context,
attributesShown: activePane === "attributes",
setAttributesShown: () => setActivePane("attributes")
};
const noteInfoContext: NoteInfoContext | undefined | null = context && {
...context,
similarNotesShown: activePane === "similar-notes",
setSimilarNotesShown: () => setActivePane("similar-notes")
};
const isHiddenNote = note?.isInHiddenSubtree(); const isHiddenNote = note?.isInHiddenSubtree();
return ( return (
<div className="status-bar"> <div className="status-bar">
{attributesContext && <AttributesPane {...attributesContext} />} {attributesContext && <AttributesPane {...attributesContext} />}
{context && <SimilarNotesPane {...context} shown={similarNotesShown} setShown={setSimilarNotesShown}/>} {noteInfoContext && <SimilarNotesPane {...noteInfoContext} />}
<div className="status-bar-main-row"> <div className="status-bar-main-row">
{context && attributesContext && <> {context && attributesContext && noteInfoContext && <>
<Breadcrumb {...context} /> <Breadcrumb {...context} />
<div className="actions-row"> <div className="actions-row">
@ -66,7 +73,7 @@ export default function StatusBar() {
<AttributesButton {...attributesContext} /> <AttributesButton {...attributesContext} />
<AttachmentCount {...context} /> <AttachmentCount {...context} />
<BacklinksBadge {...context} /> <BacklinksBadge {...context} />
<NoteInfoBadge {...context} showSimilarNotes={() => setSimilarNotesShown(true)} /> <NoteInfoBadge {...noteInfoContext} />
</div> </div>
</>} </>}
</div> </div>
@ -202,10 +209,13 @@ export function getLocaleName(locale: Locale | null | undefined) {
} }
//#endregion //#endregion
//#region Note info //#region Note info & Similar
export function NoteInfoBadge({ note, showSimilarNotes }: StatusBarContext & { interface NoteInfoContext extends StatusBarContext {
showSimilarNotes: () => void similarNotesShown: boolean;
}) { setSimilarNotesShown: (value: boolean) => void;
}
export function NoteInfoBadge({ note, setSimilarNotesShown }: NoteInfoContext) {
const dropdownRef = useRef<BootstrapDropdown>(null); const dropdownRef = useRef<BootstrapDropdown>(null);
const { metadata, ...sizeProps } = useNoteMetadata(note); const { metadata, ...sizeProps } = useNoteMetadata(note);
const [ originalFileName ] = useNoteLabel(note, "originalFileName"); const [ originalFileName ] = useNoteLabel(note, "originalFileName");
@ -231,7 +241,7 @@ export function NoteInfoBadge({ note, showSimilarNotes }: StatusBarContext & {
text={t("note_info_widget.show_similar_notes")} text={t("note_info_widget.show_similar_notes")}
onClick={() => { onClick={() => {
dropdownRef.current?.hide(); dropdownRef.current?.hide();
showSimilarNotes(); setSimilarNotesShown(true);
}} }}
/> />
</StatusBarDropdown> </StatusBarDropdown>
@ -247,11 +257,8 @@ function NoteInfoValue({ text, title, value }: { text: string; title?: string, v
); );
} }
function SimilarNotesPane({ note, shown }: StatusBarContext & { function SimilarNotesPane({ note, similarNotesShown }: NoteInfoContext) {
shown: boolean; return (similarNotesShown &&
setShown: (value: boolean) => void;
}) {
return (shown &&
<div className="similar-notes-pane"> <div className="similar-notes-pane">
<SimilarNotesTab note={note} /> <SimilarNotesTab note={note} />
</div> </div>