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

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,
   };
 }