fix(ui): keep the focus ring stable across refocus (#2366)

fluxer_app/src/features/ui/focus_ring/FocusRingManager.ts

@@ -1,15 +1,17 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import {ACTIVE_RING_CONTEXT_MANAGER} from '@app/features/ui/focus_ring/FocusRingContext';
+import {makeAutoObservable} from 'mobx';
 
 class FocusRingManagerClass {
 	ringsEnabled = true;
 
+	constructor() {
+		makeAutoObservable(this, {}, {autoBind: true});
+	}
+
 	setRingsEnabled(enabled: boolean) {
+		if (this.ringsEnabled === enabled) return;
 		this.ringsEnabled = enabled;
-		if (!enabled) {
-			ACTIVE_RING_CONTEXT_MANAGER?.hide();
-		}
 	}
 }
 

fluxer_app/src/features/ui/focus_ring/FocusRingScope.tsx

@@ -4,6 +4,7 @@ import styles from '@app/features/ui/focus_ring/FocusRing.module.css';
 import FocusRingContext, {FocusRingContextManager} from '@app/features/ui/focus_ring/FocusRingContext';
 import FocusRingManager from '@app/features/ui/focus_ring/FocusRingManager';
 import {clsx} from 'clsx';
+import {Observer} from 'mobx-react-lite';
 import type * as React from 'react';
 import {useContext, useEffect, useReducer, useRef} from 'react';
 
@@ -55,12 +56,18 @@ function Ring() {
 			resizeObserver.disconnect();
 		};
 	}, [ringContext, targetElement]);
-	if (!FocusRingManager.ringsEnabled || !ringContext.visible) return null;
 	return (
-		<div
+		<Observer data-flx="ui.focus-ring.focus-ring-scope.ring.observer">
-			className={clsx(styles.focusRing, ringContext.className)}
+			{() => {
-			style={ringContext.getStyle()}
+				if (!FocusRingManager.ringsEnabled || !ringContext.visible) return null;
-			data-flx="ui.focus-ring.focus-ring-scope.ring.focus-ring"
+				return (
-		/>
+					<div
+						className={clsx(styles.focusRing, ringContext.className)}
+						style={ringContext.getStyle()}
+						data-flx="ui.focus-ring.focus-ring-scope.ring.focus-ring"
+					/>
+				);
+			}}
+		</Observer>
 	);
 }