Add sorting functionality for demo files and update related components #96

Author: estruyf

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - [#87](https://github.com/estruyf/vscode-demo-time/issues/87): Added new walkthrough for Visual Studio Code
 - [#92](https://github.com/estruyf/vscode-demo-time/issues/92): Added new `demoTime.customTheme` setting for global custom themes
+- [#96](https://github.com/estruyf/vscode-demo-time/issues/96): Correctly sorting the demo files in the tree view
 
 ## [1.1.0] - 2025-04-09
 

src/panels/DemoPanel.ts

@@ -5,7 +5,7 @@ import { Action, DemoFileCache, DemoFiles, Demos, Subscription } from "../models
 import { ActionTreeItem, ActionTreeviewProvider } from "../providers/ActionTreeviewProvider";
 import { DemoRunner } from "../services/DemoRunner";
 import { COMMAND } from "../constants";
-import { parseWinPath, setContext } from "../utils";
+import { parseWinPath, setContext, sortFiles } from "../utils";
 import { DemoStatusBar } from "../services/DemoStatusBar";
 import { Extension } from "../services/Extension";
 
@@ -55,21 +55,7 @@ export class DemoPanel {
       return [];
     }
 
-    let demoKeys = Object.keys(demoFiles);
-    demoKeys = demoKeys.sort((aPath, bPath) => {
-      aPath = aPath.toLowerCase();
-      bPath = bPath.toLowerCase();
-
-      if (aPath < bPath) {
-        return -1;
-      }
-
-      if (aPath > bPath) {
-        return 1;
-      }
-
-      return 0;
-    });
+    const demoKeys = sortFiles(demoFiles);
 
     const accountCommands: ActionTreeItem[] = [];
 

src/services/FileProvider.ts

@@ -3,7 +3,7 @@ import { Extension } from "./Extension";
 import { DemoFiles, Demos } from "../models";
 import { Config, General } from "../constants";
 import { parse as jsonParse } from "jsonc-parser";
-import { createDemoFile, readFile, sanitizeFileName, writeFile } from "../utils";
+import { createDemoFile, readFile, sanitizeFileName, sortFiles, writeFile } from "../utils";
 import { Preview } from "../preview/Preview";
 
 export class FileProvider {
@@ -76,7 +76,7 @@ export class FileProvider {
       return;
     }
 
-    const files = Object.keys(demoFiles).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+    const files = sortFiles(demoFiles);
     const demoFileOptions = files.map((path) => {
       return {
         label: (demoFiles as any)[path].title,
@@ -107,7 +107,7 @@ export class FileProvider {
     } else if (!demoFilePick.description) {
       return;
     } else {
-      demoFilePath = Object.keys(demoFiles).find((path) => path.endsWith(demoFilePick.description as string));
+      demoFilePath = sortFiles(demoFiles).find((path) => path.endsWith(demoFilePick.description as string));
       if (!demoFilePath) {
         return;
       }

src/services/PdfExportService.ts

@@ -5,7 +5,7 @@ import { Notifications } from "./Notifications";
 import { Action, Step, Subscription } from "../models";
 import { Extension } from "./Extension";
 import { FileProvider, Logger } from ".";
-import { convertTemplateToHtml, getTheme, readFile, transformMarkdown, writeFile } from "../utils";
+import { convertTemplateToHtml, getTheme, readFile, sortFiles, transformMarkdown, writeFile } from "../utils";
 import { commands, Uri, workspace, WorkspaceFolder, window, ProgressLocation, env, ColorThemeKind } from "vscode";
 import { Page } from "playwright-chromium";
 import { COMMAND, Config, General, SlideLayout } from "../constants";
@@ -60,14 +60,12 @@ export class PdfExportService {
           }
 
           // Sort the demo files by their paths
-          demoFiles = Object.keys(demoFiles)
-            .sort()
-            .reduce((sortedFiles, key) => {
-              if (demoFiles) {
-                sortedFiles[key] = demoFiles[key];
-              }
-              return sortedFiles;
-            }, {} as typeof demoFiles);
+          demoFiles = sortFiles(demoFiles).reduce((sortedFiles, key) => {
+            if (demoFiles) {
+              sortedFiles[key] = demoFiles[key];
+            }
+            return sortedFiles;
+          }, {} as typeof demoFiles);
 
           // Get all slide actions
           const slideActions: Step[] = [];

src/utils/getNextDemoFile.ts

@@ -1,19 +1,23 @@
+import { sortFiles } from ".";
 import { DemoFiles, Demos } from "../models";
 import { FileProvider } from "../services/FileProvider";
 
 export const getNextDemoFile = async (demoFile?: {
   filePath: string;
-}): Promise<{
-  filePath: string;
-  demo: Demos;
-} | undefined> => {
+}): Promise<
+  | {
+      filePath: string;
+      demo: Demos;
+    }
+  | undefined
+> => {
   if (!demoFile) {
     return;
   }
 
   // Get the next demo file
-  const demoFiles: DemoFiles = await FileProvider.getFiles() || {};
-  const files = Object.keys(demoFiles).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+  const demoFiles: DemoFiles = (await FileProvider.getFiles()) || {};
+  const files = sortFiles(demoFiles);
   const fileIdx = files.findIndex((file) => file === demoFile.filePath);
   const nextIdx = fileIdx + 1;
 
@@ -26,4 +30,4 @@ export const getNextDemoFile = async (demoFile?: {
     filePath: nextFile,
     demo: demoFiles[nextFile],
   };
-};
+};

src/utils/getPreviousDemoFile.ts

@@ -1,19 +1,23 @@
+import { sortFiles } from ".";
 import { DemoFiles, Demos } from "../models";
 import { FileProvider } from "../services/FileProvider";
 
 export const getPreviousDemoFile = async (demoFile?: {
   filePath: string;
-}): Promise<{
-  filePath: string;
-  demo: Demos;
-} | undefined> => {
+}): Promise<
+  | {
+      filePath: string;
+      demo: Demos;
+    }
+  | undefined
+> => {
   if (!demoFile) {
     return;
   }
 
   // Get the next demo file
-  const demoFiles: DemoFiles = await FileProvider.getFiles() || {};
-  const files = Object.keys(demoFiles).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+  const demoFiles: DemoFiles = (await FileProvider.getFiles()) || {};
+  const files = sortFiles(demoFiles);
   const fileIdx = files.findIndex((file) => file === demoFile.filePath);
   const previousIdx = fileIdx - 1;
 
@@ -26,4 +30,4 @@ export const getPreviousDemoFile = async (demoFile?: {
     filePath: nextFile,
     demo: demoFiles[nextFile],
   };
-};
+};

src/utils/index.ts

@@ -43,6 +43,7 @@ export * from "./replaceContent";
 export * from "./sanitizeFileName";
 export * from "./setContext";
 export * from "./sleep";
+export * from "./sortFiles";
 export * from "./togglePresentationView";
 export * from "./transformMarkdown";
 export * from "./updateConfig";

src/utils/sortFiles.ts

@@ -0,0 +1,7 @@
+import { DemoFiles } from "../models";
+
+export const sortFiles = (files: DemoFiles) => {
+  return Object.keys(files).sort((a, b) =>
+    a.toLowerCase().localeCompare(b.toLowerCase(), undefined, { numeric: true, sensitivity: "base" })
+  );
+};