feat: per-profile window color with id-derived default

src/components/profile-info-dialog.tsx

@@ -4,6 +4,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { save } from "@tauri-apps/plugin-dialog";
 import { writeTextFile } from "@tauri-apps/plugin-fs";
+import Color from "color";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { FaApple, FaLinux, FaWindows } from "react-icons/fa";
@@ -34,6 +35,14 @@ import {
 } from "react-icons/lu";
 import { SharedCamoufoxConfigForm } from "@/components/shared-camoufox-config-form";
 import { Button } from "@/components/ui/button";
+import {
+  ColorPicker,
+  ColorPickerEyeDropper,
+  ColorPickerFormat,
+  ColorPickerHue,
+  ColorPickerOutput,
+  ColorPickerSelection,
+} from "@/components/ui/color-picker";
 import {
   Dialog,
   DialogContent,
@@ -49,6 +58,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
@@ -183,6 +197,71 @@ function LocalDataTransferCard({
   );
 }
 
+// Shown only for legacy profiles that predate the feature and have no stored
+// color yet (new profiles get a backend-derived one at creation/launch).
+const DEFAULT_SWATCH_COLOR = "#94a3b8";
+
+function WindowColorSwatch({ profile }: { profile: BrowserProfile }) {
+  const { t } = useTranslation();
+  const [color, setColor] = React.useState(profile.window_color);
+
+  React.useEffect(() => {
+    setColor(profile.window_color);
+  }, [profile.window_color]);
+
+  const persist = React.useCallback(
+    async (hex: string) => {
+      try {
+        await invoke("update_profile_window_color", {
+          profileId: profile.id,
+          windowColor: hex,
+        });
+      } catch {
+        setColor(profile.window_color);
+      }
+    },
+    [profile.id, profile.window_color],
+  );
+
+  return (
+    <Popover
+      onOpenChange={(open) => {
+        if (!open && color && color !== profile.window_color)
+          void persist(color);
+      }}
+    >
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={t("profileInfo.fields.windowColor")}
+          title={t("profileInfo.fields.windowColor")}
+          className="size-9 shrink-0 cursor-pointer rounded-lg border shadow-sm ring-offset-background transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+          style={{ backgroundColor: color ?? DEFAULT_SWATCH_COLOR }}
+        />
+      </PopoverTrigger>
+      <PopoverContent align="end" sideOffset={6} className="w-[264px] p-3">
+        <ColorPicker
+          className="rounded-md border bg-background p-3 shadow-sm"
+          value={color ?? DEFAULT_SWATCH_COLOR}
+          onColorChange={([r, g, b]) => {
+            setColor(Color({ r, g, b }).hex().toLowerCase());
+          }}
+        >
+          <ColorPickerSelection className="h-32 rounded" />
+          <div className="mt-3 flex items-center gap-3">
+            <ColorPickerEyeDropper />
+            <ColorPickerHue className="flex-1" />
+          </div>
+          <div className="mt-3 flex items-center gap-2">
+            <ColorPickerOutput />
+            <ColorPickerFormat />
+          </div>
+        </ColorPicker>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export function ProfileInfoDialog({
   isOpen,
   onClose,
@@ -820,6 +899,7 @@ function ProfileInfoLayout({
                     </span>
                   </div>
                 </div>
+                <WindowColorSwatch profile={profile} />
               </div>
 
               {/* ID */}

src/i18n/locales/en.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "Cookies stored",
       "localDataTransfer": "Local data transfer",
-      "created": "Created"
+      "created": "Created",
+      "windowColor": "Window color"
     },
     "values": {
       "none": "None",

src/i18n/locales/es.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "Cookies guardadas",
       "localDataTransfer": "Transferencia de datos local",
-      "created": "Creado"
+      "created": "Creado",
+      "windowColor": "Color de ventana"
     },
     "values": {
       "none": "Ninguno",

src/i18n/locales/fr.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "Cookies stockés",
       "localDataTransfer": "Transfert de données local",
-      "created": "Créé le"
+      "created": "Créé le",
+      "windowColor": "Couleur de la fenêtre"
     },
     "values": {
       "none": "Aucun",

src/i18n/locales/ja.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "保存された Cookie",
       "localDataTransfer": "ローカルデータ転送量",
-      "created": "作成日"
+      "created": "作成日",
+      "windowColor": "ウィンドウの色"
     },
     "values": {
       "none": "なし",

src/i18n/locales/ko.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "저장된 쿠키",
       "localDataTransfer": "로컬 데이터 전송",
-      "created": "생성일"
+      "created": "생성일",
+      "windowColor": "창 색상"
     },
     "values": {
       "none": "없음",

src/i18n/locales/pt.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "Cookies armazenados",
       "localDataTransfer": "Transferência de dados local",
-      "created": "Criado em"
+      "created": "Criado em",
+      "windowColor": "Cor da janela"
     },
     "values": {
       "none": "Nenhum",

src/i18n/locales/ru.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "Хранится Cookie",
       "localDataTransfer": "Локальный трафик",
-      "created": "Создан"
+      "created": "Создан",
+      "windowColor": "Цвет окна"
     },
     "values": {
       "none": "Нет",

src/i18n/locales/vi.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "Cookie đã lưu",
       "localDataTransfer": "Truyền dữ liệu cục bộ",
-      "created": "Đã tạo"
+      "created": "Đã tạo",
+      "windowColor": "Màu cửa sổ"
     },
     "values": {
       "none": "Không có",

src/i18n/locales/zh.json

@@ -1156,7 +1156,8 @@
       "vpn": "VPN",
       "cookieCount": "存储的 Cookie",
       "localDataTransfer": "本地数据传输",
-      "created": "创建时间"
+      "created": "创建时间",
+      "windowColor": "窗口颜色"
     },
     "values": {
       "none": "无",

src/types.ts

@@ -27,6 +27,7 @@ export interface BrowserProfile {
   group_id?: string; // Reference to profile group
   tags?: string[];
   note?: string; // User note
+  window_color?: string; // Per-profile window frame color "#RRGGBB"; auto-derived from the id when unset
   sync_mode?: SyncMode;
   encryption_salt?: string;
   last_sync?: number; // Timestamp of last successful sync (epoch seconds)