support more browsers

src/composables/useBrowserManager.ts

@@ -229,6 +229,9 @@ export function useBrowserManager() {
     if (iconKey === "chrome") return "CH";
     if (iconKey === "edge") return "ED";
     if (iconKey === "brave") return "BR";
+    if (iconKey === "vivaldi") return "VI";
+    if (iconKey === "yandex") return "YA";
+    if (iconKey === "chromium") return "CR";
 
     const name = current?.browserName?.trim() ?? "";
     if (name) {
@@ -248,6 +251,9 @@ export function useBrowserManager() {
     if (iconKey === "chrome") return "CH";
     if (iconKey === "edge") return "ED";
     if (iconKey === "brave") return "BR";
+    if (iconKey === "vivaldi") return "VI";
+    if (iconKey === "yandex") return "YA";
+    if (iconKey === "chromium") return "CR";
 
     const letters = config.name
       .trim()

src/utils/icons.ts

@@ -1,7 +1,10 @@
 import braveIcon from "../assets/brave.png";
+import chromiumIcon from "../assets/chromium.png";
 import chromeIcon from "../assets/google-chrome.png";
 import edgeIcon from "../assets/microsoft-edge.png";
 import settingsIcon from "../assets/settings.png";
+import vivaldiIcon from "../assets/vivaldi.png";
+import yandexIcon from "../assets/yandex.png";
 import type {
   AssociatedProfileSummary,
   BookmarkAssociatedProfileSummary,
@@ -12,6 +15,9 @@ export const browserIconOptions = [
   { key: "chrome", label: "Google Chrome", src: chromeIcon },
   { key: "edge", label: "Microsoft Edge", src: edgeIcon },
   { key: "brave", label: "Brave", src: braveIcon },
+  { key: "vivaldi", label: "Vivaldi", src: vivaldiIcon },
+  { key: "yandex", label: "Yandex Browser", src: yandexIcon },
+  { key: "chromium", label: "Chromium", src: chromiumIcon },
 ] as const;
 
 export function browserIconSrc(iconKey: string | null | undefined) {
@@ -83,15 +89,16 @@ export function profileAvatarSrc(
     return profile.avatarDataUrl;
   }
 
+  const avatarFamilyId = resolveAvatarFamilyId(browserFamilyId);
   const avatarKey = normalizeAvatarIcon(profile.avatarIcon);
   if (avatarKey) {
-    const familyMap = browserFamilyId ? avatarMap[browserFamilyId] : undefined;
+    const familyMap = avatarFamilyId ? avatarMap[avatarFamilyId] : undefined;
     if (familyMap?.[avatarKey]) {
       return familyMap[avatarKey];
     }
   }
 
-  if (browserFamilyId === "chrome") {
+  if (avatarFamilyId === "chrome") {
     return createChromeGeneratedAvatar(
       profile.defaultAvatarFillColor,
       profile.defaultAvatarStrokeColor,
@@ -110,6 +117,14 @@ function normalizeAvatarIcon(value: string | null | undefined) {
   return lastSegment.replace(/\.png$/i, "");
 }
 
+function resolveAvatarFamilyId(browserFamilyId: string | null | undefined) {
+  if (browserFamilyId === "chromium") {
+    return "chrome";
+  }
+
+  return browserFamilyId ?? null;
+}
+
 function createChromeGeneratedAvatar(
   backgroundArgb: number | null | undefined,
   foregroundArgb: number | null | undefined,