Launch analytics events, changelog, better filter styles

src-web/components/SettingsDialog.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useSettings } from '../hooks/useSettings';
 import { useUpdateSettings } from '../hooks/useUpdateSettings';
@@ -6,8 +5,9 @@ import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { Checkbox } from './core/Checkbox';
 import { Heading } from './core/Heading';
 import { Input } from './core/Input';
+import { Select } from './core/Select';
 import { Separator } from './core/Separator';
-import { HStack, VStack } from './core/Stacks';
+import { VStack } from './core/Stacks';
 
 export const SettingsDialog = () => {
   const workspace = useActiveWorkspace();
@@ -20,24 +20,36 @@ export const SettingsDialog = () => {
   }
 
   return (
-    <VStack space={2}>
-      <HStack className="mt-1" alignItems="center" space={2}>
-        <div className="w-1/3">Appearance</div>
-        <select
-          value={settings.appearance}
-          style={selectBackgroundStyles}
-          onChange={(e) => updateSettings.mutateAsync({ ...settings, appearance: e.target.value })}
-          className={classNames(
-            'font-mono text-xs border w-full px-2 outline-none bg-transparent',
-            'border-highlight focus:border-focus',
-            'h-xs',
-          )}
-        >
-          <option value="system">Match System</option>
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-        </select>
-      </HStack>
+    <VStack space={2} className="mb-2">
+      <Select
+        name="appearance"
+        label="Appearance"
+        labelPosition="left"
+        labelClassName="w-1/3"
+        size="sm"
+        value={settings.appearance}
+        onChange={(appearance) => updateSettings.mutateAsync({ ...settings, appearance })}
+        options={{
+          system: 'System',
+          light: 'Light',
+          dark: 'Dark',
+        }}
+      />
+
+      <Select
+        name="updateChannel"
+        label="Update Channel"
+        labelPosition="left"
+        labelClassName="w-1/3"
+        size="sm"
+        value={settings.updateChannel}
+        onChange={(updateChannel) => updateSettings.mutateAsync({ ...settings, updateChannel })}
+        options={{
+          stable: 'Release',
+          beta: 'Early Bird (Beta)',
+        }}
+      />
+
       <Separator className="my-4" />
 
       <Heading size={2}>
@@ -48,7 +60,7 @@ export const SettingsDialog = () => {
       </Heading>
       <VStack className="mt-1 w-full" space={3}>
         <Input
-          size="xs"
+          size="sm"
           name="requestTimeout"
           label="Request Timeout (ms)"
           labelPosition="left"
@@ -75,14 +87,6 @@ export const SettingsDialog = () => {
           }
         />
       </VStack>
-      {/*<Checkbox checked={appearance === 'dark'} title="Dark Mode" onChange={toggleAppearance} />*/}
     </VStack>
   );
 };
-
-const selectBackgroundStyles = {
-  backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
-  backgroundPosition: 'right 0.5rem center',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: '1.5em 1.5em',
-};