Function BadgeAutoClearing

frontend/app/app.tsx:302–355

()

};

const BadgeAutoClearing = () => {
    const tabId = useAtomValue(atoms.staticTabId);
    const documentHasFocus = useAtomValue(atoms.documentHasFocus);
    const layoutModel = getLayoutModelForStaticTab();
    const focusedNode = useAtomValue(layoutModel.focusedNode);
    const focusedBlockId = focusedNode?.data?.blockId;
    const badge = useAtomValue(getBlockBadgeAtom(focusedBlockId));
    const tabTransientBadge = useAtomValue(getBadgeAtom(tabId != null ? `tab:${tabId}` : null));
    const prevFocusedBlockIdRef = useRef<string>(null);
    const prevDocHasFocusRef = useRef<boolean>(false);
    const prevTabDocHasFocusRef = useRef<boolean>(false);

    useEffect(() => {
        if (!focusedBlockId || !badge || !documentHasFocus) {
            prevFocusedBlockIdRef.current = focusedBlockId;
            prevDocHasFocusRef.current = documentHasFocus;
            return;
        }
        const focusSwitched =
            prevFocusedBlockIdRef.current !== focusedBlockId || prevDocHasFocusRef.current !== documentHasFocus;
        prevFocusedBlockIdRef.current = focusedBlockId;
        prevDocHasFocusRef.current = documentHasFocus;
        const delay = focusSwitched ? 500 : 3000;
        const timeoutId = setTimeout(() => {
            if (!document.hasFocus()) {
                return;
            }
            const currentFocusedNode = globalStore.get(layoutModel.focusedNode);
            if (currentFocusedNode?.data?.blockId === focusedBlockId) {
                clearBadgesForBlockOnFocus(focusedBlockId);
            }
        }, delay);
        return () => clearTimeout(timeoutId);
    }, [focusedBlockId, badge, documentHasFocus]);

    useEffect(() => {
        if (!tabId || !tabTransientBadge || !documentHasFocus) {
            prevTabDocHasFocusRef.current = documentHasFocus;
            return;
        }
        const focusSwitched = prevTabDocHasFocusRef.current !== documentHasFocus;
        prevTabDocHasFocusRef.current = documentHasFocus;
        const delay = focusSwitched ? 500 : 3000;
        const timeoutId = setTimeout(() => {
            if (!document.hasFocus()) {
                return;
            }
            clearBadgesForTabOnFocus(tabId);
        }, delay);
        return () => clearTimeout(timeoutId);
    }, [tabId, tabTransientBadge, documentHasFocus]);

    return null;
};

const AppInner = () => {
    const prefersReducedMotion = useAtomValue(atoms.prefersReducedMotionAtom);