refactor(layout): Replace empty p elements with reusable Spacer component

11 files changed, 26 insertions, 15 deletions

diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
index fda912e7..e439ed4d 100644
--- a/src/lib/Tools/ActivityHistory/Tool.svelte
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import {
     activityHistory,
     fillMissingDays,
@@ -79,18 +80,18 @@
       <div class="card">
         <ActivityHistoryGrid {user} />
 
-        <p></p>
+        <Spacer />
 
         <div id="grid-final"></div>
 
         {#if generated}
-          <p></p>
+          <Spacer />
         {/if}
 
         <button on:click={screenshot}>Generate grid image</button>
       </div>
 
-      <p></p>
+      <Spacer />
 
       <details open>
         <summary>Days in risk of developing an activity history hole</summary>
diff --git a/src/lib/Tools/DumpProfile.svelte b/src/lib/Tools/DumpProfile.svelte
index 0d38d857..704bca8a 100644
--- a/src/lib/Tools/DumpProfile.svelte
+++ b/src/lib/Tools/DumpProfile.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { dumpUser } from '$lib/Data/AniList/user';
   import RateLimited from '$lib/Error/RateLimited.svelte';
   import Skeleton from '$lib/Loading/Skeleton.svelte';
@@ -36,7 +37,7 @@
     <pre>{JSON.stringify(dump, null, 2)}</pre>
 
     {#if decoded && (dump.about || '').includes('[](json')}
-      <p></p>
+      <Spacer />
 
       <pre>{JSON.stringify(decoded, null, 2).replaceAll(/\\n/g, '\n')}</pre>
     {/if}
diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index 840ce410..71e13add 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { threads } from '$lib/Data/AniList/forum';
   import { onMount } from 'svelte';
   import { clearAllParameters } from '../Utility/parameters';
@@ -54,7 +55,7 @@
       </p>
     {/await}
   {:else}
-    <p></p>
+    <Spacer />
 
     Enter a username to search for to continue.
   {/if}
diff --git a/src/lib/Tools/Hayai.svelte b/src/lib/Tools/Hayai.svelte
index 07b666e9..79459985 100644
--- a/src/lib/Tools/Hayai.svelte
+++ b/src/lib/Tools/Hayai.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { onMount } from 'svelte';
   import JSZip from 'jszip';
 
@@ -90,13 +91,13 @@
     )}
   </small>
 
-  <p></p>
+  <Spacer />
 
   {@html applyBionicReadingToString(
     `After selecting an EPUB file, 早い will apply a bionic reading filter over any and all words, and return the newly created "bionic" EPUB file.`
   )}
 
-  <p></p>
+  <Spacer />
 
   <input type="file" id="epub-file" accept=".epub" on:change={handleFileUpload} />
 </div>
diff --git a/src/lib/Tools/InputTemplate.svelte b/src/lib/Tools/InputTemplate.svelte
index 8d946074..c0ee4f1d 100644
--- a/src/lib/Tools/InputTemplate.svelte
+++ b/src/lib/Tools/InputTemplate.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { clearAllParameters } from '$lib/Utility/parameters';
   import { onMount } from 'svelte';
   import SettingHint from '$lib/Settings/SettingHint.svelte';
@@ -64,7 +65,7 @@
   {#if submission !== ''}
     <slot />
   {:else}
-    <p></p>
+    <Spacer />
 
     {prompt}
   {/if}
diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte
index 25375d31..34a9b48e 100644
--- a/src/lib/Tools/RandomFollower.svelte
+++ b/src/lib/Tools/RandomFollower.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { followers } from '$lib/Data/AniList/following';
   import RateLimited from '$lib/Error/RateLimited.svelte';
   import Skeleton from '$lib/Loading/Skeleton.svelte';
@@ -21,7 +22,7 @@
   {:then users}
     {@const user = users[Math.floor(randomSeed * users.length)]}
 
-    <p></p>
+    <Spacer />
 
     <a href={`https://anilist.co/user/${user.id}`} target="_blank">
       <TextSwap text={user.name} />
diff --git a/src/lib/Tools/SequelCatcher/List.svelte b/src/lib/Tools/SequelCatcher/List.svelte
index 64f4f88c..a7e03ed0 100644
--- a/src/lib/Tools/SequelCatcher/List.svelte
+++ b/src/lib/Tools/SequelCatcher/List.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { filterRelations, type Media } from '$lib/Data/AniList/media';
   import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
   import { outboundLink } from '$lib/Media/links';
@@ -30,7 +31,7 @@ paused)
 <input type="checkbox" bind:checked={includeSideStories} /> Include side stories (e.g., OVAs,
 specials, etc.)
 
-<p></p>
+<Spacer />
 
 <ol class="media-list">
   {#each filterRelations( mediaListUnchecked.filter((media) => media.mediaListEntry?.status === 'COMPLETED'), includeSideStories ) as { media, unwatchedRelations }}
diff --git a/src/lib/Tools/SequelCatcher/Tool.svelte b/src/lib/Tools/SequelCatcher/Tool.svelte
index 4038c04e..05227ac4 100644
--- a/src/lib/Tools/SequelCatcher/Tool.svelte
+++ b/src/lib/Tools/SequelCatcher/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import List from './List.svelte';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
   import userIdentity from '$stores/identity';
@@ -71,7 +72,7 @@
       <Message message="" loader="ripple" slot withReload fullscreen>Error fetching media.</Message>
     {/await}
 
-    <p></p>
+    <Spacer />
 
     <blockquote style="margin: 0 0 0 1.5rem;">
       Thanks to <Username username="sevengirl" /> and <Username username="esthereae" /> for the idea!
diff --git a/src/lib/Tools/SequelSpy/Tool.svelte b/src/lib/Tools/SequelSpy/Tool.svelte
index 8a289105..998cab13 100644
--- a/src/lib/Tools/SequelSpy/Tool.svelte
+++ b/src/lib/Tools/SequelSpy/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
   import { prequels, type MediaPrequel } from '$lib/Data/AniList/prequels';
   import { onMount } from 'svelte';
@@ -54,7 +55,7 @@
       <Prequels {currentPrequels} />
     {/await}
 
-    <p></p>
+    <Spacer />
 
     The count ratio is the number of episodes you've seen of any direct prequels, and the total
     number of episodes of all direct prequels.
diff --git a/src/lib/Tools/Tracker/Tool.svelte b/src/lib/Tools/Tracker/Tool.svelte
index a7b6da10..314dce18 100644
--- a/src/lib/Tools/Tracker/Tool.svelte
+++ b/src/lib/Tools/Tracker/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { v6 as uuidv6 } from 'uuid';
   import { database, type TrackerEntry } from '$lib/Database/IDB/tracker';
   import { onMount } from 'svelte';
@@ -76,7 +77,7 @@
   <input type="number" placeholder="Progress (defaults to 0)" bind:value={progress} />
   <button class="button-lined" on:click={() => addEntry(url, title, progress)}> Add </button>
 
-  <p></p>
+  <Spacer />
 
   {#if masterList === null}
     <Message message="Loading entries ..." />
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index 64e4e2ea..bc28f97e 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import './wrapped.css';
   import userIdentity from '$stores/identity';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
@@ -908,7 +909,7 @@
         <div id="wrapped-final"></div>
 
         {#if generated}
-          <p></p>
+          <Spacer />
 
           <blockquote style="margin: 0 0 0 1.5rem;">
             Click on the image to download, or right click and select "Save Image As...".
@@ -917,7 +918,7 @@
       </div>
 
       {#if generated}
-        <p></p>
+        <Spacer />
       {/if}
 
       <div id="options" class="card">