File Manager Base

<section class="ws-file-manager flex h-[500px] overflow-hidden rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)]">
  <!-- Sidebar -->
  <aside class="w-52 shrink-0 border-r border-slate-200 bg-slate-50 p-4">
    <nav>
      <ul class="space-y-1">
        <li><a href="#" class="flex items-center gap-2 rounded-lg bg-slate-200/60 px-3 py-2 text-sm font-medium text-slate-900">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
          My Files
        </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>
          Favourites
        </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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          Shared
        </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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          Recent
        </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>

    <!-- Storage gauge -->
    <div class="mt-6 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-3">
      <p class="text-xs font-medium text-slate-500">Storage</p>
      <div class="mt-2 h-1.5 rounded-full bg-slate-100">
        <div class="h-1.5 w-[68%] rounded-full bg-blue-500"></div>
      </div>
      <p class="mt-1.5 text-xs text-slate-400"><span class="font-medium text-slate-700">6.8 GB</span> of 10 GB</p>
    </div>
  </aside>

  <!-- File area -->
  <div class="flex-1 overflow-y-auto p-5">
    <div class="mb-4 flex items-center justify-between">
      <h2 class="text-lg font-semibold text-slate-900">My Files</h2>
      <button class="rounded-lg bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-800">Upload</button><!-- ws-ok -->
    </div>

    <!-- Folders -->
    <h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-400">Folders</h3>
    <div class="mb-6 grid grid-cols-2 gap-3 lg:grid-cols-3">
      <div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3 hover:border-blue-300 hover:bg-blue-50/50 dark:hover:border-blue-600">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
          <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
        </div>
        <div>
          <p class="text-sm font-medium text-slate-900">Documents</p>
          <p class="text-xs text-slate-400">48 files</p>
        </div>
      </div>
      <div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3 hover:border-emerald-300 hover:bg-emerald-50/50 dark:hover:border-emerald-600">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100">
          <svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
        </div>
        <div>
          <p class="text-sm font-medium text-slate-900">Images</p>
          <p class="text-xs text-slate-400">124 files</p>
        </div>
      </div>
      <div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3 hover:border-amber-300 hover:bg-amber-50/50 dark:hover:border-amber-600">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100">
          <svg class="h-5 w-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
        </div>
        <div>
          <p class="text-sm font-medium text-slate-900">Videos</p>
          <p class="text-xs text-slate-400">12 files</p>
        </div>
      </div>
    </div>

    <!-- Files -->
    <h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-400">Recent Files</h3>
    <table class="w-full text-left text-sm">
      <thead>
        <tr class="border-b border-slate-100">
          <th class="pb-2 font-medium text-slate-400">Name</th>
          <th class="pb-2 font-medium text-slate-400">Size</th>
          <th class="pb-2 font-medium text-slate-400">Modified</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-50">
        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
          <td class="flex items-center gap-2 py-2.5"><span class="text-blue-500">📄</span> <span class="text-slate-900">proposal-v3.pdf</span></td>
          <td class="py-2.5 text-slate-500">2.4 MB</td>
          <td class="py-2.5 text-slate-500">Today</td>
        </tr>
        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
          <td class="flex items-center gap-2 py-2.5"><span class="text-emerald-500">📊</span> <span class="text-slate-900">q1-report.xlsx</span></td>
          <td class="py-2.5 text-slate-500">840 KB</td>
          <td class="py-2.5 text-slate-500">Yesterday</td>
        </tr>
        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
          <td class="flex items-center gap-2 py-2.5"><span class="text-purple-500">🎨</span> <span class="text-slate-900">brand-assets.fig</span></td>
          <td class="py-2.5 text-slate-500">18 MB</td>
          <td class="py-2.5 text-slate-500">Mar 19</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>