From bb446ecf3ee477bec637b96f6167d66fd6eb2727 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Sun, 21 Jul 2024 17:26:21 +0000
Subject: [PATCH] web: add Optional type and use it

---
 web/src/components/changelog/ChangelogEntry.svelte | 3 ++-
 web/src/components/dialog/SmallDialog.svelte       | 7 ++++---
 web/src/components/misc/Skeleton.svelte            | 8 +++++---
 web/src/components/save/Omnibox.svelte             | 3 ++-
 web/src/lib/api.ts                                 | 5 +++--
 web/src/lib/types/generic.ts                       | 1 +
 web/src/routes/updates/+page.svelte                | 3 ++-
 7 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/web/src/components/changelog/ChangelogEntry.svelte b/web/src/components/changelog/ChangelogEntry.svelte
index 4fdc1129..75748940 100644
--- a/web/src/components/changelog/ChangelogEntry.svelte
+++ b/web/src/components/changelog/ChangelogEntry.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import Skeleton from "$components/misc/Skeleton.svelte";
+    import type { Optional } from "$lib/types/generic";
 
     export let version: string;
     export let title: string;
     export let date: string;
-    export let banner: { file: string; alt: string } | undefined;
+    export let banner: Optional<{ file: string; alt: string }>;
 
     let bannerLoaded = false;
 
diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index 11d6ba3b..3a4cdddf 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@@ -3,15 +3,16 @@
 
     import { killDialog } from "$lib/dialogs";
     import type { DialogButton, SmallDialogIcons } from "$lib/types/dialog";
+    import type { MeowbaltEmotions } from "$lib/types/meowbalt";
+    import type { Optional } from "$lib/types/generic";
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
-    import type { MeowbaltEmotions } from "$lib/types/meowbalt";
 
     import IconAlertTriangle from "@tabler/icons-svelte/IconAlertTriangle.svelte";
 
     export let id: string;
-    export let meowbalt: MeowbaltEmotions | undefined;
-    export let icon: SmallDialogIcons | undefined;
+    export let meowbalt: Optional<MeowbaltEmotions>;
+    export let icon: Optional<SmallDialogIcons>;
     export let title: string = "";
     export let bodyText: string = "";
     export let bodySubText: string = "";
diff --git a/web/src/components/misc/Skeleton.svelte b/web/src/components/misc/Skeleton.svelte
index d5fb64a7..bb0b295f 100644
--- a/web/src/components/misc/Skeleton.svelte
+++ b/web/src/components/misc/Skeleton.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-    export let width: string | undefined = undefined;
-    export let height: string | undefined = undefined;
-    export let hidden: boolean | undefined = undefined;
+    import type { Optional } from "$lib/types/generic";
+
+    export let width: Optional<string> = undefined;
+    export let height: Optional<string> = undefined;
+    export let hidden: Optional<boolean> = undefined;
 
     let _class = '';
     export { _class as class };
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 327aeea3..1057d0c5 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -9,6 +9,7 @@
 
     import { updateSetting } from "$lib/state/settings";
     import type { DownloadModeOption } from "$lib/types/settings";
+    import type { Optional } from "$lib/types/generic";
 
     import IconLink from "@tabler/icons-svelte/IconLink.svelte";
 
@@ -25,7 +26,7 @@
     import IconClipboard from "$lib/icons/Clipboard.svelte";
 
     let link: string = "";
-    let linkInput: HTMLInputElement | undefined;
+    let linkInput: Optional<HTMLInputElement>;
     let isFocused = false;
 
     let isDisabled: boolean = false;
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index 2b7274bc..dba83f1e 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -1,6 +1,7 @@
-import { get } from 'svelte/store';
+import { get } from "svelte/store";
 import settings from "$lib/state/settings";
 import type { CobaltAPIResponse } from "$lib/types/api";
+import type { Optional } from "$lib/types/generic";
 
 const apiURL = "https://api.cobalt.tools";
 
@@ -26,7 +27,7 @@ const request = async (url: string) => {
         tiktokH265: saveSettings.tiktokH265,
     }
 
-    const response: CobaltAPIResponse | undefined = await fetch(`${apiURL}/api/json`, {
+    const response: Optional<CobaltAPIResponse> = await fetch(`${apiURL}/api/json`, {
         method: "POST",
         redirect: "manual",
         body: JSON.stringify(request),
diff --git a/web/src/lib/types/generic.ts b/web/src/lib/types/generic.ts
index 610354ad..a03d969f 100644
--- a/web/src/lib/types/generic.ts
+++ b/web/src/lib/types/generic.ts
@@ -8,3 +8,4 @@ export type RecursivePartial<Type> = {
 };
 
 export type DefaultImport<T> = () => Promise<{ default: T }>;
+export type Optional<T> = T | undefined;
\ No newline at end of file
diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte
index 63884bd0..140eb046 100644
--- a/web/src/routes/updates/+page.svelte
+++ b/web/src/routes/updates/+page.svelte
@@ -4,6 +4,7 @@
 
     import { getAllChangelogs } from "$lib/changelogs";
     import type { ChangelogImport } from "$lib/types/changelogs";
+    import type { Optional } from "$lib/types/generic";
 
     import ChangelogSkeleton from "$components/changelog/ChangelogSkeleton.svelte";
 
@@ -13,7 +14,7 @@
     const changelogs = getAllChangelogs();
     const versions = Object.keys(changelogs);
 
-    let changelog: { version: string; page: Promise<ChangelogImport> } | undefined;
+    let changelog: Optional<{ version: string; page: Promise<ChangelogImport> }>;
     let currentIndex = 0;
 
     {