Improved "generate debug log" flow

.gitignore

@@ -2,9 +2,11 @@
 dist
 *.syso
 
-
 .DS_Store
 
+# Specifically allow the provided code workspace with the multi-root workaround
+!.vscode/SatisfactoryModManager.code-workspace
+
 # Created by https://www.toptal.com/developers/gitignore/api/goland+all,go,visualstudiocode
 # Edit at https://www.toptal.com/developers/gitignore?templates=goland+all,go,visualstudiocode
 

.vscode/SatisfactoryModManager.code-workspace

@@ -0,0 +1,35 @@
+{
+	// Needed for vscode ESLint to work
+	// https://stackoverflow.com/questions/47405315/visual-studio-code-and-subfolder-specific-settings
+	"folders": [
+		{
+			"name": "root",
+			"path": "../."
+		},
+		{
+			"path": "../frontend"
+		},
+		{
+			"path": "../backend"
+		}
+	],
+	"settings": {
+		"files.exclude": {
+			"**/.git": true,
+			"backend": true,
+			"frontend": true
+		},
+	},
+	"extensions": {
+		"recommendations": [
+			"svelte.svelte-vscode",
+			"streetsidesoftware.code-spell-checker",
+			"dbaeumer.vscode-eslint",
+			"davidanson.vscode-markdownlint",
+			"herrmannplatz.npm-dependency-links",
+			"medo64.render-crlf",
+			"redhat.vscode-yaml",
+			"golang.go"
+		]
+	}
+}

README.md

@@ -69,6 +69,14 @@ Although `wails dev` should run these commands for you under normal circumstance
 you may need to run `pnpm graphql-codegen` in the `frontend` directory to update the code generated from the SMR API,
 or run `pnpm translations` to update the translation data.
 
+### IDE Configuration
+
+Make sure that your IDE is connecting with the frontend's installation of ESLint to get the best experience.
+
+VSCode users, a preconfigured workspace is provided in `.vscode/`
+that allows editing both Go and Svelte files
+while maintaining correct ESLint functionality.
+
 ### Building
 
 ```bash
@@ -86,6 +94,12 @@ Then, to run it, use:
 golangci-lint run --fix
 ```
 
+You may also need to manually run the frontend linter. First, navigate to the `frontend` directory, then run:
+
+```bash
+pnpm run format
+```
+
 ### Localization
 
 If you'd like to help translate and localize SMM to different languages, join our [discord server](https://discord.ficsit.app/).

backend/app/debug_info.go

@@ -204,7 +204,7 @@ func (a *app) generateAndSaveDebugInfo(filename string) error {
 	return nil
 }
 
-func (a *app) GenerateDebugInfo() bool {
+func (a *app) GenerateDebugInfo() (bool, error) {
 	defaultFileName := fmt.Sprintf("SMMDebug-%s.zip", time.Now().UTC().Format("2006-01-02-15-04-05"))
 	filename, err := wailsRuntime.SaveFileDialog(appCommon.AppContext, wailsRuntime.SaveDialogOptions{
 		DefaultFilename: defaultFileName,
@@ -216,18 +216,17 @@ func (a *app) GenerateDebugInfo() bool {
 		},
 	})
 	if err != nil {
-		slog.Error("failed to open save dialog", slog.Any("error", err))
-		return false
+		return false, fmt.Errorf("failed to open save dialog: %w", err)
 	}
 	if filename == "" {
-		return false
+		// user canceled the save dialog
+		return false, nil
 	}
 
 	err = a.generateAndSaveDebugInfo(filename)
 	if err != nil {
-		slog.Error("failed to generate debug info", slog.Any("error", err))
-		return false
+		return false, fmt.Errorf("failed to generate debug info: %w", err)
 	}
 
-	return true
+	return true, nil
 }

frontend/src/App.svelte

@@ -6,10 +6,11 @@
   import { DevTools, FormatSimple, Tolgee, TolgeeProvider } from '@tolgee/svelte';
   import { setContextClient } from '@urql/svelte';
 
-  import T, { translationElementPart } from '$lib/components/T.svelte';
+  import T from '$lib/components/T.svelte';
   import TitleBar from '$lib/components/TitleBar.svelte';
   import LeftBar from '$lib/components/left-bar/LeftBar.svelte';
   import ModDetails from '$lib/components/mod-details/ModDetails.svelte';
+  import ErrorDetails from '$lib/components/modals/ErrorDetails.svelte';
   import ErrorModal from '$lib/components/modals/ErrorModal.svelte';
   import ExternalInstallMod from '$lib/components/modals/ExternalInstallMod.svelte';
   import { supportedProgressTypes } from '$lib/components/modals/ProgressModal.svelte';
@@ -24,7 +25,7 @@
   import { error, expandedMod, siteURL } from '$lib/store/generalStore';
   import { konami, language, updateCheckMode } from '$lib/store/settingsStore';
   import { smmUpdate, smmUpdateReady } from '$lib/store/smmUpdateStore';
-  import { ExpandMod, GenerateDebugInfo, UnexpandMod } from '$wailsjs/go/app/app';
+  import { ExpandMod, UnexpandMod } from '$wailsjs/go/app/app';
   import { Environment, EventsOn } from '$wailsjs/runtime';
 
   initializeStores();
@@ -235,34 +236,24 @@
               focusOnEntry.focus();
             }}>
             <div class="card my-auto mr-4">
-              <header class="card-header font-bold text-2xl text-center">
-                {#if noInstallsError}
-                  <T defaultValue="No Satisfactory installs found" keyName="error.no_installs" />
-                {:else}
-                  <T defaultValue={'{invalidInstalls} invalid Satisfactory {invalidInstalls, plural, one {install} other {installs}} found'} keyName="error.invalid_installs" params={{ invalidInstalls: $invalidInstalls.length }} />
-                {/if}
-              </header>
-              <section class="p-4">
-                <p class="text-base text-center">
-                  <T
-                    defaultValue="Seems wrong? Click the button below and send the generated zip file on the <1>modding discord</1> in #help-using-mods."
-                    keyName="error.help"
-                    parts={[
-                      translationElementPart('a', {
-                        href: 'https://discord.gg/xkVJ73E',
-                        class: 'text-primary-600 underline',
-                      }),
-                    ]}
-                  />
-                </p>
-              </section>
-              <footer class="card-footer">
-                <button
-                  class="btn text-primary-600 w-full"
-                  on:click={GenerateDebugInfo}>
-                  <T defaultValue="Generate debug info" keyName="error.generate_debug_info" />
-                </button>
-              </footer>
+              <ErrorDetails
+                error={''}
+                fullPageMode={true}
+              >
+                <svelte:fragment slot="title">
+                  {#if noInstallsError}
+                    <T
+                      defaultValue="No Satisfactory installs found"
+                      keyName="error.no_installs"
+                    />
+                  {:else}
+                    <T
+                      defaultValue={'{invalidInstalls} invalid Satisfactory {invalidInstalls, plural, one {install} other {installs}} found'}
+                      keyName="error.invalid_installs"
+                      params={{ invalidInstalls: $invalidInstalls.length }} />
+                  {/if}
+                </svelte:fragment>
+              </ErrorDetails>
             </div>
           </ModsList>
         </div>

frontend/src/lib/components/left-bar/LeftBar.svelte

@@ -378,7 +378,7 @@
       </button>
       <button
         class="btn w-full bg-surface-200-700-token px-4 h-8 text-sm"
-        on:click={() => BrowserOpenURL('https://discord.gg/xkVJ73E')}>
+        on:click={() => BrowserOpenURL('https://discord.ficsit.app/')}>
         <span>
           <T defaultValue="Satisfactory Modding Discord" keyName="left-bar.satisfactory-modding-discord"/>
         </span>

frontend/src/lib/components/modals/ErrorDetails.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
+  import { getTranslate } from '@tolgee/svelte';
+
+  import T from '$lib/components/T.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { GenerateDebugInfo } from '$wailsjs/go/app/app';
+  import { BrowserOpenURL, LogError } from '$wailsjs/runtime/runtime';
+
+  export let onClose: (() => void) | null = null;
+
+  export let fullPageMode: boolean = false;
+  $: sectionClass = fullPageMode ? 'p-4' : 'px-4';
+
+  const { t } = getTranslate();
+  $: openDiscordTooltipText = $t(
+    'error.open_modding_discord.must_generate_debug_first',
+    'You must generate debug info first',
+  );
+
+  let allowOpeningDiscord: boolean = false;
+  let debugFileGenerationError: boolean = false;
+
+  let onClickGenerateDebugInfo = async () => {
+    try {
+      let didUserSaveFile = await GenerateDebugInfo();
+      if (didUserSaveFile) {
+        // Explicitly set to true -> if people click to save a second time but cancel, don't lock them out
+        allowOpeningDiscord = true;
+      }
+    } catch (error) {
+      debugFileGenerationError = true;
+      // Enable the Discord button so they can report the error
+      allowOpeningDiscord = true;
+    }
+  };
+
+  let OpenDiscord = () => {
+    BrowserOpenURL('https://discord.ficsit.app/');
+  };
+
+  let OpenLogDocs = () => {
+    BrowserOpenURL('https://docs.ficsit.app/satisfactory-modding/latest/faq.html#Files_Logs');
+  };
+
+  const popupId = 'error-details-open-discord-popup';
+  const openDiscordPopup = {
+    event: 'hover',
+    target: popupId,
+    middleware: {
+      offset: 4,
+    },
+    placement: 'bottom-end',
+  } satisfies PopupSettings;
+
+  export let error: string;
+</script>
+
+<header class="card-header font-bold text-2xl text-center">
+  <slot name="title" />
+</header>
+<section class={`${sectionClass} overflow-y-auto`}>
+  <p class="font-mono">{error}</p>
+</section>
+<section class={sectionClass}>
+  <p class={fullPageMode ? 'text-base text-center' : ''}>
+    <T
+      defaultValue="Seems wrong? Click the button below to gather logs, then send the generated zip file on the modding Discord in #help-using-mods."
+      keyName="error.reporting_directions"
+    />
+  </p>
+</section>
+<section class={sectionClass}>
+  <p class={`text-base ${fullPageMode ? 'text-center' : ''}`}>
+    <button
+      class="btn text-primary-600 variant-ringed"
+      on:click={onClickGenerateDebugInfo}
+    >
+      <T
+        defaultValue="Generate debug info"
+        keyName="error.generate_debug_info"
+      />
+    </button>
+    <button
+      class="btn text-primary-600 variant-ringed"
+      disabled={!allowOpeningDiscord}
+      on:click={OpenDiscord}
+      use:popup={openDiscordPopup}
+    >
+      <T
+        defaultValue="Open the Modding Discord"
+        keyName="error.open_modding_discord"
+      />
+    </button>
+    <Tooltip disabled={allowOpeningDiscord} {popupId}>
+      {openDiscordTooltipText}
+    </Tooltip>
+  </p>
+</section>
+{#if debugFileGenerationError}
+  <section class={`${sectionClass} ${fullPageMode ? 'text-center' : ''}`}>
+    <p class="text-base text-red-500">
+      <T
+        defaultValue="An error occurred while generating the debug file. Please manually check your Satisfactory Mod Manager log files for more information and report this on the Discord. Use the button below to open the documentation and learn how."
+        keyName="error.failed_to_generate_debug"
+      />
+    </p>
+  </section>
+  <section class={`${sectionClass} ${fullPageMode ? 'text-center' : ''}`}>
+    <button
+      class="btn text-primary-600 variant-ringed"
+      on:click={OpenLogDocs}
+    >
+      <T
+        defaultValue="Open the Logging Documentation"
+        keyName="error.open_log_docs"
+      />
+    </button>
+  </section>
+{/if}
+{#if !fullPageMode}
+  <footer class="card-footer">
+    <button class="btn" on:click={onClose}>
+      <T defaultValue="Close" keyName="common.close" />
+    </button>
+  </footer>
+{/if}

frontend/src/lib/components/modals/ErrorModal.svelte

@@ -1,41 +1,18 @@
 <script lang="ts">
-  import T, { translationElementPart } from '$lib/components/T.svelte';
-  import { GenerateDebugInfo } from '$wailsjs/go/app/app';
+  import { T } from '@tolgee/svelte';
+
+  import ErrorDetails from './ErrorDetails.svelte';
 
   export let parent: { onClose: () => void };
 
   export let error: string;
 </script>
 
-<div style="max-height: calc(100vh - 3rem); max-width: calc(100vw - 3rem);" class="w-[48rem] card flex flex-col gap-6">
-  <header class="card-header font-bold text-2xl text-center">
-    <T defaultValue="Something went wrong" keyName="error.title" />
-  </header>
-  <section class="px-4 overflow-y-auto">
-    <p>{error}</p>
-  </section>
-  <section class="px-4">
-    <T
-      defaultValue="Seems wrong? Click the button below and send the generated zip file on the <1>modding discord</1> in #help-using-mods."
-      keyName="error.help"
-      parts={[
-        translationElementPart('a', {
-          href: 'https://discord.gg/xkVJ73E',
-          class: 'text-primary-600 underline',
-        }),
-      ]}
-    />
-  </section>
-  <footer class="card-footer">
-    <button
-      class="btn text-primary-600 variant-ringed"
-      on:click={GenerateDebugInfo}>
-      <T defaultValue="Generate debug info" keyName="error.generate_debug_info" />
-    </button>
-    <button
-      class="btn"
-      on:click={parent.onClose}>
-      <T defaultValue="Close" keyName="common.close" />
-    </button>
-  </footer>
+<div
+  style="max-height: calc(100vh - 3rem); max-width: calc(100vw - 3rem);"
+  class="w-[48rem] card flex flex-col gap-6"
+>
+  <ErrorDetails {error} onClose={parent.onClose}>
+    <T slot="title" defaultValue="Something went wrong" keyName="error.title" />
+  </ErrorDetails>
 </div>

frontend/src/lib/components/mods-list/ModsListItem.svelte

@@ -74,7 +74,7 @@
       return {
         icon: mdiLinkLock,
         iconHover: mdiLinkLock,
-        tooltip: $t('mod-list-item.dependency', 'This mod is installed a dependency of another mod. It cannot be installed or removed on its own.'),
+        tooltip: $t('mod-list-item.dependency', 'This mod is installed as a dependency of another mod. It cannot be installed or removed on its own.'),
       };
     }
     if (queuedInstall) {