feat: improved set default config dialog

Adds descriptive information about the current state and adds the persistent storage request button as well
mgreminger · Nov 20, 2024 · 5968069 · 5968069
1 parent 37077a9
commit 5968069
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 28 deletions.
diff --git a/src/RequestPersistentStorage.svelte b/src/RequestPersistentStorage.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
+  import { Button } from "carbon-components-svelte";
+
   import Error from "carbon-icons-svelte/lib/Error.svelte";
   import Checkmark from "carbon-icons-svelte/lib/Checkmark.svelte";
 
-  export let numCheckpoints: number;
+  export let numCheckpoints: number = undefined;
   let persisted = false;
+  let hostName: string;
 
   onMount(async () => {
     persisted = await navigator.storage.persisted();
+    hostName = window.location.host;
   });
 
   async function requestPersistentStorage() {
@@ -18,8 +22,9 @@
 </script>
 
 <p>
-  EngineeringPaper.xyz uses your browser's local storage to store your most recent {numCheckpoints} autosave
-  checkpoints and your list of recently visited sheets. Your web browser will not automatically persist this
+  EngineeringPaper.xyz uses your browser's local storage to store your default sheet config, 
+  your {numCheckpoints ?? ""} most recent autosave
+  checkpoints, and your list of recently visited sheets. Your web browser will not automatically persist this
   local storage and may clear it at any time. Safari is particularly aggressive about freeing this storage
   and will automatically clear local storage for a site that has not been visited in the previous seven days. 
 </p>
@@ -28,8 +33,8 @@
 
 <p>
   Click the button below to request that your browser enables persistent local storage for the 
-  EngineeringPaper.xyz domain. Your browser may popup a dialog that asks you to approve this request.
-  Chrome and Edge require you to bookmark EngineeringPaper.xyz in order to enable persistent storage.
+  {hostName} domain. Your browser may popup a dialog that asks you to approve this request.
+  Chrome and Edge may require you to bookmark {hostName} in order to enable persistent storage.
 </p>
 
 <br>
@@ -45,9 +50,11 @@
 <br>
 
 <p>
-<button
-  on:click={requestPersistentStorage}
->
-  Request Persistent Storage
-</button>
+  <Button
+    kind="tertiary"
+    disabled={persisted}
+    on:click={requestPersistentStorage}
+  >
+    Request Persistent Storage
+  </Button>
 </p>
diff --git a/src/SetDefaultConfigDialog.svelte b/src/SetDefaultConfigDialog.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { get, set } from 'idb-keyval';
+  import { del, get, set } from 'idb-keyval';
   import { Button } from "carbon-components-svelte";
-  import CheckmarkOutline from "carbon-icons-svelte/lib/CheckmarkOutline.svelte";
-  import { type Config, configsEqual, getDefaultConfig, normalizeConfig } from "./sheet/Sheet";
+  import Checkmark from "carbon-icons-svelte/lib/Checkmark.svelte";
+  import Information from "carbon-icons-svelte/lib/Information.svelte";
+  import { type Config, configsEqual, getDefaultConfig, normalizeConfig, isDefaultConfig } from "./sheet/Sheet";
   import { config } from "./stores";
 
-  const defaultConfig = getDefaultConfig();
+  import RequestPersistentStorage from "./RequestPersistentStorage.svelte";
+
   let userDefaultConfig: Config = getDefaultConfig();
 
   onMount(async () => {
@@ -19,8 +21,18 @@
   });
 
   async function setDefaultConfig() {
-    let saveError = false;
+    if (currentConfigIsDefaultConfig) {
+      try {
+        await del('defaultConfig')
+      } catch(e) {
+        console.warn('Error attempting to delete user config');
+      }
+      userDefaultConfig = getDefaultConfig();
 
+      return;
+    }
+    
+    let saveError = false;
     try {
       await set('defaultConfig', $config);
     } catch (e) {
@@ -40,7 +52,7 @@
   }
 
   $: configsMatch = configsEqual($config, userDefaultConfig);
-  $: userConfigIsDefaultConfig = configsEqual(userDefaultConfig, defaultConfig);
+  $: currentConfigIsDefaultConfig = isDefaultConfig($config);
 
 </script>
 
@@ -52,22 +64,42 @@
   }
 </style>
 
+
 <div class="container">
+<p>
+  {#if configsMatch}
+    <Checkmark color="green"/> The current sheet config matches the user default config.
+  {:else if !currentConfigIsDefaultConfig}
+    <Information color="blue"/> The current sheet config differs from the user default config, the buttons 
+    below can be used to either save this sheet's config as the user default config or apply the user default 
+    config to this sheet.
+  {:else}
+    <Information color="blue"/> The current sheet is using the EngineeringPaper.xyz default config which 
+    is different than the user default config. The user default config can be applied to this sheet using 
+    the second button below.
+  {/if}
+</p>
+
+<div class="button-container">
   <Button 
     kind="tertiary"
     on:click={setDefaultConfig}
-    icon={configsMatch ? CheckmarkOutline : null}
+    disabled={configsMatch}
   >
-    Use This Sheet's Config as User Default Config
+    Use This Sheet's Config as the User Default Config
   </Button>
 
-  {#if !configsMatch && !userConfigIsDefaultConfig}
-    <Button
-      kind="tertiary"
-      on:click={useDefaultConfig}
-      icon={configsMatch ? CheckmarkOutline : null}
-    >
-      Apply User Default Config to This Sheet
-    </Button>
-  {/if}
-</div>
+  <Button
+    kind="tertiary"
+    on:click={useDefaultConfig}
+    disabled={configsMatch}
+  >
+    Apply the User Default Config to This Sheet
+  </Button>
+</div>
+
+<div>
+  <RequestPersistentStorage />
+</div>
+
+</div>