switch to table

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">
-      <SortDropdown
-        :model-value="sortKey"
-        label="Sort by"
-        :options="[
-          { label: 'Name', value: 'title' },
-          { label: 'URL', value: 'url' },
-        ]"
-        @update:model-value="emit('update:sortKey', $event as BookmarkSortKey)"
-      />
-    </div>
+    <div v-if="bookmarks.length" class="data-table">
+      <div class="data-table-header bookmarks-grid">
+        <button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button>
+        <button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button>
+        <div class="header-cell actions-cell">Profiles</div>
+      </div>
 
-    <div v-if="bookmarks.length" class="bookmark-list">
-      <article v-for="bookmark in bookmarks" :key="bookmark.url" class="bookmark-card">
-        <div class="bookmark-body">
-          <div class="bookmark-topline">
-            <h4>{{ bookmark.title }}</h4>
-            <span class="badge neutral">{{ domainFromUrl(bookmark.url) }}</span>
-          </div>
-          <p class="bookmark-url" :title="bookmark.url">{{ bookmark.url }}</p>
-          <div class="source-disclosure">
-            <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>
+      <article v-for="bookmark in bookmarks" :key="bookmark.url" class="data-table-row bookmarks-grid">
+        <div class="row-cell primary-cell">
+          <strong>{{ bookmark.title }}</strong>
+        </div>
+        <div class="row-cell muted-cell" :title="bookmark.url">{{ bookmark.url }}</div>
+        <div class="row-cell actions-cell">
+          <button class="disclosure-button" type="button" @click="emit('showProfiles', bookmark.url)">
+            <span>View</span>
+            <span class="badge neutral">{{ bookmark.profileIds.length }}</span>
+          </button>
         </div>
       </article>
     </div>
@@ -56,37 +41,70 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.bookmark-card {
+.data-table {
   display: flex;
-  gap: 12px;
-  border-radius: 18px;
-  padding: 14px;
+  flex-direction: column;
   border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 18px;
   background: var(--panel-strong);
+  overflow: hidden;
 }
 
-.bookmark-body {
-  min-width: 0;
-  flex: 1;
-}
-
-.bookmark-topline {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+.bookmarks-grid {
+  display: grid;
+  grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 1.2fr) 154px;
   gap: 12px;
+  align-items: center;
 }
 
-.bookmark-topline h4 {
-  margin: 0;
-  font-size: 0.96rem;
-  line-height: 1.35;
-  font-weight: 600;
-  letter-spacing: -0.03em;
+.data-table-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(248, 250, 252, 0.82);
 }
 
-.bookmark-url {
-  margin: 6px 0 0;
+.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);
+}
+
+.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 {
-    flex-direction: column;
+  .bookmarks-grid {
+    grid-template-columns: minmax(0, 1fr) 132px;
+  }
+
+  .bookmarks-grid > :nth-child(2) {
+    display: none;
   }
 }
 </style>