From 1f6ea6ac2034eca126d9c2dc413ef66928102b14 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 29 Nov 2024 15:41:50 +0100
Subject: [PATCH] Sorting on folders

---
 .../components/Media/FolderItem.tsx                |  2 +-
 src/dashboardWebView/components/Media/Media.tsx    | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/dashboardWebView/components/Media/FolderItem.tsx b/src/dashboardWebView/components/Media/FolderItem.tsx
index 36acc73f..402f6bab 100644
--- a/src/dashboardWebView/components/Media/FolderItem.tsx
+++ b/src/dashboardWebView/components/Media/FolderItem.tsx
@@ -47,7 +47,7 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
   return (
     <>
       <li
-        className={`flex flex-col group relative text-[var(--vscode-sideBarTitle-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)] dark:shadow-none bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] border border-[var(--frontmatter-border)] rounded`}
+        className={`flex flex-col group relative text-[var(--vscode-sideBarTitle-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)] shadow-md hover:shadow-xl dark:shadow-none bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] border border-[var(--frontmatter-border)] rounded`}
       >
         <button
           title={isContentFolder ? localize(LocalizationKey.dashboardMediaFolderItemContentDirectory) : localize(LocalizationKey.dashboardMediaFolderItemPublicDirectory)}
diff --git a/src/dashboardWebView/components/Media/Media.tsx b/src/dashboardWebView/components/Media/Media.tsx
index a7f41667..e197fb02 100644
--- a/src/dashboardWebView/components/Media/Media.tsx
+++ b/src/dashboardWebView/components/Media/Media.tsx
@@ -8,6 +8,7 @@ import {
   PagedItems,
   SelectedMediaFolderAtom,
   SettingsSelector,
+  SortingAtom,
   ViewDataSelector
 } from '../../state';
 import { Spinner } from '../Common/Spinner';
@@ -30,6 +31,7 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { MediaItemPanel } from './MediaItemPanel';
 import { FilesProvider } from '../../providers/FilesProvider';
+import { SortOption } from '../../constants/SortOption';
 
 export interface IMediaProps { }
 
@@ -42,6 +44,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
   const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
   const folders = useRecoilValue(MediaFoldersAtom);
   const loading = useRecoilValue(LoadingAtom);
+  const crntSorting = useRecoilValue(SortingAtom);
   const [, setPagedItems] = useRecoilState(PagedItems);
 
   const currentStaticFolder = useMemo(() => {
@@ -85,11 +88,18 @@ export const Media: React.FunctionComponent<IMediaProps> = (
       currentStaticFolder &&
       settings?.staticFolder !== STATIC_FOLDER_PLACEHOLDER.hexo.placeholder
     ) {
-      return folders.filter((f) => parseWinPath(f).includes(currentStaticFolder));
+      const allFolders = folders.filter((f) => parseWinPath(f).includes(currentStaticFolder));
+      if (crntSorting && crntSorting.id === SortOption.FileNameAsc) {
+        return allFolders.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+      } else if (crntSorting && crntSorting.id === SortOption.FileNameDesc) {
+        return allFolders.sort((a, b) => b.localeCompare(a, undefined, { numeric: true }));
+      } else {
+        return allFolders;
+      }
     }
 
     return undefined;
-  }, [folders, viewData, currentStaticFolder, settings?.staticFolder]);
+  }, [folders, viewData, currentStaticFolder, settings?.staticFolder, crntSorting]);
 
   const allMedia = useMemo(() => {
     let mediaFiles: MediaInfo[] = Object.assign([], media);