feat: Sorting for replay folders

src/renderer/pages/replays/replay_browser/folder_tree_node.tsx

@@ -15,16 +15,41 @@ type FolderTreeNodeProps = {
   nestLevel?: number;
   folder: FolderResult;
   collapsedFolders: readonly string[];
+  isReversed: boolean;
   onClick: (fullPath: string) => void;
   onToggle: (fullPath: string) => void;
 };
 
-export const FolderTreeNode = ({ nestLevel = 0, folder, collapsedFolders, onClick, onToggle }: FolderTreeNodeProps) => {
+export const FolderTreeNode = ({
+  nestLevel = 0,
+  folder,
+  collapsedFolders,
+  isReversed,
+  onClick,
+  onToggle,
+}: FolderTreeNodeProps) => {
   const currentFolder = useReplays((store) => store.currentFolder);
   const hasChildren = folder.subdirectories.length > 0;
   const isCollapsed = collapsedFolders.includes(folder.fullPath);
   const isSelected = currentFolder === folder.fullPath;
   const labelColor = isSelected ? colors.grayDark : "rgba(255, 255, 255, 0.5)";
+
+  const getSubdirectoryNodes = () => {
+    const subdirectories = folder.subdirectories.map((f) => (
+      <FolderTreeNode
+        nestLevel={nestLevel + 1}
+        key={f.fullPath}
+        folder={f}
+        collapsedFolders={collapsedFolders}
+        isReversed={isReversed}
+        onClick={onClick}
+        onToggle={onToggle}
+      />
+    ));
+
+    return isReversed ? subdirectories.reverse() : subdirectories;
+  };
+
   return (
     <div>
       <ListItem
@@ -74,16 +99,7 @@ export const FolderTreeNode = ({ nestLevel = 0, folder, collapsedFolders, onClic
       </ListItem>
       {folder.subdirectories.length === 0 || isCollapsed ? null : (
         <List dense={true} style={{ padding: 0 }}>
-          {folder.subdirectories.map((f) => (
-            <FolderTreeNode
-              nestLevel={nestLevel + 1}
-              key={f.fullPath}
-              folder={f}
-              collapsedFolders={collapsedFolders}
-              onClick={onClick}
-              onToggle={onToggle}
-            />
-          ))}
+          {getSubdirectoryNodes()}
         </List>
       )}
     </div>

src/renderer/pages/replays/replay_browser/replay_browser.tsx

@@ -1,14 +1,15 @@
 import { exists } from "@common/exists";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
 import FolderIcon from "@mui/icons-material/Folder";
 import SearchIcon from "@mui/icons-material/Search";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import List from "@mui/material/List";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import React from "react";
+import React, { useState } from "react";
 
 import { DualPane } from "@/components/dual_pane";
 import { BasicFooter } from "@/components/footer/footer";
@@ -50,6 +51,8 @@ export const ReplayBrowser = React.memo(() => {
   const { files: filteredFiles, hiddenFileCount } = useReplayBrowserList();
   const { goToReplayStatsPage } = useReplayBrowserNavigation();
 
+  const [isFolderTreeReversed, setIsFolderTreeReversed] = useState<boolean>(true);
+
   const setSelectedItem = (index: number | null) => {
     if (index === null) {
       void presenter.current.clearSelectedFile();
@@ -84,6 +87,23 @@ export const ReplayBrowser = React.memo(() => {
     [showError, showSuccess],
   );
 
+  const onFolderTreeSortClick = () => {
+    setIsFolderTreeReversed(!isFolderTreeReversed);
+  };
+
+  const folderTreeNodes = folderTree.map((folder) => {
+    return (
+      <FolderTreeNode
+        folder={folder}
+        key={folder.fullPath}
+        collapsedFolders={collapsedFolders}
+        isReversed={isFolderTreeReversed}
+        onClick={onFolderTreeNodeClick}
+        onToggle={(folder) => presenter.current.toggleFolder(folder)}
+      />
+    );
+  });
+
   return (
     <Outer>
       <div
@@ -103,17 +123,13 @@ export const ReplayBrowser = React.memo(() => {
           leftSide={
             <List dense={true} style={{ flex: 1, padding: 0 }}>
               <div style={{ position: "relative", minHeight: "100%" }}>
-                {folderTree.map((folder) => {
-                  return (
-                    <FolderTreeNode
-                      folder={folder}
-                      key={folder.fullPath}
-                      collapsedFolders={collapsedFolders}
-                      onClick={onFolderTreeNodeClick}
-                      onToggle={(folder) => presenter.current.toggleFolder(folder)}
-                    />
-                  );
-                })}
+                <Button
+                  onClick={onFolderTreeSortClick}
+                  startIcon={isFolderTreeReversed ? <ArrowDownward /> : <ArrowUpward />}
+                >
+                  Sort
+                </Button>
+                {isFolderTreeReversed ? folderTreeNodes.reverse() : folderTreeNodes}
                 {loading && (
                   <div
                     style={{