Refine rail drawer switching and toggle animations

src/web/components/ClientOverviewPage.tsx

@@ -445,6 +445,7 @@ export function ClientOverviewPage({
   const [showIntro, setShowIntro] = useState(true);
   const [copyFeedback, setCopyFeedback] = useState<CopyFeedbackMap>({});
   const [copyAnnouncement, setCopyAnnouncement] = useState<CopyAnnouncement>({ text: '', cycle: 0 });
+  const [drawerSwitchTarget, setDrawerSwitchTarget] = useState<DrawerKey | null>(null);
   const copyTimersRef = useRef<Partial<Record<CopyKind, ReturnType<typeof setTimeout>>>>({});
   const copyAttemptsRef = useRef<Partial<Record<CopyKind, object>>>({});
   const drawerSwitchRef = useRef<{
@@ -567,6 +568,9 @@ export function ClientOverviewPage({
   const drawerOrder = isGateway
     ? DRAWER_ORDER
     : DRAWER_ORDER.filter((drawer) => drawer !== 'devices');
+  const activeRailDrawer = drawerSwitchTarget && drawerControls[drawerSwitchTarget].isOpen
+    ? drawerSwitchTarget
+    : drawerOrder.find((drawer) => drawerControls[drawer].isOpen) || null;
 
   useEffect(() => {
     setNow(Date.now());
@@ -673,11 +677,13 @@ export function ClientOverviewPage({
       return;
     }
 
+    setDrawerSwitchTarget(target);
     flushSync(() => toControl.show());
     const from = fromControl.panelRef.current;
     const to = toControl.panelRef.current;
     if (!from || !to || typeof from.animate !== 'function' || typeof to.animate !== 'function') {
       fromControl.close();
+      setDrawerSwitchTarget(null);
       return;
     }
 
@@ -707,7 +713,10 @@ export function ClientOverviewPage({
     const finish = () => {
       if (finished) return;
       finished = true;
-      flushSync(() => fromControl.close());
+      flushSync(() => {
+        fromControl.close();
+        setDrawerSwitchTarget(null);
+      });
       cancel();
       if (drawerSwitchRef.current?.target === target) drawerSwitchRef.current = null;
     };
@@ -745,22 +754,27 @@ export function ClientOverviewPage({
       >
         <SubscriptionToggle
           feature={subscriptionFeature}
+          open={activeRailDrawer === 'subscription'}
           onToggle={() => switchDrawer('subscription')}
         />
         <InstructionsToggle
           feature={instructionsFeature}
+          open={activeRailDrawer === 'instructions'}
           onToggle={() => switchDrawer('instructions')}
         />
         {isGateway && <DevicesToggle
           feature={devicesFeature}
+          open={activeRailDrawer === 'devices'}
           onToggle={() => switchDrawer('devices')}
         />}
         <DiagnosticsToggle
           feature={diagnosticsFeature}
+          open={activeRailDrawer === 'diagnostics'}
           onToggle={() => switchDrawer('diagnostics')}
         />
         <RoutingToggle
           feature={routingFeature}
+          open={activeRailDrawer === 'routing'}
           gatewayDirect={gatewayDirect}
           isGateway={isGateway}
           hasSubscription={hasSubscription}