glass icon compilation

Author: jonathanlab

README.md

@@ -56,6 +56,25 @@ Output will be in:
 pnpm build-native
 ```
 
+### Liquid Glass Icon (macOS 26+)
+
+The app supports macOS liquid glass icons for a modern, layered appearance. The icon configuration is in `build/icon.icon/`.
+
+**Compiling the liquid glass icon requires Xcode** (Command Line Tools are not sufficient):
+
+```bash
+# Compile liquid glass icon (requires Xcode)
+bash scripts/compile-glass-icon.sh
+```
+
+If you don't have Xcode installed, the build will automatically fall back to the standard `.icns` icon. To enable liquid glass icons:
+
+1. Install Xcode from the App Store
+2. Run the compile script above, or
+3. Compile `Assets.car` on a machine with Xcode and commit it to the repo
+
+The `generateAssets` hook will automatically attempt to compile the icon during packaging if Xcode is available.
+
 ### Environment Variables
 
 You can set these environment variables instead of entering credentials in the app:

build/Assets.car

@@ -0,0 +1,43 @@
+{
+  "fill" : {
+    "solid" : "srgb:0.96078,0.41961,0.08235,1.00000"
+  },
+  "groups" : [
+    {
+      "blur-material" : null,
+      "layers" : [
+        {
+          "blend-mode" : "normal",
+          "fill" : "automatic",
+          "glass" : true,
+          "hidden" : false,
+          "image-name" : "logo.png",
+          "name" : "logo",
+          "position" : {
+            "scale" : 1.18,
+            "translation-in-points" : [
+              0,
+              0
+            ]
+          }
+        }
+      ],
+      "lighting" : "individual",
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "specular" : true,
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}

build/icon.icon/Assets/logo.png

@@ -11,6 +11,12 @@ const config: ForgeConfig = {
     name: "Array",
     executableName: "Array",
     icon: "./build/app-icon", // Forge adds .icns/.ico/.png based on platform
+    extraResource: existsSync("build/Assets.car") ? ["build/Assets.car"] : [],
+    extendInfo: existsSync("build/Assets.car")
+      ? {
+          CFBundleIconName: "Icon",
+        }
+      : {},
   },
   rebuildConfig: {},
   makers: [
@@ -21,6 +27,13 @@ const config: ForgeConfig = {
     new MakerZIP({}, ["darwin", "linux", "win32"]),
   ],
   hooks: {
+    generateAssets: async () => {
+      // Compile liquid glass icon to Assets.car
+      if (existsSync("build/icon.icon")) {
+        console.log("Compiling liquid glass icon...");
+        execSync("bash scripts/compile-glass-icon.sh", { stdio: "inherit" });
+      }
+    },
     prePackage: async () => {
       // Build native modules for DMG maker on Node.js 22
       const modules = ["macos-alias", "fs-xattr"];

build/icon.icon/icon.json

@@ -0,0 +1,68 @@
+#!/bin/bash
+
+# Compile liquid glass icon to Assets.car
+# Based on: https://www.hendrik-erz.de/post/supporting-liquid-glass-icons-in-apps-without-xcode
+#
+# NOTE: This requires Xcode to be installed (Command Line Tools are not sufficient)
+# If you don't have Xcode, you can either:
+# 1. Install Xcode from the App Store
+# 2. Manually compile Assets.car on a machine with Xcode and commit it
+# 3. Skip liquid glass icon support (the app will use the regular .icns icon)
+
+set -e
+
+ICON_PATH="build/icon.icon"
+OUTPUT_PATH="build/Assets.car"
+TEMP_DIR=$(mktemp -d)
+
+if [ ! -d "$ICON_PATH" ]; then
+  echo "⚠ $ICON_PATH not found - skipping liquid glass icon compilation"
+  exit 0
+fi
+
+# Check if Assets.car exists and is newer than source
+if [ -f "$OUTPUT_PATH" ] && [ "$OUTPUT_PATH" -nt "$ICON_PATH/icon.json" ]; then
+  echo "✓ Assets.car is up to date"
+  exit 0
+fi
+
+echo "Compiling liquid glass icon..."
+
+# Check if actool is available and functional
+if ! command -v actool &> /dev/null; then
+  echo "⚠ actool not found - Xcode is required to compile liquid glass icons"
+  echo "  Skipping compilation (app will use standard .icns icon)"
+  exit 0
+fi
+
+# Try to compile with actool
+PARTIAL_INFO_PLIST="$TEMP_DIR/partial-info.plist"
+
+if ! actool "$ICON_PATH" \
+  --compile "$TEMP_DIR" \
+  --output-format human-readable-text \
+  --notices --warnings --errors \
+  --output-partial-info-plist "$PARTIAL_INFO_PLIST" \
+  --app-icon Icon \
+  --include-all-app-icons \
+  --enable-on-demand-resources NO \
+  --development-region en \
+  --target-device mac \
+  --minimum-deployment-target 26.0 \
+  --platform macosx 2>&1; then
+  echo "⚠ actool failed - Xcode is required to compile liquid glass icons"
+  echo "  Skipping compilation (app will use standard .icns icon)"
+  rm -rf "$TEMP_DIR"
+  exit 0
+fi
+
+# Move Assets.car to build directory
+if [ -f "$TEMP_DIR/Assets.car" ]; then
+  mv "$TEMP_DIR/Assets.car" "$OUTPUT_PATH"
+  echo "✓ Compiled Assets.car to $OUTPUT_PATH"
+else
+  echo "⚠ Assets.car not generated - skipping"
+fi
+
+# Clean up
+rm -rf "$TEMP_DIR"