@plutonhq/core-frontend 0.1.23 → 0.1.25

package/src/components/Restore/RestoreFileSelector/RestoreFileSelector.tsx

@@ -1,11 +1,13 @@
-import { useState, useMemo } from 'react';
-import { FixedSizeList as List } from 'react-window';
+import { useState, useMemo, useEffect } from 'react';
 import Icon from '../../common/Icon/Icon';
 import { RestoreFileItem } from '../../../@types/restores';
 import { calculateDirectorySizes, formatBytes, formatDateTime, formatNumberToK, isMobile, sortFileItems } from '../../../utils/helpers';
 import FileIcon from '../../common/FileIcon/FileIcon';
 import classes from './RestoreFileSelector.module.scss';
 import { getParentPath, getPathSeparator, normalizePath, splitPath } from '../../../utils/restore';
+import { SnapshotBrowserToolbar, SnapshotBrowserDirectories, SnapshotBrowserFileList, SnapshotBrowserGoUpRow } from '../../common/SnapshotBrowser';
+import { useSnapshotNavigation } from '../../common/SnapshotBrowser/hooks/useSnapshotNavigation';
+import sbClasses from '../../common/SnapshotBrowser/SnapshotBrowser.module.scss';
 
 interface RestoreFileSelectorProps {
    selected: {
@@ -23,9 +25,9 @@ interface RestoreFileSelectorProps {
 
 const isMobileDevice = isMobile();
 const ITEM_HEIGHT = isMobileDevice ? 65 : 45;
+const GRID_COLUMNS = '1fr 180px minmax(80px, auto)';
 
 const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showChange, onSelect, fileSelectCondition }: RestoreFileSelectorProps) => {
-   const [selectedFolder, setSelectedFolder] = useState<string>('');
    const [search, setSearch] = useState('');
    const [sortField, setSortField] = useState<'name' | 'modifiedAt' | 'size'>('name');
    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
@@ -152,13 +154,23 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
          return aParts.length - bParts.length;
       });
 
-      // Set the first directory as selected by default
-      console.log('SelectedFolder :', sortedDirs[0]);
-      setSelectedFolder(sortedDirs[0] || '');
-
       return sortedDirs;
    }, [files]);
 
+   const { selectedFolder, setSelectedFolder, hasSubdirectories, isVisible, expandParentFolders, toggleFolder } = useSnapshotNavigation(
+      directories,
+      expandedFolders,
+      setExpandedFolders,
+      { splitPath, getPathSeparator, hasLeadingSeparator: false },
+   );
+
+   // Set the first directory as selected by default
+   useEffect(() => {
+      if (directories.length > 0 && selectedFolder === '') {
+         setSelectedFolder(directories[0]);
+      }
+   }, [directories, selectedFolder, setSelectedFolder]);
+
    const summary = useMemo(() => {
       let selectedFilesCount = 0;
       let selectedBytes = 0;
@@ -182,11 +194,6 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
       };
    }, [files, selectedFiles]);
 
-   const hasSubdirectories = (dir: string) => {
-      const separator = getPathSeparator(dir);
-      return directories.some((d) => d !== dir && d.startsWith(dir + separator));
-   };
-
    const handleSort = (field: 'name' | 'modifiedAt' | 'size') => {
       if (sortField === field) {
          // Toggle direction if clicking the same field
@@ -198,44 +205,6 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
       }
    };
 
-   const expandParentFolders = (dirPath: string) => {
-      const newExpanded = new Set(expandedFolders);
-      const separator = getPathSeparator(dirPath);
-      const parts = splitPath(dirPath);
-      let currentPath = '';
-
-      // Expand all parent directories
-      parts.forEach((part) => {
-         currentPath = currentPath ? `${currentPath}${separator}${part}` : part;
-         newExpanded.add(currentPath);
-      });
-
-      setExpandedFolders(newExpanded);
-   };
-
-   const toggleFolder = (dir: string) => {
-      const newExpanded = new Set(expandedFolders);
-      if (expandedFolders.has(dir)) {
-         newExpanded.delete(dir);
-      } else {
-         newExpanded.add(dir);
-      }
-      setExpandedFolders(newExpanded);
-   };
-
-   const isVisible = (dir: string) => {
-      const separator = getPathSeparator(dir);
-      const parts = splitPath(dir);
-      const parentParts = parts.slice(0, -1);
-      let parentPath = '';
-
-      // Check if all parent folders are expanded
-      return parentParts.every((part) => {
-         parentPath = parentPath ? `${parentPath}${separator}${part}` : part;
-         return expandedFolders.has(parentPath);
-      });
-   };
-
    const onFileSelect = (path: string, isDirectory: boolean) => {
       const newSelected = { ...selectedFiles };
       const isCurrentlySelected = isPathSelected(path);
@@ -343,19 +312,17 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
       // Parent directory navigation
       if (item === null) {
          return (
-            <div
+            <SnapshotBrowserGoUpRow
                style={style}
-               className={`${classes.file} ${classes.fileIsDir} ${classes.goUpButton}`}
-               onClick={() => {
+               onGoUp={() => {
                   const parentPath = getParentPath(selectedFolder);
                   const normalizedParentPath = normalizePath(parentPath);
                   if (!normalizedParentPath || normalizedParentPath === '') return;
                   expandParentFolders(normalizedParentPath);
                   setSelectedFolder(normalizedParentPath);
                }}
-            >
-               <div className={classes.fileName}>...</div>
-            </div>
+               gridTemplateColumns={GRID_COLUMNS}
+            />
          );
       }
 
@@ -369,9 +336,9 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
 
       return (
          <div
-            style={style}
+            style={{ ...style, gridTemplateColumns: GRID_COLUMNS }}
             key={file.path}
-            className={`${classes.file} ${isDirectory ? classes.fileIsDir : ''} ${showChange && file.changeType === 'modified' ? classes.fileModified : ''} ${showChange && file.changeType === 'removed' ? classes.fileRemoved : ''}`}
+            className={`${sbClasses.snapshotFile} ${isDirectory ? sbClasses.fileIsDir : ''} ${showChange && file.changeType === 'modified' ? classes.fileModified : ''} ${showChange && file.changeType === 'removed' ? classes.fileRemoved : ''}`}
             onClick={() => {
                if (isDirectory) {
                   expandParentFolders(normalizedPath);
@@ -379,7 +346,7 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
                }
             }}
          >
-            <div className={classes.fileName}>
+            <div className={sbClasses.fileName}>
                <button
                   className={`${classes.selectButton} ${isSelected ? classes.selected : ''} ${!canBeSelected ? classes.notSelectable : ''}`}
                   onClick={(e) => {
@@ -406,10 +373,12 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
                <Icon type="loading" size={24} /> Loading Snapshot Content..
             </div>
          )}
-         <div className={classes.restoredFileBrowser}>
-            <div className={classes.toolbar}>
-               <div className={classes.toolbarLeft}>
-                  <div className={classes.stats}>
+         <div className={sbClasses.snapshotBrowser}>
+            <SnapshotBrowserToolbar
+               search={search}
+               onSearchChange={setSearch}
+               leftContent={
+                  <div className={sbClasses.stats}>
                      <strong>Summary: </strong>
                      {formatNumberToK(summary.selectedFiles)}/{formatNumberToK(summary.totalFiles)} Items {' • '}
                      {formatBytes(summary.selectedBytes)}/{formatBytes(summary.totalBytes)}
@@ -423,91 +392,59 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
                         </div>
                      )}
                   </div>
-               </div>
-               <div className={classes.toolbarRight}>
-                  <div className={classes.search}>
-                     <Icon type="search" size={16} />
-                     <input type="text" placeholder="Search in current Directory..." value={search} onChange={(e) => setSearch(e.target.value)} />
-                  </div>
-               </div>
-            </div>
-
-            <div className={classes.browserContent}>
-               <div className={`${classes.sidebar} styled__scrollbar`}>
-                  <div className={classes.sidebarHeader}>Directories</div>
-                  {directories.map((dir) => {
-                     const parts = splitPath(dir);
-                     const dirName = parts[parts.length - 1];
-                     const depth = parts.length - 1;
-                     const isExpanded = expandedFolders.has(dir);
-                     const hasChildren = hasSubdirectories(dir);
+               }
+            />
+
+            <div className={sbClasses.browserContent}>
+               <SnapshotBrowserDirectories
+                  directories={directories}
+                  selectedFolder={selectedFolder}
+                  expandedFolders={expandedFolders}
+                  onDirectoryClick={(dir) => setSelectedFolder(dir)}
+                  onToggleFolder={toggleFolder}
+                  isVisible={isVisible}
+                  hasSubdirectories={hasSubdirectories}
+                  renderDirectoryExtra={(dir) => {
                      const isSelected = isPathSelected(files.find((f) => f.isDirectory && normalizePath(f.path) === dir)?.path || dir);
-
-                     // Only render if parent folders are expanded or if it's a root folder
-                     if (depth === 0 || isVisible(dir)) {
-                        return (
-                           <div
-                              key={dir}
-                              className={`${classes.directory} ${selectedFolder === dir ? classes.selected : ''} ${hasChildren ? '' : classes.directoryEmpty}`}
-                              style={{ paddingLeft: `${depth * 20}px` }}
-                              onClick={() => setSelectedFolder(dir)}
-                           >
-                              {hasChildren ? (
-                                 <button
-                                    className={`${classes.toggleButton} ${isExpanded ? classes.active : ''}`}
-                                    onClick={(e) => {
-                                       e.stopPropagation();
-                                       toggleFolder(dir);
-                                    }}
-                                 >
-                                    {isExpanded ? '-' : '+'}
-                                 </button>
-                              ) : (
-                                 <span className={`${classes.togglePlaceholder}`} />
-                              )}
-                              <div className={classes.dirName}>
-                                 <Icon type={'fm-directory'} size={14} />
-                                 <button
-                                    className={`${classes.selectButton} ${isSelected ? classes.selected : ''}`}
-                                    onClick={(e) => {
-                                       e.stopPropagation();
-                                       const originalPath = files.find((f) => f.isDirectory && normalizePath(f.path) === dir)?.path || dir;
-                                       onFileSelect(originalPath, true);
-                                    }}
-                                 >
-                                    <Icon type={isSelected ? 'check-circle-filled' : 'check-circle'} size={13} />
-                                 </button>
-                                 {dirName}
-                              </div>
+                     return (
+                        <button
+                           className={`${classes.selectButton} ${isSelected ? classes.selected : ''}`}
+                           onClick={(e) => {
+                              e.stopPropagation();
+                              const originalPath = files.find((f) => f.isDirectory && normalizePath(f.path) === dir)?.path || dir;
+                              onFileSelect(originalPath, true);
+                           }}
+                        >
+                           <Icon type={isSelected ? 'check-circle-filled' : 'check-circle'} size={13} />
+                        </button>
+                     );
+                  }}
+               />
+
+               <div className={`${sbClasses.content} styled__scrollbar`}>
+                  <SnapshotBrowserFileList
+                     files={directChildren}
+                     height={window.innerHeight - 370}
+                     itemSize={ITEM_HEIGHT}
+                     headerContent={
+                        <>
+                           <div onClick={() => handleSort('name')} className={sortField === 'name' ? classes.activeSort : ''}>
+                              Name {sortField === 'name' && (sortDirection === 'asc' ? '↑' : '↓')}
                            </div>
-                        );
+                           <div onClick={() => handleSort('modifiedAt')} className={sortField === 'modifiedAt' ? classes.activeSort : ''}>
+                              Last Modified {sortField === 'modifiedAt' && (sortDirection === 'asc' ? '↑' : '↓')}
+                           </div>
+                           <div onClick={() => handleSort('size')} className={sortField === 'size' ? classes.activeSort : ''}>
+                              Size {sortField === 'size' && (sortDirection === 'asc' ? '↑' : '↓')}
+                           </div>
+                        </>
                      }
-                     return null;
-                  })}
-               </div>
-
-               <div className={`${classes.content} styled__scrollbar`}>
-                  <div className={classes.fileList}>
-                     <div className={classes.header}>
-                        <div onClick={() => handleSort('name')} className={sortField === 'name' ? classes.activeSort : ''}>
-                           Name {sortField === 'name' && (sortDirection === 'asc' ? '↑' : '↓')}
-                        </div>
-                        <div onClick={() => handleSort('modifiedAt')} className={sortField === 'modifiedAt' ? classes.activeSort : ''}>
-                           Last Modified {sortField === 'modifiedAt' && (sortDirection === 'asc' ? '↑' : '↓')}
-                        </div>
-                        <div onClick={() => handleSort('size')} className={sortField === 'size' ? classes.activeSort : ''}>
-                           Size {sortField === 'size' && (sortDirection === 'asc' ? '↑' : '↓')}
-                        </div>
-                     </div>
-                     {selectedFolder ? (
-                        <List height={window.innerHeight - 370} itemCount={directChildren.length} itemSize={ITEM_HEIGHT} width="100%">
-                           {Row}
-                        </List>
-                     ) : (
-                        <div className={classes.fileListEmpty}>Select a folder from the left to browse it's content</div>
-                     )}
-                     {errorFetching && <div className={classes.error}>Failed to load files. Please try again.</div>}
-                  </div>
+                     renderRow={Row}
+                     selectedFolder={selectedFolder || null}
+                     gridTemplateColumns={GRID_COLUMNS}
+                     emptyMessage="Select a folder from the left to browse it's content"
+                  />
+                  {errorFetching && <div className={classes.error}>Failed to load files. Please try again.</div>}
                </div>
             </div>
          </div>

package/src/components/Restore/RestoredFileBrowser/RestoredFileBrowser.tsx

@@ -1,11 +1,13 @@
 import { useState, useMemo, useEffect } from 'react';
-import { FixedSizeList as List } from 'react-window';
 import Icon from '../../common/Icon/Icon';
+import FileIcon from '../../common/FileIcon/FileIcon';
 import classes from './RestoredFileBrowser.module.scss';
 import { RestoredFileItem, RestoredItemsStats } from '../../../@types/restores';
 import { formatBytes, formatNumberToK, isMobile } from '../../../utils/helpers';
 import { getParentPath, getPathSeparator, normalizePath, splitPath } from '../../../utils/restore';
-import FileIcon from '../../common/FileIcon/FileIcon';
+import { SnapshotBrowserToolbar, SnapshotBrowserDirectories, SnapshotBrowserFileList, SnapshotBrowserGoUpRow } from '../../common/SnapshotBrowser';
+import { useSnapshotNavigation } from '../../common/SnapshotBrowser/hooks/useSnapshotNavigation';
+import sbClasses from '../../common/SnapshotBrowser/SnapshotBrowser.module.scss';
 
 interface RestoredFileBrowserProps {
    files: RestoredFileItem[];
@@ -15,9 +17,9 @@ interface RestoredFileBrowserProps {
 
 const isMobileDevice = isMobile();
 const ITEM_HEIGHT = isMobileDevice ? 65 : 45;
+const GRID_COLUMNS = '1fr 100px minmax(80px, auto)';
 
 const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBrowserProps) => {
-   const [selectedFolder, setSelectedFolder] = useState<string>('');
    const [search, setSearch] = useState('');
    const [filters, setFilters] = useState({
       unchanged: true,
@@ -34,7 +36,6 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
 
          parts.forEach((part, index) => {
             currentPath = currentPath ? `${currentPath}${separator}${part}` : part;
-            // Only expand folders up to 5 levels deep (index < 5)
             if (index < 3) {
                allPaths.add(currentPath);
             }
@@ -54,7 +55,6 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
          })
          .forEach((file) => {
             const dirPath = getParentPath(file.path);
-            // Use the normalized path as key
             const normalizedDirPath = normalizePath(dirPath);
 
             if (normalizedDirPath) {
@@ -70,7 +70,6 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
 
    const directories = useMemo(() => {
       const dirs = new Set<string>();
-      // Derive directories from all files, not filtered fileSystem, to keep tree stable during search
       files.forEach((file) => {
          const dirPath = getParentPath(file.path);
          const separator = getPathSeparator(dirPath);
@@ -87,62 +86,22 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
       return Array.from(dirs);
    }, [files]);
 
-   // Set initial selected folder when directories change
+   const { selectedFolder, setSelectedFolder, hasSubdirectories, isVisible, expandParentFolders, toggleFolder } = useSnapshotNavigation(
+      directories,
+      expandedFolders,
+      setExpandedFolders,
+      { splitPath, getPathSeparator, hasLeadingSeparator: false },
+   );
+
    useEffect(() => {
       if (directories.length > 0 && selectedFolder === '') {
          setSelectedFolder(directories[0]);
       }
-   }, [directories, selectedFolder]);
-
-   const hasSubdirectories = (dir: string) => {
-      const separator = getPathSeparator(dir);
-      return directories.some((d) => d !== dir && d.startsWith(dir + separator));
-   };
+   }, [directories, selectedFolder, setSelectedFolder]);
 
    const hasUpdatedContent = (dir: string) => {
-      return Object.entries(fileSystem).some(([path, files]) => {
-         return path.startsWith(dir) && files.some((f) => f.action === 'restored' || f.action === 'updated');
-      });
-   };
-
-   const expandParentDirectories = (dir: string) => {
-      const newExpanded = new Set(expandedFolders);
-      const separator = getPathSeparator(dir);
-      const parts = splitPath(dir);
-      let currentPath = '';
-
-      // Expand all parent directories
-      parts.forEach((part, index) => {
-         currentPath = currentPath ? `${currentPath}${separator}${part}` : part;
-         if (index < parts.length - 1) {
-            // Don't expand the target directory itself
-            newExpanded.add(currentPath);
-         }
-      });
-
-      setExpandedFolders(newExpanded);
-   };
-
-   const toggleFolder = (dir: string) => {
-      const newExpanded = new Set(expandedFolders);
-      if (expandedFolders.has(dir)) {
-         newExpanded.delete(dir);
-      } else {
-         newExpanded.add(dir);
-      }
-      setExpandedFolders(newExpanded);
-   };
-
-   const isVisible = (dir: string) => {
-      const separator = getPathSeparator(dir);
-      const parts = splitPath(dir);
-      const parentParts = parts.slice(0, -1);
-      let parentPath = '';
-
-      // Check if all parent folders are expanded
-      return parentParts.every((part) => {
-         parentPath = parentPath ? `${parentPath}${separator}${part}` : part;
-         return expandedFolders.has(parentPath);
+      return Object.entries(fileSystem).some(([path, dirFiles]) => {
+         return path.startsWith(dir) && dirFiles.some((f) => f.action === 'restored' || f.action === 'updated');
       });
    };
 
@@ -155,11 +114,9 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
          const isDirectoryA = directories.includes(normalizedPathA);
          const isDirectoryB = directories.includes(normalizedPathB);
 
-         // First sort by type: directories first, then files
          if (isDirectoryA && !isDirectoryB) return -1;
          if (!isDirectoryA && isDirectoryB) return 1;
 
-         // If both are same type, sort by status priority
          const priority = { restored: 0, updated: 1, unchanged: 2 };
          return priority[a.action] - priority[b.action];
       });
@@ -169,25 +126,19 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
    const totalItems = sortedFiles.length + (showGoUpButton ? 1 : 0);
 
    const FileRow = ({ index, style }: { index: number; style: React.CSSProperties }) => {
-      // If showing go up button and this is the first item
       if (showGoUpButton && index === 0) {
          return (
-            <div
+            <SnapshotBrowserGoUpRow
                style={style}
-               className={`${classes.file} ${classes.fileIsDir} ${classes.goUpButton}`}
-               onClick={() => {
+               onGoUp={() => {
                   const parentPath = getParentPath(selectedFolder);
                   const normalizedParentPath = normalizePath(parentPath);
-                  console.log('normalizedParentPath :', normalizedParentPath);
                   if (!normalizedParentPath || normalizedParentPath === '') return;
-                  expandParentDirectories(normalizedParentPath);
+                  expandParentFolders(normalizedParentPath);
                   setSelectedFolder(normalizedParentPath);
                }}
-            >
-               <div className={classes.fileName}>...</div>
-               <div className={classes.status}></div>
-               <div></div>
-            </div>
+               gridTemplateColumns={GRID_COLUMNS}
+            />
          );
       }
 
@@ -202,22 +153,22 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
       const isDirectory = directories.includes(normalizedPath);
       const hasUpdates = hasUpdatedContent(normalizedPath);
       const fileAction = file.action;
-      const isRestored = file.action === 'restored' ? true : false;
+      const isRestored = file.action === 'restored';
       const fileActionLabel = isRestored ? 'New' : file.action;
 
       return (
          <div
-            style={style}
-            className={`${classes.file} ${isDirectory ? classes.fileIsDir : ''}`}
+            style={{ ...style, gridTemplateColumns: GRID_COLUMNS }}
+            className={`${sbClasses.snapshotFile} ${isDirectory ? sbClasses.fileIsDir : ''}`}
             onClick={() => {
                if (isDirectory) {
                   setSelectedFolder(normalizedPath);
-                  expandParentDirectories(normalizedPath);
+                  expandParentFolders(normalizedPath);
                }
             }}
          >
-            <div className={classes.fileName}>
-               {isDirectory ? <Icon type={isDirectory ? 'fm-directory' : 'fm-file'} size={16} /> : <FileIcon filename={fileName || ''} />}{' '}
+            <div className={sbClasses.fileName}>
+               {isDirectory ? <Icon type={'fm-directory'} size={16} /> : <FileIcon filename={fileName || ''} />}{' '}
                {isRestored && <span className={classes.newFileIndicator} />} {fileName}
                {hasUpdates && <i />}
             </div>
@@ -230,17 +181,19 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
    };
 
    return (
-      <div className={classes.restoredFileBrowser}>
-         <div className={classes.toolbar}>
-            <div className={classes.toolbarLeft}>
-               {stats && (
-                  <div className={classes.stats}>
+      <div className={sbClasses.snapshotBrowser}>
+         <SnapshotBrowserToolbar
+            search={search}
+            onSearchChange={setSearch}
+            leftContent={
+               stats && (
+                  <div className={sbClasses.stats}>
                      <strong>Summary: </strong> {formatNumberToK(stats.total_files)} Items {' • '}
                      {formatBytes(stats.bytes_restored)}/{formatBytes(stats.total_bytes)}
                   </div>
-               )}
-            </div>
-            <div className={classes.toolbarRight}>
+               )
+            }
+            rightContent={
                <div className={classes.filters}>
                   {(Object.keys(filters) as Array<keyof typeof filters>).map((action) => (
                      <label key={action}>
@@ -249,81 +202,43 @@ const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBr
                      </label>
                   ))}
                </div>
-               <div className={classes.search}>
-                  <Icon type="search" size={16} />
-                  <input type="text" placeholder="Search in current Directory..." value={search} onChange={(e) => setSearch(e.target.value)} />
-               </div>
-            </div>
-         </div>
-
-         <div className={classes.browserContent}>
-            <div className={`${classes.sidebar} styled__scrollbar`}>
-               <div className={classes.sidebarHeader}>Directories</div>
-               {directories.map((dir) => {
-                  const parts = splitPath(dir);
-                  const dirName = parts[parts.length - 1];
-                  const depth = parts.length - 1;
-                  const isExpanded = expandedFolders.has(dir);
+            }
+         />
+
+         <div className={sbClasses.browserContent}>
+            <SnapshotBrowserDirectories
+               directories={directories}
+               selectedFolder={selectedFolder}
+               expandedFolders={expandedFolders}
+               onDirectoryClick={(dir) => {
+                  setSelectedFolder(dir);
+                  expandParentFolders(dir);
+               }}
+               onToggleFolder={toggleFolder}
+               isVisible={isVisible}
+               hasSubdirectories={hasSubdirectories}
+               renderDirectoryExtra={(dir) => {
                   const hasUpdates = hasUpdatedContent(dir);
-                  const hasChildren = hasSubdirectories(dir);
-
-                  // Only render if parent folders are expanded or if it's a root folder
-                  if (depth === 0 || isVisible(dir)) {
-                     return (
-                        <div
-                           key={dir}
-                           className={`${classes.directory} ${selectedFolder === dir ? classes.selected : ''} ${hasChildren ? '' : classes.directoryEmpty}`}
-                           style={{ paddingLeft: `${depth * 20}px` }}
-                           onClick={() => {
-                              setSelectedFolder(dir);
-                              expandParentDirectories(dir);
-                           }}
-                        >
-                           {hasChildren ? (
-                              <button
-                                 className={classes.toggleButton}
-                                 onClick={(e) => {
-                                    e.stopPropagation();
-                                    toggleFolder(dir);
-                                 }}
-                              >
-                                 {isExpanded ? '-' : '+'}
-                              </button>
-                           ) : (
-                              <span className={`${classes.togglePlaceholder}`} />
-                           )}
-                           <span className={classes.dirName}>
-                              <Icon type={'fm-directory'} size={14} /> {dirName}
-                              {hasUpdates && <span className={classes.notification} />}
-                           </span>
-                        </div>
-                     );
+                  return hasUpdates ? <span className={classes.notification} /> : null;
+               }}
+            />
+
+            <div className={sbClasses.content}>
+               <SnapshotBrowserFileList
+                  files={Array(totalItems)}
+                  height={window.innerHeight - (isPreview ? 370 : 250)}
+                  itemSize={ITEM_HEIGHT}
+                  headerContent={
+                     <>
+                        <div>Name</div>
+                        <div>Status</div>
+                        <div>Size</div>
+                     </>
                   }
-                  return null;
-               })}
-            </div>
-
-            <div className={classes.content}>
-               <div className={classes.fileList}>
-                  <div className={classes.header}>
-                     <div>Name</div>
-                     <div>Status</div>
-                     <div>Size</div>
-                  </div>
-                  {selectedFolder && totalItems > 0 ? (
-                     <List
-                        height={window.innerHeight - (isPreview ? 370 : 250)}
-                        itemCount={totalItems}
-                        itemSize={ITEM_HEIGHT}
-                        width="100%"
-                        className={`${classes.fileListVirtualized} styled__scrollbar`}
-                     >
-                        {FileRow}
-                     </List>
-                  ) : (
-                     <div className={classes.fileListEmpty}>Select a folder from the left to browse its content</div>
-                  )}
-               </div>
+                  renderRow={FileRow}
+                  selectedFolder={selectedFolder || null}
+                  gridTemplateColumns={GRID_COLUMNS}
+               />
             </div>
          </div>
       </div>