fix table header ui

2026-04-17 16:49:20 -04:00
parent 5f835731fc
commit 3478c44860
4 changed files with 112 additions and 113 deletions
--- a/src/components/browser-data/AssociatedProfilesModal.vue
+++ b/src/components/browser-data/AssociatedProfilesModal.vue
@@ -68,33 +68,33 @@ function isSelected(profileId: string) {
        </button>
      </div>

-      <div v-if="isSelectableMode" class="modal-toolbar">
-        <label class="toolbar-checkbox" :class="{ disabled: !sortedProfiles.length }">
-          <input
-            type="checkbox"
-            class="native-checkbox"
-            :checked="allSelected"
-            :disabled="!sortedProfiles.length || deleteBusy"
-            @change="emit('toggleAllProfileSelection')"
-          />
-          <span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
-            <svg viewBox="0 0 16 16">
-              <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
-            </svg>
-          </span>
-          <span>Select All</span>
-        </label>
-        <button
-          class="danger-button"
-          type="button"
-          :disabled="!selectedProfileIds.length || deleteBusy"
-          @click="emit('deleteSelectedProfiles')"
-        >
-          {{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedProfileIds.length})` }}
-        </button>
-      </div>
-
      <div class="modal-table">
+        <div v-if="isSelectableMode" class="modal-toolbar">
+          <label class="toolbar-checkbox" :class="{ disabled: !sortedProfiles.length }">
+            <input
+              type="checkbox"
+              class="native-checkbox"
+              :checked="allSelected"
+              :disabled="!sortedProfiles.length || deleteBusy"
+              @change="emit('toggleAllProfileSelection')"
+            />
+            <span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
+              <svg viewBox="0 0 16 16">
+                <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
+              </svg>
+            </span>
+            <span>Select All</span>
+          </label>
+          <button
+            class="danger-button"
+            type="button"
+            :disabled="!selectedProfileIds.length || deleteBusy"
+            @click="emit('deleteSelectedProfiles')"
+          >
+            {{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedProfileIds.length})` }}
+          </button>
+        </div>
+
        <div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark, extension: isExtension }">
          <div v-if="isSelectableMode" class="header-cell checkbox-cell">Pick</div>
          <div class="header-cell icon-cell">Avatar</div>
@@ -256,6 +256,8 @@ function isSelected(profileId: string) {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
 }

 .modal-table-header {
--- a/src/components/browser-data/BookmarksList.vue
+++ b/src/components/browser-data/BookmarksList.vue
@@ -32,33 +32,33 @@ function isSelected(url: string) {

 <template>
  <section class="table-section">
-    <div class="bookmarks-toolbar">
-      <label class="toolbar-checkbox" :class="{ disabled: !bookmarks.length }">
-        <input
-          type="checkbox"
-          class="native-checkbox"
-          :checked="allSelected"
-          :disabled="!bookmarks.length || deleteBusy"
-          @change="emit('toggleAllBookmarks')"
-        />
-        <span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
-          <svg viewBox="0 0 16 16">
-            <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
-          </svg>
-        </span>
-        <span>Select All</span>
-      </label>
-      <button
-        class="danger-button"
-        type="button"
-        :disabled="!selectedBookmarkUrls.length || deleteBusy"
-        @click="emit('deleteSelected')"
-      >
-        {{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedBookmarkUrls.length})` }}
-      </button>
-    </div>
-
    <div v-if="bookmarks.length" class="data-table">
+      <div class="bookmarks-toolbar">
+        <label class="toolbar-checkbox" :class="{ disabled: !bookmarks.length }">
+          <input
+            type="checkbox"
+            class="native-checkbox"
+            :checked="allSelected"
+            :disabled="!bookmarks.length || deleteBusy"
+            @change="emit('toggleAllBookmarks')"
+          />
+          <span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
+            <svg viewBox="0 0 16 16">
+              <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
+            </svg>
+          </span>
+          <span>Select All</span>
+        </label>
+        <button
+          class="danger-button"
+          type="button"
+          :disabled="!selectedBookmarkUrls.length || deleteBusy"
+          @click="emit('deleteSelected')"
+        >
+          {{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedBookmarkUrls.length})` }}
+        </button>
+      </div>
+
      <div class="data-table-header bookmarks-grid">
        <div class="header-cell checkbox-cell">Pick</div>
        <button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button>
@@ -112,9 +112,6 @@ function isSelected(url: string) {

 <style scoped>
 .table-section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
  padding: 0;
  height: 100%;
  min-height: 0;
@@ -125,6 +122,8 @@ function isSelected(url: string) {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
 }

 .data-table {
--- a/src/components/browser-data/ExtensionsList.vue
+++ b/src/components/browser-data/ExtensionsList.vue
@@ -32,33 +32,33 @@ function isSelected(extensionId: string) {

 <template>
  <section class="table-section">
-    <div class="extensions-toolbar">
-      <label class="toolbar-checkbox" :class="{ disabled: !extensions.length }">
-        <input
-          type="checkbox"
-          class="native-checkbox"
-          :checked="allSelected"
-          :disabled="!extensions.length || deleteBusy"
-          @change="emit('toggleAllExtensions')"
-        />
-        <span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
-          <svg viewBox="0 0 16 16">
-            <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
-          </svg>
-        </span>
-        <span>Select All</span>
-      </label>
-      <button
-        class="danger-button"
-        type="button"
-        :disabled="!selectedExtensionIds.length || deleteBusy"
-        @click="emit('deleteSelected')"
-      >
-        {{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedExtensionIds.length})` }}
-      </button>
-    </div>
-
    <div v-if="extensions.length" class="data-table">
+      <div class="extensions-toolbar">
+        <label class="toolbar-checkbox" :class="{ disabled: !extensions.length }">
+          <input
+            type="checkbox"
+            class="native-checkbox"
+            :checked="allSelected"
+            :disabled="!extensions.length || deleteBusy"
+            @change="emit('toggleAllExtensions')"
+          />
+          <span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
+            <svg viewBox="0 0 16 16">
+              <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
+            </svg>
+          </span>
+          <span>Select All</span>
+        </label>
+        <button
+          class="danger-button"
+          type="button"
+          :disabled="!selectedExtensionIds.length || deleteBusy"
+          @click="emit('deleteSelected')"
+        >
+          {{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedExtensionIds.length})` }}
+        </button>
+      </div>
+
      <div class="data-table-header extensions-grid">
        <div class="header-cell checkbox-cell">Pick</div>
        <div class="header-cell icon-cell">Icon</div>
@@ -117,9 +117,6 @@ function isSelected(extensionId: string) {

 <style scoped>
 .table-section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
  padding: 0;
  height: 100%;
  min-height: 0;
@@ -130,6 +127,8 @@ function isSelected(extensionId: string) {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
 }

 .toolbar-checkbox {
--- a/src/components/browser-data/HistoryCleanupList.vue
+++ b/src/components/browser-data/HistoryCleanupList.vue
@@ -64,33 +64,33 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {

 <template>
  <section class="table-section">
-    <div class="history-toolbar">
-      <label class="toolbar-checkbox" :class="{ disabled: !selectableProfiles.length }">
-        <input
-          type="checkbox"
-          class="native-checkbox"
-          :checked="allSelected"
-          :disabled="!selectableProfiles.length || cleanupBusy"
-          @change="emit('toggleAllProfiles')"
-        />
-        <span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
-          <svg viewBox="0 0 16 16">
-            <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
-          </svg>
-        </span>
-        <span>Select All</span>
-      </label>
-      <button
-        class="danger-button"
-        type="button"
-        :disabled="!selectedProfileIds.length || cleanupBusy"
-        @click="emit('cleanupSelected')"
-      >
-        {{ cleanupBusy ? "Cleaning..." : `Clean Selected (${selectedProfileIds.length})` }}
-      </button>
-    </div>
-
    <div v-if="profiles.length" class="data-table">
+      <div class="history-toolbar">
+        <label class="toolbar-checkbox" :class="{ disabled: !selectableProfiles.length }">
+          <input
+            type="checkbox"
+            class="native-checkbox"
+            :checked="allSelected"
+            :disabled="!selectableProfiles.length || cleanupBusy"
+            @change="emit('toggleAllProfiles')"
+          />
+          <span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
+            <svg viewBox="0 0 16 16">
+              <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
+            </svg>
+          </span>
+          <span>Select All</span>
+        </label>
+        <button
+          class="danger-button"
+          type="button"
+          :disabled="!selectedProfileIds.length || cleanupBusy"
+          @click="emit('cleanupSelected')"
+        >
+          {{ cleanupBusy ? "Cleaning..." : `Clean Selected (${selectedProfileIds.length})` }}
+        </button>
+      </div>
+
      <div class="data-table-header history-grid">
        <div class="header-cell checkbox-cell">Pick</div>
        <div class="header-cell icon-cell">Avatar</div>
@@ -172,9 +172,6 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {

 <style scoped>
 .table-section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
  padding: 0;
  height: 100%;
  min-height: 0;
@@ -185,6 +182,8 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
 }

 .toolbar-checkbox {