feat: added debug mode setting

Tormak9970 · Mar 22, 2024 · 5b670a2 · 5b670a2
1 parent 497a40e
commit 5b670a2
Show file tree

Hide file tree

Showing 11 changed files with 248 additions and 61 deletions.
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -579,6 +579,18 @@ async fn add_steam_to_scope(app_handle: AppHandle) -> String {
   }
 }
 
+#[tauri::command]
+/// Toggles the dev tools for the current window.
+async fn toggle_dev_tools(app_handle: AppHandle, enable: bool) {
+  let window = app_handle.get_window("main").expect("Should have been able to get the main window.");
+
+  if enable {
+    window.open_devtools();
+  } else {
+    window.close_devtools();
+  }
+}
+
 /// This app's main function.
 fn main() {
   tauri::Builder::default()
@@ -595,6 +607,7 @@ fn main() {
       start_menu_tiles::get_apps_with_tiles,
       start_menu_tiles::write_app_tiles,
       add_path_to_scope,
+      toggle_dev_tools,
       add_steam_to_scope,
       export_grids_to_zip,
       import_grids_from_zip,

diff --git a/src/components/modals/SteamPathModal.svelte b/src/components/modals/SteamPathModal.svelte
@@ -5,7 +5,7 @@
   import { ToastController } from "../../lib/controllers/ToastController";
   import Button from "../interactables/Button.svelte";
   import ModalBody from "./modal-utils/ModalBody.svelte";
-  import SettingsFilePathEntry from "./settings/SettingsFilePathEntry.svelte";
+  import FilePathEntry from "./settings/FilePathEntry.svelte";
   import Spacer from "../layout/Spacer.svelte";
   import { validateSteamPath } from "../../lib/utils/Utils";
 
@@ -49,7 +49,7 @@
   <div class="content">
     <Spacer orientation="VERTICAL" />
     <Spacer orientation="VERTICAL" />
-    <SettingsFilePathEntry
+    <FilePathEntry
       label="Steam Install Path"
       description={"The root of your Steam installation. The default on Windows is <b>C:/Program Files (x86)/Steam</b> and <b>~/.steam/Steam</b> on Linux."}
       value={steamInstallLocation}

diff --git a/...als/settings/SettingsFilePathEntry.svelte → ...ents/modals/settings/FilePathEntry.svelte b/...als/settings/SettingsFilePathEntry.svelte → ...ents/modals/settings/FilePathEntry.svelte
@@ -4,6 +4,7 @@
   import FileButton from "../../interactables/FileButton.svelte";
   import Spacer from "../../layout/Spacer.svelte";
   import { onMount } from "svelte";
+    import { AppController } from "../../../lib/controllers/AppController";
 
   export let label: string;
   export let description: string;
@@ -55,7 +56,19 @@
 </script>
 
 <div class="setting">
-  <h1 class="label">{label}</h1>
+  <div class="field-header">
+    <h1 class="label">{label}</h1>
+    <div class="required-cont">
+      {#if required}
+        <div class="tooltip-cont" use:AppController.tippy={{ content: "This setting is required", placement: "top", onShow: AppController.onTippyShow }}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path d="M192 32c17.7 0 32 14.3 32 32V199.5l111.5-66.9c15.2-9.1 34.8-4.2 43.9 11s4.2 34.8-11 43.9L254.2 256l114.3 68.6c15.2 9.1 20.1 28.7 11 43.9s-28.7 20.1-43.9 11L224 312.5V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V312.5L48.5 379.4c-15.2 9.1-34.8 4.2-43.9-11s-4.2-34.8 11-43.9L129.8 256 15.5 187.4c-15.2-9.1-20.1-28.7-11-43.9s28.7-20.1 43.9-11L160 199.5V64c0-17.7 14.3-32 32-32z"/>
+          </svg>
+        </div>
+      {/if}
+    </div>
+  </div>
   <div class="inputs">
     <TextInput placeholder={"~/something/something"} onChange={changeWrapper} width="{188}" bind:value={value} />
     <Spacer orientation="HORIZONTAL" />
@@ -82,9 +95,6 @@
       <!-- eslint-disable-next-line svelte/no-at-html-tags -->
       {@html notes}
     {/if}
-
-    <Spacer orientation="VERTICAL" />
-    <b>Required:</b> {required ? "Yes" : "No"}<br/>
   </div>
 </div>
 
@@ -100,6 +110,24 @@
     border-radius: 4px;
   }
 
+  .field-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .required-cont {
+    height: 14px;
+    width: 14px;
+  }
+
+  .required-cont svg {
+    height: 14px;
+    width: 14px;
+
+    fill: var(--font-color);
+  }
+
   .label {
     margin-top: 0px;
     font-size: 18px;

diff --git a/src/components/modals/settings/SettingsModal.svelte b/src/components/modals/settings/SettingsModal.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { steamKey, steamGridDBKey, needsSteamKey, needsSGDBAPIKey, activeUserId, steamInstallPath, requestTimeoutLength } from "../../../stores/AppState";
+  import { steamKey, steamGridDBKey, needsSteamKey, needsSGDBAPIKey, activeUserId, steamInstallPath, debugMode } from "../../../stores/AppState";
   import { LogController } from "../../../lib/controllers/LogController";
   import { ToastController } from "../../../lib/controllers/ToastController";
   import { SettingsManager } from "../../../lib/utils/SettingsManager";
   import Button from "../../interactables/Button.svelte";
   import ModalBody from "../modal-utils/ModalBody.svelte";
-  import SettingsEntry from "./SettingsEntry.svelte";
-  import SettingsFilePathEntry from "./SettingsFilePathEntry.svelte";
+  import TextFieldEntry from "./TextFieldEntry.svelte";
+  import FilePathEntry from "./FilePathEntry.svelte";
   import { showSettingsModal } from "../../../stores/Modals";
   import Spacer from "../../layout/Spacer.svelte";
   import { validateSteamPath, validateSGDBAPIKey, validateSteamAPIKey } from "../../../lib/utils/Utils";
+  import ToggleFieldEntry from "./ToggleFieldEntry.svelte";
 
 
   /**
@@ -24,6 +25,7 @@
   let steamGridKey = $steamGridDBKey;
   let steamAPIKey = $steamKey;
   let steamInstallLocation = $steamInstallPath;
+  let debugModeSetting = $debugMode;
 
   /**
    * Saves the changed settings.
@@ -47,6 +49,8 @@
     
     if (steamInstallLocation !== "") $steamInstallPath = steamInstallLocation;
 
+    if (debugModeSetting !== $debugMode) $debugMode = debugModeSetting;
+
     LogController.log("Saved settings.");
     ToastController.showSuccessToast("Settings saved!");
     canSave = false;
@@ -62,6 +66,8 @@
 
     steamGridKey = $steamGridDBKey;
     steamAPIKey = $steamKey;
+    steamInstallLocation = $steamInstallPath;
+    debugModeSetting = $debugMode;
     
     LogController.log("Reverted settings.");
     
@@ -98,6 +104,15 @@
     }
   }
 
+/**
+ * Function to run on debug mode change.
+ * @param value The updated value.
+ */
+function onDebugModeChange(value: boolean): void {
+  debugModeSetting = value;
+  canSave = true;
+}
+
   /**
    * Function to run on steam install location change.
    * @param path The updated installation path.
@@ -117,43 +132,53 @@
   <div class="content">
     <Spacer orientation="VERTICAL" />
     <Spacer orientation="VERTICAL" />
-    <SettingsFilePathEntry
-      label="Steam Install Path"
-      description={"The root of your Steam installation. The default on Windows is <b>C:/Program Files (x86)/Steam</b> and <b>~/.steam/Steam</b> on Linux. You must restart after changing this."}
-      value={steamInstallLocation}
-      onChange={onInstallLocationChange}
-      useValidator={true}
-      validPathMessage={"Path is a valid Steam install"}
-      validator={validateSteamPath}
-      required
-    />
-    <Spacer orientation="VERTICAL" />
-    <Spacer orientation="VERTICAL" />
-    <SettingsEntry
-      label="SteamGrid Api Key"
-      description={"Needed to load art from SteamGridDB.com. To create one, go to <a href=\"https://www.steamgriddb.com\">Steamgrid</a>, sign in and go to preferences, then API."}
-      value={steamGridKey}
-      onChange={onGridKeyChange}
-      useValidator={true}
-      validator={validateSGDBAPIKey}
-      required
-    />
-    <Spacer orientation="VERTICAL" />
-    <Spacer orientation="VERTICAL" />
-    <SettingsEntry
-      label="Steam Api key"
-      description={"Used to load your games using Steam's web API (It's much faster). To create one, go to Steam's <a href=\"https://steamcommunity.com/dev/apikey\">key registration</a> page, sign in and create an api key."}
-      notes={"Recommended for large libraries. It does <b>NOT</b> matter what domain you put in, It just needs to be a valid url. When in doubt do \"http://YOUR_STEAM_USERNAME.com\"."}
-      value={steamAPIKey}
-      onChange={onSteamKeyChange}
-      useValidator={true}
-      validator={validateSteamAPIKey}
-    />
+    <div class="settings-container">
+      <FilePathEntry
+        label="Steam Install Path"
+        description={"The root of your Steam installation. The default on Windows is <b>C:/Program Files (x86)/Steam</b> and <b>~/.steam/Steam</b> on Linux. You must restart after changing this."}
+        value={steamInstallLocation}
+        onChange={onInstallLocationChange}
+        useValidator={true}
+        validPathMessage={"Path is a valid Steam install"}
+        validator={validateSteamPath}
+        required
+      />
+      <Spacer orientation="VERTICAL" />
+      <Spacer orientation="VERTICAL" />
+      <TextFieldEntry
+        label="SteamGrid Api Key"
+        description={"Needed to load art from SteamGridDB.com. To create one, go to <a href=\"https://www.steamgriddb.com\">Steamgrid</a>, sign in and go to preferences, then API."}
+        value={steamGridKey}
+        onChange={onGridKeyChange}
+        useValidator={true}
+        validator={validateSGDBAPIKey}
+        required
+      />
+      <Spacer orientation="VERTICAL" />
+      <Spacer orientation="VERTICAL" />
+      <TextFieldEntry
+        label="Steam Api key"
+        description={"Used to load your games using Steam's web API (It's much faster). To create one, go to Steam's <a href=\"https://steamcommunity.com/dev/apikey\">key registration</a> page, sign in and create an api key."}
+        notes={"Recommended for large libraries. It does <b>NOT</b> matter what domain you put in, It just needs to be a valid url. When in doubt do \"http://YOUR_STEAM_USERNAME.com\"."}
+        value={steamAPIKey}
+        onChange={onSteamKeyChange}
+        useValidator={true}
+        validator={validateSteamAPIKey}
+      />
+      <Spacer orientation="VERTICAL" />
+      <Spacer orientation="VERTICAL" />
+      <ToggleFieldEntry
+        label="Debug Mode"
+        description={"Enables the inspect element window and automatically opens it on launch."}
+        value={debugModeSetting}
+        onChange={onDebugModeChange}
+      />
+    </div>
 
     <div class="buttons">
       <Button label="Save Changes" onClick={saveSettings} width="47.5%" disabled={!canSave} />
       <Button label="Cancel" onClick={cancel} width="47.5%" />
-    </div>validateSteamPath
+    </div>
   </div>
 </ModalBody>
 
@@ -170,7 +195,7 @@
 
   .buttons {
     margin-top: 14px;
-    margin-bottom: 7px;
+    margin-bottom: 10px;
     width: calc(100% - 14px);
     display: flex;
     justify-content: space-around;

diff --git a/...ents/modals/settings/SettingsEntry.svelte → ...nts/modals/settings/TextFieldEntry.svelte b/...ents/modals/settings/SettingsEntry.svelte → ...nts/modals/settings/TextFieldEntry.svelte
@@ -3,6 +3,7 @@
   import TextInput from "../../interactables/TextInput.svelte";
   import Spacer from "../../layout/Spacer.svelte";
   import { onMount } from "svelte";
+    import { AppController } from "../../../lib/controllers/AppController";
 
   export let label: string;
   export let description: string;
@@ -44,7 +45,19 @@
 </script>
 
 <div class="setting">
-  <h1 class="label">{label}</h1>
+  <div class="field-header">
+    <h1 class="label">{label}</h1>
+    <div class="required-cont">
+      {#if required}
+        <div class="tooltip-cont" use:AppController.tippy={{ content: "This setting is required", placement: "top", onShow: AppController.onTippyShow }}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path d="M192 32c17.7 0 32 14.3 32 32V199.5l111.5-66.9c15.2-9.1 34.8-4.2 43.9 11s4.2 34.8-11 43.9L254.2 256l114.3 68.6c15.2 9.1 20.1 28.7 11 43.9s-28.7 20.1-43.9 11L224 312.5V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V312.5L48.5 379.4c-15.2 9.1-34.8 4.2-43.9-11s-4.2-34.8 11-43.9L129.8 256 15.5 187.4c-15.2-9.1-20.1-28.7-11-43.9s28.7-20.1 43.9-11L160 199.5V64c0-17.7 14.3-32 32-32z"/>
+          </svg>
+        </div>
+      {/if}
+    </div>
+  </div>
   <div class="inputs">
     <TextInput placeholder={"Your API key"} onChange={changeWrapper} width="{220}" bind:value={value} />
     <Spacer orientation="HORIZONTAL" />
@@ -69,9 +82,6 @@
       <!-- eslint-disable-next-line svelte/no-at-html-tags -->
       {@html notes}
     {/if}
-
-    <Spacer orientation="VERTICAL" />
-    <b>Required:</b> {required ? "Yes" : "No"}<br/>
   </div>
 </div>
 
@@ -87,6 +97,24 @@
     border-radius: 4px;
   }
 
+  .field-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .required-cont {
+    height: 14px;
+    width: 14px;
+  }
+
+  .required-cont svg {
+    height: 14px;
+    width: 14px;
+
+    fill: var(--font-color);
+  }
+
   .label {
     margin-top: 0px;
     font-size: 18px;

diff --git a/src/components/modals/settings/ToggleFieldEntry.svelte b/src/components/modals/settings/ToggleFieldEntry.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { open } from "@tauri-apps/api/shell";
+  import Toggle from "../../interactables/Toggle.svelte";
+
+  export let label = "";
+  export let description = "";
+  export let value: boolean;
+  export let onChange: (value: boolean) => void = () => {};
+
+  /**
+   * Handles click events to redirect to the browser.
+   * @param e The click event.
+   */
+  function clickListener(e: Event): void {
+    const origin = (e.target as Element).closest("a");
+  
+    if (origin) {
+      e.preventDefault();
+      const href = origin.href;
+      open(href);
+    }
+  }
+</script>
+
+<div class="setting">
+  <div class="inputs">
+    <Toggle label={label} onChange={onChange} bind:value={value} />
+  </div>
+  {#if description !== ""}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="description" on:click={clickListener}>
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      {@html description}<br/>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .setting {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 0px 14px;
+
+    background-color: var(--background-dark);
+    padding: 6px;
+    border-radius: 4px;
+
+    width: calc(100% - 42px);
+  }
+
+  .description {
+    line-height: 18px;
+    font-size: 14px;
+    margin: 7px 0px;
+  }
+
+  
+  .inputs {
+    display: flex;
+    align-items: center;
+  }
+</style>