From ad838086ed0bdc79ffe88610b229bf978e577c57 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Fri, 17 Apr 2026 13:56:38 -0400
Subject: [PATCH] fix clean history ui

---
 src/App.vue                                   |  10 +
 .../browser-data/BrowserDataView.vue          |  30 ++-
 .../browser-data/HistoryCleanupList.vue       | 143 ++++++++-----
 .../browser-data/HistoryCleanupModal.vue      | 198 ++++++++++++++++++
 src/composables/useBrowserManager.ts          | 103 +++++++--
 5 files changed, 414 insertions(+), 70 deletions(-)
 create mode 100644 src/components/browser-data/HistoryCleanupModal.vue

diff --git a/src/App.vue b/src/App.vue
index c0c23fa..16c08f3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,12 +21,17 @@ const {
   cleanupHistoryResults,
   cleanupHistorySelectedProfiles,
   cleanupSelectedHistoryProfiles,
+  closeHistoryCleanupConfirm,
+  closeHistoryCleanupResult,
+  confirmHistoryCleanup,
   currentBrowser,
   deleteCustomBrowserConfig,
   error,
   extensionMonogram,
   extensionSortKey,
   historyCleanupBusy,
+  historyCleanupConfirmProfiles,
+  historyCleanupResultOpen,
   isDeletingConfig,
   isOpeningProfile,
   loading,
@@ -119,6 +124,8 @@ const {
         :sorted-password-sites="sortedPasswordSites"
         :history-selected-profile-ids="cleanupHistorySelectedProfiles"
         :cleanup-history-busy="historyCleanupBusy"
+        :history-cleanup-confirm-profiles="historyCleanupConfirmProfiles"
+        :history-cleanup-result-open="historyCleanupResultOpen"
         :cleanup-history-error="cleanupHistoryError"
         :cleanup-history-results="cleanupHistoryResults"
         :open-profile-error="openProfileError"
@@ -139,6 +146,9 @@ const {
         @toggle-all-history-profiles="toggleAllHistoryProfiles"
         @cleanup-selected-history="cleanupSelectedHistoryProfiles"
         @cleanup-history-for-profile="cleanupHistoryForProfile"
+        @confirm-history-cleanup="confirmHistoryCleanup"
+        @close-history-cleanup-confirm="closeHistoryCleanupConfirm"
+        @close-history-cleanup-result="closeHistoryCleanupResult"
         @close-associated-profiles="closeAssociatedProfilesModal"
       />
 
diff --git a/src/components/browser-data/BrowserDataView.vue b/src/components/browser-data/BrowserDataView.vue
index b8facb3..c57fd93 100644
--- a/src/components/browser-data/BrowserDataView.vue
+++ b/src/components/browser-data/BrowserDataView.vue
@@ -14,6 +14,7 @@ import AssociatedProfilesModal from "./AssociatedProfilesModal.vue";
 import BookmarksList from "./BookmarksList.vue";
 import ExtensionsList from "./ExtensionsList.vue";
 import HistoryCleanupList from "./HistoryCleanupList.vue";
+import HistoryCleanupModal from "./HistoryCleanupModal.vue";
 import PasswordSitesList from "./PasswordSitesList.vue";
 import ProfilesList from "./ProfilesList.vue";
 
@@ -30,6 +31,8 @@ defineProps<{
   sortedPasswordSites: BrowserView["passwordSites"];
   historySelectedProfileIds: string[];
   cleanupHistoryBusy: boolean;
+  historyCleanupConfirmProfiles: BrowserView["profiles"];
+  historyCleanupResultOpen: boolean;
   cleanupHistoryError: string;
   cleanupHistoryResults: CleanupHistoryResult[];
   openProfileError: string;
@@ -58,6 +61,9 @@ const emit = defineEmits<{
   toggleAllHistoryProfiles: [];
   cleanupSelectedHistory: [];
   cleanupHistoryForProfile: [profileId: string];
+  confirmHistoryCleanup: [];
+  closeHistoryCleanupConfirm: [];
+  closeHistoryCleanupResult: [];
   closeAssociatedProfiles: [];
 }>();
 </script>
@@ -151,13 +157,10 @@ const emit = defineEmits<{
 
     <HistoryCleanupList
       v-else
-      :browser-id="currentBrowser.browserId"
       :browser-family-id="currentBrowser.browserFamilyId"
       :profiles="sortedProfiles"
       :selected-profile-ids="historySelectedProfileIds"
       :cleanup-busy="cleanupHistoryBusy"
-      :cleanup-error="cleanupHistoryError"
-      :cleanup-results="cleanupHistoryResults"
       @toggle-profile="emit('toggleHistoryProfile', $event)"
       @toggle-all-profiles="emit('toggleAllHistoryProfiles')"
       @cleanup-selected="emit('cleanupSelectedHistory')"
@@ -165,6 +168,27 @@ const emit = defineEmits<{
     />
   </div>
 
+  <HistoryCleanupModal
+    v-if="historyCleanupConfirmProfiles.length"
+    mode="confirm"
+    title="Confirm History Cleanup"
+    :profiles="historyCleanupConfirmProfiles"
+    :results="[]"
+    :busy="cleanupHistoryBusy"
+    @close="emit('closeHistoryCleanupConfirm')"
+    @confirm="emit('confirmHistoryCleanup')"
+  />
+
+  <HistoryCleanupModal
+    v-if="historyCleanupResultOpen"
+    mode="result"
+    title="Cleanup Result"
+    :profiles="[]"
+    :results="cleanupHistoryResults"
+    :general-error="cleanupHistoryError"
+    @close="emit('closeHistoryCleanupResult')"
+  />
+
   <AssociatedProfilesModal
     v-if="associatedProfilesModal"
     :title="associatedProfilesModal.title"
diff --git a/src/components/browser-data/HistoryCleanupList.vue b/src/components/browser-data/HistoryCleanupList.vue
index 74e963c..dfb2d4b 100644
--- a/src/components/browser-data/HistoryCleanupList.vue
+++ b/src/components/browser-data/HistoryCleanupList.vue
@@ -1,20 +1,13 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import type {
-  CleanupHistoryResult,
-  CleanupFileStatus,
-  ProfileSummary,
-} from "../../types/browser";
+import type { CleanupFileStatus, ProfileSummary } from "../../types/browser";
 import { profileAvatarSrc } from "../../utils/icons";
 
 const props = defineProps<{
-  browserId: string;
   browserFamilyId: string | null;
   profiles: ProfileSummary[];
   selectedProfileIds: string[];
   cleanupBusy: boolean;
-  cleanupError: string;
-  cleanupResults: CleanupHistoryResult[];
 }>();
 
 const emit = defineEmits<{
@@ -69,36 +62,20 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
 
 <template>
   <section class="table-section">
-    <div v-if="cleanupError" class="inline-error">
-      {{ cleanupError }}
-    </div>
-
-    <div v-if="cleanupResults.length" class="result-strip">
-      <article
-        v-for="result in cleanupResults"
-        :key="result.profileId"
-        class="result-chip"
-        :class="{ error: result.error }"
-      >
-        <strong>{{ result.profileId }}</strong>
-        <span v-if="result.error">{{ result.error }}</span>
-        <span v-else-if="result.deletedFiles.length">
-          Deleted {{ result.deletedFiles.join(", ") }}
-        </span>
-        <span v-else>
-          Nothing to delete
-        </span>
-      </article>
-    </div>
-
     <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
@@ -124,12 +101,20 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
       <div class="data-table-body styled-scrollbar">
         <article v-for="profile in profiles" :key="profile.id" class="data-table-row history-grid">
           <div class="row-cell checkbox-cell">
-            <input
-              type="checkbox"
-              :checked="isSelected(profile.id)"
-              :disabled="!isSelectable(profile) || cleanupBusy"
-              @change="emit('toggleProfile', profile.id)"
-            />
+            <label class="table-checkbox" :class="{ disabled: !isSelectable(profile) || cleanupBusy }">
+              <input
+                type="checkbox"
+                class="native-checkbox"
+                :checked="isSelected(profile.id)"
+                :disabled="!isSelectable(profile) || cleanupBusy"
+                @change="emit('toggleProfile', profile.id)"
+              />
+              <span class="custom-checkbox" :class="{ checked: isSelected(profile.id) }" aria-hidden="true">
+                <svg viewBox="0 0 16 16">
+                  <path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
+                </svg>
+              </span>
+            </label>
           </div>
           <div class="profile-avatar table-avatar">
             <img
@@ -200,35 +185,83 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
   gap: 10px;
   color: var(--text);
   font-size: 0.88rem;
+  cursor: pointer;
 }
 
 .toolbar-checkbox.disabled {
   opacity: 0.55;
+  cursor: default;
 }
 
-.result-strip {
-  display: flex;
-  gap: 8px;
-  overflow: auto;
-  padding-bottom: 2px;
+.native-checkbox {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
 }
 
-.result-chip {
-  display: grid;
-  gap: 4px;
-  min-width: 220px;
-  padding: 10px 12px;
-  border: 1px solid rgba(16, 185, 129, 0.2);
-  border-radius: 14px;
-  background: rgba(236, 253, 245, 0.92);
-  color: #065f46;
-  font-size: 0.82rem;
+.table-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
-.result-chip.error {
-  border-color: rgba(239, 68, 68, 0.18);
-  background: rgba(254, 242, 242, 0.96);
-  color: #b42318;
+.table-checkbox.disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.custom-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  border-radius: 7px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.78),
+    0 4px 10px rgba(15, 23, 42, 0.06);
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.custom-checkbox svg {
+  width: 12px;
+  height: 12px;
+}
+
+.custom-checkbox path {
+  fill: none;
+  stroke: #fff;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+.toolbar-checkbox:hover .custom-checkbox,
+.table-checkbox:hover .custom-checkbox {
+  border-color: rgba(47, 111, 237, 0.38);
+  transform: translateY(-1px);
+}
+
+.custom-checkbox.checked {
+  border-color: rgba(47, 111, 237, 0.2);
+  background: linear-gradient(135deg, #2f6fed, #5aa1f7);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    0 8px 18px rgba(47, 111, 237, 0.22);
+}
+
+.custom-checkbox.checked path {
+  opacity: 1;
 }
 
 .data-table {
diff --git a/src/components/browser-data/HistoryCleanupModal.vue b/src/components/browser-data/HistoryCleanupModal.vue
new file mode 100644
index 0000000..dd4c67a
--- /dev/null
+++ b/src/components/browser-data/HistoryCleanupModal.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import type { CleanupHistoryResult, ProfileSummary } from "../../types/browser";
+
+defineProps<{
+  mode: "confirm" | "result";
+  title: string;
+  profiles: ProfileSummary[];
+  results: CleanupHistoryResult[];
+  busy?: boolean;
+  generalError?: string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [];
+}>();
+</script>
+
+<template>
+  <div class="modal-backdrop" @click.self="emit('close')">
+    <section class="modal-card">
+      <div class="modal-header">
+        <h3>{{ title }}</h3>
+        <button class="secondary-button modal-close-button" type="button" @click="emit('close')">
+          Close
+        </button>
+      </div>
+
+      <template v-if="mode === 'confirm'">
+        <p class="modal-copy">
+          The selected profiles will have <code>History</code>, <code>Top Sites</code>, and
+          <code>Visited Links</code> removed.
+        </p>
+
+        <div class="profile-list styled-scrollbar">
+          <article v-for="profile in profiles" :key="profile.id" class="profile-item">
+            <strong>{{ profile.name }}</strong>
+            <span>{{ profile.id }}</span>
+          </article>
+        </div>
+
+        <div class="modal-actions">
+          <button class="secondary-button" type="button" @click="emit('close')">Cancel</button>
+          <button class="danger-button" type="button" :disabled="busy" @click="emit('confirm')">
+            {{ busy ? "Cleaning..." : "Confirm Cleanup" }}
+          </button>
+        </div>
+      </template>
+
+      <template v-else>
+        <p v-if="generalError" class="result-banner error">{{ generalError }}</p>
+
+        <div class="result-list styled-scrollbar">
+          <article
+            v-for="result in results"
+            :key="result.profileId"
+            class="result-card"
+            :class="{ error: result.error }"
+          >
+            <strong>{{ result.profileId }}</strong>
+            <p v-if="result.error">{{ result.error }}</p>
+            <p v-else-if="result.deletedFiles.length">
+              Deleted {{ result.deletedFiles.join(", ") }}
+            </p>
+            <p v-else>
+              Nothing was deleted.
+            </p>
+            <p v-if="result.skippedFiles.length" class="muted-line">
+              Missing {{ result.skippedFiles.join(", ") }}
+            </p>
+          </article>
+        </div>
+
+        <div class="modal-actions">
+          <button class="primary-button" type="button" @click="emit('close')">Close</button>
+        </div>
+      </template>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.26);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+.modal-card {
+  width: min(640px, 100%);
+  max-height: min(76vh, 820px);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  border: 1px solid var(--panel-border);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+
+.modal-copy {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.profile-list,
+.result-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  overflow: auto;
+}
+
+.profile-item,
+.result-card {
+  display: grid;
+  gap: 4px;
+  padding: 12px 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 16px;
+  background: rgba(248, 250, 252, 0.84);
+}
+
+.profile-item span,
+.muted-line {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.result-card p {
+  margin: 0;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.result-card.error {
+  border-color: rgba(239, 68, 68, 0.18);
+  background: rgba(254, 242, 242, 0.96);
+}
+
+.result-banner {
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: 14px;
+  font-size: 0.9rem;
+}
+
+.result-banner.error {
+  background: rgba(254, 242, 242, 0.96);
+  color: #b42318;
+  border: 1px solid rgba(239, 68, 68, 0.18);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+code {
+  padding: 1px 5px;
+  border-radius: 7px;
+  background: rgba(226, 232, 240, 0.72);
+  color: var(--text);
+}
+
+@media (max-width: 720px) {
+  .modal-backdrop {
+    padding: 12px;
+  }
+
+  .modal-actions {
+    flex-direction: column-reverse;
+  }
+}
+</style>
diff --git a/src/composables/useBrowserManager.ts b/src/composables/useBrowserManager.ts
index 279ced8..67960df 100644
--- a/src/composables/useBrowserManager.ts
+++ b/src/composables/useBrowserManager.ts
@@ -55,6 +55,8 @@ export function useBrowserManager() {
   const historyCleanupBusy = ref(false);
   const cleanupHistoryError = ref("");
   const cleanupHistoryResults = ref<CleanupHistoryResponse["results"]>([]);
+  const historyCleanupConfirmProfileIds = ref<string[]>([]);
+  const historyCleanupResultOpen = ref(false);
 
   const browsers = computed(() => response.value.browsers);
   const currentBrowser = computed<BrowserView | null>(
@@ -102,6 +104,8 @@ export function useBrowserManager() {
     cleanupHistorySelectedProfiles.value = [];
     cleanupHistoryResults.value = [];
     cleanupHistoryError.value = "";
+    historyCleanupConfirmProfileIds.value = [];
+    historyCleanupResultOpen.value = false;
   });
 
   async function loadBrowserConfigs() {
@@ -362,42 +366,112 @@ export function useBrowserManager() {
     cleanupHistorySelectedProfiles.value = allSelected ? [] : selectableIds;
   }
 
-  async function cleanupHistoryProfiles(profileIds: string[]) {
+  function cleanupProfileIdsWithHistory(browser: BrowserView) {
+    return browser.profiles
+      .filter((profile) => {
+        const cleanup = profile.historyCleanup;
+        return (
+          cleanup.history === "found" ||
+          cleanup.topSites === "found" ||
+          cleanup.visitedLinks === "found"
+        );
+      })
+      .map((profile) => profile.id);
+  }
+
+  function historyCleanupConfirmProfiles() {
+    const browser = currentBrowser.value;
+    if (!browser) return [];
+    return browser.profiles.filter((profile) =>
+      historyCleanupConfirmProfileIds.value.includes(profile.id),
+    );
+  }
+
+  function cleanupSelectedHistoryProfiles() {
+    if (!cleanupHistorySelectedProfiles.value.length) return;
+    historyCleanupConfirmProfileIds.value = [...cleanupHistorySelectedProfiles.value];
+  }
+
+  function cleanupHistoryForProfile(profileId: string) {
+    historyCleanupConfirmProfileIds.value = [profileId];
+  }
+
+  function closeHistoryCleanupConfirm() {
+    if (historyCleanupBusy.value) return;
+    historyCleanupConfirmProfileIds.value = [];
+  }
+
+  function closeHistoryCleanupResult() {
+    historyCleanupResultOpen.value = false;
+    cleanupHistoryResults.value = [];
+    cleanupHistoryError.value = "";
+  }
+
+  function applyCleanupHistoryResults(results: CleanupHistoryResponse["results"]) {
+    const browser = currentBrowser.value;
+    if (!browser) return;
+
+    const succeededProfileIds = results
+      .filter((result) => !result.error)
+      .map((result) => result.profileId);
+
+    if (!succeededProfileIds.length) return;
+
+    for (const profile of browser.profiles) {
+      if (!succeededProfileIds.includes(profile.id)) continue;
+
+      const deletedFiles = results.find((result) => result.profileId === profile.id)?.deletedFiles ?? [];
+      if (deletedFiles.includes("History")) {
+        profile.historyCleanup.history = "missing";
+      }
+      if (deletedFiles.includes("Top Sites")) {
+        profile.historyCleanup.topSites = "missing";
+      }
+      if (deletedFiles.includes("Visited Links")) {
+        profile.historyCleanup.visitedLinks = "missing";
+      }
+    }
+
+    browser.stats.historyCleanupProfileCount = cleanupProfileIdsWithHistory(browser).length;
+  }
+
+  async function confirmHistoryCleanup() {
+    const browser = currentBrowser.value;
+    const profileIds = [...historyCleanupConfirmProfileIds.value];
+    if (!browser || profileIds.length === 0) return;
+
     if (!currentBrowser.value || profileIds.length === 0) return;
 
     historyCleanupBusy.value = true;
     cleanupHistoryError.value = "";
     cleanupHistoryResults.value = [];
+    historyCleanupResultOpen.value = false;
 
     try {
       const input: CleanupHistoryInput = {
-        browserId: currentBrowser.value.browserId,
+        browserId: browser.browserId,
         profileIds,
       };
       const result = await invoke<CleanupHistoryResponse>("cleanup_history_files", { input });
+      applyCleanupHistoryResults(result.results);
       cleanupHistoryResults.value = result.results;
       cleanupHistorySelectedProfiles.value = cleanupHistorySelectedProfiles.value.filter(
         (profileId) => !profileIds.includes(profileId),
       );
-      await scanBrowsers();
+      historyCleanupConfirmProfileIds.value = [];
+      historyCleanupResultOpen.value = true;
     } catch (cleanupErrorValue) {
+      historyCleanupConfirmProfileIds.value = [];
       cleanupHistoryError.value =
         cleanupErrorValue instanceof Error
           ? cleanupErrorValue.message
           : "Failed to clean history files.";
+      historyCleanupResultOpen.value = true;
     } finally {
       historyCleanupBusy.value = false;
     }
   }
 
-  async function cleanupSelectedHistoryProfiles() {
-    await cleanupHistoryProfiles(cleanupHistorySelectedProfiles.value);
-  }
-
-  async function cleanupHistoryForProfile(profileId: string) {
-    await cleanupHistoryProfiles([profileId]);
-  }
-
   function closeAssociatedProfilesModal() {
     associatedProfilesModal.value = null;
   }
@@ -424,11 +498,15 @@ export function useBrowserManager() {
     extensionMonogram,
     extensionSortKey,
     cleanupHistoryError,
-    cleanupHistoryForProfile,
     cleanupHistoryResults,
     cleanupHistorySelectedProfiles,
     cleanupSelectedHistoryProfiles,
+    closeHistoryCleanupConfirm,
+    closeHistoryCleanupResult,
+    confirmHistoryCleanup,
     historyCleanupBusy,
+    historyCleanupConfirmProfiles: computed(historyCleanupConfirmProfiles),
+    historyCleanupResultOpen,
     isDeletingConfig,
     isOpeningProfile,
     loading,
@@ -450,6 +528,7 @@ export function useBrowserManager() {
     sortedExtensions,
     sortedPasswordSites,
     sortedProfiles,
+    cleanupHistoryForProfile,
     toggleAllHistoryProfiles,
     toggleHistoryProfile,
     closeAssociatedProfilesModal,