Visual sort in details

DustinBrett · Sep 30, 2024 · 76ab3b4 · 76ab3b4
1 parent f5d42f8
commit 76ab3b4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/components/system/Files/FileManager/Columns/StyledColumns.ts b/components/system/Files/FileManager/Columns/StyledColumns.ts
@@ -22,6 +22,15 @@ const StyledColumns = styled.span`
       position: relative;
       top: -1px;
 
+      > svg {
+        fill: rgb(222, 222, 222);
+        left: 50%;
+        position: absolute;
+        top: 1px;
+        transition: none !important;
+        width: 8px;
+      }
+
       div {
         overflow: hidden;
         text-overflow: ellipsis;

diff --git a/components/system/Files/FileManager/Columns/index.tsx b/components/system/Files/FileManager/Columns/index.tsx
@@ -11,6 +11,7 @@ import {
 } from "components/system/Files/FileManager/Columns/constants";
 import { useSession } from "contexts/session";
 import { type Files } from "components/system/Files/FileManager/useFolder";
+import { Down } from "components/apps/FileExplorer/NavigationIcons";
 
 type ColumnsProps = {
   columns: ColumnsObject;
@@ -29,8 +30,7 @@ const Columns: FC<ColumnsProps> = ({
   const draggingRef = useRef("");
   const lastClientX = useRef(0);
   const { setSortOrder, sortOrders } = useSession();
-  // eslint-disable-next-line unicorn/no-unreadable-array-destructuring
-  const [, , ascending] = sortOrders[directory] ?? [];
+  const [, sortedBy = "name", ascending] = sortOrders[directory] ?? [];
 
   return (
     <StyledColumns>
@@ -94,6 +94,7 @@ const Columns: FC<ColumnsProps> = ({
             }}
             style={{ width: `${columns[name].width}px` }}
           >
+            {sortedBy === name && <Down flip={ascending} />}
             <div>{columns[name].name}</div>
           </li>
         ))}