feat: update AppHeader and useAccounts for improved user profile handling

- Replaced robohash image source with user-defined profile picture in AppHeader.
- Enhanced name display with truncation for better UI consistency.
- Introduced caching and fetching of Nostr profile metadata in useAccounts.
- Added computed properties for active profile and profile picture to streamline user data retrieval.

This update improves the user experience by ensuring accurate profile representation and efficient data management.

src/components/AppHeader.vue

@@ -193,12 +193,12 @@
               class="profile-button flex items-center gap-2"
             >
               <img
-                v-if="nostrActivePubkey"
-                :src="`https://robohash.org/${nostrActivePubkey}.png`"
-                class="w-8 h-8 rounded-full"
+                v-if="nostrProfilePicture"
+                :src="nostrProfilePicture"
+                class="w-8 h-8 rounded-full object-cover"
                 alt="Avatar"
               />
-              <span class="text-white text-sm font-medium">{{ nostrActiveName }}</span>
+              <span class="text-white text-sm font-medium truncate max-w-[140px]">{{ nostrActiveName }}</span>
               <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': dropdownOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
               </svg>
@@ -268,12 +268,12 @@
           <!-- Mobile -->
           <div class="md:hidden flex items-center gap-2 mr-2">
             <img
-              v-if="hasNostrSession && nostrActivePubkey"
-              :src="`https://robohash.org/${nostrActivePubkey}.png`"
-              class="w-7 h-7 rounded-full"
+              v-if="hasNostrSession && nostrProfilePicture"
+              :src="nostrProfilePicture"
+              class="w-7 h-7 rounded-full object-cover"
               alt="Avatar"
             />
-            <span v-if="hasNostrSession" class="text-white text-sm font-medium">{{ nostrActiveName }}</span>
+            <span v-if="hasNostrSession" class="text-white text-sm font-medium truncate max-w-[100px]">{{ nostrActiveName }}</span>
             <template v-else-if="isAuthenticated">
               <div class="w-7 h-7 rounded-full bg-gradient-to-br from-orange-500 to-pink-500 flex items-center justify-center text-xs font-bold text-white">
                 {{ userInitials }}
@@ -329,8 +329,9 @@ const route = useRoute()
 const { user, isAuthenticated, isFilmmaker: isFilmmakerComputed, loginWithNostr: _appLoginWithNostr, logout: appLogout } = useAuth()
 const {
   isLoggedIn: nostrLoggedIn,
-  activePubkey: nostrActivePubkey,
+  activePubkey: _nostrActivePubkey,
   activeName: nostrActiveName,
+  activeProfilePicture: nostrProfilePicture,
   // Hidden in production for now (see template comment)
   testPersonas: _testPersonas,
   tastemakerPersonas: _tastemakerPersonas,