fix extensions bug

src/components/browser-data/ExtensionRemovalModal.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 import type { ExtensionSummary, ProfileSummary, RemoveExtensionResult } from "../../types/browser";
 
-defineProps<{
+const props = defineProps<{
   mode: "confirm" | "result";
   title: string;
   extensions: ExtensionSummary[];
@@ -15,6 +17,40 @@ const emit = defineEmits<{
   close: [];
   confirm: [];
 }>();
+
+const confirmSummary = computed(() => ({
+  extensionCount: props.extensions.length,
+  profileCount: props.profiles.length,
+}));
+
+const resultSummary = computed(() => {
+  const statusByExtension = new Map<string, boolean>();
+
+  for (const result of props.results) {
+    const previous = statusByExtension.get(result.extensionId);
+    const succeeded = !result.error;
+
+    if (previous === undefined) {
+      statusByExtension.set(result.extensionId, succeeded);
+      continue;
+    }
+
+    statusByExtension.set(result.extensionId, previous && succeeded);
+  }
+
+  let successCount = 0;
+  let failedCount = 0;
+
+  for (const succeeded of statusByExtension.values()) {
+    if (succeeded) {
+      successCount += 1;
+    } else {
+      failedCount += 1;
+    }
+  }
+
+  return { successCount, failedCount };
+});
 </script>
 
 <template>
@@ -27,25 +63,13 @@ const emit = defineEmits<{
 
       <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.
+          This will remove {{ confirmSummary.extensionCount }} extension{{
+            confirmSummary.extensionCount === 1 ? "" : "s"
+          }} from {{ confirmSummary.profileCount }} profile{{
+            confirmSummary.profileCount === 1 ? "" : "s"
+          }}.
         </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')">
@@ -56,27 +80,13 @@ const emit = defineEmits<{
 
       <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>
+        <p class="modal-copy">
+          Successfully removed {{ resultSummary.successCount }} extension{{
+            resultSummary.successCount === 1 ? "" : "s"
+          }}. Failed to remove {{ resultSummary.failedCount }} extension{{
+            resultSummary.failedCount === 1 ? "" : "s"
+          }}.
+        </p>
 
         <div class="modal-actions">
           <button class="primary-button" type="button" @click="emit('close')">Close</button>
@@ -129,34 +139,6 @@ const emit = defineEmits<{
   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;