I added the button and the modal to create a post in a new .vue file to better organize everything.

src/views/creators/CreatePostButton.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <button v-if="creator.id === userStore.getCurrentUser().id"
+            class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
+            @click="isDialogActive = true">
+      <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
+    </button>
+
+    <v-dialog v-model="isDialogActive" max-width="500">
+      <template v-slot:default="{ isActive }">
+        <v-card class="text-center rounded-xl">
+          <div class="text-white p-4 rounded-t" :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
+            <h2>Publication</h2>
+          </div>
+          <v-card-text class="bg">
+            <v-row class="justify-center mb-4">
+              <v-col class="d-flex align-center justify-end">
+                <v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
+              </v-col>
+              <v-col class="d-flex align-center justify-start">
+                <v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
+              </v-col>
+            </v-row>
+            <v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
+            <v-file-input
+                label="Ajoutez des fichiers"
+                v-model="files"
+                outlined
+                multiple
+                dropzone
+                placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
+            ></v-file-input>
+          </v-card-text>
+          <v-card-actions class="justify-end">
+            <v-btn color="primary" @click="publishPost">Publier</v-btn>
+            <v-btn color="primary" @click="cancelPost">Annuler</v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue';
+import { useUserStore } from '@/stores/user.js';
+
+const props = defineProps({
+  creator: { type: Object, required: true },
+});
+
+const userStore = useUserStore();
+
+const isDialogActive = ref(false);
+const message = ref('');
+const files = ref([]);
+const isArticle = ref(false);
+
+const publishPost = () => {
+  // Logic to publish post
+  console.log('Post published:', message.value, files.value);
+  isDialogActive.value = false;
+  resetPostForm();
+};
+
+const cancelPost = () => {
+  isDialogActive.value = false;
+  resetPostForm();
+};
+
+const resetPostForm = () => {
+  message.value = '';
+  files.value = [];
+};
+
+const togglePostType = (article) => {
+  isArticle.value = article;
+};
+</script>
+

src/views/creators/CreatorBanner.vue

@@ -1,7 +1,6 @@
 <template>
   <seize-indicator></seize-indicator>
-  
+    
-  
   <!--  Bannière-->
   <div class="relative bottom-4  z-20 m">
     <div class="relative flex flex-col">
@@ -19,8 +18,6 @@
           </a>
         </div>
       </div>
-
-
     </div>    
     
     <!--Banner & user info-->
@@ -62,11 +59,7 @@
 
         <!-- Buttons -->
         <div  class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4 ml-">
-          <button v-if="creator.id === userStore.getCurrentUser().id"
+          <CreatePostButton :creator="creator" />         
-              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
-              @click="isDialogActive = true">
-            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
-          </button>
           <button class="text-white py-2 px-4 rounded"
                   style="background-color: #333; transition: background-color 0.3s ease;"
                   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
@@ -81,89 +74,17 @@
       </div>
     </div>
   </div>
-
-
-
-
-
-
-
-  <!--Post-modale-->
-  <v-dialog v-model="isDialogActive" max-width="500">
-    <template v-slot:default="{ isActive }">
-      <v-card class="text-center rounded-xl">
-        <div class="text-white p-4 rounded-t" :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
-          <h2>Publication</h2>
-        </div>
-        <v-card-text class="bg">
-          <v-row class="justify-center mb-4">
-            <v-col class="d-flex align-center justify-end">
-              <v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
-            </v-col>
-            <v-col class="d-flex align-center justify-start">
-              <v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
-            </v-col>
-          </v-row>
-          <v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
-          <v-file-input
-              label="Ajoutez des fichiers"
-              v-model="files"
-              outlined
-              multiple
-              dropzone
-              placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
-          ></v-file-input>
-        </v-card-text>
-        <v-card-actions class="justify-end">
-          <v-btn color="primary" @click="publishPost">Publier</v-btn>
-          <v-btn color="primary" @click="cancelPost">Annuler</v-btn>
-        </v-card-actions>
-      </v-card>
-    </template>
-  </v-dialog>
-
-
-
 </template>
 
 <script setup>
-
+import CreatePostButton from "@/views/creators/CreatePostButton.vue";
 import {defineProps, ref} from "vue";
-import {useUserStore} from "@/stores/user.js";
 import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
 import AboutYou from "@/views/creators/AboutYou.vue";
-
 const props = defineProps({
   creator: { type: Object, required: true },
 });
 
-const userStore = useUserStore();
-
-const isDialogActive = ref(false);
-const message = ref('');
-const files = ref([]);
-const isArticle = ref(false);
-
-const publishPost = () => {
-  // Logic to publish post
-  console.log('Post published:', message.value, files.value);
-  isDialogActive.value = false;
-  resetPostForm();
-};
-
-const cancelPost = () => {
-  isDialogActive.value = false;
-  resetPostForm();
-};
-
-const resetPostForm = () => {
-  message.value = '';
-  files.value = [];
-};
-
-const togglePostType = (article) => {
-  isArticle.value = article;
-};
 
 function GetActiveSocialNetworkUrls(){
   const socialNetworks = [];

src/views/creators/CreatorPage.vue

@@ -1,47 +1,44 @@
 <template>
   <div v-if="creator && creator.id">
-    
-    <creator-banner :creator="creator"></creator-banner>
 
+    <creator-banner :creator="creator"></creator-banner>
     <DonationPopup :creator-id="creator.id"></DonationPopup>
 
     <div class="max-w-[1000px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
-    
+      <div class="w-full mt-20">      
-    <div class="w-full mt-20">
+              
-
+        <v-card-text>
-   
+          <v-tabs-window v-model="tab">
-
+            <v-tabs-window-item value="content">
-      <v-card-text>
+              <div class="w-full h-full p-6">
-        <v-tabs-window v-model="tab">
+                <ContentList v-if="creator.id"
-          <v-tabs-window-item value="content">
+                             :creator-id="creator.id">
-            <div class="w-full h-full p-6">
+                </ContentList>
-              <ContentList v-if="creator.id"
-                           :creator-id="creator.id">
-              </ContentList>
-            </div>
-          </v-tabs-window-item>
-
-          <v-tabs-window-item value="community">
-            <div>
-              <div class="border-b-2 p-6">
-                <PostMessage v-if="creator.id"
-                             :content-id="creator.id">
-                </PostMessage>
               </div>
+            </v-tabs-window-item>
 
-              <div class="border-b p-6">
+            <v-tabs-window-item value="community">
-                <h2 class="font-sans font-semibold">Commentaires</h2>
+              <div>
-                <MessageList v-if="creator.id"
+                <div class="border-b-2 p-6">
-                             :content-id="creator.id">
+                  <PostMessage v-if="creator.id"
-                </MessageList>
+                               :content-id="creator.id">
+                  </PostMessage>
+                </div>
+
+                <div class="border-b p-6">
+                  <h2 class="font-sans font-semibold">Commentaires</h2>
+                  <MessageList v-if="creator.id"
+                               :content-id="creator.id">
+                  </MessageList>
+                </div>
               </div>
-            </div>
+            </v-tabs-window-item>
-          </v-tabs-window-item>
 
-        </v-tabs-window>
+          </v-tabs-window>
-      </v-card-text>
+        </v-card-text>
-    </div>
+      </div>
     </div>
+
   </div>
 
   <!-- Fallback when user try to access a non-existing creator -->
@@ -69,6 +66,8 @@ import MessageList from "@/views/messages/MessageList.vue";
 import ContentList from "@/views/contents/ContentList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
 import DonationPopup from "@/views/main/DonationPopup.vue";
+import CreatorFeed from "@/views/main/CreatorFeed.vue";
+import CreatePostButton from "@/views/creators/CreatePostButton.vue";
 
 const client = useClient();
 const route = useRoute();
@@ -77,7 +76,7 @@ const creator = ref(null);
 const loading = ref(true);
 const tab = ref();
 
-onBeforeMount(async() => {
+onBeforeMount(async () => {
   setTimeout(() => {
     loading.value = false;
   }, 1500);