feat(ui): controlnet/image dnd wip

Implement `dnd-kit` for image drag and drop
- vastly simplifies logic bc we can drag and drop non-serializable data (like an `ImageDTO`)
- also much prettier
- also will fix conflicts with file upload via OS drag and drop, bc `dnd-kit` does not use native HTML drag and drop API
- Implemented for Init image, controlnet, and node editor so far

More progress on the ControlNet UI

invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx

@@ -10,7 +10,7 @@ import {
 } from '@chakra-ui/react';
 
 import IAIButton from 'common/components/IAIButton';
-import IAICheckbox from 'common/components/IAICheckbox';
+import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
 import IAIInput from 'common/components/IAIInput';
 import IAINumberInput from 'common/components/IAINumberInput';
 import React from 'react';
@@ -74,12 +74,12 @@ export default function AddCheckpointModel() {
   return (
     <VStack gap={2} alignItems="flex-start">
       <Flex columnGap={4}>
-        <IAICheckbox
+        <IAISimpleCheckbox
           isChecked={!addManually}
           label={t('modelManager.scanForModels')}
           onChange={() => setAddmanually(!addManually)}
         />
-        <IAICheckbox
+        <IAISimpleCheckbox
           label={t('modelManager.addManually')}
           isChecked={addManually}
           onChange={() => setAddmanually(!addManually)}

invokeai/frontend/web/src/features/system/components/ModelManager/MergeModels.tsx

@@ -24,7 +24,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as InvokeAI from 'app/types/invokeai';
 import IAISlider from 'common/components/IAISlider';
-import IAICheckbox from 'common/components/IAICheckbox';
+import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
 
 export default function MergeModels() {
   const dispatch = useAppDispatch();
@@ -286,7 +286,7 @@ export default function MergeModels() {
                 )}
               </Flex>
 
-              <IAICheckbox
+              <IAISimpleCheckbox
                 label={t('modelManager.ignoreMismatch')}
                 isChecked={modelMergeForce}
                 onChange={(e) => setModelMergeForce(e.target.checked)}

invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx

@@ -1,5 +1,5 @@
 import IAIButton from 'common/components/IAIButton';
-import IAICheckbox from 'common/components/IAICheckbox';
+import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
 import IAIIconButton from 'common/components/IAIIconButton';
 import React from 'react';
 
@@ -81,13 +81,13 @@ function SearchModelEntry({
       borderRadius={4}
     >
       <Flex gap={4} alignItems="center" justifyContent="space-between">
-        <IAICheckbox
+        <IAISimpleCheckbox
           value={model.name}
           label={<Text fontWeight={500}>{model.name}</Text>}
           isChecked={modelsToAdd.includes(model.name)}
           isDisabled={existingModels.includes(model.location)}
           onChange={foundModelsChangeHandler}
-        ></IAICheckbox>
+        ></IAISimpleCheckbox>
         {existingModels.includes(model.location) && (
           <Badge colorScheme="accent">{t('modelManager.modelExists')}</Badge>
         )}
@@ -324,7 +324,7 @@ export default function SearchModels() {
               >
                 {t('modelManager.deselectAll')}
               </IAIButton>
-              <IAICheckbox
+              <IAISimpleCheckbox
                 label={t('modelManager.showExisting')}
                 isChecked={shouldShowExistingModelsInSearch}
                 onChange={() =>