diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx index 850e840ce..fcb3dd980 100644 --- a/packages/web/components/templates/article/SetLabelsControl.tsx +++ b/packages/web/components/templates/article/SetLabelsControl.tsx @@ -172,6 +172,8 @@ function LabelListItem(props: LabelListItemProps): JSX.Element { type FooterProps = { focused: boolean filterText: string + selectedLabels: Label[] + availableLabels: Label[] } function Footer(props: FooterProps): JSX.Element { @@ -183,6 +185,20 @@ function Footer(props: FooterProps): JSX.Element { } }, [props.focused]) + const textMatch: 'selected' | 'available' | 'none' = useMemo(() => { + const findLabel = (l: Label) => + l.name.toLowerCase() == props.filterText.toLowerCase() + const available = props.availableLabels.find(findLabel) + const selected = props.selectedLabels.find(findLabel) + if (available && !selected) { + return 'available' + } + if (selected) { + return 'selected' + } + return 'none' + }, [props]) + return ( - - - {`Use Enter to create new label "${props.filterText}"`} + + {textMatch === 'available' && ( + <> + + Use Enter to add label "{props.filterText}" + + )} + + {textMatch === 'none' && ( + <> + + Use Enter to create new label "{props.filterText}" + + )} ) : ( @@ -447,6 +476,8 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element { ) : (