Function NodeBackdrops

frontend/layout/lib/TileLayout.tsx:139–192

({ layoutModel }: { layoutModel: LayoutModel })

export const TileLayout = memo(TileLayoutComponent) as typeof TileLayoutComponent;

function NodeBackdrops({ layoutModel }: { layoutModel: LayoutModel }) {
    const [blockBlurAtom] = useState(() => getSettingsKeyAtom("window:magnifiedblockblursecondarypx"));
    const blockBlur = useAtomValue(blockBlurAtom);
    const ephemeralNode = useAtomValue(layoutModel.ephemeralNode);
    const magnifiedNodeId = useAtomValue(layoutModel.magnifiedNodeIdAtom);

    const [showMagnifiedBackdrop, setShowMagnifiedBackdrop] = useState(!!ephemeralNode);
    const [showEphemeralBackdrop, setShowEphemeralBackdrop] = useState(!!magnifiedNodeId);

    const debouncedSetMagnifyBackdrop = useCallback(
        debounce(100, () => setShowMagnifiedBackdrop(true)),
        []
    );

    useEffect(() => {
        if (magnifiedNodeId && !showMagnifiedBackdrop) {
            debouncedSetMagnifyBackdrop();
        }
        if (!magnifiedNodeId) {
            setShowMagnifiedBackdrop(false);
        }
        if (ephemeralNode && !showEphemeralBackdrop) {
            setShowEphemeralBackdrop(true);
        }
        if (!ephemeralNode) {
            setShowEphemeralBackdrop(false);
        }
    }, [ephemeralNode, magnifiedNodeId]);

    const blockBlurStr = `${blockBlur}px`;

    return (
        <>
            {showMagnifiedBackdrop && (
                <div
                    className="magnified-node-backdrop"
                    onClick={() => {
                        layoutModel.magnifyNodeToggle(magnifiedNodeId);
                    }}
                    style={{ "--block-blur": blockBlurStr } as CSSProperties}
                />
            )}
            {showEphemeralBackdrop && (
                <div
                    className="ephemeral-node-backdrop"
                    onClick={() => {
                        layoutModel.closeNode(ephemeralNode?.id);
                    }}
                    style={{ "--block-blur": blockBlurStr } as CSSProperties}
                />
            )}
        </>
    );
}

interface DisplayNodesWrapperProps {
    /**