support login data

src/components/browser-data/BrowserDataView.vue

@@ -6,11 +6,13 @@ import type {
   BookmarkSortKey,
   BrowserView,
   ExtensionSortKey,
+  PasswordSiteSortKey,
   ProfileSortKey,
 } from "../../types/browser";
 import AssociatedProfilesModal from "./AssociatedProfilesModal.vue";
 import BookmarksList from "./BookmarksList.vue";
 import ExtensionsList from "./ExtensionsList.vue";
+import PasswordSitesList from "./PasswordSitesList.vue";
 import ProfilesList from "./ProfilesList.vue";
 
 defineProps<{
@@ -19,9 +21,11 @@ defineProps<{
   profileSortKey: ProfileSortKey;
   extensionSortKey: ExtensionSortKey;
   bookmarkSortKey: BookmarkSortKey;
+  passwordSiteSortKey: PasswordSiteSortKey;
   sortedProfiles: BrowserView["profiles"];
   sortedExtensions: BrowserView["extensions"];
   sortedBookmarks: BrowserView["bookmarks"];
+  sortedPasswordSites: BrowserView["passwordSites"];
   openProfileError: string;
   sectionCount: (section: ActiveSection) => number;
   isOpeningProfile: (browserId: string, profileId: string) => boolean;
@@ -40,9 +44,11 @@ const emit = defineEmits<{
   "update:profileSortKey": [value: ProfileSortKey];
   "update:extensionSortKey": [value: ExtensionSortKey];
   "update:bookmarkSortKey": [value: BookmarkSortKey];
+  "update:passwordSiteSortKey": [value: PasswordSiteSortKey];
   openProfile: [browserId: string, profileId: string];
   showExtensionProfiles: [extensionId: string];
   showBookmarkProfiles: [url: string];
+  showPasswordSiteProfiles: [url: string];
   closeAssociatedProfiles: [];
 }>();
 </script>
@@ -76,6 +82,15 @@ const emit = defineEmits<{
       <span>Bookmarks</span>
       <span class="count-pill">{{ sectionCount("bookmarks") }}</span>
     </button>
+    <button
+      class="section-tab"
+      :class="{ active: activeSection === 'passwords' }"
+      type="button"
+      @click="emit('update:activeSection', 'passwords')"
+    >
+      <span>Saved Logins</span>
+      <span class="count-pill">{{ sectionCount("passwords") }}</span>
+    </button>
   </section>
 
   <div class="content-scroll-area">
@@ -101,12 +116,20 @@ const emit = defineEmits<{
     />
 
     <BookmarksList
-      v-else
+      v-else-if="activeSection === 'bookmarks'"
       :bookmarks="sortedBookmarks"
       :sort-key="bookmarkSortKey"
       @update:sort-key="emit('update:bookmarkSortKey', $event)"
       @show-profiles="emit('showBookmarkProfiles', $event)"
     />
+
+    <PasswordSitesList
+      v-else
+      :password-sites="sortedPasswordSites"
+      :sort-key="passwordSiteSortKey"
+      @update:sort-key="emit('update:passwordSiteSortKey', $event)"
+      @show-profiles="emit('showPasswordSiteProfiles', $event)"
+    />
   </div>
 
   <AssociatedProfilesModal

src/components/browser-data/PasswordSitesList.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { PasswordSiteSortKey, PasswordSiteSummary } from "../../types/browser";
+
+defineProps<{
+  passwordSites: PasswordSiteSummary[];
+  sortKey: PasswordSiteSortKey;
+}>();
+
+const emit = defineEmits<{
+  "update:sortKey": [value: PasswordSiteSortKey];
+  showProfiles: [url: string];
+}>();
+</script>
+
+<template>
+  <section class="table-section">
+    <div v-if="passwordSites.length" class="data-table">
+      <div class="data-table-header passwords-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 === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button>
+        <div class="header-cell actions-cell">Profiles</div>
+      </div>
+      <div class="data-table-body styled-scrollbar">
+        <article
+          v-for="passwordSite in passwordSites"
+          :key="passwordSite.url"
+          class="data-table-row passwords-grid"
+        >
+          <div class="row-cell primary-cell">
+            <strong>{{ passwordSite.domain }}</strong>
+          </div>
+          <div class="row-cell muted-cell" :title="passwordSite.url">{{ passwordSite.url }}</div>
+          <div class="row-cell actions-cell">
+            <button class="disclosure-button" type="button" @click="emit('showProfiles', passwordSite.url)">
+              <span>View</span>
+              <span class="badge neutral">{{ passwordSite.profileIds.length }}</span>
+            </button>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div v-else class="empty-card">
+      <p>No saved login sites 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;
+}
+
+.passwords-grid {
+  display: grid;
+  grid-template-columns: minmax(180px, 0.9fr) minmax(280px, 1.2fr) 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;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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: 900px) {
+  .passwords-grid {
+    grid-template-columns: minmax(160px, 0.9fr) minmax(200px, 1fr) 148px;
+  }
+}
+
+@media (max-width: 720px) {
+  .passwords-grid {
+    grid-template-columns: minmax(0, 1fr) 132px;
+  }
+
+  .passwords-grid > :nth-child(2) {
+    display: none;
+  }
+}
+</style>