From 7a3d146892cd40dbcdbea0a749e10889b5b3e281 Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Mon, 2 Nov 2026 16:27:57 -0300
Subject: [PATCH] =?UTF-8?q?feat(respuesta):=20bot=C3=B3n=20=C3=BAnico=20de?=
 =?UTF-8?q?=20env=C3=ADo=20con=20opci=C3=B3n=20visible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/(app)/tickets/[id]/page.tsx | 120 +++++++++----------
 1 file changed, 58 insertions(+), 62 deletions(-)

diff --git a/frontend/src/app/(app)/tickets/[id]/page.tsx b/frontend/src/app/(app)/tickets/[id]/page.tsx
index 9c5899d..57b9f31 100644
--- a/frontend/src/app/(app)/tickets/[id]/page.tsx
+++ b/frontend/src/app/(app)/tickets/[id]/page.tsx
@@ -226,11 +226,24 @@ export default function TicketDetailPage() {
   const [mergeError, setMergeError] = useState("");
   const [merging, setMerging] = useState(false);
   const [sendMenuOpen, setSendMenuOpen] = useState(false);
+  const [sendAction, setSendAction] = useState<"send" | "resolved" | "closed">("send");
+
+  const SEND_ACTIONS = {
+    send: { label: "Enviar", icon: "bi-send", hint: "Solo publica el mensaje" },
+    resolved: { label: "Enviar y resuelto", icon: "bi-check-circle", hint: "Publica y marca resuelto" },
+    closed: { label: "Enviar y cerrado", icon: "bi-archive", hint: "Publica y archiva el ticket" },
+  } as const;
 
   const handleAddComment = (e: React.FormEvent) => {
     e.preventDefault();
     setSendMenuOpen(false);
-    void submitComment();
+    void submitComment(sendAction === "send" ? undefined : sendAction);
+  };
+
+  const chooseSendAction = (action: "send" | "resolved" | "closed") => {
+    setSendAction(action);
+    setSendMenuOpen(false);
+    void submitComment(action === "send" ? undefined : action);
   };
 
   useEffect(() => {
@@ -832,31 +845,25 @@ export default function TicketDetailPage() {
                     Nota interna (solo agentes)
                   </label>
                 </div>
-                <button
-                  type="submit"
-                  className="btn btn-primary"
-                  disabled={!comment.trim() || submitting}
-                >
-                  {submitting ? (
-                    <span className="spinner-border spinner-border-sm" role="status"></span>
-                  ) : (
-                    <>
-                      <i className="bi bi-send me-2"></i>Enviar
-                    </>
-                  )}
-                </button>
-                {isTeam && (
+                {isTeam ? (
                   <div className="position-relative">
                     <button
                       type="button"
-                      className="btn btn-primary dropdown-toggle dropdown-toggle-split"
-                      style={{ marginLeft: "-1px" }}
+                      className="btn btn-primary"
                       disabled={!comment.trim() || submitting}
-                      aria-label="Más opciones de envío"
+                      aria-label="Opciones de envío"
                       aria-expanded={sendMenuOpen}
                       onClick={() => setSendMenuOpen((o) => !o)}
                     >
-                      <span className="visually-hidden">Opciones</span>
+                      {submitting ? (
+                        <span className="spinner-border spinner-border-sm" role="status"></span>
+                      ) : (
+                        <>
+                          <i className={`bi ${SEND_ACTIONS[sendAction].icon} me-2`}></i>
+                          {SEND_ACTIONS[sendAction].label}
+                        </>
+                      )}
+                      <i className="bi bi-chevron-down ms-2"></i>
                     </button>
                     {sendMenuOpen && (
                       <>
@@ -865,53 +872,42 @@ export default function TicketDetailPage() {
                           style={{ zIndex: 1000 }}
                           onClick={() => setSendMenuOpen(false)}
                         />
-                        <ul className="dropdown-menu show position-absolute end-0 bottom-100 mb-1" style={{ zIndex: 1001, minWidth: "220px" }}>
-                          <li>
-                            <button
-                              type="button"
-                              className="dropdown-item"
-                              disabled={submitting}
-                              onClick={() => {
-                                setSendMenuOpen(false);
-                                void submitComment();
-                              }}
-                            >
-                              <i className="bi bi-send me-2"></i>Enviar
-                              <small className="d-block text-muted">Solo publica el mensaje{!ticket?.assigneeId && " (te lo asigna si está sin asignar)"}</small>
-                            </button>
-                          </li>
-                          <li>
-                            <button
-                              type="button"
-                              className="dropdown-item"
-                              disabled={submitting}
-                              onClick={() => {
-                                setSendMenuOpen(false);
-                                void submitComment("resolved");
-                              }}
-                            >
-                              <i className="bi bi-check-circle me-2"></i>Enviar y resuelto
-                              <small className="d-block text-muted">Publica y marca resuelto</small>
-                            </button>
-                          </li>
-                          <li>
-                            <button
-                              type="button"
-                              className="dropdown-item"
-                              disabled={submitting}
-                              onClick={() => {
-                                setSendMenuOpen(false);
-                                void submitComment("closed");
-                              }}
-                            >
-                              <i className="bi bi-archive me-2"></i>Enviar y cerrado
-                              <small className="d-block text-muted">Publica y archiva el ticket</small>
-                            </button>
-                          </li>
+                        <ul className="dropdown-menu show position-absolute end-0 bottom-100 mb-1" style={{ zIndex: 1001, minWidth: "230px" }}>
+                          {(Object.keys(SEND_ACTIONS) as Array<keyof typeof SEND_ACTIONS>).map((key) => (
+                            <li key={key}>
+                              <button
+                                type="button"
+                                className={`dropdown-item ${sendAction === key ? "active" : ""}`}
+                                disabled={submitting}
+                                onClick={() => chooseSendAction(key)}
+                              >
+                                <i className={`bi ${SEND_ACTIONS[key].icon} me-2`}></i>
+                                {SEND_ACTIONS[key].label}
+                                {sendAction === key && <i className="bi bi-check-lg ms-2"></i>}
+                                <small className="d-block text-muted">
+                                  {SEND_ACTIONS[key].hint}{key === "send" && !ticket?.assigneeId ? " (te lo asigna si está sin asignar)" : ""}
+                                </small>
+                              </button>
+                            </li>
+                          ))}
                         </ul>
                       </>
                     )}
                   </div>
+                ) : (
+                  <button
+                    type="submit"
+                    className="btn btn-primary"
+                    disabled={!comment.trim() || submitting}
+                  >
+                    {submitting ? (
+                      <span className="spinner-border spinner-border-sm" role="status"></span>
+                    ) : (
+                      <>
+                        <i className="bi bi-send me-2"></i>Enviar
+                      </>
+                    )}
+                  </button>
                 )}
               </div>
             </form>