preference: Fix server icon display in connected organizations list.

Signed-off-by: Anders Kaseorg <[email protected]>

Author: andersk

app/renderer/js/main.ts

@@ -1,5 +1,4 @@
 import {clipboard} from "electron/common";
-import fs from "node:fs";
 import path from "node:path";
 import process from "node:process";
 import url from "node:url";
@@ -56,19 +55,6 @@ const dingSound = new Audio(
   new URL("resources/sounds/ding.ogg", bundleUrl).href,
 );
 
-function iconAsUrl(iconPath: string): string {
-  if (iconPath === DomainUtil.defaultIconSentinel) return defaultIcon;
-
-  try {
-    return `data:application/octet-stream;base64,${fs.readFileSync(
-      iconPath,
-      "base64",
-    )}`;
-  } catch {
-    return defaultIcon;
-  }
-}
-
 export class ServerManagerView {
   $addServerButton: HTMLButtonElement;
   $tabsContainer: Element;
@@ -341,7 +327,7 @@ export class ServerManagerView {
         (async () => {
           const serverConf = await DomainUtil.updateSavedServer(server.url, i);
           tab.setName(serverConf.alias);
-          tab.setIcon(iconAsUrl(serverConf.icon));
+          tab.setIcon(DomainUtil.iconAsUrl(serverConf.icon));
           (await tab.webview).setUnsupportedMessage(
             DomainUtil.getUnsupportedMessage(serverConf),
           );
@@ -382,7 +368,7 @@ export class ServerManagerView {
     const tabIndex = this.getTabIndex();
     const tab = new ServerTab({
       role: "server",
-      icon: iconAsUrl(server.icon),
+      icon: DomainUtil.iconAsUrl(server.icon),
       name: server.alias,
       $root: this.$tabsContainer,
       onClick: this.activateLastTab.bind(this, index),
@@ -1087,7 +1073,7 @@ export class ServerManagerView {
               const localIconPath = await DomainUtil.saveServerIcon(iconURL);
               const tab = this.tabs[index];
               if (tab instanceof ServerTab)
-                tab.setIcon(iconAsUrl(localIconPath));
+                tab.setIcon(DomainUtil.iconAsUrl(localIconPath));
               domain.icon = localIconPath;
               DomainUtil.updateDomain(index, domain);
             }

app/renderer/js/pages/preference/server-info-form.ts

@@ -19,7 +19,10 @@ export function initServerInfoForm(props: ServerInfoFormProps): void {
   const $serverInfoForm = generateNodeFromHtml(html`
     <div class="settings-card">
       <div class="server-info-left">
-        <img class="server-info-icon" src="${props.server.icon}" />
+        <img
+          class="server-info-icon"
+          src="${DomainUtil.iconAsUrl(props.server.icon)}"
+        />
         <div class="server-info-row">
           <span class="server-info-alias">${props.server.alias}</span>
           <i class="material-icons open-tab-button">open_in_new</i>

app/renderer/js/utils/domain-util.ts

@@ -12,6 +12,7 @@ import Logger from "../../../common/logger-util.js";
 import * as Messages from "../../../common/messages.js";
 import * as t from "../../../common/translation-util.js";
 import type {ServerConf} from "../../../common/types.js";
+import defaultIcon from "../../img/icon.png";
 import {ipcRenderer} from "../typed-ipc-renderer.js";
 
 const logger = new Logger({
@@ -213,3 +214,16 @@ export function getUnsupportedMessage(server: ServerConf): string | undefined {
 
   return undefined;
 }
+
+export function iconAsUrl(iconPath: string): string {
+  if (iconPath === defaultIconSentinel) return defaultIcon;
+
+  try {
+    return `data:application/octet-stream;base64,${fs.readFileSync(
+      iconPath,
+      "base64",
+    )}`;
+  } catch {
+    return defaultIcon;
+  }
+}