MiknasTrading/.superpowers/brainstorm/2033-1779783948/content/mail-accounts-list.html

<h2>Email Tab — Multi-Account Design</h2>
<p class="subtitle">The Email tab becomes a list of named accounts. Each account has a type badge, from address, and actions. Here's how it looks with a few accounts configured.</p>

<div class="mockup">
  <div class="mockup-header">Settings — Integrations (Email tab active)</div>
  <div class="mockup-body" style="background:#f9fafb;padding:24px;">
    <div style="max-width:680px;margin:0 auto;">

      <!-- Page heading -->
      <div style="margin-bottom:20px;">
        <div style="font-size:20px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
        <div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
      </div>

      <!-- Pill tabs -->
      <div style="display:flex;gap:8px;margin-bottom:20px;">
        <div style="padding:7px 18px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:999px;font-size:13px;font-weight:500;">💬 WhatsApp</div>
        <div style="padding:7px 18px;background:#111827;color:#fff;border-radius:999px;font-size:13px;font-weight:600;">✉️ Email</div>
      </div>

      <!-- Header row: title + Add button -->
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
        <div>
          <div style="font-size:15px;font-weight:600;color:#111827;">Mail Accounts</div>
          <div style="font-size:12px;color:#6b7280;">3 accounts configured</div>
        </div>
        <div style="padding:8px 16px;background:#111827;color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;">
          <span style="font-size:16px;line-height:1;">+</span> Add Account
        </div>
      </div>

      <!-- Account list -->
      <div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;">

        <!-- Account 1: Azure -->
        <div style="padding:16px 20px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f3f4f6;">
          <div style="width:36px;height:36px;background:#eff6ff;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;">✉️</div>
          <div style="flex:1;min-width:0;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">
              <span style="font-size:14px;font-weight:600;color:#111827;">customer-support</span>
              <span style="font-size:11px;font-weight:600;color:#2563eb;background:#eff6ff;padding:2px 8px;border-radius:999px;">Microsoft 365</span>
            </div>
            <div style="font-size:12px;color:#6b7280;">support@steelco.com</div>
          </div>
          <!-- Toggle: ON -->
          <div style="width:44px;height:24px;border-radius:12px;background:#22c55e;position:relative;cursor:pointer;flex-shrink:0;">
            <div style="position:absolute;top:2px;left:22px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);"></div>
          </div>
          <div style="display:flex;gap:8px;flex-shrink:0;">
            <button style="font-size:12px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:5px 10px;cursor:pointer;">Edit</button>
            <button style="font-size:12px;color:#dc2626;background:#fff5f5;border:1px solid #fecaca;border-radius:6px;padding:5px 10px;cursor:pointer;">Delete</button>
          </div>
        </div>

        <!-- Account 2: SMTP -->
        <div style="padding:16px 20px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f3f4f6;">
          <div style="width:36px;height:36px;background:#f0fdf4;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;">📧</div>
          <div style="flex:1;min-width:0;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">
              <span style="font-size:14px;font-weight:600;color:#111827;">invoices</span>
              <span style="font-size:11px;font-weight:600;color:#16a34a;background:#f0fdf4;padding:2px 8px;border-radius:999px;">SMTP</span>
            </div>
            <div style="font-size:12px;color:#6b7280;">invoices@steelco.com · smtp.gmail.com:587</div>
          </div>
          <!-- Toggle: ON -->
          <div style="width:44px;height:24px;border-radius:12px;background:#22c55e;position:relative;cursor:pointer;flex-shrink:0;">
            <div style="position:absolute;top:2px;left:22px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);"></div>
          </div>
          <div style="display:flex;gap:8px;flex-shrink:0;">
            <button style="font-size:12px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:5px 10px;cursor:pointer;">Edit</button>
            <button style="font-size:12px;color:#dc2626;background:#fff5f5;border:1px solid #fecaca;border-radius:6px;padding:5px 10px;cursor:pointer;">Delete</button>
          </div>
        </div>

        <!-- Account 3: SMTP disabled -->
        <div style="padding:16px 20px;display:flex;align-items:center;gap:14px;opacity:.6;">
          <div style="width:36px;height:36px;background:#f3f4f6;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;">📧</div>
          <div style="flex:1;min-width:0;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">
              <span style="font-size:14px;font-weight:600;color:#111827;">notifications</span>
              <span style="font-size:11px;font-weight:600;color:#16a34a;background:#f0fdf4;padding:2px 8px;border-radius:999px;">SMTP</span>
            </div>
            <div style="font-size:12px;color:#6b7280;">no-reply@steelco.com · mail.steelco.com:465</div>
          </div>
          <!-- Toggle: OFF -->
          <div style="width:44px;height:24px;border-radius:12px;background:#d1d5db;position:relative;cursor:pointer;flex-shrink:0;">
            <div style="position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);"></div>
          </div>
          <div style="display:flex;gap:8px;flex-shrink:0;">
            <button style="font-size:12px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:5px 10px;cursor:pointer;">Edit</button>
            <button style="font-size:12px;color:#dc2626;background:#fff5f5;border:1px solid #fecaca;border-radius:6px;padding:5px 10px;cursor:pointer;">Delete</button>
          </div>
        </div>

      </div>

      <!-- Empty state hint -->
      <div style="margin-top:10px;font-size:12px;color:#9ca3af;text-align:center;">
        Use account names in code: <code style="background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:11px;">Mail::mailer('customer-support')</code>
      </div>

    </div>
  </div>
</div>

<p class="subtitle" style="margin-top:16px;">This is the Email tab redesigned as a list. Click "Add Account" opens a modal (next screen). Does this list layout look right? Let me know in the terminal.</p>