Add expandable file list to orphaned models dialog

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

Author: Copilot

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

@@ -1,8 +1,10 @@
 import {
   Button,
   Checkbox,
+  Collapse,
   Flex,
   Heading,
+  IconButton,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -16,6 +18,7 @@ import {
 } from '@invoke-ai/ui-library';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiCaretDownBold, PiCaretRightBold } from 'react-icons/pi';
 import { useDeleteOrphanedModelsMutation, useGetOrphanedModelsQuery } from 'services/api/endpoints/models';
 
 type OrphanedModel = {
@@ -38,6 +41,7 @@ export const SyncModelsDialog = memo(({ isOpen, onClose }: SyncModelsDialogProps
 
   const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set());
   const [selectAll, setSelectAll] = useState(true);
+  const [expandedModels, setExpandedModels] = useState<Set<string>>(new Set());
 
   // Initialize selected models when data loads
   useEffect(() => {
@@ -85,6 +89,18 @@ export const SyncModelsDialog = memo(({ isOpen, onClose }: SyncModelsDialogProps
     }
   }, [selectAll, orphanedModels]);
 
+  const handleToggleExpanded = useCallback((path: string) => {
+    setExpandedModels((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+
   const handleDelete = useCallback(async () => {
     try {
       const result = await deleteOrphanedModels({ paths: Array.from(selectedModels) }).unwrap();
@@ -202,19 +218,48 @@ export const SyncModelsDialog = memo(({ isOpen, onClose }: SyncModelsDialogProps
                   bg="base.750"
                 >
                   <Flex justifyContent="space-between" alignItems="center">
-                    <Checkbox
-                      isChecked={selectedModels.has(model.path)}
-                      onChange={() => handleToggleModel(model.path)}
-                    >
-                      <Text fontWeight="semibold">{model.path}</Text>
-                    </Checkbox>
+                    <Flex alignItems="center" gap={2} flex={1}>
+                      <IconButton
+                        aria-label={expandedModels.has(model.path) ? 'Collapse' : 'Expand'}
+                        icon={expandedModels.has(model.path) ? <PiCaretDownBold /> : <PiCaretRightBold />}
+                        size="xs"
+                        variant="ghost"
+                        onClick={() => handleToggleExpanded(model.path)}
+                      />
+                      <Checkbox
+                        isChecked={selectedModels.has(model.path)}
+                        onChange={() => handleToggleModel(model.path)}
+                      >
+                        <Text fontWeight="semibold">{model.path}</Text>
+                      </Checkbox>
+                    </Flex>
                     <Text fontSize="sm" color="base.400">
                       {formatSize(model.size_bytes)}
                     </Text>
                   </Flex>
-                  <Text fontSize="sm" color="base.400">
-                    {t('modelManager.filesCount', { count: model.files.length })}
-                  </Text>
+                  <Flex justifyContent="space-between" alignItems="center">
+                    <Text fontSize="sm" color="base.400">
+                      {t('modelManager.filesCount', { count: model.files.length })}
+                    </Text>
+                  </Flex>
+                  <Collapse in={expandedModels.has(model.path)}>
+                    <Flex
+                      flexDir="column"
+                      gap={1}
+                      mt={2}
+                      p={2}
+                      bg="base.800"
+                      borderRadius="md"
+                      maxH="200px"
+                      overflowY="auto"
+                    >
+                      {model.files.map((file) => (
+                        <Text key={file} fontSize="xs" color="base.300" fontFamily="mono">
+                          {file}
+                        </Text>
+                      ))}
+                    </Flex>
+                  </Collapse>
                 </Flex>
               ))}
             </Flex>