diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx index b2c04b91f..4eb36d859 100644 --- a/apps/client/src/widgets/layout/StatusBar.tsx +++ b/apps/client/src/widgets/layout/StatusBar.tsx @@ -17,7 +17,7 @@ import { formatDateTime } from "../../utils/formatters"; import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions"; import Dropdown, { DropdownProps } from "../react/Dropdown"; import { FormDropdownDivider, FormListItem } from "../react/FormList"; -import { useActiveNoteContext, useLegacyImperativeHandlers, useStaticTooltip, useTriliumEvent } from "../react/hooks"; +import { useActiveNoteContext, useLegacyImperativeHandlers, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks"; import Icon from "../react/Icon"; import { ParentComponent } from "../react/react_utils"; import { ContentLanguagesModal, useLanguageSwitcher } from "../ribbon/BasicPropertiesTab"; @@ -37,18 +37,19 @@ interface StatusBarContext { export default function StatusBar() { const { note, noteContext, viewScope } = useActiveNoteContext(); const [ attributesShown, setAttributesShown ] = useState(false); - const context = note && noteContext && { note, noteContext, viewScope } satisfies StatusBarContext; + const context: StatusBarContext | undefined | null = note && noteContext && { note, noteContext, viewScope }; + const attributesContext: AttributesProps | undefined | null = context && { ...context, attributesShown, setAttributesShown }; return (
- {context && } + {attributesContext && }
- {context && <> + {context && attributesContext && <>
- + @@ -246,10 +247,12 @@ function AttachmentCount({ note }: StatusBarContext) { //#endregion //#region Attributes -function AttributesButton({ note, attributesShown, setAttributesShown }: StatusBarContext & { +interface AttributesProps extends StatusBarContext { attributesShown: boolean; setAttributesShown: (shown: boolean) => void; -}) { +} + +function AttributesButton({ note, attributesShown, setAttributesShown }: AttributesProps) { const [ count, setCount ] = useState(note.attributes.length); // React to changes in count. @@ -271,9 +274,7 @@ function AttributesButton({ note, attributesShown, setAttributesShown }: StatusB ); } -function AttributesPane({ note, noteContext, shown }: StatusBarContext & { - shown: boolean; -}) { +function AttributesPane({ note, noteContext, attributesShown, setAttributesShown }: AttributesProps) { const parentComponent = useContext(ParentComponent); const api = useRef(null); @@ -283,6 +284,9 @@ function AttributesPane({ note, noteContext, shown }: StatusBarContext & { hidden: !note }; + // Show on keyboard shortcuts. + useTriliumEvents([ "addNewLabel", "addNewRelation" ], () => setAttributesShown(true)); + // Interaction with the attribute editor. useLegacyImperativeHandlers(useMemo(() => ({ saveAttributesCommand: () => api.current?.save(), @@ -291,7 +295,7 @@ function AttributesPane({ note, noteContext, shown }: StatusBarContext & { }), [ api ])); return (context && -
+