julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix clean history ui

Browse Source
This commit is contained in:
Julian Freeman
2026-04-17 13:56:38 -04:00
parent 6d2b117200
commit ad838086ed
5 changed files with 414 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@@ -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"
/>

30
src/components/browser-data/BrowserDataView.vue
View File

@@ -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"

143
src/components/browser-data/HistoryCleanupList.vue
View File

@@ -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 {

198
src/components/browser-data/HistoryCleanupModal.vue Normal file
View File

@@ -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>

103
src/composables/useBrowserManager.ts
View File

@@ -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,