Mail Base

<section class="ws-mail flex h-[600px] overflow-hidden rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)]">
  <!-- Sidebar -->
  <aside class="w-56 shrink-0 border-r border-slate-200 bg-slate-50 p-4">
    <button class="mb-4 w-full rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-800">Compose</button> <!-- ws-ok: CTA button -->
    <nav>
      <ul class="space-y-1">
        <li><a href="#" class="flex items-center justify-between rounded-lg bg-slate-200/60 px-3 py-2 text-sm font-medium text-slate-900">
          <span class="flex items-center gap-2">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/></svg>
            Inbox
          </span>
          <span class="rounded-full bg-blue-500 px-2 py-0.5 text-xs font-bold text-white">12</span>
        </a></li>
        <li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
          Starred
        </a></li>
        <li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
          Sent
        </a></li>
        <li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
          Trash
        </a></li>
      </ul>
    </nav>
    <div class="mt-6">
      <h3 class="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-slate-400">Labels</h3>
      <ul class="space-y-1">
        <li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100"><span class="h-2 w-2 rounded-full bg-emerald-500"></span> Personal</a></li>
        <li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100"><span class="h-2 w-2 rounded-full bg-blue-500"></span> Work</a></li>
        <li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100"><span class="h-2 w-2 rounded-full bg-amber-500"></span> Promotions</a></li>
      </ul>
    </div>
  </aside>

  <!-- Mail list -->
  <div class="flex-1 overflow-y-auto">
    <div class="border-b border-slate-200 px-4 py-3">
      <div class="flex items-center gap-3">
        <input type="checkbox" class="rounded border-slate-300">
        <div class="relative flex-1">
          <input type="text" placeholder="Search mail..." class="w-full rounded-lg border-0 bg-slate-100 px-3 py-1.5 text-sm placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500">
        </div>
      </div>
    </div>

    <ul class="divide-y divide-slate-100">
      <li class="flex cursor-pointer items-start gap-3 bg-blue-50/50 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800">
        <input type="checkbox" class="mt-1 rounded border-slate-300">
        <div class="h-8 w-8 shrink-0 rounded-full bg-blue-200"></div>
        <div class="min-w-0 flex-1">
          <div class="flex items-center justify-between">
            <span class="text-sm font-semibold text-slate-900">Design Team</span>
            <time class="text-xs text-slate-400">10:42 AM</time>
          </div>
          <p class="truncate text-sm font-medium text-slate-700">New component library ready for review</p>
          <p class="truncate text-xs text-slate-500">Hi team, the updated library is now available in Figma. Please review...</p>
        </div>
        <span class="mt-1 rounded-full bg-blue-100 px-1.5 py-0.5 text-[10px] font-medium text-blue-600">Work</span>
      </li>
      <li class="flex cursor-pointer items-start gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800">
        <input type="checkbox" class="mt-1 rounded border-slate-300">
        <div class="h-8 w-8 shrink-0 rounded-full bg-emerald-200"></div>
        <div class="min-w-0 flex-1">
          <div class="flex items-center justify-between">
            <span class="text-sm font-semibold text-slate-900">Sarah Chen</span>
            <time class="text-xs text-slate-400">9:15 AM</time>
          </div>
          <p class="truncate text-sm text-slate-600">Re: Sprint retrospective notes</p>
          <p class="truncate text-xs text-slate-500">Thanks for sharing! I've added a few comments on the action items...</p>
        </div>
      </li>
      <li class="flex cursor-pointer items-start gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800">
        <input type="checkbox" class="mt-1 rounded border-slate-300">
        <div class="h-8 w-8 shrink-0 rounded-full bg-amber-200"></div>
        <div class="min-w-0 flex-1">
          <div class="flex items-center justify-between">
            <span class="text-sm text-slate-700">Newsletter Weekly</span>
            <time class="text-xs text-slate-400">Yesterday</time>
          </div>
          <p class="truncate text-sm text-slate-600">Your weekly design digest</p>
          <p class="truncate text-xs text-slate-500">Top trending patterns, new CSS tricks, and community highlights...</p>
        </div>
        <span class="mt-1 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-600">Promo</span>
      </li>
      <li class="flex cursor-pointer items-start gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800">
        <input type="checkbox" class="mt-1 rounded border-slate-300">
        <div class="h-8 w-8 shrink-0 rounded-full bg-purple-200"></div>
        <div class="min-w-0 flex-1">
          <div class="flex items-center justify-between">
            <span class="text-sm text-slate-700">Alex Rivera</span>
            <time class="text-xs text-slate-400">Yesterday</time>
          </div>
          <p class="truncate text-sm text-slate-600">Meeting notes from client call</p>
          <p class="truncate text-xs text-slate-500">Attached are the notes from today's call with the client regarding...</p>
        </div>
      </li>
    </ul>
  </div>
</section>