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

support delete extensions

Browse Source
This commit is contained in:
Julian Freeman
2026-04-17 14:54:16 -04:00
parent d724db6f0f
commit 469b684876
12 changed files with 1253 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.vue
View File

@@ -26,8 +26,20 @@ const {
confirmHistoryCleanup,
currentBrowser,
deleteCustomBrowserConfig,
deleteExtensionFromAllProfiles,
deleteExtensionFromProfile,
deleteSelectedExtensionProfiles,
deleteSelectedExtensions,
error,
extensionMonogram,
extensionDeleteBusy,
extensionModalSelectedProfileIds,
extensionRemovalConfirmExtensions,
extensionRemovalConfirmProfiles,
extensionRemovalError,
extensionRemovalResultOpen,
extensionRemovalResults,
extensionSelectedIds,
extensionSortKey,
historyCleanupBusy,
historyCleanupConfirmProfiles,
@@ -53,6 +65,13 @@ const {
sortedExtensions,
sortedPasswordSites,
sortedProfiles,
closeExtensionRemovalConfirm,
closeExtensionRemovalResult,
confirmExtensionRemoval,
toggleAllExtensions,
toggleAllExtensionModalProfiles,
toggleExtensionModalProfileSelection,
toggleExtensionSelection,
toggleAllHistoryProfiles,
toggleHistoryProfile,
closeAssociatedProfilesModal,
@@ -128,6 +147,14 @@ const {
:history-cleanup-result-open="historyCleanupResultOpen"
:cleanup-history-error="cleanupHistoryError"
:cleanup-history-results="cleanupHistoryResults"
:extension-selected-ids="extensionSelectedIds"
:extension-modal-selected-profile-ids="extensionModalSelectedProfileIds"
:extension-delete-busy="extensionDeleteBusy"
:extension-removal-confirm-extensions="extensionRemovalConfirmExtensions"
:extension-removal-confirm-profiles="extensionRemovalConfirmProfiles"
:extension-removal-result-open="extensionRemovalResultOpen"
:extension-removal-error="extensionRemovalError"
:extension-removal-results="extensionRemovalResults"
:open-profile-error="openProfileError"
:section-count="sectionCount"
:is-opening-profile="isOpeningProfile"
@@ -142,6 +169,17 @@ const {
@show-extension-profiles="showExtensionProfilesModal"
@show-bookmark-profiles="showBookmarkProfilesModal"
@show-password-site-profiles="showPasswordSiteProfilesModal"
@toggle-extension-selection="toggleExtensionSelection"
@toggle-all-extensions="toggleAllExtensions"
@delete-extension-from-all-profiles="deleteExtensionFromAllProfiles"
@delete-selected-extensions="deleteSelectedExtensions"
@toggle-extension-modal-profile-selection="toggleExtensionModalProfileSelection"
@toggle-all-extension-modal-profiles="toggleAllExtensionModalProfiles"
@delete-extension-from-profile="deleteExtensionFromProfile"
@delete-selected-extension-profiles="deleteSelectedExtensionProfiles"
@confirm-extension-removal="confirmExtensionRemoval"
@close-extension-removal-confirm="closeExtensionRemovalConfirm"
@close-extension-removal-result="closeExtensionRemovalResult"
@toggle-history-profile="toggleHistoryProfile"
@toggle-all-history-profiles="toggleAllHistoryProfiles"
@cleanup-selected-history="cleanupSelectedHistoryProfiles"

203
src/components/browser-data/AssociatedProfilesModal.vue
View File

@@ -4,11 +4,15 @@ import type {
AssociatedProfileSortKey,
AssociatedProfileSummary,
BookmarkAssociatedProfileSummary,
ExtensionAssociatedProfileSummary,
} from "../../types/browser";
import { profileAvatarSrc } from "../../utils/icons";
import { sortAssociatedProfiles } from "../../utils/sort";
type ModalProfile = AssociatedProfileSummary | BookmarkAssociatedProfileSummary;
type ModalProfile =
| AssociatedProfileSummary
| BookmarkAssociatedProfileSummary
| ExtensionAssociatedProfileSummary;
const props = defineProps<{
title: string;
@@ -16,20 +20,41 @@ const props = defineProps<{
browserId: string;
browserFamilyId: string | null;
isBookmark: boolean;
isExtension?: boolean;
selectedProfileIds?: string[];
deleteBusy?: boolean;
isOpeningProfile: (browserId: string, profileId: string) => boolean;
}>();
const emit = defineEmits<{
close: [];
openProfile: [browserId: string, profileId: string];
toggleProfileSelection: [profileId: string];
toggleAllProfileSelection: [];
deleteProfile: [profileId: string];
deleteSelectedProfiles: [];
}>();
const sortKey = ref<AssociatedProfileSortKey>("id");
const sortedProfiles = computed(() => sortAssociatedProfiles(props.profiles, sortKey.value));
const selectedProfileIds = computed(() => props.selectedProfileIds ?? []);
const allSelected = computed(
() =>
sortedProfiles.value.length > 0 &&
sortedProfiles.value.every((profile) => selectedProfileIds.value.includes(profile.id)),
);
function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedProfileSummary {
return "bookmarkPath" in profile;
}
function hasInstallSource(profile: ModalProfile): profile is ExtensionAssociatedProfileSummary {
return "installSource" in profile;
}
function isSelected(profileId: string) {
return selectedProfileIds.value.includes(profileId);
}
</script>
<template>
@@ -42,11 +67,39 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</button>
</div>
<div v-if="isExtension" class="modal-toolbar">
<label class="toolbar-checkbox" :class="{ disabled: !sortedProfiles.length }">
<input
type="checkbox"
class="native-checkbox"
:checked="allSelected"
:disabled="!sortedProfiles.length || deleteBusy"
@change="emit('toggleAllProfileSelection')"
/>
<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
class="danger-button"
type="button"
:disabled="!selectedProfileIds.length || deleteBusy"
@click="emit('deleteSelectedProfiles')"
>
{{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedProfileIds.length})` }}
</button>
</div>
<div class="modal-table">
<div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
<div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark, extension: isExtension }">
<div v-if="isExtension" class="header-cell checkbox-cell">Pick</div>
<div class="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button>
<button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="sortKey = 'id'">Profile ID</button>
<button v-if="!isExtension" class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="sortKey = 'id'">Profile ID</button>
<div v-if="isExtension" class="header-cell">Source</div>
<div v-if="isBookmark" class="header-cell">Bookmark Path</div>
<div class="header-cell actions-cell">Action</div>
</div>
@@ -55,8 +108,24 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
v-for="profile in sortedProfiles"
:key="profile.id"
class="modal-table-row modal-grid"
:class="{ bookmark: isBookmark }"
:class="{ bookmark: isBookmark, extension: isExtension }"
>
<div v-if="isExtension" class="row-cell checkbox-cell">
<label class="table-checkbox" :class="{ disabled: deleteBusy }">
<input
type="checkbox"
class="native-checkbox"
:checked="isSelected(profile.id)"
:disabled="deleteBusy"
@change="emit('toggleProfileSelection', 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="modal-profile-avatar">
<img
v-if="profileAvatarSrc(profile, browserFamilyId)"
@@ -67,10 +136,14 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</div>
<div class="row-cell primary-cell">
<strong>{{ profile.name }}</strong>
<span v-if="isExtension" class="subtle-line">{{ profile.id }}</span>
</div>
<div class="row-cell">
<div v-if="!isExtension" class="row-cell">
<span class="badge neutral">{{ profile.id }}</span>
</div>
<div v-if="isExtension && hasInstallSource(profile)" class="row-cell muted-cell">
{{ profile.installSource === "store" ? "Store" : "External" }}
</div>
<div
v-if="isBookmark && hasBookmarkPath(profile)"
class="row-cell muted-cell"
@@ -87,6 +160,15 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
>
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
</button>
<button
v-if="isExtension"
class="danger-button inline-danger-button"
type="button"
:disabled="deleteBusy"
@click="emit('deleteProfile', profile.id)"
>
Delete
</button>
</div>
</article>
</div>
@@ -155,6 +237,18 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
grid-template-columns: 56px minmax(140px, 0.9fr) 120px minmax(180px, 1fr) 110px;
}
.modal-table-header.modal-grid.extension,
.modal-table-row.modal-grid.extension {
grid-template-columns: 52px 56px minmax(220px, 1fr) 110px 168px;
}
.modal-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.modal-table-header {
padding: 10px 24px 10px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
@@ -187,6 +281,76 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
color: var(--text);
}
.toolbar-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
font-size: 0.88rem;
cursor: pointer;
}
.toolbar-checkbox.disabled {
opacity: 0.55;
cursor: default;
}
.native-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.table-checkbox {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.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));
}
.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;
}
.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;
}
.modal-table-row {
padding: 12px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
@@ -230,6 +394,13 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
line-height: 1.3;
}
.subtle-line {
display: block;
margin-top: 3px;
color: var(--muted-soft);
font-size: 0.8rem;
}
.muted-cell {
color: var(--muted);
font-size: 0.86rem;
@@ -241,24 +412,40 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
.actions-cell {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.icon-cell {
padding-left: 4px;
}
.checkbox-cell {
display: flex;
justify-content: center;
}
.inline-danger-button {
padding: 6px 10px;
border-radius: 10px;
font-size: 0.8rem;
}
@media (max-width: 720px) {
.modal-backdrop {
padding: 12px;
}
.modal-grid,
.modal-grid.bookmark {
grid-template-columns: 56px minmax(0, 1fr) 96px;
.modal-grid.bookmark,
.modal-table-header.modal-grid.extension,
.modal-table-row.modal-grid.extension {
grid-template-columns: 56px minmax(0, 1fr) 120px;
}
.modal-grid > :nth-child(4),
.modal-grid.bookmark > :nth-child(4) {
.modal-grid.bookmark > :nth-child(4),
.modal-table-header.modal-grid.extension > :nth-child(4),
.modal-table-row.modal-grid.extension > :nth-child(4) {
display: none;
}
}

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

@@ -7,11 +7,14 @@ import type {
BrowserView,
ExtensionSortKey,
CleanupHistoryResult,
ExtensionAssociatedProfileSummary,
PasswordSiteSortKey,
ProfileSortKey,
RemoveExtensionResult,
} from "../../types/browser";
import AssociatedProfilesModal from "./AssociatedProfilesModal.vue";
import BookmarksList from "./BookmarksList.vue";
import ExtensionRemovalModal from "./ExtensionRemovalModal.vue";
import ExtensionsList from "./ExtensionsList.vue";
import HistoryCleanupList from "./HistoryCleanupList.vue";
import HistoryCleanupModal from "./HistoryCleanupModal.vue";
@@ -35,6 +38,14 @@ defineProps<{
historyCleanupResultOpen: boolean;
cleanupHistoryError: string;
cleanupHistoryResults: CleanupHistoryResult[];
extensionSelectedIds: string[];
extensionModalSelectedProfileIds: string[];
extensionDeleteBusy: boolean;
extensionRemovalConfirmExtensions: BrowserView["extensions"];
extensionRemovalConfirmProfiles: BrowserView["profiles"];
extensionRemovalResultOpen: boolean;
extensionRemovalError: string;
extensionRemovalResults: RemoveExtensionResult[];
openProfileError: string;
sectionCount: (section: ActiveSection) => number;
isOpeningProfile: (browserId: string, profileId: string) => boolean;
@@ -42,8 +53,14 @@ defineProps<{
associatedProfilesModal: {
title: string;
browserId: string;
profiles: (AssociatedProfileSummary | BookmarkAssociatedProfileSummary)[];
profiles: (
| AssociatedProfileSummary
| BookmarkAssociatedProfileSummary
| ExtensionAssociatedProfileSummary
)[];
isBookmark: boolean;
isExtension?: boolean;
extensionId?: string;
} | null;
}>();
@@ -57,6 +74,17 @@ const emit = defineEmits<{
showExtensionProfiles: [extensionId: string];
showBookmarkProfiles: [url: string];
showPasswordSiteProfiles: [url: string];
toggleExtensionSelection: [extensionId: string];
toggleAllExtensions: [];
deleteExtensionFromAllProfiles: [extensionId: string];
deleteSelectedExtensions: [];
toggleExtensionModalProfileSelection: [profileId: string];
toggleAllExtensionModalProfiles: [];
deleteExtensionFromProfile: [profileId: string];
deleteSelectedExtensionProfiles: [];
confirmExtensionRemoval: [];
closeExtensionRemovalConfirm: [];
closeExtensionRemovalResult: [];
toggleHistoryProfile: [profileId: string];
toggleAllHistoryProfiles: [];
cleanupSelectedHistory: [];
@@ -135,8 +163,14 @@ const emit = defineEmits<{
:extensions="sortedExtensions"
:sort-key="extensionSortKey"
:extension-monogram="extensionMonogram"
:selected-extension-ids="extensionSelectedIds"
:delete-busy="extensionDeleteBusy"
@update:sort-key="emit('update:extensionSortKey', $event)"
@show-profiles="emit('showExtensionProfiles', $event)"
@toggle-extension="emit('toggleExtensionSelection', $event)"
@toggle-all-extensions="emit('toggleAllExtensions')"
@delete-extension="emit('deleteExtensionFromAllProfiles', $event)"
@delete-selected="emit('deleteSelectedExtensions')"
/>
<BookmarksList
@@ -189,6 +223,29 @@ const emit = defineEmits<{
@close="emit('closeHistoryCleanupResult')"
/>
<ExtensionRemovalModal
v-if="extensionRemovalConfirmExtensions.length || extensionRemovalConfirmProfiles.length"
mode="confirm"
title="Confirm Extension Removal"
:extensions="extensionRemovalConfirmExtensions"
:profiles="extensionRemovalConfirmProfiles"
:results="[]"
:busy="extensionDeleteBusy"
@close="emit('closeExtensionRemovalConfirm')"
@confirm="emit('confirmExtensionRemoval')"
/>
<ExtensionRemovalModal
v-if="extensionRemovalResultOpen"
mode="result"
title="Extension Removal Result"
:extensions="[]"
:profiles="[]"
:results="extensionRemovalResults"
:general-error="extensionRemovalError"
@close="emit('closeExtensionRemovalResult')"
/>
<AssociatedProfilesModal
v-if="associatedProfilesModal"
:title="associatedProfilesModal.title"
@@ -196,9 +253,16 @@ const emit = defineEmits<{
:browser-id="associatedProfilesModal.browserId"
:browser-family-id="currentBrowser.browserFamilyId"
:is-bookmark="associatedProfilesModal.isBookmark"
:is-extension="associatedProfilesModal.isExtension"
:selected-profile-ids="extensionModalSelectedProfileIds"
:delete-busy="extensionDeleteBusy"
:is-opening-profile="isOpeningProfile"
@close="emit('closeAssociatedProfiles')"
@open-profile="(browserId, profileId) => emit('openProfile', browserId, profileId)"
@toggle-profile-selection="emit('toggleExtensionModalProfileSelection', $event)"
@toggle-all-profile-selection="emit('toggleAllExtensionModalProfiles')"
@delete-profile="emit('deleteExtensionFromProfile', $event)"
@delete-selected-profiles="emit('deleteSelectedExtensionProfiles')"
/>
</template>

189
src/components/browser-data/ExtensionRemovalModal.vue Normal file
View File

@@ -0,0 +1,189 @@
<script setup lang="ts">
import type { ExtensionSummary, ProfileSummary, RemoveExtensionResult } from "../../types/browser";
defineProps<{
mode: "confirm" | "result";
title: string;
extensions: ExtensionSummary[];
profiles: ProfileSummary[];
results: RemoveExtensionResult[];
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" type="button" @click="emit('close')">Close</button>
</div>
<template v-if="mode === 'confirm'">
<p class="modal-copy">
This will remove the selected extension registrations from <code>Secure Preferences</code>
and <code>Preferences</code>. Store-installed extensions will also have their
<code>Extensions/&lt;id&gt;</code> folder deleted.
</p>
<div v-if="extensions.length" class="info-list styled-scrollbar">
<article v-for="extension in extensions" :key="extension.id" class="info-card">
<strong>{{ extension.name }}</strong>
<span>{{ extension.id }}</span>
</article>
</div>
<div v-if="profiles.length" class="info-list styled-scrollbar">
<article v-for="profile in profiles" :key="profile.id" class="info-card">
<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 ? "Deleting..." : "Confirm Delete" }}
</button>
</div>
</template>
<template v-else>
<p v-if="generalError" class="result-banner error">{{ generalError }}</p>
<div class="info-list styled-scrollbar">
<article
v-for="result in results"
:key="`${result.extensionId}:${result.profileId}`"
class="info-card"
:class="{ error: result.error }"
>
<strong>{{ result.profileId }} · {{ result.extensionId }}</strong>
<span v-if="result.error">{{ result.error }}</span>
<span v-else-if="result.removedFiles.length">
Removed {{ result.removedFiles.join(", ") }}
</span>
<span v-else>
Nothing was removed.
</span>
<span v-if="result.skippedFiles.length" class="muted-line">
Skipped {{ result.skippedFiles.join(", ") }}
</span>
</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(680px, 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,
.modal-copy {
margin: 0;
}
.modal-copy {
color: var(--muted);
line-height: 1.55;
}
.info-list {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
overflow: auto;
}
.info-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);
}
.info-card span {
color: var(--muted);
font-size: 0.85rem;
line-height: 1.45;
}
.info-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;
}
.muted-line {
color: var(--muted-soft);
}
code {
padding: 1px 5px;
border-radius: 7px;
background: rgba(226, 232, 240, 0.72);
color: var(--text);
}
</style>

183
src/components/browser-data/ExtensionsList.vue
View File

@@ -1,29 +1,89 @@
<script setup lang="ts">
import { computed } from "vue";
import type { ExtensionSortKey, ExtensionSummary } from "../../types/browser";
defineProps<{
const props = defineProps<{
extensions: ExtensionSummary[];
sortKey: ExtensionSortKey;
extensionMonogram: (name: string) => string;
selectedExtensionIds: string[];
deleteBusy: boolean;
}>();
const emit = defineEmits<{
"update:sortKey": [value: ExtensionSortKey];
showProfiles: [extensionId: string];
toggleExtension: [extensionId: string];
toggleAllExtensions: [];
deleteExtension: [extensionId: string];
deleteSelected: [];
}>();
const allSelected = computed(
() =>
props.extensions.length > 0 &&
props.extensions.every((extension) => props.selectedExtensionIds.includes(extension.id)),
);
function isSelected(extensionId: string) {
return props.selectedExtensionIds.includes(extensionId);
}
</script>
<template>
<section class="table-section">
<div class="extensions-toolbar">
<label class="toolbar-checkbox" :class="{ disabled: !extensions.length }">
<input
type="checkbox"
class="native-checkbox"
:checked="allSelected"
:disabled="!extensions.length || deleteBusy"
@change="emit('toggleAllExtensions')"
/>
<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
class="danger-button"
type="button"
:disabled="!selectedExtensionIds.length || deleteBusy"
@click="emit('deleteSelected')"
>
{{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedExtensionIds.length})` }}
</button>
</div>
<div v-if="extensions.length" class="data-table">
<div class="data-table-header extensions-grid">
<div class="header-cell checkbox-cell">Pick</div>
<div class="header-cell icon-cell">Icon</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
<button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Extension ID</button>
<div class="header-cell actions-cell">Profiles</div>
<div class="header-cell actions-cell">Actions</div>
</div>
<div class="data-table-body styled-scrollbar">
<article v-for="extension in extensions" :key="extension.id" class="data-table-row extensions-grid">
<div class="row-cell checkbox-cell">
<label class="table-checkbox" :class="{ disabled: deleteBusy }">
<input
type="checkbox"
class="native-checkbox"
:checked="isSelected(extension.id)"
:disabled="deleteBusy"
@change="emit('toggleExtension', extension.id)"
/>
<span class="custom-checkbox" :class="{ checked: isSelected(extension.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="extension-icon table-icon" :class="{ filled: Boolean(extension.iconDataUrl) }">
<img v-if="extension.iconDataUrl" :src="extension.iconDataUrl" :alt="`${extension.name} icon`" />
<span v-else>{{ extensionMonogram(extension.name) }}</span>
@@ -37,6 +97,14 @@ const emit = defineEmits<{
<span>View</span>
<span class="badge neutral">{{ extension.profileIds.length }}</span>
</button>
<button
class="danger-button inline-danger-button"
type="button"
:disabled="deleteBusy"
@click="emit('deleteExtension', extension.id)"
>
Delete
</button>
</div>
</article>
</div>
@@ -49,11 +117,94 @@ const emit = defineEmits<{
<style scoped>
.table-section {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
height: 100%;
min-height: 0;
}
.extensions-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.toolbar-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
font-size: 0.88rem;
cursor: pointer;
}
.toolbar-checkbox.disabled {
opacity: 0.55;
cursor: default;
}
.native-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.table-checkbox {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.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);
}
.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;
}
.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 {
display: flex;
flex-direction: column;
@@ -74,7 +225,7 @@ const emit = defineEmits<{
.extensions-grid {
display: grid;
grid-template-columns: 60px minmax(180px, 1.1fr) minmax(220px, 1fr) 154px;
grid-template-columns: 52px 60px minmax(180px, 1.1fr) minmax(220px, 1fr) 250px;
gap: 12px;
align-items: center;
}
@@ -182,6 +333,18 @@ const emit = defineEmits<{
.actions-cell {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.checkbox-cell {
display: flex;
justify-content: center;
}
.inline-danger-button {
padding: 7px 10px;
border-radius: 12px;
font-size: 0.8rem;
}
.icon-cell {
@@ -190,16 +353,22 @@ const emit = defineEmits<{
@media (max-width: 900px) {
.extensions-grid {
grid-template-columns: 56px minmax(160px, 1fr) minmax(160px, 1fr) 148px;
grid-template-columns: 52px 56px minmax(160px, 1fr) minmax(160px, 1fr) 220px;
}
}
@media (max-width: 720px) {
.extensions-grid {
grid-template-columns: 56px minmax(0, 1fr) 132px;
.extensions-toolbar {
flex-direction: column;
align-items: stretch;
}
.extensions-grid > :nth-child(3) {
.extensions-grid {
grid-template-columns: 52px 56px minmax(0, 1fr) 132px;
}
.extensions-grid > :nth-child(4),
.extensions-grid > :nth-child(5) {
display: none;
}
}

257
src/composables/useBrowserManager.ts
View File

@@ -15,9 +15,13 @@ import type {
CleanupHistoryInput,
CleanupHistoryResponse,
CreateCustomBrowserConfigInput,
ExtensionRemovalRequest,
ExtensionSummary,
ExtensionSortKey,
PasswordSiteSortKey,
ProfileSortKey,
RemoveExtensionsInput,
RemoveExtensionsResponse,
ScanResponse,
} from "../types/browser";
@@ -44,13 +48,28 @@ export function useBrowserManager() {
const associatedProfilesModal = ref<{
title: string;
browserId: string;
profiles: (AssociatedProfileSummary | BookmarkAssociatedProfileSummary)[];
profiles: (
| AssociatedProfileSummary
| BookmarkAssociatedProfileSummary
| ExtensionSummary["profiles"][number]
)[];
isBookmark: boolean;
isExtension?: boolean;
extensionId?: string;
} | null>(null);
const profileSortKey = ref<ProfileSortKey>("name");
const extensionSortKey = ref<ExtensionSortKey>("name");
const bookmarkSortKey = ref<BookmarkSortKey>("title");
const passwordSiteSortKey = ref<PasswordSiteSortKey>("domain");
const extensionSelectedIds = ref<string[]>([]);
const extensionModalSelectedProfileIds = ref<string[]>([]);
const extensionDeleteBusy = ref(false);
const extensionRemovalError = ref("");
const extensionRemovalResults = ref<RemoveExtensionsResponse["results"]>([]);
const extensionRemovalResultOpen = ref(false);
const extensionRemovalConfirmRemovals = ref<ExtensionRemovalRequest[]>([]);
const extensionRemovalConfirmExtensionIds = ref<string[]>([]);
const extensionRemovalConfirmProfileIds = ref<string[]>([]);
const cleanupHistorySelectedProfiles = ref<string[]>([]);
const historyCleanupBusy = ref(false);
const cleanupHistoryError = ref("");
@@ -104,6 +123,14 @@ export function useBrowserManager() {
cleanupHistorySelectedProfiles.value = [];
cleanupHistoryResults.value = [];
cleanupHistoryError.value = "";
extensionSelectedIds.value = [];
extensionModalSelectedProfileIds.value = [];
extensionRemovalError.value = "";
extensionRemovalResults.value = [];
extensionRemovalResultOpen.value = false;
extensionRemovalConfirmRemovals.value = [];
extensionRemovalConfirmExtensionIds.value = [];
extensionRemovalConfirmProfileIds.value = [];
historyCleanupConfirmProfileIds.value = [];
historyCleanupResultOpen.value = false;
});
@@ -298,11 +325,14 @@ export function useBrowserManager() {
function showExtensionProfilesModal(extensionId: string) {
const extension = currentBrowser.value?.extensions.find((item) => item.id === extensionId);
if (!extension || !currentBrowser.value) return;
extensionModalSelectedProfileIds.value = [];
associatedProfilesModal.value = {
title: `${extension.name} Profiles`,
browserId: currentBrowser.value.browserId,
profiles: extension.profiles,
isBookmark: false,
isExtension: true,
extensionId,
};
}
@@ -479,6 +509,212 @@ export function useBrowserManager() {
function closeAssociatedProfilesModal() {
associatedProfilesModal.value = null;
extensionModalSelectedProfileIds.value = [];
}
function toggleExtensionSelection(extensionId: string) {
if (extensionSelectedIds.value.includes(extensionId)) {
extensionSelectedIds.value = extensionSelectedIds.value.filter((id) => id !== extensionId);
return;
}
extensionSelectedIds.value = [...extensionSelectedIds.value, extensionId];
}
function toggleAllExtensions() {
const extensionIds = currentBrowser.value?.extensions.map((extension) => extension.id) ?? [];
const allSelected =
extensionIds.length > 0 &&
extensionIds.every((extensionId) => extensionSelectedIds.value.includes(extensionId));
extensionSelectedIds.value = allSelected ? [] : extensionIds;
}
function toggleExtensionModalProfileSelection(profileId: string) {
if (extensionModalSelectedProfileIds.value.includes(profileId)) {
extensionModalSelectedProfileIds.value = extensionModalSelectedProfileIds.value.filter(
(id) => id !== profileId,
);
return;
}
extensionModalSelectedProfileIds.value = [
...extensionModalSelectedProfileIds.value,
profileId,
];
}
function toggleAllExtensionModalProfiles() {
if (!associatedProfilesModal.value?.isExtension) return;
const profileIds = associatedProfilesModal.value.profiles.map((profile) => profile.id);
const allSelected =
profileIds.length > 0 &&
profileIds.every((profileId) => extensionModalSelectedProfileIds.value.includes(profileId));
extensionModalSelectedProfileIds.value = allSelected ? [] : profileIds;
}
function extensionRemovalConfirmExtensions() {
const browser = currentBrowser.value;
if (!browser) return [];
return browser.extensions.filter((extension) =>
extensionRemovalConfirmExtensionIds.value.includes(extension.id),
);
}
function extensionRemovalConfirmProfiles() {
const browser = currentBrowser.value;
if (!browser) return [];
return browser.profiles.filter((profile) =>
extensionRemovalConfirmProfileIds.value.includes(profile.id),
);
}
function requestExtensionRemoval(removals: ExtensionRemovalRequest[]) {
if (!removals.length) return;
extensionRemovalConfirmRemovals.value = removals;
extensionRemovalConfirmExtensionIds.value = [...new Set(removals.map((item) => item.extensionId))];
extensionRemovalConfirmProfileIds.value = [
...new Set(removals.flatMap((item) => item.profileIds)),
];
}
function deleteExtensionFromAllProfiles(extensionId: string) {
const extension = currentBrowser.value?.extensions.find((item) => item.id === extensionId);
if (!extension) return;
requestExtensionRemoval([
{
extensionId,
profileIds: [...extension.profileIds],
},
]);
}
function deleteSelectedExtensions() {
const browser = currentBrowser.value;
if (!browser || !extensionSelectedIds.value.length) return;
const removals = browser.extensions
.filter((extension) => extensionSelectedIds.value.includes(extension.id))
.map((extension) => ({
extensionId: extension.id,
profileIds: [...extension.profileIds],
}));
requestExtensionRemoval(removals);
}
function deleteExtensionFromProfile(profileId: string) {
const modal = associatedProfilesModal.value;
if (!modal?.isExtension || !modal.extensionId) {
return;
}
requestExtensionRemoval([
{
extensionId: modal.extensionId,
profileIds: [profileId],
},
]);
}
function deleteSelectedExtensionProfiles() {
const modal = associatedProfilesModal.value;
if (
!modal?.isExtension ||
!modal.extensionId ||
!extensionModalSelectedProfileIds.value.length
) {
return;
}
requestExtensionRemoval([
{
extensionId: modal.extensionId,
profileIds: [...extensionModalSelectedProfileIds.value],
},
]);
}
function closeExtensionRemovalConfirm() {
if (extensionDeleteBusy.value) return;
extensionRemovalConfirmRemovals.value = [];
extensionRemovalConfirmExtensionIds.value = [];
extensionRemovalConfirmProfileIds.value = [];
}
function closeExtensionRemovalResult() {
extensionRemovalResultOpen.value = false;
extensionRemovalResults.value = [];
extensionRemovalError.value = "";
}
function applyExtensionRemovalResults(results: RemoveExtensionsResponse["results"]) {
const browser = currentBrowser.value;
if (!browser) return;
for (const result of results) {
if (result.error) continue;
const extension = browser.extensions.find((item) => item.id === result.extensionId);
if (!extension) continue;
extension.profileIds = extension.profileIds.filter((id) => id !== result.profileId);
extension.profiles = extension.profiles.filter((profile) => profile.id !== result.profileId);
}
browser.extensions = browser.extensions.filter((extension) => extension.profileIds.length > 0);
browser.stats.extensionCount = browser.extensions.length;
extensionSelectedIds.value = extensionSelectedIds.value.filter((selectedId) =>
browser.extensions.some((extension) => extension.id === selectedId),
);
if (associatedProfilesModal.value?.isExtension && "extensionId" in associatedProfilesModal.value) {
const currentExtension = browser.extensions.find(
(extension) => extension.id === associatedProfilesModal.value?.extensionId,
);
if (!currentExtension) {
associatedProfilesModal.value = null;
extensionModalSelectedProfileIds.value = [];
} else {
associatedProfilesModal.value = {
...associatedProfilesModal.value,
profiles: currentExtension.profiles,
};
extensionModalSelectedProfileIds.value = extensionModalSelectedProfileIds.value.filter((id) =>
currentExtension.profiles.some((profile) => profile.id === id),
);
}
}
}
async function confirmExtensionRemoval() {
const browser = currentBrowser.value;
const removals = extensionRemovalConfirmRemovals.value.map((item) => ({
extensionId: item.extensionId,
profileIds: [...item.profileIds],
}));
if (!browser || !removals.length) return;
extensionDeleteBusy.value = true;
extensionRemovalError.value = "";
extensionRemovalResults.value = [];
extensionRemovalResultOpen.value = false;
try {
const input: RemoveExtensionsInput = {
browserId: browser.browserId,
removals,
};
const result = await invoke<RemoveExtensionsResponse>("remove_extensions", { input });
applyExtensionRemovalResults(result.results);
extensionRemovalResults.value = result.results;
closeExtensionRemovalConfirm();
extensionRemovalResultOpen.value = true;
} catch (removeError) {
closeExtensionRemovalConfirm();
extensionRemovalError.value =
removeError instanceof Error ? removeError.message : "Failed to remove extensions.";
extensionRemovalResultOpen.value = true;
} finally {
extensionDeleteBusy.value = false;
}
}
onMounted(() => {
@@ -499,8 +735,20 @@ export function useBrowserManager() {
createCustomBrowserConfig,
currentBrowser,
deleteCustomBrowserConfig,
deleteExtensionFromAllProfiles,
deleteExtensionFromProfile,
deleteSelectedExtensionProfiles,
deleteSelectedExtensions,
error,
extensionMonogram,
extensionDeleteBusy,
extensionModalSelectedProfileIds,
extensionRemovalConfirmExtensions: computed(extensionRemovalConfirmExtensions),
extensionRemovalConfirmProfiles: computed(extensionRemovalConfirmProfiles),
extensionRemovalError,
extensionRemovalResultOpen,
extensionRemovalResults,
extensionSelectedIds,
extensionSortKey,
cleanupHistoryError,
cleanupHistoryResults,
@@ -533,7 +781,14 @@ export function useBrowserManager() {
sortedExtensions,
sortedPasswordSites,
sortedProfiles,
closeExtensionRemovalConfirm,
closeExtensionRemovalResult,
confirmExtensionRemoval,
cleanupHistoryForProfile,
toggleAllExtensions,
toggleAllExtensionModalProfiles,
toggleExtensionModalProfileSelection,
toggleExtensionSelection,
toggleAllHistoryProfiles,
toggleHistoryProfile,
closeAssociatedProfilesModal,

37
src/types/browser.ts
View File

@@ -25,7 +25,7 @@ export type ExtensionSummary = {
version: string | null;
iconDataUrl: string | null;
profileIds: string[];
profiles: AssociatedProfileSummary[];
profiles: ExtensionAssociatedProfileSummary[];
};
export type BookmarkSummary = {
@@ -67,6 +67,28 @@ export type CleanupHistoryResponse = {
results: CleanupHistoryResult[];
};
export type RemoveExtensionsInput = {
browserId: string;
removals: ExtensionRemovalRequest[];
};
export type ExtensionRemovalRequest = {
extensionId: string;
profileIds: string[];
};
export type RemoveExtensionsResponse = {
results: RemoveExtensionResult[];
};
export type RemoveExtensionResult = {
extensionId: string;
profileId: string;
removedFiles: string[];
skippedFiles: string[];
error: string | null;
};
export type AssociatedProfileSummary = {
id: string;
name: string;
@@ -77,6 +99,19 @@ export type AssociatedProfileSummary = {
avatarLabel: string;
};
export type ExtensionInstallSource = "store" | "external";
export type ExtensionAssociatedProfileSummary = {
id: string;
name: string;
avatarDataUrl: string | null;
avatarIcon: string | null;
defaultAvatarFillColor: number | null;
defaultAvatarStrokeColor: number | null;
avatarLabel: string;
installSource: ExtensionInstallSource;
};
export type BookmarkAssociatedProfileSummary = {
id: string;
name: string;

7
src/utils/sort.ts
View File

@@ -8,6 +8,7 @@ import type {
AssociatedProfileSortKey,
AssociatedProfileSummary,
BookmarkAssociatedProfileSummary,
ExtensionAssociatedProfileSummary,
ProfileSortKey,
ProfileSummary,
} from "../types/browser";
@@ -89,7 +90,11 @@ export function sortPasswordSites(items: PasswordSiteSummary[], sortKey: Passwor
}
export function sortAssociatedProfiles(
items: (AssociatedProfileSummary | BookmarkAssociatedProfileSummary)[],
items: (
| AssociatedProfileSummary
| BookmarkAssociatedProfileSummary
| ExtensionAssociatedProfileSummary
)[],
sortKey: AssociatedProfileSortKey,
) {
const profiles = [...items];