From eea143abbf29c0b45b165cf073fccce3eb1711d9 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Thu, 28 May 2026 14:51:48 -0600
Subject: [PATCH] refactor(doclist): centralize icons grid layout logic into
 reusable utility

Move grid style and template calculation for icon views into a shared
iconsGrid.ts utility. Replace inline grid logic in IconsView and DocumentListSkeleton
with calls to the new iconsGridStyle function for consistency and maintainability.
---
 .../doclist/DocumentListSkeleton.tsx          | 12 +++----
 src/components/doclist/views/IconsView.tsx    | 32 ++-----------------
 src/components/doclist/views/iconsGrid.ts     | 28 ++++++++++++++++
 3 files changed, 35 insertions(+), 37 deletions(-)
 create mode 100644 src/components/doclist/views/iconsGrid.ts

diff --git a/src/components/doclist/DocumentListSkeleton.tsx b/src/components/doclist/DocumentListSkeleton.tsx
index 12ff52e..f3e92c4 100644
--- a/src/components/doclist/DocumentListSkeleton.tsx
+++ b/src/components/doclist/DocumentListSkeleton.tsx
@@ -1,24 +1,20 @@
 'use client';
 
 import type { IconSize, ViewMode } from '@/types/documents';
+import { iconsGridStyle } from '@/components/doclist/views/iconsGrid';
 
 interface DocumentListSkeletonProps {
   viewMode?: ViewMode;
   iconSize?: IconSize;
 }
 
-const ICON_COLS: Record<IconSize, string> = {
-  sm: 'grid-cols-3 sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-8',
-  md: 'grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6',
-  lg: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5',
-  xl: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
-};
+const ICON_SKELETON_ITEM_COUNT = 12;
 
 function IconsSkeleton({ iconSize }: { iconSize: IconSize }) {
   return (
     <div className="h-full min-h-0 overflow-y-auto p-3">
-      <div className={`grid gap-2 sm:gap-3 ${ICON_COLS[iconSize]}`}>
-        {Array.from({ length: 12 }).map((_, index) => (
+      <div className="grid" style={iconsGridStyle(iconSize, ICON_SKELETON_ITEM_COUNT)}>
+        {Array.from({ length: ICON_SKELETON_ITEM_COUNT }).map((_, index) => (
           <div key={index} className="overflow-hidden rounded-md border border-offbase bg-base">
             <div className="aspect-[3/4] w-full bg-offbase" />
             <div className="flex items-center gap-2 px-2 py-2">
diff --git a/src/components/doclist/views/IconsView.tsx b/src/components/doclist/views/IconsView.tsx
index 8a5c261..05c21be 100644
--- a/src/components/doclist/views/IconsView.tsx
+++ b/src/components/doclist/views/IconsView.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { useEffect, type CSSProperties } from 'react';
+import { useEffect } from 'react';
 import type { DocumentListDocument, IconSize } from '@/types/documents';
 import { DocumentTile } from './DocumentTile';
 import { useDocumentSelection } from '../dnd/DocumentSelectionContext';
+import { iconsGridStyle } from './iconsGrid';
 
 interface IconsViewProps {
   documents: DocumentListDocument[];
@@ -12,33 +13,6 @@ interface IconsViewProps {
   onMergeIntoFolder: (sources: DocumentListDocument[], target: DocumentListDocument) => void;
 }
 
-const TILE_WIDTH_PX: Record<IconSize, number> = {
-  sm: 112,
-  md: 136,
-  lg: 162,
-  xl: 192,
-};
-
-const SMALL_GRID_ITEM_COUNT = 3;
-
-function responsiveGridTemplate(iconSize: IconSize, itemCount: number): string {
-  const width = TILE_WIDTH_PX[iconSize];
-  if (itemCount <= SMALL_GRID_ITEM_COUNT) {
-    return `repeat(auto-fill, minmax(${width}px, ${width}px))`;
-  }
-  return `repeat(auto-fit, minmax(${width}px, 1fr))`;
-}
-
-const gridGap = '12px';
-
-function gridStyle(iconSize: IconSize, itemCount: number): CSSProperties {
-  return {
-    gridTemplateColumns: responsiveGridTemplate(iconSize, itemCount),
-    gap: gridGap,
-    justifyContent: itemCount <= SMALL_GRID_ITEM_COUNT ? 'start' : undefined,
-  };
-}
-
 export function IconsView({
   documents,
   iconSize,
@@ -61,7 +35,7 @@ export function IconsView({
       onClick={handleBackgroundClick}
       className="flex-1 min-h-0 overflow-y-auto p-3"
     >
-      <div className="grid" style={gridStyle(iconSize, documents.length)}>
+      <div className="grid" style={iconsGridStyle(iconSize, documents.length)}>
         {documents.map((doc) => (
           <DocumentTile
             key={`${doc.type}-${doc.id}`}
diff --git a/src/components/doclist/views/iconsGrid.ts b/src/components/doclist/views/iconsGrid.ts
new file mode 100644
index 0000000..06922d3
--- /dev/null
+++ b/src/components/doclist/views/iconsGrid.ts
@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+import type { IconSize } from '@/types/documents';
+
+const TILE_WIDTH_PX: Record<IconSize, number> = {
+  sm: 112,
+  md: 136,
+  lg: 162,
+  xl: 192,
+};
+
+const SMALL_GRID_ITEM_COUNT = 3;
+const GRID_GAP_PX = 12;
+
+function responsiveGridTemplate(iconSize: IconSize, itemCount: number): string {
+  const width = TILE_WIDTH_PX[iconSize];
+  if (itemCount <= SMALL_GRID_ITEM_COUNT) {
+    return `repeat(auto-fill, minmax(${width}px, ${width}px))`;
+  }
+  return `repeat(auto-fit, minmax(${width}px, 1fr))`;
+}
+
+export function iconsGridStyle(iconSize: IconSize, itemCount: number): CSSProperties {
+  return {
+    gridTemplateColumns: responsiveGridTemplate(iconSize, itemCount),
+    gap: `${GRID_GAP_PX}px`,
+    justifyContent: itemCount <= SMALL_GRID_ITEM_COUNT ? 'start' : undefined,
+  };
+}