✨ Split ImageGridListView component into separate files: GridView, Li…

…stView, and index 🗂️

🔨 Refactored handleToggleSelection to work seamlessly across views 🎯
🎨 Maintained consistent styling for both grid and list layouts 🎨
🐛 Ensured checkbox selection logic works properly in all views ✔️

plugin/src/pages/AssetPage/_components/ImageSelector/ImageGridListView/GridView.tsx

@@ -0,0 +1,81 @@
+import { Fragment, h } from 'preact';
+
+// ** import figma ui components
+import { Columns, Text } from '@create-figma-plugin/ui';
+
+// ** import custom ui components
+import { Checkbox } from '@/components/ui/checkbox';
+
+// ** import types
+import { NodeData } from '@/types/node';
+
+// ** import utils
+import { cn, truncateText } from '@/lib/utils';
+
+interface GridViewProps {
+  allNodes: NodeData[];
+  base64Images: { [key: string]: string };
+  selectedNodeIds: string[];
+  onToggleSelection: (id: string, currentChecked: boolean) => void;
+}
+
+const GridView = ({ allNodes, base64Images, selectedNodeIds, onToggleSelection }: GridViewProps) => {
+  return (
+    <Fragment>
+      {allNodes.map((image, index) => {
+        const isSelected = selectedNodeIds.includes(image.id);
+
+        return (
+          <div
+            key={`${image.id}_${index}`}
+            className={cn(
+              'relative rounded-lg flex flex-col items-center cursor-pointer h-fit p-2',
+              isSelected ? 'bg-selected-bg' : 'bg-secondary-bg'
+            )}
+            onClick={() => onToggleSelection(image.id, isSelected)}
+          >
+            {/* Checkbox */}
+            <Checkbox
+              value={isSelected}
+              onValueChange={() => onToggleSelection(image.id, isSelected)}
+              className="absolute cursor-pointer top-3 left-3"
+            />
+            {/* Image Preview */}
+            <div className={cn('overflow-hidden w-full h-20 max-h-20 flex justify-center items-center cursor-pointer')}>
+              {base64Images[image.id] ? (
+                <img
+                  src={base64Images[image.id]}
+                  alt={`${image.name}`}
+                  className={cn(
+                    'object-contain rounded-sm w-full h-full' // Object contain to keep the image within bounds
+                  )}
+                />
+              ) : (
+                <div
+                  className={cn(
+                    'rounded-sm w-full h-full' // Fixed size placeholder
+                  )}
+                />
+              )}
+            </div>
+
+            {/* Image Name, Dimensions, Type */}
+            <div className={cn('flex flex-col gap-2 items-center mt-2')}>
+              <Columns space="medium">
+                <div className="flex flex-col gap-1">
+                  <Text className={cn('truncate w-fit font-medium')}>{truncateText(image.name, 6)}</Text>
+                  <Text className="text-secondary-text">{truncateText(image.type, 6)}</Text>
+                </div>
+                <Text className="text-secondary-text">
+                  {Math.round(image.dimensions.width)}x{Math.round(image.dimensions.height)}px
+                </Text>
+              </Columns>
+            </div>
+          </div>
+        );
+      })}
+    </Fragment>
+  );
+};
+
+export default GridView;

plugin/src/pages/AssetPage/_components/ImageSelector/ImageGridListView/ListView.tsx

@@ -0,0 +1,73 @@
+import { Fragment, h } from 'preact';
+
+// ** import figma ui components
+import { Text } from '@create-figma-plugin/ui';
+
+// ** import custom ui components
+import { Checkbox } from '@/components/ui/checkbox';
+
+// ** import types
+import { NodeData } from '@/types/node';
+
+// ** import utils
+import { cn, truncateText } from '@/lib/utils';
+
+interface ListViewProps {
+  allNodes: NodeData[];
+  base64Images: { [key: string]: string };
+  selectedNodeIds: string[];
+  onToggleSelection: (id: string, currentChecked: boolean) => void;
+}
+
+const ListView = ({ allNodes, base64Images, selectedNodeIds, onToggleSelection }: ListViewProps) => {
+  return (
+    <Fragment>
+      {allNodes.map((image, index) => {
+        const isSelected = selectedNodeIds.includes(image.id);
+
+        return (
+          <div
+            key={`${image.id}_${index}`}
+            className={cn(
+              'relative rounded-lg flex items-center cursor-pointer px-2',
+              isSelected ? 'bg-selected-bg' : 'bg-secondary-bg'
+            )}
+            onClick={() => onToggleSelection(image.id, isSelected)}
+          >
+            <div className="flex items-center w-full gap-2 cursor-pointer">
+              {/* Checkbox */}
+              <Checkbox
+                value={isSelected}
+                onValueChange={() => onToggleSelection(image.id, isSelected)}
+                className="self-center"
+              />
+              {/* Image Preview */}
+              <div className="flex items-center justify-center w-16 h-16 overflow-hidden cursor-pointer">
+                {base64Images[image.id] ? (
+                  <img src={base64Images[image.id]} alt={`${image.name}`} className="object-contain w-full h-full" />
+                ) : (
+                  <div className="w-full h-full bg-gray-200" />
+                )}
+              </div>
+
+              {/* Image Details */}
+              <div className="flex flex-row items-center justify-between w-full gap-2">
+                <div className="flex flex-col">
+                  <Text className={cn('truncate w-full font-medium')}>{truncateText(image.name, 17)}</Text>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Text className="text-secondary-text">{truncateText(image.type, 10)}</Text>
+                  <Text className="text-secondary-text">
+                    {Math.round(image.dimensions.width)}x{Math.round(image.dimensions.height)}px
+                  </Text>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </Fragment>
+  );
+};
+
+export default ListView;

plugin/src/pages/AssetPage/_components/ImageSelector/ImageGridListView/index.tsx

@@ -0,0 +1,58 @@
+// index.tsx
+import { h } from 'preact';
+import HoverScrollbar from '@/components/ui/hover-scrollbar';
+import { cn } from '@/lib/utils';
+
+// ** Import child components
+import GridView from './GridView';
+import ListView from './ListView';
+
+// ** Import types
+import { NodeData } from '@/types/node';
+
+interface ImageGridListViewProps {
+  allNodes: NodeData[];
+  base64Images: { [key: string]: string };
+  selectedNodeIds: string[];
+  onSelectImage: (id: string, checked: boolean) => void;
+  viewType: 'grid' | 'list';
+}
+
+const ImageGridListView = ({
+  allNodes,
+  base64Images,
+  selectedNodeIds,
+  onSelectImage,
+  viewType,
+}: ImageGridListViewProps) => {
+  const isGridView = viewType === 'grid';
+
+  // Unified handler for toggling selection
+  const handleToggleSelection = (id: string, currentChecked: boolean) => {
+    onSelectImage(id, !currentChecked);
+  };
+
+  return (
+    <HoverScrollbar className="overflow-visible h-80" thumbClassName="-mr-2">
+      <div className={cn('gap-2 h-full mr-2', isGridView ? 'grid grid-cols-2' : 'flex flex-col')}>
+        {isGridView ? (
+          <GridView
+            allNodes={allNodes}
+            base64Images={base64Images}
+            selectedNodeIds={selectedNodeIds}
+            onToggleSelection={handleToggleSelection}
+          />
+        ) : (
+          <ListView
+            allNodes={allNodes}
+            base64Images={base64Images}
+            selectedNodeIds={selectedNodeIds}
+            onToggleSelection={handleToggleSelection}
+          />
+        )}
+      </div>
+    </HoverScrollbar>
+  );
+};
+
+export default ImageGridListView;