gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-10-08 01:52:47 +00:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

Don't show more than one quote removal hint on notifications page (#36128)

Browse Source
This commit is contained in:
diondiondion 2025-09-15 17:27:43 +02:00 committed by GitHub
parent e4bb0fc43a
commit 887e982aa2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/mastodon/components/dismissable_banner.tsx
View File

@ -45,7 +45,7 @@ export function useDismissableBannerState({ id }: Props) {
}, [id, dispatch, isVisible, dismissed]); }, [id, dispatch, isVisible, dismissed]);
return { return {
isVisible, wasDismissed: !isVisible,
dismiss, dismiss,
}; };
} }
@ -55,11 +55,11 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
children, children,
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const { isVisible, dismiss } = useDismissableBannerState({ const { wasDismissed, dismiss } = useDismissableBannerState({
id, id,
}); });
if (!isVisible) { if (wasDismissed) {
return null; return null;
} }

35
app/javascript/mastodon/components/status_action_bar/remove_quote_hint.tsx
View File

@ -1,4 +1,4 @@
import { useRef } from 'react'; import { useEffect, useRef, useState, useId } from 'react';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
@ -14,6 +14,13 @@ import { Icon } from '../icon';
const DISMISSABLE_BANNER_ID = 'notifications/remove_quote_hint'; const DISMISSABLE_BANNER_ID = 'notifications/remove_quote_hint';
/**
* We don't want to show this hint in the UI more than once,
* so the first time it renders, we store a unique component ID
* here to prevent any other hints from being displayed after it.
*/
let firstHintId: string | null = null;
export const RemoveQuoteHint: React.FC<{ export const RemoveQuoteHint: React.FC<{
canShowHint: boolean; canShowHint: boolean;
className?: string; className?: string;
@ -22,14 +29,36 @@ export const RemoveQuoteHint: React.FC<{
const anchorRef = useRef<HTMLDivElement>(null); const anchorRef = useRef<HTMLDivElement>(null);
const intl = useIntl(); const intl = useIntl();
const { isVisible, dismiss } = useDismissableBannerState({ const { wasDismissed, dismiss } = useDismissableBannerState({
id: DISMISSABLE_BANNER_ID, id: DISMISSABLE_BANNER_ID,
}); });
const shouldShowHint = !wasDismissed && canShowHint;
const uniqueId = useId();
const [isOnlyHint, setIsOnlyHint] = useState(false);
useEffect(() => {
if (!shouldShowHint) {
return () => null;
}
if (!firstHintId) {
firstHintId = uniqueId;
setIsOnlyHint(true);
}
return () => {
if (firstHintId === uniqueId) {
firstHintId = null;
setIsOnlyHint(false);
}
};
}, [shouldShowHint, uniqueId]);
return ( return (
<div className={className} ref={anchorRef}> <div className={className} ref={anchorRef}>
{children(dismiss)} {children(dismiss)}
{isVisible && canShowHint && ( {shouldShowHint && isOnlyHint && (
<Overlay <Overlay
show show
flip flip