feat(core): add setting commands (#4568)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

packages/component/src/components/app-sidebar/app-updater-button/index.tsx

@@ -259,3 +259,5 @@ export function AppUpdaterButton({
     />
   );
 }
+
+export * from './index.jotai';

packages/component/src/ui/switch/switch.tsx

@@ -1,6 +1,11 @@
 // components/switch.tsx
 import clsx from 'clsx';
-import { type HTMLAttributes, type ReactNode, useState } from 'react';
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  useCallback,
+  useState,
+} from 'react';
 
 import * as styles from './index.css';
 
@@ -10,15 +15,23 @@ type SwitchProps = Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> & {
   children?: ReactNode;
 };
 
-export const Switch = (props: SwitchProps) => {
-  const { checked, onChange, children, ...otherProps } = props;
-  const [isChecked, setIsChecked] = useState(checked);
+export const Switch = ({
+  checked: checkedProp = false,
+  onChange: onChangeProp,
+  children,
+  ...otherProps
+}: SwitchProps) => {
+  const [checkedState, setCheckedState] = useState(checkedProp);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newChecked = event.target.checked;
-    setIsChecked(newChecked);
-    onChange?.(newChecked);
-  };
+  const checked = onChangeProp ? checkedProp : checkedState;
+  const onChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newChecked = event.target.checked;
+      if (onChangeProp) onChangeProp(newChecked);
+      else setCheckedState(newChecked);
+    },
+    [onChangeProp]
+  );
 
   return (
     <label className={clsx(styles.labelStyle)} {...otherProps}>
@@ -26,13 +39,13 @@ export const Switch = (props: SwitchProps) => {
       <input
         className={clsx(styles.inputStyle)}
         type="checkbox"
-        value={isChecked ? 'on' : 'off'}
-        checked={isChecked}
-        onChange={handleChange}
+        value={checked ? 'on' : 'off'}
+        checked={checked}
+        onChange={onChange}
       />
       <span
         className={clsx(styles.switchStyle, {
-          [styles.switchCheckedStyle]: isChecked,
+          [styles.switchCheckedStyle]: checked,
         })}
       />
     </label>