From 5d742148222b66a4ea6d8de70270e8255b437367 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Fri, 15 May 2026 23:55:57 +0200
Subject: [PATCH] fix(native/community): ComposeCard avatar reads from useMe,
 not auth metadata
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The composer on the index page was rendering whatever avatar was set
in `auth.users.user_metadata.avatar_id` at signup time — never updated
when the user changes their avatar via Profile-Edit (those edits go to
`profiles` table only, JWT claims stay stale).

useMe() is the single source of truth that joins both server-side (see
hooks/useMe.ts:15-18 comment that explicitly lists ComposeCard as a
consumer that should subscribe). Switched the avatar + nickname reads
to useMe(); future PATCH /api/auth/me followed by invalidateMe() now
updates the composer avatar in real time alongside the AppHeader.
---
 apps/rebreak-native/components/ComposeCard.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/rebreak-native/components/ComposeCard.tsx b/apps/rebreak-native/components/ComposeCard.tsx
index 24f462e..8aa577a 100644
--- a/apps/rebreak-native/components/ComposeCard.tsx
+++ b/apps/rebreak-native/components/ComposeCard.tsx
@@ -17,7 +17,7 @@ import * as FileSystem from 'expo-file-system/legacy';
 import * as ImagePicker from 'expo-image-picker';
 import { apiFetch } from '../lib/api';
 import { resolveAvatar } from '../lib/resolveAvatar';
-import { useAuthStore } from '../stores/auth';
+import { useMe } from '../hooks/useMe';
 import { useColors } from '../lib/theme';
 
 type Props = {
@@ -27,7 +27,7 @@ type Props = {
 export function ComposeCard({ onPosted }: Props) {
   const { t } = useTranslation();
   const colors = useColors();
-  const { user } = useAuthStore();
+  const { me } = useMe();
   const queryClient = useQueryClient();
   const inputRef = useRef<TextInput>(null);
   const [focused, setFocused] = useState(false);
@@ -35,9 +35,8 @@ export function ComposeCard({ onPosted }: Props) {
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [posting, setPosting] = useState(false);
 
-  const avatarId = user?.user_metadata?.avatar_id as string | undefined;
-  const nickname = (user?.user_metadata?.username as string | undefined) ?? t('community.compose_default_user');
-  const avatarUrl = resolveAvatar(avatarId ?? null, nickname);
+  const nickname = me?.nickname ?? t('community.compose_default_user');
+  const avatarUrl = resolveAvatar(me?.avatar ?? null, nickname);
 
   const cancel = () => {
     setContent('');