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>

packages/i18n/src/resources/en.json

@@ -618,5 +618,15 @@
   "com.affine.cmdk.affine.import-workspace": "Import Workspace",
   "com.affine.cmdk.affine.editor.add-to-favourites": "Add to Favourites",
   "com.affine.cmdk.affine.editor.remove-from-favourites": "Remove from Favourites",
-  "com.affine.cmdk.affine.editor.restore-from-trash": "Restore from Trash"
+  "com.affine.cmdk.affine.editor.restore-from-trash": "Restore from Trash",
+  "com.affine.cmdk.affine.font-style.to": "Change Font Style to <1>{{fontFamily}}</1>",
+  "com.affine.cmdk.affine.display-language.to": "Change Display Language to <1>{{language}}</1>",
+  "com.affine.cmdk.affine.client-border-style.to": "Change Client Border Style to <1>{{state}}</1>",
+  "com.affine.cmdk.affine.full-width-layout.to": "Change Full Width Layout to <1>{{state}}</1>",
+  "com.affine.cmdk.affine.noise-background-on-the-sidebar.to": "Change Noise Background On The Sidebar to <1>{{state}}</1>",
+  "com.affine.cmdk.affine.translucent-ui-on-the-sidebar.to": "Change Translucent UI On The Sidebar to <1>{{state}}</1>",
+  "com.affine.cmdk.affine.whats-new": "What's New",
+  "com.affine.cmdk.affine.getting-started": "Getting Started",
+  "com.affine.cmdk.affine.contact-us": "Contact Us",
+  "com.affine.cmdk.affine.restart-to-upgrade": "Restart to Upgrade"
 }