support login data

2026-04-16 22:43:17 -04:00
parent a976dc3fc5
commit 9fe16cd334
11 changed files with 519 additions and 20 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,6 +30,7 @@ const {
  page,
  pickExecutablePath,
  pickUserDataPath,
+  passwordSiteSortKey,
  profileSortKey,
  refreshAll,
  savingConfig,
@@ -37,8 +38,10 @@ const {
  selectedBrowserId,
  showBookmarkProfilesModal,
  showExtensionProfilesModal,
+  showPasswordSiteProfilesModal,
  sortedBookmarks,
  sortedExtensions,
+  sortedPasswordSites,
  sortedProfiles,
  closeAssociatedProfilesModal,
 } = useBrowserManager();
@@ -102,9 +105,11 @@ const {
        :profile-sort-key="profileSortKey"
        :extension-sort-key="extensionSortKey"
        :bookmark-sort-key="bookmarkSortKey"
+        :password-site-sort-key="passwordSiteSortKey"
        :sorted-profiles="sortedProfiles"
        :sorted-extensions="sortedExtensions"
        :sorted-bookmarks="sortedBookmarks"
+        :sorted-password-sites="sortedPasswordSites"
        :open-profile-error="openProfileError"
        :section-count="sectionCount"
        :is-opening-profile="isOpeningProfile"
@@ -115,9 +120,11 @@ const {
        @update:profile-sort-key="profileSortKey = $event"
        @update:extension-sort-key="extensionSortKey = $event"
        @update:bookmark-sort-key="bookmarkSortKey = $event"
+        @update:password-site-sort-key="passwordSiteSortKey = $event"
        @open-profile="(browserId, profileId) => openBrowserProfile(browserId, profileId)"
        @show-extension-profiles="showExtensionProfilesModal"
        @show-bookmark-profiles="showBookmarkProfilesModal"
+        @show-password-site-profiles="showPasswordSiteProfilesModal"
        @close-associated-profiles="closeAssociatedProfilesModal"
      />

--- a/src/components/browser-data/BrowserDataView.vue
+++ b/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
--- a/src/components/browser-data/PasswordSitesList.vue
+++ b/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>
--- a/src/composables/useBrowserManager.ts
+++ b/src/composables/useBrowserManager.ts
@@ -2,7 +2,7 @@ import { computed, onMounted, ref, watch } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import { open } from "@tauri-apps/plugin-dialog";

-import { sortBookmarks, sortExtensions, sortProfiles } from "../utils/sort";
+import { sortBookmarks, sortExtensions, sortPasswordSites, sortProfiles } from "../utils/sort";
 import type {
  ActiveSection,
  AppPage,
@@ -14,6 +14,7 @@ import type {
  BrowserView,
  CreateCustomBrowserConfigInput,
  ExtensionSortKey,
+  PasswordSiteSortKey,
  ProfileSortKey,
  ScanResponse,
 } from "../types/browser";
@@ -47,6 +48,7 @@ export function useBrowserManager() {
  const profileSortKey = ref<ProfileSortKey>("name");
  const extensionSortKey = ref<ExtensionSortKey>("name");
  const bookmarkSortKey = ref<BookmarkSortKey>("title");
+  const passwordSiteSortKey = ref<PasswordSiteSortKey>("domain");

  const browsers = computed(() => response.value.browsers);
  const currentBrowser = computed<BrowserView | null>(
@@ -65,6 +67,9 @@ export function useBrowserManager() {
  const sortedBookmarks = computed(() =>
    sortBookmarks(currentBrowser.value?.bookmarks ?? [], bookmarkSortKey.value),
  );
+  const sortedPasswordSites = computed(() =>
+    sortPasswordSites(currentBrowser.value?.passwordSites ?? [], passwordSiteSortKey.value),
+  );

  watch(
    browsers,
@@ -280,7 +285,8 @@ export function useBrowserManager() {
    if (!currentBrowser.value) return 0;
    if (section === "profiles") return currentBrowser.value.profiles.length;
    if (section === "extensions") return currentBrowser.value.extensions.length;
-    return currentBrowser.value.bookmarks.length;
+    if (section === "bookmarks") return currentBrowser.value.bookmarks.length;
+    return currentBrowser.value.passwordSites.length;
  }

  function showExtensionProfilesModal(extensionId: string) {
@@ -305,6 +311,17 @@ export function useBrowserManager() {
    };
  }

+  function showPasswordSiteProfilesModal(url: string) {
+    const passwordSite = currentBrowser.value?.passwordSites.find((item) => item.url === url);
+    if (!passwordSite || !currentBrowser.value) return;
+    associatedProfilesModal.value = {
+      title: `${passwordSite.domain} Profiles`,
+      browserId: currentBrowser.value.browserId,
+      profiles: passwordSite.profiles,
+      isBookmark: false,
+    };
+  }
+
  function closeAssociatedProfilesModal() {
    associatedProfilesModal.value = null;
  }
@@ -339,6 +356,7 @@ export function useBrowserManager() {
    page,
    pickExecutablePath,
    pickUserDataPath,
+    passwordSiteSortKey,
    profileSortKey,
    refreshAll,
    savingConfig,
@@ -346,8 +364,10 @@ export function useBrowserManager() {
    selectedBrowserId,
    showBookmarkProfilesModal,
    showExtensionProfilesModal,
+    showPasswordSiteProfilesModal,
    sortedBookmarks,
    sortedExtensions,
+    sortedPasswordSites,
    sortedProfiles,
    closeAssociatedProfilesModal,
  };
--- a/src/types/browser.ts
+++ b/src/types/browser.ts
@@ -2,6 +2,7 @@ export type BrowserStats = {
  profileCount: number;
  extensionCount: number;
  bookmarkCount: number;
+  passwordSiteCount: number;
 };

 export type ProfileSummary = {
@@ -32,6 +33,13 @@ export type BookmarkSummary = {
  profiles: BookmarkAssociatedProfileSummary[];
 };

+export type PasswordSiteSummary = {
+  url: string;
+  domain: string;
+  profileIds: string[];
+  profiles: AssociatedProfileSummary[];
+};
+
 export type AssociatedProfileSummary = {
  id: string;
  name: string;
@@ -56,8 +64,9 @@ export type BookmarkAssociatedProfileSummary = {
 export type ProfileSortKey = "name" | "email" | "id";
 export type ExtensionSortKey = "name" | "id";
 export type BookmarkSortKey = "title" | "url";
+export type PasswordSiteSortKey = "domain" | "url";
 export type AssociatedProfileSortKey = "id" | "name";
-export type ActiveSection = "profiles" | "extensions" | "bookmarks";
+export type ActiveSection = "profiles" | "extensions" | "bookmarks" | "passwords";
 export type AppPage = "browserData" | "configuration";
 export type BrowserConfigSource = "default" | "custom";

@@ -92,6 +101,7 @@ export type BrowserView = {
  profiles: ProfileSummary[];
  extensions: ExtensionSummary[];
  bookmarks: BookmarkSummary[];
+  passwordSites: PasswordSiteSummary[];
  stats: BrowserStats;
 };

--- a/src/utils/sort.ts
+++ b/src/utils/sort.ts
@@ -3,6 +3,8 @@ import type {
  BookmarkSummary,
  ExtensionSortKey,
  ExtensionSummary,
+  PasswordSiteSortKey,
+  PasswordSiteSummary,
  AssociatedProfileSortKey,
  AssociatedProfileSummary,
  BookmarkAssociatedProfileSummary,
@@ -76,6 +78,16 @@ export function sortBookmarks(items: BookmarkSummary[], sortKey: BookmarkSortKey
  });
 }

+export function sortPasswordSites(items: PasswordSiteSummary[], sortKey: PasswordSiteSortKey) {
+  const passwordSites = [...items];
+  return passwordSites.sort((left, right) => {
+    if (sortKey === "url") {
+      return compareOptionalText(left.url, right.url) || compareText(left.domain, right.domain);
+    }
+    return compareOptionalText(left.domain, right.domain) || compareText(left.url, right.url);
+  });
+}
+
 export function sortAssociatedProfiles(
  items: (AssociatedProfileSummary | BookmarkAssociatedProfileSummary)[],
  sortKey: AssociatedProfileSortKey,