Reload header profile picture on change. Show PostContentMenu only if it is the creator own page

src/views/main/Creator.vue

@@ -13,7 +13,7 @@
   <!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
   <!--    </div>-->
   
-      <PostContentMenu></PostContentMenu>
+      <PostContentMenu v-if="user.id === userStore.getCurrentUser().id"></PostContentMenu>
 
       <StripePayment :creator-id="user.id"></StripePayment>
 
@@ -57,9 +57,11 @@ import {useClient} from "@/plugins/api.js";
 import {useRoute} from "vue-router";
 import CreatorBanner from "@/views/main/CreatorBanner.vue";
 import StripePayment from "@/views/StripePayment.vue";
+import {useUserStore} from "@/stores/user.js";
 
 const client = useClient();
 const route = useRoute();
+const userStore = useUserStore();
 
 const user = ref(null);
 const loading = ref(true);

src/views/main/Header.vue

@@ -104,16 +104,17 @@
 </template>
 
 <script setup>
-import {ref, onMounted, onBeforeUnmount, onBeforeMount} from "vue";
+import {ref, onBeforeUnmount, onBeforeMount, watch, reactive} from "vue";
 import {eventBus} from '@/eventBus.js';
 import {useRouter} from 'vue-router';
 import {useUserStore} from "@/stores/user.js";
+import MyUserModel from "@/models/myUserModel.js";
 
 const router = useRouter();
 const currentUserName = ref("Anonyme");
 const searchQuery = ref("");
 const showSearch = ref(false);
-const currentUser = ref(null);
+let currentUser = reactive(MyUserModel.getDefaultUser());
 const userStore = useUserStore();
 const backupProfilePictureUrl = "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
 
@@ -159,12 +160,22 @@ const logout = () => {
 };
 
 onBeforeMount( () => {
-  currentUser.value = userStore.getCurrentUser();
-  currentUserName.value = currentUser.value.userName;
+  currentUser = userStore.getCurrentUser();
+  currentUserName.value = currentUser.userName;
 
   document.addEventListener('click', handleClickOutside);
 });
 
+// Watch the user state to get it again if needed.
+watch(
+    () => userStore.hasChanged,
+    () => {
+      currentUser = userStore.getCurrentUser();
+      const timestamp = new Date().getTime();
+      currentUser.storedDataUrls.profilePictureUrl = `${currentUser.storedDataUrls.profilePictureUrl}?t=${timestamp}`;
+    }
+);
+
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleClickOutside);
 });