support history

src/components/browser-data/BrowserDataView.vue

@@ -6,12 +6,14 @@ import type {
   BookmarkSortKey,
   BrowserView,
   ExtensionSortKey,
+  HistoryDomainSortKey,
   PasswordSiteSortKey,
   ProfileSortKey,
 } from "../../types/browser";
 import AssociatedProfilesModal from "./AssociatedProfilesModal.vue";
 import BookmarksList from "./BookmarksList.vue";
 import ExtensionsList from "./ExtensionsList.vue";
+import HistoryDomainsList from "./HistoryDomainsList.vue";
 import PasswordSitesList from "./PasswordSitesList.vue";
 import ProfilesList from "./ProfilesList.vue";
 
@@ -22,10 +24,12 @@ defineProps<{
   extensionSortKey: ExtensionSortKey;
   bookmarkSortKey: BookmarkSortKey;
   passwordSiteSortKey: PasswordSiteSortKey;
+  historyDomainSortKey: HistoryDomainSortKey;
   sortedProfiles: BrowserView["profiles"];
   sortedExtensions: BrowserView["extensions"];
   sortedBookmarks: BrowserView["bookmarks"];
   sortedPasswordSites: BrowserView["passwordSites"];
+  sortedHistoryDomains: BrowserView["historyDomains"];
   openProfileError: string;
   sectionCount: (section: ActiveSection) => number;
   isOpeningProfile: (browserId: string, profileId: string) => boolean;
@@ -45,10 +49,12 @@ const emit = defineEmits<{
   "update:extensionSortKey": [value: ExtensionSortKey];
   "update:bookmarkSortKey": [value: BookmarkSortKey];
   "update:passwordSiteSortKey": [value: PasswordSiteSortKey];
+  "update:historyDomainSortKey": [value: HistoryDomainSortKey];
   openProfile: [browserId: string, profileId: string];
   showExtensionProfiles: [extensionId: string];
   showBookmarkProfiles: [url: string];
   showPasswordSiteProfiles: [url: string];
+  showHistoryDomainProfiles: [domain: string];
   closeAssociatedProfiles: [];
 }>();
 </script>
@@ -91,6 +97,15 @@ const emit = defineEmits<{
       <span>Saved Logins</span>
       <span class="count-pill">{{ sectionCount("passwords") }}</span>
     </button>
+    <button
+      class="section-tab"
+      :class="{ active: activeSection === 'history' }"
+      type="button"
+      @click="emit('update:activeSection', 'history')"
+    >
+      <span>History</span>
+      <span class="count-pill">{{ sectionCount("history") }}</span>
+    </button>
   </section>
 
   <div class="content-scroll-area">
@@ -124,12 +139,20 @@ const emit = defineEmits<{
     />
 
     <PasswordSitesList
-      v-else
+      v-else-if="activeSection === 'passwords'"
       :password-sites="sortedPasswordSites"
       :sort-key="passwordSiteSortKey"
       @update:sort-key="emit('update:passwordSiteSortKey', $event)"
       @show-profiles="emit('showPasswordSiteProfiles', $event)"
     />
+
+    <HistoryDomainsList
+      v-else
+      :history-domains="sortedHistoryDomains"
+      :sort-key="historyDomainSortKey"
+      @update:sort-key="emit('update:historyDomainSortKey', $event)"
+      @show-profiles="emit('showHistoryDomainProfiles', $event)"
+    />
   </div>
 
   <AssociatedProfilesModal

src/components/browser-data/HistoryDomainsList.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import type { HistoryDomainSortKey, HistoryDomainSummary } from "../../types/browser";
+
+defineProps<{
+  historyDomains: HistoryDomainSummary[];
+  sortKey: HistoryDomainSortKey;
+}>();
+
+const emit = defineEmits<{
+  "update:sortKey": [value: HistoryDomainSortKey];
+  showProfiles: [domain: string];
+}>();
+</script>
+
+<template>
+  <section class="table-section">
+    <div v-if="historyDomains.length" class="data-table">
+      <div class="data-table-header history-grid">
+        <button class="header-cell sortable" :class="{ active: sortKey === 'domain' }" type="button" @click="emit('update:sortKey', 'domain')">Domain</button>
+        <button class="header-cell sortable" :class="{ active: sortKey === 'visits' }" type="button" @click="emit('update:sortKey', 'visits')">Visits</button>
+        <div class="header-cell actions-cell">Profiles</div>
+      </div>
+      <div class="data-table-body styled-scrollbar">
+        <article
+          v-for="historyDomain in historyDomains"
+          :key="historyDomain.domain"
+          class="data-table-row history-grid"
+        >
+          <div class="row-cell primary-cell">
+            <strong>{{ historyDomain.domain }}</strong>
+          </div>
+          <div class="row-cell muted-cell">{{ historyDomain.visitCount.toLocaleString() }}</div>
+          <div class="row-cell actions-cell">
+            <button class="disclosure-button" type="button" @click="emit('showProfiles', historyDomain.domain)">
+              <span>View</span>
+              <span class="badge neutral">{{ historyDomain.profileIds.length }}</span>
+            </button>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div v-else class="empty-card">
+      <p>No browsing history domains were discovered for this browser.</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.table-section {
+  padding: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.data-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 22px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.data-table-body {
+  min-height: 0;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
+.history-grid {
+  display: grid;
+  grid-template-columns: minmax(240px, 1.2fr) 140px 154px;
+  gap: 12px;
+  align-items: center;
+}
+
+.data-table-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 10px 24px 10px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(248, 250, 252, 0.94);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.header-cell {
+  color: var(--muted);
+  font-size: 0.81rem;
+  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;
+}
+
+.disclosure-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: fit-content;
+  min-width: 120px;
+  padding: 7px 10px;
+  border-radius: 12px;
+  background: rgba(241, 245, 249, 0.9);
+  color: var(--badge-text);
+  cursor: pointer;
+}
+
+.actions-cell {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 720px) {
+  .history-grid {
+    grid-template-columns: minmax(0, 1fr) 120px;
+  }
+
+  .history-grid > :nth-child(2) {
+    display: none;
+  }
+}
+</style>