Navigation

Active is white on the grey rail with a small shadow, which reads as a raised tab rather than a highlight. Inactive is grey text with a white hover.

class="mb-3 block rounded px-2 py-1.5 text-sm font-medium transition-colors
  {isActive ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:bg-white hover:text-gray-900'}"

The copy-invite button is invisible until the row is hovered: opacity-0 with group-hover:opacity-100. A discoverability trade — it keeps the rail quiet, and a first-time user will not know the button is there.

<li class="group flex items-center gap-0.5">
  <a class="block min-w-0 flex-1 truncate rounded px-2 py-1 text-sm …">{name}</a>
  <button class="shrink-0 rounded px-1.5 py-0.5 text-xs text-gray-400 opacity-0
    transition-opacity group-hover:opacity-100 hover:bg-white hover:text-blue-600">⎘</button>
</li>

Folder tabs: a border on three sides with border-b-0, so the active tab merges into the panel beneath it. Active is gray-50 with a visible border; inactive is transparent.

class="rounded-t border border-b-0 px-3 py-2 text-sm font-medium transition-colors
  {active ? 'border-gray-200 bg-gray-50 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-800'}"

A native details/summary, the app's only collapsible. The summary carries a live count.

<details class="mt-3 rounded border border-gray-200 bg-gray-50">
  <summary class="cursor-pointer select-none px-3 py-2 text-xs font-medium text-gray-600 hover:text-gray-900">
    Lifecycle history · 6 transitions
  </summary>
  <div class="border-t border-gray-200 px-3 py-2">…</div>
</details>