Fix browser instructions appearing on desktop

Previously, the app showed browser download/run instructions on the
desktop version, which was irrelevant for desktop users. This change
improves the user experience by displaying these instructions only
in browser environments.

This change streamlines the script saving process for desktop users
while maintaining the necessary guidance for browser users.

The commit:

- Prevents the instruction modal from appearing on desktop
- Renames components for clarity (e.g., 'RunInstructions' to
  'BrowserRunInstructions')
- Adds a check to ensure browser environment before showing
  instructions

src/presentation/components/Code/CodeButtons/Save/BrowserRunInstructions/BrowserRunInstructions.vue

@@ -47,6 +47,8 @@ export default defineComponent({
     },
   },
   setup() {
+    ensureBrowserEnvironment();
+
     const { currentState } = injectKey((keys) => keys.useCollectionState);
 
     const { projectDetails } = injectKey((keys) => keys.useApplication);
@@ -70,6 +72,13 @@ export default defineComponent({
     };
   },
 });
+
+function ensureBrowserEnvironment(): void {
+  const { isRunningAsDesktopApplication } = injectKey((keys) => keys.useRuntimeEnvironment);
+  if (isRunningAsDesktopApplication) {
+    throw new Error('Not applicable in desktop environments');
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/presentation/components/Code/CodeButtons/Save/CodeSaveButton.vue

@@ -6,7 +6,7 @@
       @click="saveCode"
     />
     <ModalDialog v-model="areInstructionsVisible">
-      <RunInstructions :filename="filename" />
+      <BrowserRunInstructions :filename="filename" />
     </ModalDialog>
   </div>
 </template>
@@ -23,12 +23,12 @@ import { ScriptFilename } from '@/application/CodeRunner/ScriptFilename';
 import { FileType } from '@/presentation/common/Dialog';
 import IconButton from '../IconButton.vue';
 import { createScriptErrorDialog } from '../ScriptErrorDialog';
-import RunInstructions from './RunInstructions/RunInstructions.vue';
+import BrowserRunInstructions from './BrowserRunInstructions/BrowserRunInstructions.vue';
 
 export default defineComponent({
   components: {
     IconButton,
-    RunInstructions,
+    BrowserRunInstructions,
     ModalDialog,
   },
   setup() {
@@ -55,7 +55,12 @@ export default defineComponent({
         }, scriptDiagnosticsCollector)));
         return;
       }
-      areInstructionsVisible.value = true;
+      if (!isRunningAsDesktopApplication) {
+        areInstructionsVisible.value = true;
+      }
+      // On desktop, it would be better to to prompt the user with a system
+      // dialog offering options after saving, such as:
+      // • Open Containing Folder • "Open File" in default text editor • Close
     }
 
     return {

tests/unit/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { VueWrapper, shallowMount } from '@vue/test-utils';
-import CopyableCommand from '@/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue';
+import CopyableCommand from '@/presentation/components/Code/CodeButtons/Save/BrowserRunInstructions/Steps/CopyableCommand.vue';
 import { expectThrowsAsync } from '@tests/shared/Assertions/ExpectThrowsAsync';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import type { Clipboard } from '@/presentation/components/Shared/Hooks/Clipboard/Clipboard';

tests/unit/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/PlatformInstructionSteps.spec.ts

@@ -1,14 +1,14 @@
 import { shallowMount } from '@vue/test-utils';
-import PlatformInstructionSteps from '@/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/PlatformInstructionSteps.vue';
+import PlatformInstructionSteps from '@/presentation/components/Code/CodeButtons/Save/BrowserRunInstructions/Steps/PlatformInstructionSteps.vue';
 import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { UseCollectionStateStub } from '@tests/unit/shared/Stubs/UseCollectionStateStub';
 import { AllSupportedOperatingSystems, type SupportedOperatingSystem } from '@tests/shared/TestCases/SupportedOperatingSystems';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
-import WindowsInstructions from '@/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/WindowsInstructions.vue';
-import MacOsInstructions from '@/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/MacOsInstructions.vue';
-import LinuxInstructions from '@/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/LinuxInstructions.vue';
+import WindowsInstructions from '@/presentation/components/Code/CodeButtons/Save/BrowserRunInstructions/Steps/Platforms/WindowsInstructions.vue';
+import MacOsInstructions from '@/presentation/components/Code/CodeButtons/Save/BrowserRunInstructions/Steps/Platforms/MacOsInstructions.vue';
+import LinuxInstructions from '@/presentation/components/Code/CodeButtons/Save/BrowserRunInstructions/Steps/Platforms/LinuxInstructions.vue';
 import type { Component } from 'vue';
 
 describe('PlatformInstructionSteps', () => {