🔧 Add methods for listing user icons

package.json

@@ -60,6 +60,7 @@
     "@popperjs/core": "^2.11.8",
     "@types/bootstrap": "^5.2.10",
     "@types/lodash.isequal": "^4.5.8",
+    "@types/mime-types": "^2.1.4",
     "bootstrap": "^5.3.1",
     "chokidar": "^3.6.0",
     "commander": "^12.0.0",
@@ -71,6 +72,7 @@
     "lodash.isequal": "^4.5.0",
     "match-sorter": "^6.3.4",
     "material-symbols": "^0.20.0",
+    "mime-types": "^2.1.35",
     "node-addon-api": "^8.0.0",
     "octokit": "^4.0.2",
     "simple-icons-font": "^13.0.0"

src/@types/global.d.ts

@@ -38,6 +38,8 @@ declare global {
         getCurrentMenu: () => Promise<number>;
       };
       getBackendInfo: () => Promise<IBackendInfo>;
+      getUserIconThemes: () => Promise<Array<string>>;
+      listUserIcons: (string: iconTheme) => Promise<Array<string>>;
       showDevTools: () => void;
       movePointer: (dist: IVec2) => void;
       log: (message: string) => void;

src/main/app.ts

@@ -9,8 +9,10 @@
 // SPDX-License-Identifier: MIT
 
 import os from 'node:os';
-import { screen, BrowserWindow, ipcMain, shell, Tray, Menu, app } from 'electron';
+import fs from 'fs';
+import mime from 'mime-types';
 import path from 'path';
+import { screen, BrowserWindow, ipcMain, shell, Tray, Menu, app } from 'electron';
 import { Notification } from 'electron';
 
 import { Backend, getBackend } from './backends';
@@ -565,6 +567,50 @@ export class KandoApp {
       return this.backend.getBackendInfo();
     });
 
+    // Allow the renderer to retrieve all subdirectories of the icon-themes directory.
+    ipcMain.handle('get-user-icon-themes', async () => {
+      return new Promise<string[]>((resolve, reject) => {
+        const iconThemesDir = path.join(app.getPath('userData'), 'icon-themes');
+        fs.readdir(iconThemesDir, { withFileTypes: true }, (err, dirents) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+
+          const iconThemes = dirents
+            .filter((dirent) => dirent.isDirectory())
+            .map((dirent) => dirent.name);
+
+          resolve(iconThemes);
+        });
+      });
+    });
+
+    // Allow the renderer to retrieve all files in the given icon theme directory.
+    ipcMain.handle('list-user-icons', async (event, iconTheme: string) => {
+      return new Promise<string[]>((resolve, reject) => {
+        const iconDir = path.join(app.getPath('userData'), 'icon-themes', iconTheme);
+        fs.readdir(iconDir, { withFileTypes: true }, (err, files) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+
+          // Filter by mimetype to only return image files.
+          files = files.filter((file) => {
+            if (!file.isFile()) {
+              return false;
+            }
+
+            const mimeType = mime.lookup(file.name);
+            return mimeType && mimeType.startsWith('image/');
+          });
+
+          resolve(files.map((file) => file.name));
+        });
+      });
+    });
+
     // Show the web developer tools if requested.
     ipcMain.on('show-dev-tools', () => {
       this.window.webContents.openDevTools();

src/renderer/preload.ts

@@ -70,6 +70,23 @@ contextBridge.exposeInMainWorld('api', {
     return ipcRenderer.invoke('get-backend-info');
   },
 
+  /**
+   * This will return all subdirectories of the icon-themes directory in the config
+   * directory.
+   */
+  getUserIconThemes: function () {
+    return ipcRenderer.invoke('get-user-icon-themes');
+  },
+
+  /**
+   * This will return all files in the given icon theme directory.
+   *
+   * @param iconTheme The icon theme to list.
+   */
+  listUserIcons: function (iconTheme: string) {
+    return ipcRenderer.invoke('list-user-icons', iconTheme);
+  },
+
   /** This will show the web developer tools. */
   showDevTools: function () {
     ipcRenderer.send('show-dev-tools');