init

2026-07-03 23:54:14 +02:00
parent ccfea3d3cf
commit dc738a9d29
3 changed files with 106 additions and 24 deletions
@@ -1,18 +1,95 @@
 <script lang="ts" setup>
+import {ref} from 'vue'
+
+// Exemple de données (à remplacer par vos données Pinia/API)
+const messages = ref([
+  {
+    id: 1,
+    user: {name: 'Utilisateur 1', avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'},
+    content: 'Salut ! Comment ça va ?',
+    timestamp: 'Aujourd\'hui à 12:00'
+  },
+  {
+    id: 2,
+    user: {name: 'Utilisateur 2', avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
+    content: 'Je vais très bien, merci ! Et toi ?',
+    timestamp: 'Aujourd\'hui à 12:01'
+  }
+])
+
+const newMessage = ref('')
+
+const sendMessage = () => {
+  if (!newMessage.value.trim()) return
+  // Logique d'envoi ici
+  messages.value.push({
+    id: Date.now(),
+    user: {name: 'Moi', avatar: ''},
+    content: newMessage.value,
+    timestamp: 'À l\'instant'
+  })
+  newMessage.value = ''
+}
 </script>

 <template>
-  <v-text-field
-    bg-color="grey-lighten-1"
-    class="overflow-hidden"
-    density="compact"
-    flat
-    hide-details
-    rounded="pill"
-    variant="solo-filled"
-  ></v-text-field>
+  <!-- Conteneur principal prenant toute la hauteur -->
+  <v-container class="pa-0 fill-height d-flex flex-column" fluid>
+
+    <!-- Zone des messages (scrollable) -->
+    <v-responsive class="flex-grow-1 overflow-y-auto">
+      <v-list bg-color="transparent" lines="three">
+        <v-list-item
+          v-for="msg in messages"
+          :key="msg.id"
+          class="px-4 py-1"
+        >
+          <template v-slot:prepend>
+            <v-avatar color="grey-lighten-2" size="40">
+              <v-img v-if="msg.user.avatar" :src="msg.user.avatar"></v-img>
+              <v-icon v-else icon="mdi-account"></v-icon>
+            </v-avatar>
+          </template>
+
+          <v-list-item-title class="d-flex align-center">
+            <span class="font-weight-bold text-subtitle-1 mr-2">{{ msg.user.name }}</span>
+            <span class="text-caption text-grey">{{ msg.timestamp }}</span>
+          </v-list-item-title>
+
+          <v-list-item-subtitle class="text-body-1 text-high-emphasis opacity-100">
+            {{ msg.content }}
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </v-responsive>
+
+    <!-- Zone de saisie fixe en bas -->
+    <v-sheet class="pa-4" width="100%">
+      <v-text-field
+        v-model="newMessage"
+        bg-color="grey-lighten-4"
+        density="compact"
+        flat
+        hide-details
+        placeholder="Envoyer un message..."
+        rounded="lg"
+        variant="solo-filled"
+        @keyup.enter="sendMessage"
+      >
+        <template v-slot:prepend-inner>
+          <v-btn color="grey-darken-1" density="compact" icon="mdi-plus-circle" variant="text"></v-btn>
+        </template>
+        <template v-slot:append-inner>
+          <v-btn color="grey-darken-1" density="compact" icon="mdi-gift" variant="text"></v-btn>
+          <v-btn color="grey-darken-1" density="compact" icon="mdi-sticker-emoji" variant="text"></v-btn>
+          <v-btn color="grey-darken-1" density="compact" icon="mdi-emoticon" variant="text"></v-btn>
+        </template>
+      </v-text-field>
+    </v-sheet>
+
+  </v-container>
 </template>

 <style scoped>

-</style>
+</style>