refactor: improve code organization in ModelList components

- Reordered imports to follow conventional grouping (external, internal, then third-party utilities)
- Added type assertion for error serialization to satisfy TypeScript
- Extracted inline event handler into named callback function for better readability

Author: Pfannkuchensack

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelList.tsx

@@ -2,7 +2,6 @@ import { Flex, Text, useDisclosure, useToast } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { serializeError } from 'serialize-error';
 import { MODEL_CATEGORIES_AS_LIST } from 'features/modelManagerV2/models';
 import {
   clearModelSelection,
@@ -14,6 +13,7 @@ import {
 } from 'features/modelManagerV2/store/modelManagerV2Slice';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { serializeError } from 'serialize-error';
 import {
   modelConfigsAdapterSelectors,
   useBulkDeleteModelsMutation,
@@ -116,7 +116,7 @@ const ModelList = () => {
 
       log.info(`Bulk delete completed: ${result.deleted.length} deleted, ${result.failed.length} failed`);
     } catch (err) {
-      log.error({ error: serializeError(err) }, 'Bulk delete error');
+      log.error({ error: serializeError(err as Error) }, 'Bulk delete error');
       toast({
         id: 'BULK_DELETE_ERROR',
         title: t('modelManager.modelsDeleteError', {
@@ -127,7 +127,7 @@ const ModelList = () => {
     } finally {
       setIsDeleting(false);
     }
-  }, [bulkDeleteModels, selectedModelKeys, dispatch, onClose, toast, t, log]);
+  }, [bulkDeleteModels, selectedModelKeys, dispatch, onClose, toast, t]);
 
   return (
     <>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx

@@ -95,6 +95,10 @@ const ModelListItem = ({ model }: ModelListItemProps) => {
     dispatch(toggleModelSelection(model.key));
   }, [model.key, dispatch]);
 
+  const handleCheckboxClick = useCallback((e: MouseEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+  }, []);
+
   return (
     <Flex
       sx={sx}
@@ -112,7 +116,7 @@ const ModelListItem = ({ model }: ModelListItemProps) => {
           onChange={handleCheckboxChange}
           mt={1}
           pointerEvents="auto"
-          onClick={(e) => e.stopPropagation()}
+          onClick={handleCheckboxClick}
         />
       )}
       <Flex gap={2} w="full" h="full" minW={0}>