Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ConnectionToggle } from "./ConnectionToggle";
+
+const meta: Meta<typeof ConnectionToggle> = {
+  title: "Elements/ConnectionToggle",
+  component: ConnectionToggle,
+  args: {
+    onChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConnectionToggle>;
+
+export const Connected: Story = {
+  args: {
+    checked: true,
+    loading: false,
+    disabled: false,
+  },
+};
+
+export const Disconnected: Story = {
+  args: {
+    checked: false,
+    loading: false,
+    disabled: false,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    checked: false,
+    loading: true,
+    disabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    checked: false,
+    loading: false,
+    disabled: true,
+  },
+};

clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx

@@ -0,0 +1,24 @@
+import { Switch } from "@mantine/core";
+
+export interface ConnectionToggleProps {
+  checked: boolean;
+  loading: boolean;
+  disabled: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export function ConnectionToggle({
+  checked,
+  loading,
+  disabled,
+  onChange,
+}: ConnectionToggleProps) {
+  return (
+    <Switch
+      size="lg"
+      checked={checked}
+      disabled={disabled || loading}
+      onChange={(event) => onChange(event.currentTarget.checked)}
+    />
+  );
+}