push

frontend/src/composables/useCustomStyles.ts

@@ -50,6 +50,7 @@ export const PET_OPTIONS: { value: string; label: string }[] = [
 
 export interface CustomStylePrefs {
   sendButton: SendButtonKey;
+  sendSkin: string;                  // send-skin product id, or '' for default arrow
   adFrame: AdFrameKey;
   ipColors: Record<string, string>;  // ip → hex or 'auto'
   ipPets:   Record<string, string>;  // ip → emoji or ''
@@ -57,7 +58,7 @@ export interface CustomStylePrefs {
 }
 
 function defaults(): CustomStylePrefs {
-  return { sendButton: 'default', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
+  return { sendButton: 'default', sendSkin: '', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
 }
 
 function load(): CustomStylePrefs {

frontend/src/composables/useMessages.ts

@@ -55,8 +55,13 @@ export async function refreshMyPerks(): Promise<void> {
       if (e.kind === 'noads') { p.noads = true; if (meta.plan === 'annual') p.badge = true; }
       if (e.kind === 'style-dore') p.skin = 'gold';
       if (e.kind === 'pet' && meta.char) pets.push({ char: meta.char, position: meta.position ?? 'left' });
-      if (e.kind === 'element-skin') p.elementSkin = true;
-      if (e.kind === 'rich-htmlcss') p.richHtmlcss = true;
+      if (e.kind === 'element-skin') p.elementSkin = true;        if (e.kind === 'ip-colors') p.ipColors = true;
+        if (e.kind.startsWith('send-skin-')) {
+          let meta2: any = {};
+          try { meta2 = e.metaJson ? JSON.parse(e.metaJson) : {}; } catch {}
+          if (!p.sendSkins) p.sendSkins = [];
+          p.sendSkins.push({ id: e.kind, char: meta2.char ?? '?', label: meta2.label });
+        }      if (e.kind === 'rich-htmlcss') p.richHtmlcss = true;
       if (e.kind === 'rich-js') p.richJs = true;
       if (e.kind === 'no-file-limit') p.noFileLimit = true;
       if (e.kind === 'audio-alert') p.audioAlert = true;

frontend/src/composables/usePerks.ts

@@ -16,6 +16,8 @@ export interface Perks {
   elementSkin?: boolean;
   richHtmlcss?: boolean;
   richJs?: boolean;
+  ipColors?: boolean;
+  sendSkins?: { id: string; char: string; label?: string }[];
   noFileLimit?: boolean;
   audioAlert?: boolean;
 }

frontend/src/composables/useShop.ts

@@ -81,6 +81,16 @@ export function useShop() {
     return entitlements.value.filter((e) => e.kind === 'pet' && e.active).length;
   }
 
+  function ownedPetChars(): string[] {
+    return entitlements.value
+      .filter((e) => e.kind === 'pet' && e.active)
+      .map((e) => {
+        try { return (JSON.parse(e.metaJson ?? '{}') as any).char ?? ''; }
+        catch { return ''; }
+      })
+      .filter(Boolean);
+  }
+
   async function purchase(productId: string, options: PurchaseOptions = {}): Promise<boolean> {
     buying.value = productId;
     lastError.value = null;
@@ -119,6 +129,7 @@ export function useShop() {
     fetchMe,
     owns,
     petCount,
+    ownedPetChars,
     purchase,
   };
 }