feat: use the same Toggle as ChatGPT's setting

.vscode/settings.json

@@ -22,6 +22,7 @@
     "backoff",
     "chatgpt",
     "davinci",
+    "headlessui",
     "mdast",
     "micromark",
     "preact",
@@ -48,5 +49,8 @@
     "**/.DS_Store": true,
     "**/Thumbs.db": true,
     "**/node_modules": true
+  },
+  "search.exclude": {
+    "**/dist/**": true
   }
 }

packages/userscript/package.json

@@ -20,6 +20,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.14",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-hover-card": "^1.0.5",

packages/userscript/src/styles/missing-tailwind.css

@@ -1,62 +1,3 @@
-.after\:content-\[\'\'\]:after {
-    --tw-content: "";
-    content: var(--tw-content);
-}
-
-.after\:transition-all:after {
-    content: var(--tw-content);
-    transition-duration: .15s;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-}
-
-.after\:bg-white:after {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255/var(--tw-bg-opacity));
-    content: var(--tw-content);
-}
-
-.after\:border-gray-300:after {
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219/var(--tw-border-opacity));
-    content: var(--tw-content);
-}
-
-.after\:border:after {
-    border-width: 1px;
-    content: var(--tw-content);
-}
-
-.after\:rounded-full:after {
-    border-radius: 9999px;
-
-    content: var(--tw-content);
-}
-.after\:w-4:after {
-    content: var(--tw-content);
-    width: 1rem
-}
-
-.after\:h-4:after {
-    content: var(--tw-content);
-    height: 1rem;
-}
-
-.after\:top-\[2px\]:after {
-    content: var(--tw-content);
-    top: 2px;
-}
-
-.after\:left-\[2px\]:after {
-    content: var(--tw-content);
-    left: 2px;
-}
-
-.after\:absolute:after {
-    content: var(--tw-content);
-    position: absolute;
-}
-
 .animate-fadeIn  {
     animation: fadeIn .3s;
 }
@@ -87,14 +28,6 @@
     border-color: #86858d;
 }
 
-.dark .dark\:border-gray-600 {
-    --tw-border-opacity: 1;
-    border-color: rgb(75 85 99/var(--tw-border-opacity));
-}
-
-.empty\:hidden:empty {
-    display: none;
-}
 
 .fill-current {
     fill: currentColor;
@@ -116,6 +49,10 @@
     height: 1.25rem;
 }
 
+.ml-3 {
+    margin-left: 0.75rem;
+}
+
 .ml-4 {
     margin-left: 1rem;
 }
@@ -128,26 +65,6 @@
     padding-bottom: 0;
 }
 
-.peer:checked~.peer-checked\:bg-blue-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(28 100 242/var(--tw-bg-opacity));
-}
-
-.peer:checked~.peer-checked\:after\:border-white:after {
-    --tw-border-opacity: 1;
-    border-color: rgb(255 255 255/var(--tw-border-opacity));
-    content: var(--tw-content);
-}
-.peer:checked~.peer-checked\:after\:translate-x-full:after {
-    --tw-translate-x: 100%;
-    content: var(--tw-content);
-    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.pl-4 {
-    padding-left: 1rem;
-}
-
 .pr-8 {
     padding-right: 2rem;
 }
@@ -172,10 +89,6 @@
     white-space: nowrap;
 }
 
-.w-9 {
-    width: 2.25rem;
-}
-
 .whitespace-nowrap {
     white-space: nowrap;
 }

packages/userscript/src/ui/Toggle.tsx

@@ -1,25 +1,31 @@
+import { Switch } from '@headlessui/react'
+
 interface ToggleProps {
     label?: string
     checked?: boolean
     onCheckedUpdate?: (checked: boolean) => void
 }
 
-export const Toggle = (props: ToggleProps) => {
-    const { label = '', checked = true, onCheckedUpdate } = props
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (!e.target || !onCheckedUpdate) return
-        onCheckedUpdate((e.target as HTMLInputElement).checked)
-    }
+/**
+ * Mimics the style of OpenAI's
+ */
+export const Toggle = ({ label, checked = true, onCheckedUpdate }: ToggleProps) => {
     return (
-        <label className="relative inline-flex items-center cursor-pointer">
-            <input
-                type="checkbox"
+        <div className="inline-flex items-center">
+            <Switch
                 checked={checked}
-                onChange={handleChange}
-                className="sr-only peer"
-            />
-            <div className="relative shrink-0 w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-            <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300 empty:hidden">{label}</span>
-        </label>
+                onChange={onCheckedUpdate}
+                className={`${
+                    checked ? 'bg-green-600' : 'bg-gray-200'
+                } relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0 h-6 w-11`}
+            >
+                <span className="sr-only">Use setting</span>
+                <span className={`${checked ? 'translate-x-5' : 'translate-x-0'} pointer-events-none relative inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out h-5 w-5`}>
+                    <span className="opacity-0 duration-100 ease-out absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true"></span>
+                    <span className="opacity-100 duration-200 ease-in absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true"></span>
+                </span>
+            </Switch>
+            {label && <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{label}</span>}
+        </div>
     )
 }

pnpm-lock.yaml

@@ -35,6 +35,7 @@ importers:
 
   packages/userscript:
     specifiers:
+      '@headlessui/react': ^1.7.14
       '@preact/preset-vite': ^2.5.0
       '@radix-ui/colors': ^0.1.8
       '@radix-ui/react-dialog': ^1.0.3
@@ -59,6 +60,7 @@ importers:
       vite: ^4.2.1
       vite-plugin-monkey: ^2.12.1
     dependencies:
+      '@headlessui/react': 1.7.14_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/colors': 0.1.8
       '@radix-ui/react-dialog': 1.0.3_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-hover-card': 1.0.5_biqbaboplfbrettd7655fr4n2y
@@ -754,6 +756,18 @@ packages:
       - '@types/react'
     dev: false
 
+  /@headlessui/react/1.7.14_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@humanwhocodes/config-array/0.11.8:
     resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
     engines: {node: '>=10.10.0'}
@@ -1832,6 +1846,10 @@ packages:
       string-width: 5.1.2
     dev: true
 
+  /client-only/0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: false
+
   /cliui/8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}