feat: enhance customization options with new 'Mes Persos' panel and improved context menus

frontend/src/composables/useCustomStyles.ts

@@ -53,10 +53,11 @@ export interface CustomStylePrefs {
   adFrame: AdFrameKey;
   ipColors: Record<string, string>;  // ip → hex or 'auto'
   ipPets:   Record<string, string>;  // ip → emoji or ''
+  chatBgUrl: string;                 // URL or '' for no background
 }
 
 function defaults(): CustomStylePrefs {
-  return { sendButton: 'default', adFrame: 'default', ipColors: {}, ipPets: {} };
+  return { sendButton: 'default', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
 }
 
 function load(): CustomStylePrefs {

frontend/src/composables/useMessages.ts

@@ -5,6 +5,14 @@ import { setPerks, applyPerksFrame, type Perks } from './usePerks';
 import { bumpAdsRevision } from './useAds';
 import { handleAlertFrame } from './useAlert';
 
+// Module-level singleton so any component can read the viewer's own perks
+// without prop-drilling (e.g. SendButton, AdBand).
+export const myPerks = ref<Perks>({});
+
+export function useMyPerks() {
+  return { myPerks };
+}
+
 export interface Reply {
   id: string;
   content: string;
@@ -91,7 +99,7 @@ export function useMessages() {
   const { fetchWallet, ip: myIp } = useWallet();
 
   // The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
-  const myPerks = ref<Perks>({});
+  // myPerks is module-level; this ref is the same reference.
 
   async function fetchMyPerks(): Promise<void> {
     try {
@@ -193,7 +201,8 @@ export function useMessages() {
     stats,
     connected,
     sendTyping,
-    myPerks,
+    get myPerks() { return myPerks; },
+    myIp,
     fetchMyPerks,
   };
 }