From 343ba1675e3329093947c214cb26e701eef66066 Mon Sep 17 00:00:00 2001
From: Cesar Mendivil <mendivilrubioc@gmail.com>
Date: Wed, 5 Nov 2025 18:12:54 -0700
Subject: [PATCH] feat: Mejora del componente Dropdown y ajustes en estilos de
 la tabla de transmisiones

---
 .../src/components/Dropdown.module.css        | 83 ++++++++++++++--
 .../src/components/Dropdown.tsx               | 79 +++++++++------
 .../NewTransmissionModal.module.css           | 10 +-
 .../src/components/PageContainer.module.css   | 31 +++++-
 .../src/components/PageContainer.tsx          | 98 ++++++++++---------
 .../components/TransmissionsTable.module.css  | 36 ++++++-
 .../src/components/TransmissionsTable.tsx     | 28 ++++--
 7 files changed, 260 insertions(+), 105 deletions(-)

diff --git a/packages/broadcast-panel/src/components/Dropdown.module.css b/packages/broadcast-panel/src/components/Dropdown.module.css
index 5878e60..fa1842b 100644
--- a/packages/broadcast-panel/src/components/Dropdown.module.css
+++ b/packages/broadcast-panel/src/components/Dropdown.module.css
@@ -5,18 +5,35 @@
 
 .dropdownMenu {
   position: absolute;
-  top: calc(100% + 8px);
+  top: calc(100% + 6px);
   right: 0;
   background-color: var(--surface-color);
-  border: 1px solid rgba(255,255,255,0.04);
+  border: 1px solid rgba(0,0,0,0.04);
   border-radius: 8px;
-  box-shadow: 0 12px 30px rgba(2,6,23,0.6);
-  min-width: 260px;
-  padding: 8px 0;
+  /* lighter shadow so it's less pronounced */
+  box-shadow: 0 6px 14px rgba(2,6,23,0.10);
+  /* match the create-card min width (220px) so menus align visually */
+  width: 220px;
+  padding: 4px 0;
   z-index: 1200;
   animation: slideDown 0.18s cubic-bezier(.2,.9,.2,1);
 }
 
+/* caret (little pointer) under the trigger */
+.dropdownMenu::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  /* horizontal offset from the right edge; configurable via --dropdown-caret-right */
+  right: var(--dropdown-caret-right, 16px);
+  width: 12px;
+  height: 12px;
+  background: var(--surface-color);
+  transform: rotate(45deg);
+  border-left: 1px solid rgba(0,0,0,0.04);
+  border-top: 1px solid rgba(0,0,0,0.04);
+}
+
 @keyframes slideDown {
   from {
     opacity: 0;
@@ -32,8 +49,8 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
+  gap: 10px;
+  padding: 8px 14px;
   background: transparent;
   border: none;
   color: var(--text-primary);
@@ -46,6 +63,23 @@
   background-color: var(--border-light);
 }
 
+/* Ensure delete item doesn't take native button appearance and stays menu-like */
+.dropdownItem.deleteItem,
+.dropdownItem.deleteItem:hover {
+  background: transparent;
+  border: none;
+  color: var(--danger-600);
+}
+
+.dropdownItem.deleteItem:hover {
+  background-color: rgba(234,67,53,0.04);
+}
+
+.dropdownItem:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
+}
+
 /* ensure header (non-interactive) doesn't get hover background */
 .dropdownHeader:hover {
   background: transparent;
@@ -66,7 +100,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 16px;
+  padding: 8px 14px;
   color: var(--text-primary);
   font-size: 14px;
   opacity: 0.90; /* user requested opacity */
@@ -80,6 +114,37 @@
 
 .divider {
   height: 1px;
-  background-color: rgba(255,255,255,0.03);
+  background-color: var(--border-light);
   margin: 8px 0;
 }
+
+/* slightly reduce icon size and align spacing like the screenshot */
+.dropdownItem .icon {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: var(--text-secondary);
+}
+
+/* when a container has .deleteItem, ensure child icon and label inherit danger color */
+.deleteItem .icon,
+.deleteItem span {
+  color: var(--danger-600);
+}
+
+/* make delete icon sit inside a small rounded red box like the screenshot */
+.deleteItem .icon {
+  background: rgba(234,67,53,0.08); /* subtle red bg */
+  padding: 4px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* tighten divider */
+.divider {
+  height: 1px;
+  background-color: rgba(0,0,0,0.04);
+  margin: 6px 0;
+}
diff --git a/packages/broadcast-panel/src/components/Dropdown.tsx b/packages/broadcast-panel/src/components/Dropdown.tsx
index 6ab1eec..8543403 100644
--- a/packages/broadcast-panel/src/components/Dropdown.tsx
+++ b/packages/broadcast-panel/src/components/Dropdown.tsx
@@ -46,39 +46,54 @@ export const Dropdown: React.FC<DropdownProps> = ({ trigger, items }) => {
         <div className={styles.dropdownMenu}>
           {items.map((item, index) => (
             <React.Fragment key={index}>
-              {item.divider && <div className={styles.divider} />}
-              {item.disabled ? (
-                <div className={styles.dropdownHeader} {...(item.containerProps || {})}>
-                  {item.icon && <span className={styles.icon}>{item.icon}</span>}
-                  {
-                    // merge className for the header label
-                    (() => {
-                      const lp = item.labelProps || {};
-                      const { className: lpClassName, ...lpOther } = lp as any;
-                      const classes = [styles.dropdownHeaderLabel, lpClassName].filter(Boolean).join(' ');
-                      return <span className={classes} {...lpOther}>{item.label}</span>;
-                    })()
-                  }
-                </div>
+              {item.divider ? (
+                <div className={styles.divider} />
+              ) : item.disabled ? (
+                (() => {
+                  const cp = item.containerProps || {};
+                  const { className: cpClassName, ...cpRest } = cp as any;
+                  const headerClasses = [styles.dropdownHeader, cpClassName].filter(Boolean).join(' ');
+                  return (
+                    <div className={headerClasses} {...cpRest}>
+                      {item.icon && <span className={styles.icon}>{item.icon}</span>}
+                      {
+                        // merge className for the header label
+                        (() => {
+                          const lp = item.labelProps || {};
+                          const { className: lpClassName, ...lpOther } = lp as any;
+                          const classes = [styles.dropdownHeaderLabel, lpClassName].filter(Boolean).join(' ');
+                          return <span className={classes} {...lpOther}>{item.label}</span>;
+                        })()
+                      }
+                    </div>
+                  );
+                })()
               ) : (
-                <button
-                  className={styles.dropdownItem}
-                  onClick={() => {
-                    item.onClick && item.onClick();
-                    setIsOpen(false);
-                  }}
-                  {...(item.containerProps || {})}
-                >
-                  {item.icon && <span className={styles.icon}>{item.icon}</span>}
-                  {
-                    (() => {
-                      const lp = item.labelProps || {};
-                      const { className: lpClassName, ...lpOther } = lp as any;
-                      const classes = [lpClassName].filter(Boolean).join(' ');
-                      return <span className={classes} {...lpOther}>{item.label}</span>;
-                    })()
-                  }
-                </button>
+                (() => {
+                  const cp = item.containerProps || {};
+                  const { className: cpClassName, ...cpRest } = cp as any;
+                  const btnClasses = [styles.dropdownItem, cpClassName].filter(Boolean).join(' ');
+                  return (
+                    <button
+                      className={btnClasses}
+                      onClick={() => {
+                        item.onClick && item.onClick();
+                        setIsOpen(false);
+                      }}
+                      {...cpRest}
+                    >
+                      {item.icon && <span className={styles.icon}>{item.icon}</span>}
+                      {
+                        (() => {
+                          const lp = item.labelProps || {};
+                          const { className: lpClassName, ...lpOther } = lp as any;
+                          const classes = [lpClassName].filter(Boolean).join(' ');
+                          return <span className={classes} {...lpOther}>{item.label}</span>;
+                        })()
+                      }
+                    </button>
+                  );
+                })()
               )}
             </React.Fragment>
           ))}
diff --git a/packages/broadcast-panel/src/components/NewTransmissionModal.module.css b/packages/broadcast-panel/src/components/NewTransmissionModal.module.css
index 4e83622..1580856 100644
--- a/packages/broadcast-panel/src/components/NewTransmissionModal.module.css
+++ b/packages/broadcast-panel/src/components/NewTransmissionModal.module.css
@@ -115,10 +115,11 @@
 }
 
 .submitButton {
+  /* Match header .planButton visual: transparent with primary border, fill on hover */
   padding: 10px 20px;
-  background-color: var(--primary-blue);
-  border: none;
-  color: white;
+  background-color: transparent;
+  border: 1px solid var(--primary-blue);
+  color: var(--primary-blue);
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
@@ -127,7 +128,8 @@
 }
 
 .submitButton:hover {
-  background-color: var(--primary-blue-hover);
+  background-color: var(--primary-blue);
+  color: white;
 }
 
 @keyframes fadeIn {
diff --git a/packages/broadcast-panel/src/components/PageContainer.module.css b/packages/broadcast-panel/src/components/PageContainer.module.css
index 0bd8607..89534ed 100644
--- a/packages/broadcast-panel/src/components/PageContainer.module.css
+++ b/packages/broadcast-panel/src/components/PageContainer.module.css
@@ -19,9 +19,28 @@
   overflow-y: auto;
 }
 
+/* two-column container: left column holds the two sections, right column reserved for secondary content
+   --left-col-width can be adjusted by container or page to control the left column width */
+.wrapContent {
+  display: grid;
+  grid-template-columns: var(--left-col-width, 980px) 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+.leftStack {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.rightStack {
+  display: block;
+}
+
 .createGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 16px;
 }
 
@@ -58,6 +77,16 @@
   .mainContent {
     margin-left: 0;
   }
+  .wrapContent {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* wider screens show the create cards in columns; keeps flexibility */
+@media (max-width: 768px) {
+  .createGrid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 768px) {
diff --git a/packages/broadcast-panel/src/components/PageContainer.tsx b/packages/broadcast-panel/src/components/PageContainer.tsx
index 321ee6f..467f3d2 100644
--- a/packages/broadcast-panel/src/components/PageContainer.tsx
+++ b/packages/broadcast-panel/src/components/PageContainer.tsx
@@ -59,56 +59,64 @@ const PageContainer: React.FC = () => {
         <div className={styles.mainContent}>
           <Header />
           <main className={styles.contentWrapper}>
-            {/* Sección Crear */}
-            <section style={{ marginBottom: '40px' }}>
-              <h2 style={{ fontSize: '22px', fontWeight: 600, marginBottom: '18px' }}>Crear</h2>
-              {isLoading ? (
-                <div className={styles.createGrid}>
-                  <SkeletonCard />
-                  <SkeletonCard />
-                  <SkeletonCard />
-                </div>
-              ) : (
-                <div className={styles.createGrid}>
-                  <button
-                    onClick={() => setIsModalOpen(true)}
-                    className={styles.createCard}
-                  >
-                    <div className={styles.createIconBox}>
-                      <MdVideocam size={20} style={{ color: 'var(--primary-blue)' }} />
+            <div className={styles.wrapContent}>
+              <div className={styles.leftStack}>
+                {/* Sección Crear */}
+                <section style={{ marginBottom: '0' }}>
+                  <h2 style={{ fontSize: '22px', fontWeight: 600, marginBottom: '18px' }}>Crear</h2>
+                  {isLoading ? (
+                    <div className={styles.createGrid}>
+                      <SkeletonCard />
+                      <SkeletonCard />
+                      <SkeletonCard />
                     </div>
-                    <span>Transmisión en vivo</span>
-                  </button>
+                  ) : (
+                    <div className={styles.createGrid}>
+                      <button
+                        onClick={() => setIsModalOpen(true)}
+                        className={styles.createCard}
+                      >
+                        <div className={styles.createIconBox}>
+                          <MdVideocam size={20} style={{ color: 'var(--primary-blue)' }} />
+                        </div>
+                        <span>Transmisión en vivo</span>
+                      </button>
 
-                  <button className={styles.createCard}>
-                    <div className={styles.createIconBox}>
-                      <MdFiberManualRecord size={20} style={{ color: '#ea4335' }} />
+                      <button className={styles.createCard}>
+                        <div className={styles.createIconBox}>
+                          <MdFiberManualRecord size={20} style={{ color: '#ea4335' }} />
+                        </div>
+                        <span>Grabación</span>
+                      </button>
+
+                      <button className={styles.createCard}>
+                        <div className={styles.createIconBox}>
+                          <MdSchool size={20} style={{ color: '#34a853' }} />
+                        </div>
+                        <span>Seminario web On-Air</span>
+                      </button>
                     </div>
-                    <span>Grabación</span>
-                  </button>
+                  )}
+                </section>
 
-                  <button className={styles.createCard}>
-                    <div className={styles.createIconBox}>
-                      <MdSchool size={20} style={{ color: '#34a853' }} />
-                    </div>
-                    <span>Seminario web On-Air</span>
-                  </button>
-                </div>
-              )}
-            </section>
+                {/* Sección Transmisiones y grabaciones */}
+                <section>
+                  <h2 style={{ fontSize: '22px', fontWeight: 600, marginBottom: '24px' }}>
+                    Transmisiones y grabaciones
+                  </h2>
+                  <TransmissionsTable
+                    transmissions={transmissions}
+                    onDelete={handleDelete}
+                    onUpdate={handleUpdate}
+                    isLoading={isLoading}
+                  />
+                </section>
+              </div>
 
-            {/* Sección Transmisiones y grabaciones */}
-            <section>
-              <h2 style={{ fontSize: '22px', fontWeight: 600, marginBottom: '24px' }}>
-                Transmisiones y grabaciones
-              </h2>
-              <TransmissionsTable
-                transmissions={transmissions}
-                onDelete={handleDelete}
-                onUpdate={handleUpdate}
-                isLoading={isLoading}
-              />
-            </section>
+              <div className={styles.rightStack}>
+                {/* espacio para contenido secundario o ads, vacío por ahora */}
+              </div>
+            </div>
 
             <NewTransmissionModal
               open={isModalOpen}
diff --git a/packages/broadcast-panel/src/components/TransmissionsTable.module.css b/packages/broadcast-panel/src/components/TransmissionsTable.module.css
index b1dcfc8..1ed3f09 100644
--- a/packages/broadcast-panel/src/components/TransmissionsTable.module.css
+++ b/packages/broadcast-panel/src/components/TransmissionsTable.module.css
@@ -35,7 +35,8 @@
   background-color: var(--surface-color);
   border: 1px solid var(--border-light);
   border-radius: 8px;
-  overflow: hidden;
+  /* allow dropdowns to overflow the table wrapper so menus aren't clipped */
+  overflow: visible;
 }
 
 .transmissionsTable {
@@ -58,7 +59,7 @@
 }
 
 .tableRow:hover {
-  background-color: var(--active-bg-light);
+  border-bottom: 1px solid var(--muted-200);
 }
 
 .tableCell {
@@ -68,6 +69,18 @@
   border-bottom: 1px solid var(--border-light);
 }
 
+.dangerLabel {
+  color: var(--danger-600);
+}
+
+.enterButton {
+  background: var(--brand-600);
+  color: white;
+  padding: 0.6rem 1rem;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
 .tableRow:last-child .tableCell {
   border-bottom: none;
 }
@@ -115,11 +128,20 @@
   background: var(--surface-color);
   border: 1px solid var(--border-light);
   border-radius: 12px;
-  padding: 8px 12px;
+  padding: 12px 16px;
+  /* subtle elevation to match mock */
+  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
+  /* constrain width to visually match the Create cards and center */
+  max-width: 980px;
+  margin: 0 auto;
 }
 
 .enterStudioButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding: 8px 16px;
+  min-height: 40px;
   background-color: transparent;
   border: 1px solid var(--primary-blue);
   color: var(--primary-blue);
@@ -127,8 +149,8 @@
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  margin-right: 8px;
-  transition: all 0.2s ease;
+  margin-right: 12px;
+  transition: all 0.18s ease;
 }
 
 .enterStudioButton:hover {
@@ -160,6 +182,10 @@
   font-style: italic;
 }
 
+.deleteItem {
+  color: var(--danger-600);
+}
+
 @media (max-width: 768px) {
   .tableWrapper {
     overflow-x: auto;
diff --git a/packages/broadcast-panel/src/components/TransmissionsTable.tsx b/packages/broadcast-panel/src/components/TransmissionsTable.tsx
index 420bb85..e593a3f 100644
--- a/packages/broadcast-panel/src/components/TransmissionsTable.tsx
+++ b/packages/broadcast-panel/src/components/TransmissionsTable.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { MdMoreVert, MdVideocam } from 'react-icons/md'
+import { MdMoreVert, MdVideocam, MdPersonAdd, MdEdit, MdOpenInNew, MdDelete } from 'react-icons/md'
+import { Dropdown } from './Dropdown'
 import { FaYoutube, FaFacebook, FaTwitch, FaLinkedin } from 'react-icons/fa'
 import { SkeletonTable } from './Skeleton'
 import styles from './TransmissionsTable.module.css'
@@ -105,14 +106,23 @@ const TransmissionsTable: React.FC<Props> = ({ transmissions, onDelete, onUpdate
                           </div>
                         </div>
 
-                        <div className={styles.actionsCell}>
-                          <button aria-label={`Entrar al estudio ${t.title}`} className={styles.enterStudioButton} onClick={() => {/* enter studio logic placeholder */}}>
-                            Entrar al estudio
-                          </button>
-                          <button aria-label={`Más opciones ${t.title}`} className={styles.moreOptionsButton}>
-                            <MdMoreVert size={20} />
-                          </button>
-                        </div>
+                          <div className={styles.actionsCell}>
+                            <button aria-label={`Entrar al estudio ${t.title}`} className={styles.enterStudioButton} onClick={() => {/* enter studio logic placeholder */}}>
+                              Entrar al estudio
+                            </button>
+
+                            <Dropdown
+                              trigger={<button className={styles.moreOptionsButton} aria-label={`Más opciones ${t.title}`}><MdMoreVert size={20} /></button>}
+                              items={[
+                                { label: 'Agregar invitados', icon: <MdPersonAdd size={16} />, onClick: () => console.log('Agregar invitados', t.id) },
+                                { label: 'Editar', icon: <MdEdit size={16} />, onClick: () => {/* editar */} },
+                                { divider: true, label: '', disabled: false },
+                                { label: 'Ver en YouTube', icon: <MdOpenInNew size={16} />, onClick: () => {/* abrir */} },
+                                { divider: true, label: '', disabled: false },
+                                { label: 'Eliminar transmisión', icon: <MdDelete size={16} />, onClick: () => onDelete(t.id), containerProps: { className: styles.deleteItem }, labelProps: { className: styles.dangerLabel } }
+                              ]}
+                            />
+                          </div>
                       </div>
                     </div>
                   </td>