Bug/connection mode fixes (#5998)

frontend/src/desktop/components/shared/DisabledButtonWithTooltip.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import '@app/components/shared/DisabledButtonWithTooltip.css';
+
+interface DisabledButtonWithTooltipProps {
+  /** Tooltip text shown on hover */
+  tooltip: string;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * A visually disabled button that still responds to hover (showing a tooltip).
+ * Mantine's disabled prop prevents pointer events entirely, so this is a plain
+ * div styled to match a disabled button with a custom hover tooltip.
+ */
+export function DisabledButtonWithTooltip({ tooltip, children, className, style }: DisabledButtonWithTooltipProps) {
+  const [hovered, setHovered] = React.useState(false);
+  return (
+    <div
+      className="relative w-full"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <div className={`locked-button${className ? ` ${className}` : ''}`} style={style}>
+        {children}
+      </div>
+      {hovered && (
+        <div className="locked-button-tooltip">
+          {tooltip}
+          <div className="locked-button-tooltip-arrow" />
+        </div>
+      )}
+    </div>
+  );
+}