switch

packages/admin/package.json

@@ -56,6 +56,7 @@
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@silevis/reactgrid": "^4.1.3",
     "@tanstack/react-query": "^4.35.3",

packages/admin/src/client/utils/zform/form.tsx

@@ -8,24 +8,14 @@ import './augment-prototype'
 import {zodResolver} from '@hookform/resolvers/zod'
 import clsx from 'clsx'
 import React from 'react'
-import {
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  UseFormProps,
-  useFieldArray,
-  useForm,
-  useFormState,
-} from 'react-hook-form'
-import {b} from 'vitest/dist/suite-ghspeorC.js'
+import {ControllerProps, FieldPath, FieldValues, UseFormProps, useFieldArray, useForm} from 'react-hook-form'
 import {z} from 'zod'
 
 import {Button} from '@/components/ui/button'
-import {Checkbox} from '@/components/ui/checkbox'
 import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage} from '@/components/ui/form'
 import {icons} from '@/components/ui/icons'
 import {Input} from '@/components/ui/input'
-import {Separator} from '@/components/ui/separator'
+import {Switch} from '@/components/ui/switch'
 
 type SimpleFieldConfig = Readonly<{
   label?: string
@@ -513,10 +503,10 @@ const RenderEntry = ({form, entry}: RenderEntryProps) => {
             <FormItem>
               <div className="inline-flex gap-2">
                 <FormControl>
-                  <Checkbox
+                  <Switch
                     checked={props.field.value}
                     onCheckedChange={checked => props.field.onChange(checked)}
-                    className="bg-slate-100"
+                    className="data-[state=unchecked]:bg-slate-500 data-[state=checked]:bg-slate-700"
                   />
                 </FormControl>
                 <FormLabel>{label}</FormLabel>

packages/admin/src/client/views/Migrations.tsx

@@ -371,14 +371,19 @@ export const FileTree = (tree: File | Folder) => {
 
   return (
     <>
-      <Collapsible open={fileState.startsWith(tree.path) || undefined} defaultOpen={basename(tree.path) !== 'down'}>
+      <Collapsible
+        className="group/collapsible w-full"
+        open={fileState.startsWith(tree.path) || undefined}
+        defaultOpen={basename(tree.path) !== 'down'}
+      >
         <CollapsibleTrigger asChild>
           <div
             title={tree.path}
-            className="flex cursor-pointer items-center align-middle justify-start rounded-lg px-2 py-2 text-gray-400 transition-all hover:text-gray-200 dark:text-gray-400 dark:hover:text-gray-50"
+            className="flex w-full relative cursor-pointer items-center align-middle justify-start rounded-lg px-2 py-2 text-gray-400 transition-all hover:text-gray-200 dark:text-gray-400 dark:hover:text-gray-50"
           >
             <icons.Folder className="mr-2 h-4 w-4" />
             <span>{basename(tree.path)}</span>
+            {/* <icons.ChevronLeft className="justify-self-end w-4 h-4 group-data-[state=open]/collapsible:-rotate-90 transition-transform" /> */}
           </div>
         </CollapsibleTrigger>
         <CollapsibleContent>

packages/admin/src/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from 'react'
+
+import {cn} from '@/lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({className, ...props}, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export {Switch}