Tweaking post UI

src/views/messages/PostMessage.vue

@@ -1,16 +1,42 @@
 <template>
   <div class="flex flex-column">
-    <div class="flex flex-row">
-      <div class="mx-2 content-center">
-        <img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full" width="32px" height="32px">
+    <div class="flex flex-row items-center ">
+      <img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full mr-2" width="32px" height="32px">
+      <div class="flex-grow">
+        <div class="flex flex-row bg-gray-100 rounded-2xl">
+          <v-textarea
+              v-model="value"
+              density="compact"
+              variant="underlined"
+              placeholder="Votre commentaire..."
+              hide-details
+              auto-grow
+              rows="1"
+              maxlength="1024"
+              class="pr-1 ml-6 flex-grow"
+              @keydown.enter.prevent="publish"
+              
+          >
+          </v-textarea>
+          <div class="flex flex-col justify-center">
+            <v-btn
+                icon
+                variant="text"
+                @click="publish"
+            >
+              <v-icon>mdi-send</v-icon>
+            </v-btn>
+          </div>
+        </div>
       </div>
-      <v-text-field v-model="value" density="compact" variant="solo-inverted" placeholder="Votre commentaire..." hide-details clearable></v-text-field>
     </div>
-    <div class="flex flex-row gap-2 mt-2 justify-end">
-      <v-btn variant="plain">Annuler</v-btn>
-      <v-btn variant="tonal" @click="publish">Commenter</v-btn>
+    <div class="flex justify-end items-center mt-1">
+      <div v-if="value.length < 1024" class="text-gray-500 text-sm">{{ value.length }}/1024</div>
+      <div v-if="value.length >= 1024" class="text-red-500 text-sm">{{ value.length }}/1024</div>
     </div>
   </div>
+
+
   <v-dialog v-model="loginModal" max-width="400">
     <v-card>
       <div class="flex flex-col items-center">
@@ -90,3 +116,21 @@ const handleFailure = () => {
   console.error('Login failed');
 }
 </script>
+
+<style scoped>
+.text-red-500 {
+  color: #f56565;
+}
+
+.text-gray-500 {
+  color: #a0aec0;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+</style>