web: add Optional type and use it

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;
 

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 meowbalt: Optional<MeowbaltEmotions>;
-    export let icon: SmallDialogIcons | undefined;
+    export let icon: Optional<SmallDialogIcons>;
     export let title: string = "";
     export let bodyText: string = "";
     export let bodySubText: string = "";

web/src/components/misc/Skeleton.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-    export let width: string | undefined = undefined;
+    import type { Optional } from "$lib/types/generic";
-    export let height: string | undefined = undefined;
+
-    export let hidden: boolean | undefined = undefined;
+    export let width: Optional<string> = undefined;
+    export let height: Optional<string> = undefined;
+    export let hidden: Optional<boolean> = undefined;
 
     let _class = '';
     export { _class as class };

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;

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),

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;

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;
 
     {