feat: new version page enhancements (#142)

* feat: button to return from the New Version page * feat: wip edit compat info on New Version page * fix: new version compat edit incorrect modId * feat: "launcher detected" button to "open mod manager" * feat: pretty button icons, back buttons with confirm prompts
satisfactorymodding · Dec 21, 2023 · aee6c1b · aee6c1b
1 parent 82c8b4c
commit aee6c1b
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 52 deletions.
diff --git a/src/lib/components/general/TopBar.svelte b/src/lib/components/general/TopBar.svelte
@@ -42,12 +42,12 @@
 
       {#if $hasLauncher}
         <button class="btn btn-sm variant-ghost-primary" on:click={pingLauncher}>
-          <span>Launcher Detected</span>
-          <span class="material-icons">file_download</span>
+          <span>Open Mod Manager</span>
+          <span class="material-icons">launch</span>
         </button>
       {:else}
         <a class="btn btn-sm variant-ghost-primary" target="_blank" rel="noopener" href="https://smm.ficsit.app">
-          <span>Mod Manager</span>
+          <span>Download the Mod Manager</span>
           <span class="material-icons">file_download</span>
         </a>
       {/if}

diff --git a/src/lib/components/guides/GuideForm.svelte b/src/lib/components/guides/GuideForm.svelte
@@ -16,6 +16,7 @@
     guide: '',
     short_description: ''
   };
+  export let submitIcon: string;
   export let submitText = $t('entry.create');
 
   const { form, data } = createForm<GuideData>({
@@ -69,7 +70,9 @@
     </div>
 
     <div>
-      <button class="btn variant-ghost-primary" type="submit">{submitText}</button>
+      <button class="btn variant-ghost-primary" type="submit">
+        <span class="material-icons pr-2">{submitIcon}</span>
+        {submitText}</button>
     </div>
   </div>
 </form>

diff --git a/src/lib/components/mods/ModVersions.svelte b/src/lib/components/mods/ModVersions.svelte
@@ -77,11 +77,6 @@
                   <a class="btn btn-sm variant-ghost-primary" href={base + '/mod/' + modId + '/version/' + version.id}
                     >{$t('view')}</a>
                   {#if version.targets.length !== 0}
-                    <a
-                      href={API_REST + '/mod/' + modId + '/versions/' + version.id + '/download'}
-                      class="btn btn-sm variant-ghost-primary flex-grow">
-                      <span>{$t('download-multi-target')}</span>
-                    </a>
                     <button
                       class="btn btn-sm variant-ghost-primary"
                       style="padding: 0; min-width: 36px;"
@@ -91,12 +86,20 @@
                         placement: 'bottom',
                         closeQuery: 'a'
                       }}>
+                      <span>{$t('download')}...</span>
                       <span class="material-icons" style="margin: 0;">arrow_drop_down</span>
                     </button>
 
                     <div class="card w-72 shadow-xl" data-popup="versionArchDropdown_{version.version}">
                       <nav class="list-nav">
                         <ul>
+                          <li>
+                            <a
+                              href={API_REST + '/mod/' + modId + '/versions/' + version.id + '/download'}>
+                              <span class="material-icons">polyline</span>
+                              <span>{$t('version.download-multi-target')}</span>
+                            </a>
+                          </li>
                           {#each version.targets as target, _}
                             <li>
                               <a
@@ -128,8 +131,8 @@
                     class="btn btn-sm variant-ghost-primary"
                     title="Install via Satisfactory Mod Manager"
                     on:click={() => installMod($versions.data.getMod.mod_reference)}>
-                    <span>{$t('install')}</span>
                     <span class="material-icons">download</span>
+                    <span>{$t('install')}</span>
                   </button>
                 </div>
               </td>

diff --git a/src/lib/components/mods/compatibility/ModCompatibilityEdit.svelte b/src/lib/components/mods/compatibility/ModCompatibilityEdit.svelte
@@ -25,13 +25,17 @@
 
 <Accordion>
   <AccordionItem>
-    <svelte:fragment slot="summary">{$t('early-access')} - {$t('compatibility')}</svelte:fragment>
+    <svelte:fragment slot="summary">
+      <span class="material-icons text-sm">rocket_launch</span>
+    {$t('early-access')} - {$t('compatibility')}</svelte:fragment>
     <svelte:fragment slot="content">
       <CompatibilityEdit bind:compatibility={compatibilityInfo.EA} />
     </svelte:fragment>
   </AccordionItem>
   <AccordionItem>
-    <svelte:fragment slot="summary">{$t('experimental')} - {$t('compatibility')}</svelte:fragment>
+    <svelte:fragment slot="summary">
+      <span class="material-icons text-sm">science</span>
+      {$t('experimental')} - {$t('compatibility')}</svelte:fragment>
     <svelte:fragment slot="content">
       <CompatibilityEdit bind:compatibility={compatibilityInfo.EXP} />
     </svelte:fragment>

diff --git a/src/lib/components/versions/VersionForm.svelte b/src/lib/components/versions/VersionForm.svelte
@@ -19,6 +19,7 @@
     changelog: '',
     stability: VersionStabilities.Release
   };
+  export let submitIcon: string;
   export let submitText = $t('entry.create');
 
   export let editing = false;
@@ -147,7 +148,10 @@
     </div>
 
     <div>
-      <button class="btn variant-ghost-primary" type="submit" {disabled}>{submitText}</button>
+      <button class="btn variant-ghost-primary" type="submit" {disabled}>
+        <span class="material-icons pr-2">{submitIcon}</span>
+        {submitText}
+      </button>
     </div>
   </div>
 </form>

diff --git a/src/routes/guide/[guideId]/+page.svelte b/src/routes/guide/[guideId]/+page.svelte
@@ -77,8 +77,12 @@
       <div>
         {#if canUserEdit}
           <button class="btn variant-ghost-primary" on:click={() => goto(base + '/guide/' + guideId + '/edit')}
-            >Edit</button>
-          <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(deleteModal)}>Delete</button>
+            >
+            <span class="material-icons pr-2">edit</span>
+            Edit</button>
+          <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(deleteModal)}>
+            <span class="material-icons pr-2">delete</span>
+            Delete</button>
         {/if}
       </div>
     </div>

diff --git a/src/routes/guide/[guideId]/edit/+page.svelte b/src/routes/guide/[guideId]/edit/+page.svelte
@@ -7,7 +7,7 @@
   import { base } from '$app/paths';
   import MetaDescriptors from '$lib/components/utils/MetaDescriptors.svelte';
   import type { PageData } from './$types';
-  import { getToastStore } from "@skeletonlabs/skeleton";
+  import { getModalStore, getToastStore, type ModalSettings } from '@skeletonlabs/skeleton';
 
   export let data: PageData;
 
@@ -48,6 +48,25 @@
         }
       });
   };
+
+  const goBackFn = () => {
+    goto(base + '/guide/' + guideId);
+  }
+
+  const backModal: ModalSettings = {
+    type: 'confirm',
+    title: 'Go Back?',
+    buttonTextCancel: 'Keep Editing',
+    buttonTextConfirm: 'Go Back',
+    body: 'Going back will discard any unsaved changes. Are you sure you wish to continue?',
+    response: (r: boolean) => {
+      if (r) {
+        goBackFn();
+      }
+    }
+  };
+
+  const modalStore = getModalStore();
 </script>
 
 <svelte:head>
@@ -58,7 +77,14 @@
   {/if}
 </svelte:head>
 
-<h1 class="text-4xl my-4 font-bold">Edit Guide</h1>
+<div class="flex flex-wrap h-auto justify-between items-center">
+  <h1 class="text-4xl my-4 font-bold">Edit Guide</h1>
+  <div>
+    <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(backModal)}>
+      <span class="material-icons pr-2">arrow_back</span>
+      Back to Guide</button>
+  </div>
+</div>
 
 <div class="card p-4">
   <section>
@@ -67,7 +93,7 @@
     {:else if $guide.error}
       <p>Oh no... {$guide.error.message}</p>
     {:else}
-      <GuideForm {onSubmit} initialValues={$guide.data.getGuide} submitText="Save" />
+      <GuideForm {onSubmit} initialValues={$guide.data.getGuide} submitText="Save" submitIcon="save"/>
     {/if}
   </section>
 </div>
diff --git a/src/routes/mod/[modId]/+page.svelte b/src/routes/mod/[modId]/+page.svelte
@@ -101,22 +101,31 @@
       <h1 class="text-4xl font-bold">{$mod.data.mod.name}</h1>
       <div>
         {#if canUserEdit}
-          <button class="btn variant-ghost-primary" on:click={() => goto(base + '/mod/' + modId + '/edit')}
-            >Edit</button>
-          <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(deleteModal)}>Delete</button>
-          <button class="btn variant-ghost-primary" on:click={() => goto(base + '/mod/' + modId + '/new-version')}
-            >New Version</button>
+          <button class="btn variant-ghost-primary" on:click={() => goto(base + '/mod/' + modId + '/edit')}>
+            <span class="material-icons pr-2">edit</span>
+            Edit</button>
+          <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(deleteModal)}>
+            <span class="material-icons pr-2">delete_forever</span>
+            Delete</button>
+          <button class="btn variant-ghost-primary" on:click={() => goto(base + '/mod/' + modId + '/new-version')}>
+            <span class="material-icons pr-2">upload_file</span>
+            New Version</button>
         {/if}
         {#if canUserEditCompatibility}
-          <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(editCompatibilityModal)}
-            >Edit Compatibility</button>
-        {/if}
-
-        {#if !versionsTab}
-          <button class="btn variant-ghost-primary" title="Browse all uploaded versions of this mod" on:click={() => (versionsTab = !versionsTab)}> Versions </button>
-        {:else}
-          <button class="btn variant-ghost-primary" title="View the description page for this mod" on:click={() => (versionsTab = !versionsTab)}> Description </button>
+          <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(editCompatibilityModal)}>
+            <span class="material-icons">rocket_launch</span>
+            <span class="material-icons pr-2">science</span>
+            Edit Compatibility</button>
         {/if}
+        <button class="btn variant-ghost-primary" on:click={() => (versionsTab = !versionsTab)}>
+          {#if !versionsTab}
+          <span class="material-icons pr-2" title="Browse all uploaded versions of this mod">view_list</span>
+            View Versions
+          {:else}
+          <span class="material-icons pr-2" title="View the description page for this mod">description</span>
+            View Description
+          {/if}
+        </button>
       </div>
     </div>
     <div class="grid grid-auto-max auto-cols-fr gap-4">

diff --git a/src/routes/mod/[modId]/new-version/+page.svelte b/src/routes/mod/[modId]/new-version/+page.svelte
@@ -3,14 +3,15 @@
   import { goto } from '$app/navigation';
   import type { VersionData } from '$lib/models/versions';
   import VersionForm from '$lib/components/versions/VersionForm.svelte';
-  import { GetModReferenceDocument } from '$lib/generated';
+  import { GetModDocument } from '$lib/generated';
   import { writable } from 'svelte/store';
   import { chunkedUpload } from '$lib/utils/chunked-upload';
   import type { UploadState } from '$lib/utils/chunked-upload';
   import { base } from '$app/paths';
   import MetaDescriptors from '$lib/components/utils/MetaDescriptors.svelte';
   import type { PageData } from './$types';
-  import { getToastStore } from "@skeletonlabs/skeleton";
+  import { getModalStore, getToastStore, type ModalSettings } from '@skeletonlabs/skeleton';
+  import EditCompatibilityForm from '$lib/components/mods/compatibility/EditCompatibilityForm.svelte';
 
   export let data: PageData;
 
@@ -38,7 +39,7 @@
   const toastStore = getToastStore();
 
   const mod = queryStore({
-    query: GetModReferenceDocument,
+    query: GetModDocument,
     client,
     variables: { mod: modId }
   });
@@ -73,6 +74,25 @@
         });
         uploadStatus.set('');
       });
+
+  const goBackFn = () => {
+    goto(base + '/mod/' + modId);
+  };
+
+  const backModal: ModalSettings = {
+    type: 'confirm',
+    title: 'Go Back?',
+    buttonTextCancel: 'Keep Editing',
+    buttonTextConfirm: 'Go Back',
+    body: 'Going back will discard any unsaved changes. Are you sure you wish to continue?',
+    response: (r: boolean) => {
+      if (r) {
+        goBackFn();
+      }
+    }
+  };
+
+  const modalStore = getModalStore();
 </script>
 
 <svelte:head>
@@ -83,14 +103,25 @@
   {/if}
 </svelte:head>
 
-<h1 class="text-4xl my-4 font-bold">
-  New Version for
-  {#if $mod.fetching}
-    ...
-  {:else if !$mod.error}
-    {$mod.data.mod.name}
-  {/if}
-</h1>
+<div class="flex flex-wrap h-auto justify-between items-center">
+  <h1 class="text-4xl my-4 font-bold">
+    New Version for
+    {#if $mod.fetching}
+      ...
+    {:else if !$mod.error}
+      {$mod.data.mod.name}
+    {/if}
+  </h1>
+  <div>
+    <button
+      class="btn variant-ghost-primary"
+      title="View the description page for this mod"
+      on:click={() => modalStore.trigger(backModal)}>
+      <span class="material-icons pr-2">arrow_back</span>
+      Back to Mod
+    </button>
+  </div>
+</div>
 
 <div class="card p-4">
   <section>
@@ -99,7 +130,7 @@
     {:else if $mod.error}
       <p>Oh no... {$mod.error.message}</p>
     {:else}
-      <VersionForm {onSubmit} modReference={$mod.data.mod.mod_reference} />
+      <VersionForm {onSubmit} modReference={$mod.data.mod.mod_reference} submitIcon="add_circle" />
 
       {#if $uploadStatus}
         <div class="relative pt-4">
@@ -121,6 +152,21 @@
           </div>
         </div>
       {/if}
+
+      <div class="p-4">
+        <span>Edit Compatibility Info</span>
+      </div>
+      <div class="card p-4">
+        <EditCompatibilityForm
+          mod={$mod.data.mod}
+          modId={$mod.data.mod.id}
+          on:fail={() => {
+            alert('Failed to update compatibility information, check browser console for more info.');
+          }}
+          on:submit={() => {
+            alert("Mod compatibility data updated. Don't forget to upload the version too!");
+          }} />
+      </div>
     {/if}
   </section>
 </div>
diff --git a/src/routes/mod/[modId]/version/[versionId]/+page.svelte b/src/routes/mod/[modId]/version/[versionId]/+page.svelte
@@ -90,9 +90,12 @@
           <button
             class="btn variant-ghost-primary"
             on:click={() => goto(base + '/mod/' + modId + '/version/' + versionId + '/edit')}>
+            <span class="material-icons pr-2">edit_document</span>
             Edit
           </button>
-          <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(deleteModal)}>Delete</button>
+          <button class="btn variant-ghost-primary" on:click={() => modalStore.trigger(deleteModal)}>
+            <span class="material-icons pr-2">delete</span>
+            Delete</button>
         {/if}
         {#if $version.data.getVersion.targets.length != 0}
           <button
@@ -104,7 +107,7 @@
               placement: 'bottom',
               closeQuery: 'a'
             }}>
-            <span>Download</span>
+            <span>Download...</span>
             <span class="material-icons" style="margin: 0;">arrow_drop_down</span>
           </button>
 
@@ -133,13 +136,12 @@
           class="btn variant-ghost-primary"
           title="Install via Satisfactory Mod Manager"
           on:click={() => installMod($version.data.getVersion.mod.mod_reference)}>
-          <span>Install</span>
           <span class="material-icons">download</span>
+          <span>Install</span>
         </button>
-
         <a class="btn variant-ghost-primary" href={base + '/mod/' + modId} title="View the description page for this mod">
-          <span>Mod</span>
           <span class="material-icons">extension</span>
+          <span>Back to Mod</span>
         </a>
       </div>
     </div>