From b6e7cc5b71e1122f4059c49cd5d34c66c5dfc1b2 Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Mon, 15 Jun 2026 23:12:39 +0200
Subject: [PATCH] style(ui): refactor message composer layout and styling

---
 app/components/MessageComposer.vue | 123 ++++++++++++-----------------
 1 file changed, 51 insertions(+), 72 deletions(-)

diff --git a/app/components/MessageComposer.vue b/app/components/MessageComposer.vue
index 94af23d..e444586 100644
--- a/app/components/MessageComposer.vue
+++ b/app/components/MessageComposer.vue
@@ -44,6 +44,7 @@ const removeFile = (idx: number) => {
 <template>
   <div class="message-composer mt-3">
     <form @submit.prevent="handleSubmit">
+
       <div v-if="files.length > 0" class="message-files mb-3">
         <div v-for="(file, idx) in files" :key="idx" class="message-file-chip">
           <BIIcon name="it-clip" size="xs" />
@@ -52,43 +53,42 @@ const removeFile = (idx: number) => {
         </div>
       </div>
 
-      <div class="composer-shell">
-        <input 
-          ref="fileInputRef"
-          type="file" 
-          multiple 
-          class="d-none" 
-          @change="handleFileSelect"
-          accept="image/*,video/*,.pdf,.doc,.docx"
+      <div class="d-flex align-items-stretch gap-2">
+        <input
+            ref="fileInputRef"
+            type="file"
+            multiple
+            class="d-none"
+            @change="handleFileSelect"
+            accept="image/*,video/*,.pdf,.doc,.docx"
         />
 
         <button
-          type="button"
-          class="btn btn-outline-primary btn-icon composer-attach"
-          title="Allega file"
-          @click="fileInputRef?.click()"
-          :disabled="isSubmitting || files.length >= 5"
+            type="button"
+            class="btn btn-outline-primary btn-square flex-shrink-0"
+            title="Allega file"
+            @click="fileInputRef?.click()"
+            :disabled="isSubmitting || files.length >= 5"
         >
           <BIIcon name="it-clip" size="sm" />
         </button>
 
         <textarea
-          v-model="message"
-          class="form-control composer-textarea"
-          placeholder="Scrivi aggiornamento o domanda"
-          rows="2"
-          :disabled="isSubmitting"
-          @keydown="handleKeydown"
-        />
+            v-model="message"
+            class="form-control chat-textarea m-0"
+            placeholder="Scrivi aggiornamento o domanda"
+            :disabled="isSubmitting"
+            @keydown="handleKeydown"
+        ></textarea>
 
         <button
-          type="submit"
-          class="btn btn-primary composer-submit"
-          :disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
+            type="submit"
+            class="btn btn-primary btn-square flex-shrink-0"
+            :disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
+            title="Invia"
         >
-          <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-          <BIIcon v-else name="it-arrow-right" size="sm" color="white" class="me-1" />
-          Invia
+          <span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+          <BIIcon v-else name="it-arrow-right" size="sm" color="white" />
         </button>
       </div>
 
@@ -126,54 +126,33 @@ const removeFile = (idx: number) => {
   max-width: 14rem;
 }
 
-.composer-shell {
-  align-items: flex-end;
-  background: #fff;
-  border: 1px solid #c5d0db;
-  border-radius: 4px;
-  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  padding: 0.75rem;
-}
-
-.composer-shell:focus-within {
-  border-color: #06c;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
-}
-
-.composer-attach {
-  flex-shrink: 0;
-}
-
-.composer-textarea {
-  border: 0;
-  box-shadow: none;
-  min-height: 4rem;
-  padding: 0;
-  resize: vertical;
-}
-
-.composer-submit {
-  min-width: 7rem;
-}
-
 .btn-close-sm {
   font-size: 0.55rem;
 }
 
-@media (max-width: 767.98px) {
-  .composer-shell {
-    grid-template-columns: auto 1fr;
-  }
-
-  .composer-textarea {
-    grid-column: 1 / -1;
-  }
-
-  .composer-submit {
-    grid-column: 2;
-    justify-self: end;
-  }
+/* Stili specifici richiesti per la chat */
+.chat-textarea {
+  resize: none !important;
+  height: 48px;
+  min-height: 48px;
+  overflow-y: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-radius: 6px;
 }
-</style>
+
+.chat-textarea:focus {
+  border-color: #06c;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
+}
+
+.btn-square {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+}
+</style>
\ No newline at end of file