From 3d0914881d45cf158cedde137d3fcc56db667784 Mon Sep 17 00:00:00 2001
From: e-salad <e-salad@users.noreply.github.com>
Date: Fri, 22 Nov 2024 20:52:46 -0600
Subject: [PATCH 1/3] implement script selection load

---
 .../TheRecommendationSelector.vue             | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue b/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
index fdac58ca..d5d16510 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
@@ -81,6 +81,22 @@
         />
       </template>
     </TooltipWrapper>
+
+    <!-- Load from file -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="Import"
+        :enabled="true"
+        @click="loadFromFile"
+      />
+      <template #tooltip>
+        <RecommendationDocumentation
+          :privacy-rating="0"
+          description="Restores a previously saved script selection from a JSON file."
+          recommendation="..."
+        />
+      </template>
+    </TooltipWrapper>
   </MenuOptionList>
 </template>
 
@@ -97,6 +113,10 @@ import { setCurrentRecommendationStatus, getCurrentRecommendationStatus } from '
 import { RecommendationStatusType } from './RecommendationStatusType';
 import RecommendationDocumentation from './RecommendationDocumentation.vue';
 
+interface SavedSelection {
+  selectedScripts: string[];
+}
+
 export default defineComponent({
   components: {
     MenuOptionList,
@@ -134,10 +154,64 @@ export default defineComponent({
       });
     }
 
+    async function loadFromFile() {
+      try {
+        // Use file input to load the JSON file
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+
+        // Create a promise to handle the file selection
+        const file = await new Promise<File>((resolve, reject) => {
+          input.onchange = (event) => {
+            const { files } = (event.target as HTMLInputElement);
+            if (files && files.length > 0) {
+              resolve(files[0]);
+            } else {
+              reject(new Error('No file selected'));
+            }
+          };
+          input.click();
+        });
+
+        // Read the file content
+        const content = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result as string);
+          reader.onerror = () => reject(reader.error);
+          reader.readAsText(file);
+        });
+
+        const savedSelection = JSON.parse(content) as SavedSelection;
+
+        // Update the current selection state
+        modifyCurrentSelection((selection) => {
+          // First deselect all scripts
+          selection.scripts.deselectAll();
+
+          // Then select all scripts from the saved selection
+          savedSelection.selectedScripts.forEach((scriptId) => {
+            selection.scripts.processChanges({
+              changes: [{
+                scriptId,
+                newStatus: {
+                  isSelected: true,
+                  isReverted: false,
+                },
+              }],
+            });
+          });
+        });
+      } catch (error) {
+        console.error('Failed to load selection:', error);
+      }
+    }
+
     return {
       RecommendationStatusType,
       currentRecommendationStatusType,
       selectRecommendationStatusType,
+      loadFromFile,
     };
   },
 });

From 2c2c742584989e518a71f891fcba3a7f7b23bd79 Mon Sep 17 00:00:00 2001
From: e-salad <e-salad@users.noreply.github.com>
Date: Fri, 22 Nov 2024 21:29:24 -0600
Subject: [PATCH 2/3] implement script selection export

---
 .../Electron/NodeElectronSaveFileDialog.ts    |  6 +++
 src/presentation/common/Dialog.ts             |  1 +
 .../CodeButtons/Save/SaveSelectionButton.vue  | 50 +++++++++++++++++++
 .../Code/CodeButtons/TheCodeButtons.vue       |  3 ++
 4 files changed, 60 insertions(+)
 create mode 100644 src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue

diff --git a/src/infrastructure/Dialog/Electron/NodeElectronSaveFileDialog.ts b/src/infrastructure/Dialog/Electron/NodeElectronSaveFileDialog.ts
index 6eef3ef0..4364411e 100644
--- a/src/infrastructure/Dialog/Electron/NodeElectronSaveFileDialog.ts
+++ b/src/infrastructure/Dialog/Electron/NodeElectronSaveFileDialog.ts
@@ -164,6 +164,12 @@ const FileTypeSpecificFilters: Record<FileType, Electron.FileFilter[]> = {
       extensions: ['sh', 'bash', 'zsh'],
     },
   ],
+  [FileType.Json]: [
+    {
+      name: 'JSON Files',
+      extensions: ['json'],
+    },
+  ],
 };
 
 type SaveDialogOutcome =
diff --git a/src/presentation/common/Dialog.ts b/src/presentation/common/Dialog.ts
index 2882c5b8..e79f53a8 100644
--- a/src/presentation/common/Dialog.ts
+++ b/src/presentation/common/Dialog.ts
@@ -6,6 +6,7 @@ export interface Dialog {
 export enum FileType {
   BatchFile,
   ShellScript,
+  Json,
 }
 
 export type SaveFileOutcome = SuccessfulSaveFile | FailedSaveFile;
diff --git a/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue b/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue
new file mode 100644
index 00000000..624bdc7f
--- /dev/null
+++ b/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue
@@ -0,0 +1,50 @@
+<template>
+  <IconButton
+    text="Save Selection"
+    icon-name="content-save"
+    @click="saveSelection"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
+import { FileType } from '@/presentation/common/Dialog';
+import IconButton from '../IconButton.vue';
+
+export default defineComponent({
+  components: {
+    IconButton,
+  },
+  setup() {
+    const { currentSelection } = injectKey((keys) => keys.useUserSelectionState);
+    const { dialog } = injectKey((keys) => keys.useDialog);
+    const { projectDetails } = injectKey((keys) => keys.useApplication);
+
+    async function saveSelection() {
+      // Create a config object with the current selection state
+      const config = {
+        version: projectDetails.version,
+        selectedScripts: currentSelection.value.scripts.selectedScripts.map((script) => script.id),
+        timestamp: new Date().toISOString(),
+      };
+
+      const configJson = JSON.stringify(config, null, 2);
+
+      const { success, error } = await dialog.saveFile(
+        configJson,
+        'privacy-selection.json',
+        FileType.Json,
+      );
+
+      if (!success && error) {
+        console.error('Failed to save selection:', error);
+      }
+    }
+
+    return {
+      saveSelection,
+    };
+  },
+});
+</script>
diff --git a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue b/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
index 9cc1dc91..71493e53 100644
--- a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
+++ b/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
@@ -2,6 +2,7 @@
   <div v-if="hasCode" class="container">
     <CodeRunButton class="code-button" />
     <CodeSaveButton class="code-button" />
+    <SaveSelectionButton class="code-button" />
     <CodeCopyButton class="code-button" />
   </div>
 </template>
@@ -14,12 +15,14 @@ import { injectKey } from '@/presentation/injectionSymbols';
 import CodeRunButton from './CodeRunButton.vue';
 import CodeCopyButton from './CodeCopyButton.vue';
 import CodeSaveButton from './Save/CodeSaveButton.vue';
+import SaveSelectionButton from './Save/SaveSelectionButton.vue';
 
 export default defineComponent({
   components: {
     CodeRunButton,
     CodeCopyButton,
     CodeSaveButton,
+    SaveSelectionButton,
   },
   setup() {
     const { currentCode } = injectKey((keys) => keys.useCurrentCode);

From 7aa31e54188af51a14ec193c4f88839946061315 Mon Sep 17 00:00:00 2001
From: e-salad <e-salad@users.noreply.github.com>
Date: Sat, 23 Nov 2024 00:47:15 -0600
Subject: [PATCH 3/3] improve script selection functionality

- Improve validation for configuration import
- Refactor SaveSelectionButton.vue implementation
- Add floppy-disk-gear icon for SaveSelectionButton
---
 .../Dialog/Browser/FileSaverDialog.ts         |  2 +
 .../assets/icons/floppy-disk-gear.svg         |  4 ++
 .../CodeButtons/Save/SaveSelectionButton.vue  | 30 +++++---
 .../TheRecommendationSelector.vue             | 70 ++++++++++++++++---
 .../components/Shared/Icon/IconName.ts        |  1 +
 5 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 src/presentation/assets/icons/floppy-disk-gear.svg

diff --git a/src/infrastructure/Dialog/Browser/FileSaverDialog.ts b/src/infrastructure/Dialog/Browser/FileSaverDialog.ts
index b29e565d..4d77961c 100644
--- a/src/infrastructure/Dialog/Browser/FileSaverDialog.ts
+++ b/src/infrastructure/Dialog/Browser/FileSaverDialog.ts
@@ -39,4 +39,6 @@ const MimeTypes: Record<FileType, string> = {
   // otherwise they ignore extension and save the file as text.
   [FileType.BatchFile]: 'application/bat', // https://en.wikipedia.org/wiki/Batch_file
   [FileType.ShellScript]: 'text/x-shellscript', // https://de.wikipedia.org/wiki/Shellskript#MIME-Typ
+  [FileType.Json]: 'application/json', // https://en.wikipedia.org/wiki/JSON
+
 } as const;
diff --git a/src/presentation/assets/icons/floppy-disk-gear.svg b/src/presentation/assets/icons/floppy-disk-gear.svg
new file mode 100644
index 00000000..3f5b8e79
--- /dev/null
+++ b/src/presentation/assets/icons/floppy-disk-gear.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="574" height="598" fill="none" viewBox="0 0 574 598">
+  <path fill="#000" fill-rule="evenodd" d="M64 118c-35.3 0-64 28.7-64 64v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V259.3c0-4.065-2.419-7.665-5.947-9.683l-16.092-9.206a7.525 7.525 0 0 0-9.9 2.215 7.523 7.523 0 0 1-8.2 2.929l-9.317-2.621a13.974 13.974 0 0 1-2.95-1.206l-32.763-17.997a14.371 14.371 0 0 1-2.48-1.721c-2.445-2.111-6.902-6.089-7.351-8.51l-1-15-.901-15.774c-.065-1.132-.637-2.272-.373-3.376.083-.35.189-.69.088-1.13-.114-.503-.309-1.005-.33-1.519-.154-3.786-1.406-6.45-3.233-8.247-1.591-1.565-28.072-13.97-28.743-16.099-.225-.711-.275-.761-.645-1.409-1.691-2.958-6.081-11.792-4.863-21.946 1.5-12.5-7-10.907-7.5-11-.5-.093-241.5 0-241.5 0Zm32 64c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32v-64c0-17.7-14.3-32-32-32H96Zm173.255 210.745a64.003 64.003 0 0 0-90.51 0 64 64 0 1 0 90.51 0Z" clip-rule="evenodd"/>
+  <path fill="#000" d="M571.685 93.628a9.005 9.005 0 0 0-4.376-6.074l-22.495-12.82a22 22 0 0 1-11.107-19.036l-.09-25.088a8.992 8.992 0 0 0-3.183-6.84A125.878 125.878 0 0 0 489.127.518a9.003 9.003 0 0 0-7.267.664L458.749 14.1a22 22 0 0 1-21.475-.003L414.128 1.148a9.003 9.003 0 0 0-7.278-.675 125.88 125.88 0 0 0-41.263 23.342 8.997 8.997 0 0 0-3.183 6.829l-.112 25.135a22 22 0 0 1-11.107 19.016L328.679 87.62a8.997 8.997 0 0 0-4.376 6.075 119.776 119.776 0 0 0 0 46.752 8.998 8.998 0 0 0 4.376 6.074l22.495 12.82a22.004 22.004 0 0 1 11.107 19.035l.089 25.1a8.994 8.994 0 0 0 3.184 6.84 125.892 125.892 0 0 0 41.307 23.252 9.003 9.003 0 0 0 7.267-.664l23.138-12.959a22.002 22.002 0 0 1 21.492-.006l23.135 12.943a8.9 8.9 0 0 0 4.388 1.125 9.112 9.112 0 0 0 2.891-.473 126.092 126.092 0 0 0 41.262-23.32 9.006 9.006 0 0 0 3.183-6.828l.112-25.135a22.003 22.003 0 0 1 11.107-19.016l22.507-12.826a9.005 9.005 0 0 0 4.376-6.075 119.813 119.813 0 0 0-.034-46.707Zm-123.674 68.384a44.997 44.997 0 1 1-.001-89.993 44.997 44.997 0 0 1 .001 89.993Z"/>
+</svg>
diff --git a/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue b/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue
index 624bdc7f..32bb205e 100644
--- a/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue
@@ -1,7 +1,7 @@
 <template>
   <IconButton
     text="Save Selection"
-    icon-name="content-save"
+    icon-name="floppy-disk-gear"
     @click="saveSelection"
   />
 </template>
@@ -11,6 +11,13 @@ import { defineComponent } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { FileType } from '@/presentation/common/Dialog';
 import IconButton from '../IconButton.vue';
+import { createScriptErrorDialog } from '../ScriptErrorDialog';
+
+interface SelectionConfig {
+  version: string;
+  timestamp: string;
+  selectedScripts: string[];
+}
 
 export default defineComponent({
   components: {
@@ -20,25 +27,28 @@ export default defineComponent({
     const { currentSelection } = injectKey((keys) => keys.useUserSelectionState);
     const { dialog } = injectKey((keys) => keys.useDialog);
     const { projectDetails } = injectKey((keys) => keys.useApplication);
+    const { scriptDiagnosticsCollector } = injectKey((keys) => keys.useScriptDiagnosticsCollector);
 
     async function saveSelection() {
-      // Create a config object with the current selection state
-      const config = {
-        version: projectDetails.version,
-        selectedScripts: currentSelection.value.scripts.selectedScripts.map((script) => script.id),
+      const config: SelectionConfig = {
+        version: projectDetails.version.toString(),
         timestamp: new Date().toISOString(),
+        selectedScripts: currentSelection.value.scripts.selectedScripts.map((script) => script.id),
       };
 
-      const configJson = JSON.stringify(config, null, 2);
-
       const { success, error } = await dialog.saveFile(
-        configJson,
+        JSON.stringify(config, null, 2),
         'privacy-selection.json',
         FileType.Json,
       );
 
-      if (!success && error) {
-        console.error('Failed to save selection:', error);
+      if (!success) {
+        dialog.showError(...(await createScriptErrorDialog({
+          errorContext: 'save',
+          errorType: error.type,
+          errorMessage: error.message,
+          isFileReadbackError: error.type === 'FileReadbackVerificationError',
+        }, scriptDiagnosticsCollector)));
       }
     }
 
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue b/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
index d5d16510..c2fcb320 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
@@ -86,7 +86,7 @@
     <TooltipWrapper>
       <MenuOptionListItem
         label="Import"
-        :enabled="true"
+        :enabled="!isImporting"
         @click="loadFromFile"
       />
       <template #tooltip>
@@ -94,6 +94,10 @@
           :privacy-rating="0"
           description="Restores a previously saved script selection from a JSON file."
           recommendation="..."
+          :considerations="[
+            'All current selections will be cleared before import',
+            'Only .json files exported by privacy.sexy are supported',
+          ]"
         />
       </template>
     </TooltipWrapper>
@@ -102,7 +106,7 @@
 
 <script lang="ts">
 import {
-  defineComponent, computed,
+  defineComponent, computed, ref,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
@@ -114,6 +118,8 @@ import { RecommendationStatusType } from './RecommendationStatusType';
 import RecommendationDocumentation from './RecommendationDocumentation.vue';
 
 interface SavedSelection {
+  version?: string;
+  timestamp?: string;
   selectedScripts: string[];
 }
 
@@ -129,6 +135,7 @@ export default defineComponent({
       currentSelection, modifyCurrentSelection,
     } = injectKey((keys) => keys.useUserSelectionState);
     const { currentState } = injectKey((keys) => keys.useCollectionState);
+    const { dialog } = injectKey((keys) => keys.useDialog);
 
     const currentCollection = computed<ICategoryCollection>(() => currentState.value.collection);
 
@@ -142,6 +149,8 @@ export default defineComponent({
       },
     });
 
+    const isImporting = ref(false);
+
     function selectRecommendationStatusType(type: RecommendationStatusType) {
       if (currentRecommendationStatusType.value === type) {
         return;
@@ -155,13 +164,16 @@ export default defineComponent({
     }
 
     async function loadFromFile() {
+      if (isImporting.value) {
+        return;
+      }
+
       try {
-        // Use file input to load the JSON file
+        isImporting.value = true;
         const input = document.createElement('input');
         input.type = 'file';
         input.accept = '.json';
 
-        // Create a promise to handle the file selection
         const file = await new Promise<File>((resolve, reject) => {
           input.onchange = (event) => {
             const { files } = (event.target as HTMLInputElement);
@@ -174,23 +186,53 @@ export default defineComponent({
           input.click();
         });
 
-        // Read the file content
         const content = await new Promise<string>((resolve, reject) => {
           const reader = new FileReader();
           reader.onload = () => resolve(reader.result as string);
-          reader.onerror = () => reject(reader.error);
+          reader.onerror = () => reject(new Error('Failed to read file'));
           reader.readAsText(file);
         });
 
-        const savedSelection = JSON.parse(content) as SavedSelection;
+        let savedSelection: SavedSelection;
+        try {
+          savedSelection = JSON.parse(content) as SavedSelection;
+          if (!Array.isArray(savedSelection.selectedScripts)) {
+            throw new Error('Invalid file format: missing or invalid scripts array');
+          }
+        } catch (parseError) {
+          dialog.showError('Import Error', 'The selected file is not a valid selection file.');
+          return;
+        }
 
         // Update the current selection state
-        modifyCurrentSelection((selection) => {
+        await modifyCurrentSelection((selection) => {
           // First deselect all scripts
           selection.scripts.deselectAll();
 
-          // Then select all scripts from the saved selection
-          savedSelection.selectedScripts.forEach((scriptId) => {
+          // Validate and apply each script selection
+          const validScripts = savedSelection.selectedScripts.filter(
+            (scriptId) => {
+              try {
+                return currentCollection.value.getScript(scriptId) !== undefined;
+              } catch {
+                return false;
+              }
+            },
+          );
+
+          if (validScripts.length === 0) {
+            throw new Error('No valid scripts found in the imported selection');
+          }
+
+          if (validScripts.length !== savedSelection.selectedScripts.length) {
+            dialog.showError(
+              'Import Warning',
+              'Some scripts from the imported selection were not found in the current collection.',
+            );
+          }
+
+          // Apply valid script selections
+          validScripts.forEach((scriptId) => {
             selection.scripts.processChanges({
               changes: [{
                 scriptId,
@@ -203,7 +245,12 @@ export default defineComponent({
           });
         });
       } catch (error) {
-        console.error('Failed to load selection:', error);
+        if (error instanceof Error && error.message !== 'No file selected') {
+          dialog.showError('Import Error', `Failed to import selection: ${error.message}`);
+          console.error('Failed to load selection:', error);
+        }
+      } finally {
+        isImporting.value = false;
       }
     }
 
@@ -212,6 +259,7 @@ export default defineComponent({
       currentRecommendationStatusType,
       selectRecommendationStatusType,
       loadFromFile,
+      isImporting,
     };
   },
 });
diff --git a/src/presentation/components/Shared/Icon/IconName.ts b/src/presentation/components/Shared/Icon/IconName.ts
index 8c97c488..769f3cf1 100644
--- a/src/presentation/components/Shared/Icon/IconName.ts
+++ b/src/presentation/components/Shared/Icon/IconName.ts
@@ -16,6 +16,7 @@ export const IconNames = [
   'left-right',
   'file-arrow-down',
   'floppy-disk',
+  'floppy-disk-gear',
   'play',
   'lightbulb',
   'square-check',