fix: icons not showing on M cpus without rosetta

Closes Browser icons not loading #539

Author: will-stone

.ncurc.json

@@ -1,3 +1,3 @@
 {
-  "reject": ["file-icon"]
+  "reject": []
 }

forge.config.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   packagerConfig: {
     appBundleId: 'com.browserosaurus',
-    asar: true,
+    asar: false,
     appCategoryType: 'public.app-category.developer-tools',
     packageManager: 'npm',
     extendInfo: 'plist/Info.plist',
@@ -61,7 +61,7 @@ module.exports = {
       '@timfish/forge-externals-plugin',
       {
         externals: ['file-icon'],
-        includeDeps: true,
+        includeDeps: false,
       },
     ],
   ],

package-lock.json

@@ -49,7 +49,7 @@
     "clsx": "^1.2.1",
     "electron-log": "^4.4.8",
     "fast-deep-equal": "^3.1.3",
-    "file-icon": "^4.0.0",
+    "file-icon": "^5.1.0",
     "immer": "^9.0.15",
     "lowdb": "^3.0.0",
     "picocolors": "^1.0.0",

package.json

@@ -1,33 +1,49 @@
 import log from 'electron-log'
-// @ts-expect-error -- no types provided for file-icon
-import fileIcon from 'file-icon'
+import { execFile } from 'node:child_process'
+import path from 'node:path'
+import { promisify } from 'node:util'
 
 import type { AppId } from '../../config/apps'
 import type { Storage } from '../../shared/state/reducer.storage'
 import { gotAppIcons } from '../state/actions'
 import { dispatch } from '../state/store'
 
+const execFileP = promisify(execFile)
+
+const binary = path.join(
+  __dirname,
+  '..',
+  '..',
+  'node_modules',
+  'file-icon',
+  'file-icon',
+)
+
+const HUNDRED_MEGABYTES = 1024 * 1024 * 100
+
+async function getIconDataURI(file: string, size: number): Promise<string> {
+  const { stdout: buffer } = await execFileP(
+    binary,
+    [JSON.stringify([{ appOrPID: file, size }])],
+    { encoding: null, maxBuffer: HUNDRED_MEGABYTES },
+  )
+
+  return `data:image/png;base64,${buffer.toString('base64')}`
+}
+
 export async function getAppIcons(apps: Storage['apps']): Promise<void> {
   try {
-    const buffers: (Buffer | null)[] = []
+    const icons: Partial<Record<AppId, string>> = {}
 
     for await (const app of apps) {
       try {
-        const buffer = await fileIcon.buffer(app.id, { size: 64 })
-        buffers.push(buffer)
-      } catch {
-        buffers.push(null)
+        const dataURI = await getIconDataURI(app.id, 64)
+        icons[app.id] = dataURI
+      } catch (error: unknown) {
+        log.warn(error)
       }
     }
 
-    const icons: Partial<Record<AppId, string>> = {}
-
-    for (const [index, buffer] of Object.entries(buffers)) {
-      icons[apps[Number(index)].id] = buffer
-        ? `data:image/png;base64,${buffer.toString('base64')}`
-        : ''
-    }
-
     dispatch(gotAppIcons(icons))
   } catch (error: unknown) {
     log.error(error)