feat: could position widgets at left

src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { createStyles, Switch, Group } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      cursor: 'pointer',
+    },
+  },
+
+  icon: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+  },
+
+  iconLight: {
+    left: 4,
+    color: theme.white,
+  },
+
+  iconDark: {
+    right: 4,
+    color: theme.colors.gray[6],
+  },
+}));
+
+export function WidgetsPositionSwitch() {
+  const { config, setConfig } = useConfig();
+  const { classes, cx } = useStyles();
+  const defaultPosition = config?.settings?.widgetPosition || 'right';
+  const [widgetPosition, setWidgetPosition] = useState(defaultPosition);
+  const toggleWidgetPosition = () => {
+    const position = widgetPosition === 'right' ? 'left' : 'right';
+    setWidgetPosition(position);
+     setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        widgetPosition: position,
+      },
+    });
+  };
+
+  return (
+    <Group>
+      <div className={classes.root}>
+        <Switch checked={widgetPosition === 'left'} onChange={() => toggleWidgetPosition()} size="md" />
+      </div>
+      Position widgets on left
+    </Group>
+  );
+}