feat: add app icon chooser in settings

apps/desktop/src/components/settings/general/app-icon.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@hypr/utils";
+
+import nightlyIcon from "../../../assets/icons/nightly.png";
+import proIcon from "../../../assets/icons/pro.png";
+import stableIcon from "../../../assets/icons/stable.png";
+import stagingIcon from "../../../assets/icons/staging.png";
+
+const ICON_OPTIONS: { value: string; label: string; icon: string }[] = [
+  { value: "stable", label: "Stable", icon: stableIcon },
+  { value: "nightly", label: "Nightly", icon: nightlyIcon },
+  { value: "staging", label: "Staging", icon: stagingIcon },
+  { value: "pro", label: "Pro", icon: proIcon },
+];
+
+interface AppIconSettingsProps {
+  value: string | undefined;
+  onChange: (value: string) => void;
+}
+
+export function AppIconSettings({ value, onChange }: AppIconSettingsProps) {
+  return (
+    <div>
+      <h2 className="text-lg font-semibold font-serif mb-4">App Icon</h2>
+      <div className="grid grid-cols-4 gap-3">
+        {ICON_OPTIONS.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => onChange(option.value)}
+            className={cn(
+              "flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all",
+              value === option.value
+                ? "border-blue-500 bg-blue-50"
+                : "border-neutral-200 hover:border-neutral-300 hover:bg-neutral-50",
+            )}
+          >
+            <img
+              src={option.icon}
+              alt={option.label}
+              className="w-12 h-12 rounded-lg"
+            />
+            <span className="text-xs font-medium">{option.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/settings/general/index.tsx

@@ -10,6 +10,7 @@ import { useConfigValues } from "../../../config/use-config";
 import * as settings from "../../../store/tinybase/store/settings";
 import { Data } from "../data";
 import { AccountSettings } from "./account";
+import { AppIconSettings } from "./app-icon";
 import { AppSettingsView } from "./app-settings";
 import { Audio } from "./audio";
 import { MainLanguageView } from "./main-language";
@@ -29,6 +30,7 @@ function useSettingsForm() {
     "ai_language",
     "spoken_languages",
     "current_stt_provider",
+    "app_icon",
   ] as const);
 
   const setPartialValues = settings.UI.useSetPartialValuesCallback(
@@ -60,6 +62,7 @@ function useSettingsForm() {
       telemetry_consent: value.telemetry_consent,
       ai_language: value.ai_language,
       spoken_languages: value.spoken_languages,
+      app_icon: value.app_icon,
     },
     listeners: {
       onChange: ({ formApi }) => {
@@ -211,6 +214,15 @@ export function SettingsApp() {
         </div>
       </div>
 
+      <form.Field name="app_icon">
+        {(field) => (
+          <AppIconSettings
+            value={field.state.value}
+            onChange={(val) => field.handleChange(val)}
+          />
+        )}
+      </form.Field>
+
       <StorageSettingsView />
 
       <div>

apps/desktop/src/config/registry.ts

@@ -1,6 +1,7 @@
 import { disable, enable } from "@tauri-apps/plugin-autostart";
 
 import { commands as detectCommands } from "@hypr/plugin-detect";
+import { commands as iconCommands } from "@hypr/plugin-icon";
 import {
   commands as localSttCommands,
   type SupportedSttModel,
@@ -22,7 +23,8 @@ export type ConfigKey =
   | "current_llm_model"
   | "timezone"
   | "week_start"
-  | "notification_in_meeting_reminder";
+  | "notification_in_meeting_reminder"
+  | "app_icon";
 
 type ConfigValueType<K extends ConfigKey> =
   (typeof CONFIG_REGISTRY)[K]["default"];
@@ -157,4 +159,16 @@ export const CONFIG_REGISTRY = {
     key: "notification_in_meeting_reminder",
     default: true,
   },
+
+  app_icon: {
+    key: "app_icon",
+    default: undefined as string | undefined,
+    sideEffect: async (value: string | undefined, _) => {
+      if (value) {
+        await iconCommands.setDockIcon(value);
+      } else {
+        await iconCommands.resetDockIcon();
+      }
+    },
+  },
 } satisfies Record<ConfigKey, ConfigDefinition>;

apps/desktop/src/store/tinybase/store/settings.ts

@@ -73,6 +73,10 @@ export const SETTINGS_MAPPING = {
       type: "boolean",
       path: ["notification", "in_meeting_reminder"],
     },
+    app_icon: {
+      type: "string",
+      path: ["general", "app_icon"],
+    },
   },
   tables: {
     ai_providers: {

packages/store/src/zod.ts

@@ -253,6 +253,7 @@ export const generalSchema = z.object({
   current_stt_model: z.string().optional(),
   timezone: z.string().optional(),
   week_start: z.string().optional(),
+  app_icon: z.string().optional(),
 });
 
 export const aiProviderSchema = z