switch to table

src/components/browser-data/AssociatedProfilesModal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import SortDropdown from "../SortDropdown.vue";
 import type {
   AssociatedProfileSortKey,
   AssociatedProfileSummary,
@@ -24,12 +23,9 @@ const emit = defineEmits<{
 }>();
 
 const sortKey = ref<AssociatedProfileSortKey>("id");
-
 const sortedProfiles = computed(() => sortAssociatedProfiles(props.profiles, sortKey.value));
 
-function hasBookmarkPath(
+function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedProfileSummary {
-  profile: ModalProfile,
-): profile is BookmarkAssociatedProfileSummary {
   return "bookmarkPath" in profile;
 }
 </script>
@@ -44,33 +40,40 @@ function hasBookmarkPath(
         </button>
       </div>
 
-      <div class="modal-toolbar">
+      <div class="modal-table">
-        <SortDropdown
+        <div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
-          v-model="sortKey"
+          <div class="header-cell icon-cell">Avatar</div>
-          label="Sort by"
+          <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button>
-          :options="[
+          <button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="sortKey = 'id'">Profile ID</button>
-            { label: 'Profile ID', value: 'id' },
+          <div v-if="isBookmark" class="header-cell">Bookmark Path</div>
-            { label: 'Name', value: 'name' },
+          <div class="header-cell actions-cell">Action</div>
-          ]"
+        </div>
-        />
-      </div>
 
-      <div class="modal-list">
+        <div class="modal-list">
-        <article v-for="profile in sortedProfiles" :key="profile.id" class="modal-profile-card">
+          <article
-          <div class="modal-profile-avatar">
+            v-for="profile in sortedProfiles"
-            <img
+            :key="profile.id"
-              v-if="profile.avatarDataUrl"
+            class="modal-table-row modal-grid"
-              :src="profile.avatarDataUrl"
+            :class="{ bookmark: isBookmark }"
-              :alt="`${profile.name} avatar`"
+          >
-            />
+            <div class="modal-profile-avatar">
-            <span v-else>{{ profile.avatarLabel }}</span>
+              <img v-if="profile.avatarDataUrl" :src="profile.avatarDataUrl" :alt="`${profile.name} avatar`" />
-          </div>
+              <span v-else>{{ profile.avatarLabel }}</span>
-          <div class="modal-profile-body">
+            </div>
-            <div class="modal-profile-topline">
+            <div class="row-cell primary-cell">
-              <div class="modal-profile-heading">
+              <strong>{{ profile.name }}</strong>
-                <h4>{{ profile.name }}</h4>
+            </div>
-                <span class="badge neutral">{{ profile.id }}</span>
+            <div class="row-cell">
-              </div>
+              <span class="badge neutral">{{ profile.id }}</span>
+            </div>
+            <div
+              v-if="isBookmark && hasBookmarkPath(profile)"
+              class="row-cell muted-cell"
+              :title="profile.bookmarkPath"
+            >
+              {{ profile.bookmarkPath }}
+            </div>
+            <div class="row-cell actions-cell">
               <button
                 class="card-action-button"
                 type="button"
@@ -80,11 +83,8 @@ function hasBookmarkPath(
                 {{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
               </button>
             </div>
-            <p v-if="isBookmark && hasBookmarkPath(profile)" class="modal-bookmark-path">
+          </article>
-              {{ profile.bookmarkPath }}
+        </div>
-            </p>
-          </div>
-        </article>
       </div>
     </section>
   </div>
@@ -104,7 +104,7 @@ function hasBookmarkPath(
 }
 
 .modal-card {
-  width: min(720px, 100%);
+  width: min(760px, 100%);
   max-height: min(78vh, 820px);
   display: flex;
   flex-direction: column;
@@ -123,46 +123,87 @@ function hasBookmarkPath(
   gap: 12px;
 }
 
-.modal-header h3,
+.modal-header h3 {
-.modal-profile-heading h4 {
   margin: 0;
   font-weight: 600;
   letter-spacing: -0.03em;
 }
 
+.modal-table {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 18px;
+  background: var(--panel-strong);
+  overflow: hidden;
+}
+
+.modal-grid {
+  display: grid;
+  grid-template-columns: 56px minmax(180px, 1fr) 132px 110px;
+  gap: 12px;
+  align-items: center;
+}
+
+.modal-grid.bookmark {
+  grid-template-columns: 56px minmax(140px, 0.9fr) 120px minmax(180px, 1fr) 110px;
+}
+
+.modal-table-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(248, 250, 252, 0.82);
+}
+
+.header-cell {
+  color: var(--muted);
+  font-size: 0.77rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.header-cell.sortable {
+  padding: 0;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+
+.header-cell.sortable.active {
+  color: var(--text);
+}
+
 .modal-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
   min-height: 0;
   overflow: auto;
-  padding-right: 4px;
 }
 
-.modal-toolbar {
+.modal-table-row {
-  display: flex;
+  padding: 12px 14px;
-  justify-content: flex-end;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
 }
 
-.modal-profile-card {
+.modal-table-row:last-child {
-  display: flex;
+  border-bottom: 0;
-  gap: 12px;
+}
-  padding: 12px;
+
-  border: 1px solid rgba(148, 163, 184, 0.18);
+.modal-table-row:hover {
-  border-radius: 16px;
+  background: rgba(248, 250, 252, 0.65);
-  background: var(--panel-strong);
 }
 
 .modal-profile-avatar {
   display: grid;
   place-items: center;
   flex-shrink: 0;
-  width: 46px;
+  width: 36px;
-  height: 46px;
+  height: 36px;
-  border-radius: 14px;
+  border-radius: 12px;
   background: linear-gradient(135deg, #dbeafe, #eff6ff);
   color: #1d4ed8;
-  font-size: 1rem;
+  font-size: 0.96rem;
   font-weight: 700;
   overflow: hidden;
 }
@@ -173,29 +214,31 @@ function hasBookmarkPath(
   object-fit: cover;
 }
 
-.modal-profile-body {
+.row-cell {
-  min-width: 0;
-  flex: 1;
-}
-
-.modal-profile-topline {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.modal-profile-heading {
-  display: flex;
-  align-items: center;
-  gap: 8px;
   min-width: 0;
 }
 
-.modal-bookmark-path {
+.primary-cell strong {
-  margin: 8px 0 0;
+  display: block;
+  font-size: 0.93rem;
+  line-height: 1.3;
+}
+
+.muted-cell {
   color: var(--muted);
   font-size: 0.86rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.actions-cell {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.icon-cell {
+  padding-left: 4px;
 }
 
 @media (max-width: 720px) {
@@ -203,10 +246,14 @@ function hasBookmarkPath(
     padding: 12px;
   }
 
-  .modal-profile-card,
+  .modal-grid,
-  .modal-profile-topline,
+  .modal-grid.bookmark {
-  .modal-profile-heading {
+    grid-template-columns: 56px minmax(0, 1fr) 96px;
-    flex-direction: column;
+  }
+
+  .modal-grid > :nth-child(4),
+  .modal-grid.bookmark > :nth-child(4) {
+    display: none;
   }
 }
 </style>

src/components/browser-data/BookmarksList.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import SortDropdown from "../SortDropdown.vue";
 import type { BookmarkSortKey, BookmarkSummary } from "../../types/browser";
 
 defineProps<{
   bookmarks: BookmarkSummary[];
   sortKey: BookmarkSortKey;
-  domainFromUrl: (url: string) => string;
 }>();
 
 const emit = defineEmits<{
@@ -16,36 +14,23 @@ const emit = defineEmits<{
 
 <template>
   <section class="content-section">
-    <div class="sort-bar">
+    <div v-if="bookmarks.length" class="data-table">
-      <SortDropdown
+      <div class="data-table-header bookmarks-grid">
-        :model-value="sortKey"
+        <button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button>
-        label="Sort by"
+        <button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button>
-        :options="[
+        <div class="header-cell actions-cell">Profiles</div>
-          { label: 'Name', value: 'title' },
+      </div>
-          { label: 'URL', value: 'url' },
-        ]"
-        @update:model-value="emit('update:sortKey', $event as BookmarkSortKey)"
-      />
-    </div>
 
-    <div v-if="bookmarks.length" class="bookmark-list">
+      <article v-for="bookmark in bookmarks" :key="bookmark.url" class="data-table-row bookmarks-grid">
-      <article v-for="bookmark in bookmarks" :key="bookmark.url" class="bookmark-card">
+        <div class="row-cell primary-cell">
-        <div class="bookmark-body">
+          <strong>{{ bookmark.title }}</strong>
-          <div class="bookmark-topline">
+        </div>
-            <h4>{{ bookmark.title }}</h4>
+        <div class="row-cell muted-cell" :title="bookmark.url">{{ bookmark.url }}</div>
-            <span class="badge neutral">{{ domainFromUrl(bookmark.url) }}</span>
+        <div class="row-cell actions-cell">
-          </div>
+          <button class="disclosure-button" type="button" @click="emit('showProfiles', bookmark.url)">
-          <p class="bookmark-url" :title="bookmark.url">{{ bookmark.url }}</p>
+            <span>View</span>
-          <div class="source-disclosure">
+            <span class="badge neutral">{{ bookmark.profileIds.length }}</span>
-            <button
+          </button>
-              class="disclosure-button"
-              type="button"
-              @click="emit('showProfiles', bookmark.url)"
-            >
-              <span>View Profiles</span>
-              <span class="badge neutral">{{ bookmark.profileIds.length }}</span>
-            </button>
-          </div>
         </div>
       </article>
     </div>
@@ -56,37 +41,70 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.bookmark-card {
+.data-table {
   display: flex;
-  gap: 12px;
+  flex-direction: column;
-  border-radius: 18px;
-  padding: 14px;
   border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 18px;
   background: var(--panel-strong);
+  overflow: hidden;
 }
 
-.bookmark-body {
+.bookmarks-grid {
-  min-width: 0;
+  display: grid;
-  flex: 1;
+  grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 1.2fr) 154px;
-}
-
-.bookmark-topline {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
   gap: 12px;
+  align-items: center;
 }
 
-.bookmark-topline h4 {
+.data-table-header {
-  margin: 0;
+  padding: 10px 14px;
-  font-size: 0.96rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
-  line-height: 1.35;
+  background: rgba(248, 250, 252, 0.82);
-  font-weight: 600;
-  letter-spacing: -0.03em;
 }
 
-.bookmark-url {
+.header-cell {
-  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.77rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.header-cell.sortable {
+  padding: 0;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+
+.header-cell.sortable.active {
+  color: var(--text);
+}
+
+.data-table-row {
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
+}
+
+.data-table-row:last-child {
+  border-bottom: 0;
+}
+
+.data-table-row:hover {
+  background: rgba(248, 250, 252, 0.65);
+}
+
+.row-cell {
+  min-width: 0;
+}
+
+.primary-cell strong {
+  display: block;
+  font-size: 0.93rem;
+  line-height: 1.3;
+}
+
+.muted-cell {
   color: var(--muted);
   font-size: 0.87rem;
   overflow: hidden;
@@ -94,10 +112,6 @@ const emit = defineEmits<{
   white-space: nowrap;
 }
 
-.source-disclosure {
-  margin-top: 10px;
-}
-
 .disclosure-button {
   display: flex;
   align-items: center;
@@ -112,9 +126,24 @@ const emit = defineEmits<{
   cursor: pointer;
 }
 
+.actions-cell {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 900px) {
+  .bookmarks-grid {
+    grid-template-columns: minmax(160px, 0.9fr) minmax(200px, 1fr) 148px;
+  }
+}
+
 @media (max-width: 720px) {
-  .bookmark-card {
+  .bookmarks-grid {
-    flex-direction: column;
+    grid-template-columns: minmax(0, 1fr) 132px;
+  }
+
+  .bookmarks-grid > :nth-child(2) {
+    display: none;
   }
 }
 </style>

src/components/browser-data/BrowserDataView.vue

@@ -103,7 +103,6 @@ const emit = defineEmits<{
       v-else
       :bookmarks="sortedBookmarks"
       :sort-key="bookmarkSortKey"
-      :domain-from-url="domainFromUrl"
       @update:sort-key="emit('update:bookmarkSortKey', $event)"
       @show-profiles="emit('showBookmarkProfiles', $event)"
     />

src/components/browser-data/ExtensionsList.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import SortDropdown from "../SortDropdown.vue";
 import type { ExtensionSortKey, ExtensionSummary } from "../../types/browser";
 
 defineProps<{
@@ -16,50 +15,33 @@ const emit = defineEmits<{
 
 <template>
   <section class="content-section">
-    <div class="sort-bar">
+    <div v-if="extensions.length" class="data-table">
-      <SortDropdown
+      <div class="data-table-header extensions-grid">
-        :model-value="sortKey"
+        <div class="header-cell icon-cell">Icon</div>
-        label="Sort by"
+        <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
-        :options="[
+        <button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Extension ID</button>
-          { label: 'Name', value: 'name' },
+        <div class="header-cell">Version</div>
-          { label: 'Extension ID', value: 'id' },
+        <div class="header-cell actions-cell">Profiles</div>
-        ]"
+      </div>
-        @update:model-value="emit('update:sortKey', $event as ExtensionSortKey)"
-      />
-    </div>
 
-    <div v-if="extensions.length" class="stack-list">
+      <article v-for="extension in extensions" :key="extension.id" class="data-table-row extensions-grid">
-      <article
+        <div class="extension-icon table-icon">
-        v-for="extension in extensions"
+          <img v-if="extension.iconDataUrl" :src="extension.iconDataUrl" :alt="`${extension.name} icon`" />
-        :key="extension.id"
-        class="extension-card"
-      >
-        <div class="extension-icon">
-          <img
-            v-if="extension.iconDataUrl"
-            :src="extension.iconDataUrl"
-            :alt="`${extension.name} icon`"
-          />
           <span v-else>{{ extensionMonogram(extension.name) }}</span>
         </div>
-        <div class="extension-body">
+        <div class="row-cell primary-cell">
-          <div class="extension-topline">
+          <strong>{{ extension.name }}</strong>
-            <h4>{{ extension.name }}</h4>
+        </div>
-            <span v-if="extension.version" class="badge neutral">
+        <div class="row-cell muted-cell" :title="extension.id">{{ extension.id }}</div>
-              v{{ extension.version }}
+        <div class="row-cell">
-            </span>
+          <span v-if="extension.version" class="badge neutral">v{{ extension.version }}</span>
-          </div>
+          <span v-else class="muted-cell">-</span>
-          <p class="meta-line">{{ extension.id }}</p>
+        </div>
-          <div class="source-disclosure">
+        <div class="row-cell actions-cell">
-            <button
+          <button class="disclosure-button" type="button" @click="emit('showProfiles', extension.id)">
-              class="disclosure-button"
+            <span>View</span>
-              type="button"
+            <span class="badge neutral">{{ extension.profileIds.length }}</span>
-              @click="emit('showProfiles', extension.id)"
+          </button>
-            >
-              <span>View Profiles</span>
-              <span class="badge neutral">{{ extension.profileIds.length }}</span>
-            </button>
-          </div>
         </div>
       </article>
     </div>
@@ -70,56 +52,92 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.extension-card {
+.data-table {
   display: flex;
-  gap: 12px;
+  flex-direction: column;
-  border-radius: 18px;
-  padding: 14px;
   border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 18px;
   background: var(--panel-strong);
+  overflow: hidden;
+}
+
+.extensions-grid {
+  display: grid;
+  grid-template-columns: 60px minmax(180px, 1.1fr) minmax(220px, 1fr) 108px 154px;
+  gap: 12px;
+  align-items: center;
+}
+
+.data-table-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(248, 250, 252, 0.82);
+}
+
+.header-cell {
+  color: var(--muted);
+  font-size: 0.77rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.header-cell.sortable {
+  padding: 0;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+
+.header-cell.sortable.active {
+  color: var(--text);
+}
+
+.data-table-row {
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
+}
+
+.data-table-row:last-child {
+  border-bottom: 0;
+}
+
+.data-table-row:hover {
+  background: rgba(248, 250, 252, 0.65);
 }
 
 .extension-icon {
   display: grid;
   place-items: center;
   flex-shrink: 0;
-  width: 46px;
-  height: 46px;
-  border-radius: 14px;
   background: linear-gradient(135deg, #e2e8f0, #f8fafc);
   color: #475569;
   font-weight: 700;
   overflow: hidden;
 }
 
+.table-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+}
+
 .extension-icon img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.extension-body {
+.row-cell {
   min-width: 0;
-  flex: 1;
 }
 
-.extension-topline {
+.primary-cell strong {
-  display: flex;
+  display: block;
-  align-items: flex-start;
+  font-size: 0.93rem;
-  justify-content: space-between;
+  line-height: 1.3;
-  gap: 12px;
 }
 
-.extension-topline h4 {
+.muted-cell {
-  margin: 0;
-  font-size: 0.96rem;
-  line-height: 1.35;
-  font-weight: 600;
-  letter-spacing: -0.03em;
-}
-
-.meta-line {
-  margin: 6px 0 0;
   color: var(--muted);
   font-size: 0.87rem;
   overflow: hidden;
@@ -127,10 +145,6 @@ const emit = defineEmits<{
   white-space: nowrap;
 }
 
-.source-disclosure {
-  margin-top: 10px;
-}
-
 .disclosure-button {
   display: flex;
   align-items: center;
@@ -145,14 +159,29 @@ const emit = defineEmits<{
   cursor: pointer;
 }
 
+.actions-cell {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.icon-cell {
+  padding-left: 4px;
+}
+
+@media (max-width: 900px) {
+  .extensions-grid {
+    grid-template-columns: 56px minmax(160px, 1fr) minmax(160px, 1fr) 96px 148px;
+  }
+}
+
 @media (max-width: 720px) {
-  .extension-card {
+  .extensions-grid {
-    flex-direction: column;
+    grid-template-columns: 56px minmax(0, 1fr) 132px;
   }
 
-  .extension-icon {
+  .extensions-grid > :nth-child(3),
-    width: 50px;
+  .extensions-grid > :nth-child(4) {
-    height: 50px;
+    display: none;
   }
 }
 </style>

src/components/browser-data/ProfilesList.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import SortDropdown from "../SortDropdown.vue";
 import type { ProfileSortKey, ProfileSummary } from "../../types/browser";
 
 defineProps<{
@@ -22,45 +21,38 @@ const emit = defineEmits<{
       {{ openProfileError }}
     </div>
 
-    <div class="sort-bar">
+    <div v-if="profiles.length" class="data-table">
-      <SortDropdown
+      <div class="data-table-header profiles-grid">
-        :model-value="sortKey"
+        <div class="header-cell icon-cell">Avatar</div>
-        label="Sort by"
+        <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
-        :options="[
+        <button class="header-cell sortable" :class="{ active: sortKey === 'email' }" type="button" @click="emit('update:sortKey', 'email')">Email</button>
-          { label: 'Name', value: 'name' },
+        <button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Profile ID</button>
-          { label: 'Email', value: 'email' },
+        <div class="header-cell actions-cell">Action</div>
-          { label: 'Profile ID', value: 'id' },
+      </div>
-        ]"
-        @update:model-value="emit('update:sortKey', $event as ProfileSortKey)"
-      />
-    </div>
 
-    <div v-if="profiles.length" class="stack-list">
+      <article v-for="profile in profiles" :key="profile.id" class="data-table-row profiles-grid">
-      <article v-for="profile in profiles" :key="profile.id" class="profile-card">
+        <div class="profile-avatar table-avatar">
-        <div class="profile-avatar">
+          <img v-if="profile.avatarDataUrl" :src="profile.avatarDataUrl" :alt="`${profile.name} avatar`" />
-          <img
-            v-if="profile.avatarDataUrl"
-            :src="profile.avatarDataUrl"
-            :alt="`${profile.name} avatar`"
-          />
           <span v-else>{{ profile.avatarLabel }}</span>
         </div>
-        <div class="profile-body">
+        <div class="row-cell primary-cell">
-          <div class="profile-topline">
+          <strong>{{ profile.name }}</strong>
-            <h4>{{ profile.name }}</h4>
+        </div>
-            <div class="profile-actions">
+        <div class="row-cell muted-cell" :title="profile.email ?? undefined">
-              <button
+          {{ profile.email || "" }}
-                class="card-action-button"
+        </div>
-                :disabled="isOpeningProfile(browserId, profile.id)"
+        <div class="row-cell">
-                type="button"
+          <span class="badge neutral">{{ profile.id }}</span>
-                @click="emit('openProfile', browserId, profile.id)"
+        </div>
-              >
+        <div class="row-cell actions-cell">
-                {{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
+          <button
-              </button>
+            class="card-action-button"
-              <span class="badge neutral">{{ profile.id }}</span>
+            :disabled="isOpeningProfile(browserId, profile.id)"
-            </div>
+            type="button"
-          </div>
+            @click="emit('openProfile', browserId, profile.id)"
-          <p class="profile-email">{{ profile.email || "No email found" }}</p>
+          >
+            {{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
+          </button>
         </div>
       </article>
     </div>
@@ -71,78 +63,123 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.profile-card {
+.data-table {
   display: flex;
-  gap: 12px;
+  flex-direction: column;
-  border-radius: 18px;
-  padding: 14px;
   border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 18px;
   background: var(--panel-strong);
+  overflow: hidden;
+}
+
+.profiles-grid {
+  display: grid;
+  grid-template-columns: 64px minmax(180px, 1.2fr) minmax(180px, 1fr) 132px 110px;
+  gap: 12px;
+  align-items: center;
+}
+
+.data-table-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(248, 250, 252, 0.82);
+}
+
+.header-cell {
+  color: var(--muted);
+  font-size: 0.77rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.header-cell.sortable {
+  padding: 0;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+
+.header-cell.sortable.active {
+  color: var(--text);
+}
+
+.data-table-row {
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
+}
+
+.data-table-row:last-child {
+  border-bottom: 0;
+}
+
+.data-table-row:hover {
+  background: rgba(248, 250, 252, 0.65);
 }
 
 .profile-avatar {
   display: grid;
   place-items: center;
   flex-shrink: 0;
-  width: 52px;
-  height: 52px;
-  border-radius: 15px;
   background: linear-gradient(135deg, #dbeafe, #eff6ff);
   color: #1d4ed8;
-  font-size: 1.1rem;
+  font-size: 0.96rem;
   font-weight: 700;
   overflow: hidden;
 }
 
+.table-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+}
+
 .profile-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.profile-body {
+.row-cell {
   min-width: 0;
-  flex: 1;
 }
 
-.profile-topline {
+.primary-cell strong {
-  display: flex;
+  display: block;
-  align-items: flex-start;
+  font-size: 0.93rem;
-  justify-content: space-between;
+  line-height: 1.3;
-  gap: 12px;
 }
 
-.profile-topline h4 {
+.muted-cell {
-  margin: 0;
-  font-size: 0.96rem;
-  line-height: 1.35;
-  font-weight: 600;
-  letter-spacing: -0.03em;
-}
-
-.profile-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.profile-email {
-  margin: 6px 0 0;
   color: var(--muted);
-  font-size: 0.87rem;
+  font-size: 0.86rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.actions-cell {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.icon-cell {
+  padding-left: 4px;
+}
+
+@media (max-width: 900px) {
+  .profiles-grid {
+    grid-template-columns: 56px minmax(140px, 1fr) minmax(140px, 1fr) 110px 96px;
+  }
+}
+
 @media (max-width: 720px) {
-  .profile-card {
+  .profiles-grid {
-    flex-direction: column;
+    grid-template-columns: 56px minmax(0, 1fr) 96px;
   }
 
-  .profile-avatar {
+  .profiles-grid > :nth-child(3),
-    width: 50px;
+  .profiles-grid > :nth-child(4) {
-    height: 50px;
+    display: none;
   }
 }
 </style>