feat(widgets): menu item with toggle

apps/client/src/widgets/react/FormList.css

@@ -1,9 +1,24 @@
-.dropdown-item .description {
+.dropdown-item {
+    .description {
         font-size: small;
         color: var(--muted-text-color);
         white-space: normal;
-}
+    }
 
-.dropdown-item span.bx {
+    span.bx {
         flex-shrink: 0;
+    }
+
+    .switch-widget {
+        flex-grow: 1;
+        width: 100%;
+        --switch-track-width: 40px;
+        --switch-track-height: 20px;
+        --switch-thumb-width: 12px;
+        --switch-thumb-height: var(--switch-thumb-width);
+
+        .switch-name {
+            flex-grow: 1;
+        }
+    }
 }

apps/client/src/widgets/react/FormList.tsx

@@ -7,6 +7,7 @@ import { CommandNames } from "../../components/app_context";
 import { useStaticTooltip } from "./hooks";
 import { handleRightToLeftPlacement, isMobile } from "../../services/utils";
 import clsx from "clsx";
+import FormToggle from "./FormToggle";
 
 interface FormListOpts {
     children: ComponentChildren;
@@ -132,6 +133,18 @@ export function FormListItem({ className, icon, value, title, active, disabled,
     );
 }
 
+export function FormListToggleableItem({ title, currentValue, onChange, ...props }: Omit<FormListItemOpts, "onClick" | "children"> & {
+    title: string;
+    currentValue: boolean;
+    onChange(newValue: boolean): void;
+}) {
+    return (
+        <FormListItem {...props}>
+            <FormToggle switchOnName={title} switchOffName={title} currentValue={currentValue} onChange={onChange} />
+        </FormListItem>
+    );
+}
+
 function FormListContent({ children, badges, description, disabled, disabledTooltip }: Pick<FormListItemOpts, "children" | "badges" | "description" | "disabled" | "disabledTooltip">) {
     return <>
         {children}

apps/client/src/widgets/react/FormToggle.tsx

@@ -5,9 +5,9 @@ interface FormToggleProps {
     currentValue: boolean | null;
     onChange(newValue: boolean): void;
     switchOnName: string;
-    switchOnTooltip: string;
+    switchOnTooltip?: string;
     switchOffName: string;
-    switchOffTooltip: string;
+    switchOffTooltip?: string;
     helpPage?: string;
     disabled?: boolean;
 }
@@ -37,5 +37,5 @@ export default function FormToggle({ currentValue, helpPage, switchOnName, switc
 
             { helpPage && <HelpButton className="switch-help-button" helpPage={helpPage} />}
         </div>
-    )
+    );
 }