refactor: migrate UI components and remove chakra

migrate pin page
migrate copy tag
migrate pin input
migrate dropdown menus
migrate radio buttons
migrate switch
migrate select
migrate textarea
migrate colour picker
migrate select
migrate context menu
migrate viewparams
remove chakra

apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx

@@ -1,6 +1,12 @@
 import { useState } from 'react';
-import { IoEllipsisHorizontal } from 'react-icons/io5';
-import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import {
+  IoCopyOutline,
+  IoDocumentOutline,
+  IoDownloadOutline,
+  IoEllipsisHorizontal,
+  IoPencilOutline,
+  IoTrash,
+} from 'react-icons/io5';
 
 import {
   deleteProject,
@@ -11,6 +17,8 @@ import {
   renameProject,
 } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
+import IconButton from '../../../../common/components/buttons/IconButton';
+import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -184,31 +192,33 @@ function ActionMenu(props: ActionMenuProps) {
   };
 
   return (
-    <Menu variant='ontime-on-dark' size='sm'>
-      <MenuButton
-        as={IconButton}
-        aria-label='Options'
-        icon={<IoEllipsisHorizontal />}
-        color='#e2e2e2' // $gray-200
-        variant='ontime-ghosted'
-        size='sm'
-        isDisabled={isDisabled}
-      />
-      <MenuList>
-        <MenuItem onClick={() => onLoad(filename)} isDisabled={current}>
-          Load
-        </MenuItem>
-        <MenuItem onClick={() => onMerge(filename)} isDisabled={current}>
-          Partial Load
-        </MenuItem>
-        <MenuItem onClick={handleRename}>Rename</MenuItem>
-        <MenuItem onClick={handleDuplicate}>Duplicate</MenuItem>
-        <MenuItem onClick={handleDownload}>Download</MenuItem>
-        <MenuItem onClick={handleExportCSV}>Export CSV Rundown</MenuItem>
-        <MenuItem isDisabled={current} onClick={() => onDelete(filename)}>
-          Delete
-        </MenuItem>
-      </MenuList>
-    </Menu>
+    <DropdownMenu
+      render={<IconButton variant='ghosted-white' />}
+      disabled={isDisabled}
+      items={[
+        {
+          type: 'item',
+          icon: IoDownloadOutline,
+          label: 'Load',
+          onClick: () => onLoad(filename),
+          disabled: current,
+        },
+        {
+          type: 'item',
+          icon: IoDownloadOutline,
+          label: 'Partial Load',
+          onClick: () => onMerge(filename),
+          disabled: current,
+        },
+        { type: 'item', icon: IoPencilOutline, label: 'Rename', onClick: handleRename },
+        { type: 'item', icon: IoCopyOutline, label: 'Duplicate', onClick: handleDuplicate },
+        { type: 'item', icon: IoDocumentOutline, label: 'Download', onClick: handleDownload },
+        { type: 'item', icon: IoDocumentOutline, label: 'Export CSV Rundown', onClick: handleExportCSV },
+        { type: 'divider' },
+        { type: 'item', icon: IoTrash, label: 'Delete', onClick: () => onDelete(filename), disabled: current },
+      ]}
+    >
+      <IoEllipsisHorizontal />
+    </DropdownMenu>
   );
 }

apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { Switch } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { PROJECT_DATA } from '../../../../common/api/constants';
 import { getDb, patchData } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
+import Switch from '../../../../common/components/switch/Switch';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -34,7 +34,8 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
 
   const {
     handleSubmit,
-    register,
+    watch,
+    setValue,
     formState: { isSubmitting, isValid, isDirty },
   } = useForm<ProjectMergeFormValues>({
     defaultValues: {
@@ -92,23 +93,43 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
           <br /> This process is irreversible.
         </Panel.Description>
         <label>
-          <Switch variant='ontime' {...register('project')} />
+          <Switch
+            size='large'
+            checked={watch('project')}
+            onCheckedChange={(value: boolean) => setValue('project', value, { shouldDirty: true })}
+          />
           Project data
         </label>
         <label>
-          <Switch variant='ontime' {...register('rundown')} />
+          <Switch
+            size='large'
+            checked={watch('rundown')}
+            onCheckedChange={(value: boolean) => setValue('rundown', value, { shouldDirty: true })}
+          />
           Rundown + Custom Fields
         </label>
         <label>
-          <Switch variant='ontime' {...register('viewSettings')} />
+          <Switch
+            size='large'
+            checked={watch('viewSettings')}
+            onCheckedChange={(value: boolean) => setValue('viewSettings', value, { shouldDirty: true })}
+          />
           View Settings
         </label>
         <label>
-          <Switch variant='ontime' {...register('urlPresets')} />
+          <Switch
+            size='large'
+            checked={watch('urlPresets')}
+            onCheckedChange={(value: boolean) => setValue('urlPresets', value, { shouldDirty: true })}
+          />
           URL Presets
         </label>
         <label>
-          <Switch variant='ontime' {...register('automation')} />
+          <Switch
+            size='large'
+            checked={watch('automation')}
+            onCheckedChange={(value: boolean) => setValue('automation', value, { shouldDirty: true })}
+          />
           Automation Settings
         </label>
       </Panel.Section>