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/settings-panel/GeneralSettings.tsx

@@ -119,7 +119,7 @@ export default function GeneralSettings() {
                 description='Protect the editor view with a pin code'
                 error={errors.editorKey?.message}
               />
-              <GeneralPinInput register={register} formName='editorKey' isDisabled={disableInputs} />
+              <GeneralPinInput register={register} formName='editorKey' disabled={disableInputs} />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field
@@ -127,7 +127,7 @@ export default function GeneralSettings() {
                 description='Protect the operator and cuesheet views with a pin code'
                 error={errors.operatorKey?.message}
               />
-              <GeneralPinInput register={register} formName='operatorKey' isDisabled={disableInputs} />
+              <GeneralPinInput register={register} formName='operatorKey' disabled={disableInputs} />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field

apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Switch } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 import { useDisclosure } from '@mantine/hooks';
 import { ViewSettings as ViewSettingsType } from 'ontime-types';
 
@@ -10,6 +9,7 @@ import Info from '../../../../common/components/info/Info';
 import { SwatchPickerRHF } from '../../../../common/components/input/colour-input/SwatchPicker';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import Switch from '../../../../common/components/switch/Switch';
 import useViewSettings from '../../../../common/hooks-query/useViewSettings';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -28,6 +28,8 @@ export default function ViewSettings() {
     setError,
     register,
     reset,
+    setValue,
+    watch,
     formState: { isSubmitting, isDirty, errors },
   } = useForm<ViewSettingsType>({
     defaultValues: data,
@@ -96,12 +98,10 @@ export default function ViewSettings() {
                 title='Override CSS styles'
                 description='Enables overriding view styles with custom stylesheet'
               />
-              <Controller
-                control={control}
-                name='overrideStyles'
-                render={({ field: { onChange, value, ref } }) => (
-                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-                )}
+              <Switch
+                size='large'
+                checked={watch('overrideStyles')}
+                onCheckedChange={(value: boolean) => setValue('overrideStyles', value, { shouldDirty: true })}
               />
               <Button onClick={codeEditorHandler.open} disabled={isSubmitting}>
                 Edit CSS override
@@ -128,12 +128,10 @@ export default function ViewSettings() {
                 title='Freeze timer on end'
                 description='When a timer hits 00:00:00, it freezes instead of going negative. It invalidates the End Message.'
               />
-              <Controller
-                control={control}
-                name='freezeEnd'
-                render={({ field: { onChange, value, ref } }) => (
-                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-                )}
+              <Switch
+                size='large'
+                checked={watch('freezeEnd')}
+                onCheckedChange={(value: boolean) => setValue('freezeEnd', value, { shouldDirty: true })}
               />
             </Panel.ListItem>
             <Panel.ListItem>

apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.module.scss

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  input {
+    width: 5em;
+  }
+}

apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.tsx

@@ -1,24 +1,26 @@
 import { PropsWithChildren, useState } from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { IoEyeOutline } from 'react-icons/io5';
-import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { Settings } from 'ontime-types';
 
+import IconButton from '../../../../../common/components/buttons/IconButton';
+import Input from '../../../../../common/components/input/input/Input';
 import { isAlphanumeric } from '../../../../../common/utils/regex';
 
+import style from './GeneralPinInput.module.scss';
+
 interface GeneralPinInputProps {
   register: UseFormRegister<Settings>;
   formName: keyof Settings;
-  isDisabled?: boolean;
+  disabled?: boolean;
 }
 
-export default function GeneralPinInput(props: PropsWithChildren<GeneralPinInputProps>) {
-  const { register, formName, isDisabled } = props;
+export default function GeneralPinInput({ register, formName, disabled }: PropsWithChildren<GeneralPinInputProps>) {
   const [isVisible, setVisible] = useState(false);
+
   return (
-    <InputGroup size='sm' width='100px'>
+    <div className={style.container}>
       <Input
-        variant='ontime-filled'
         type={isVisible ? 'text' : 'password'}
         maxLength={4}
         {...register(formName, {
@@ -28,18 +30,16 @@ export default function GeneralPinInput(props: PropsWithChildren<GeneralPinInput
           },
         })}
         placeholder='-'
-        isDisabled={isDisabled}
+        disabled={disabled}
       />
-      <InputRightElement>
-        <IconButton
-          onMouseDown={() => setVisible(true)}
-          onMouseUp={() => setVisible(false)}
-          size='sm'
-          variant='ontime-ghosted'
-          icon={<IoEyeOutline />}
-          aria-label='Show pin code'
-        />
-      </InputRightElement>
-    </InputGroup>
+      <IconButton
+        onMouseDown={() => setVisible(true)}
+        onMouseUp={() => setVisible(false)}
+        variant='ghosted'
+        aria-label='Show pin code'
+      >
+        <IoEyeOutline />
+      </IconButton>
+    </div>
   );
 }