Convert the whole filesystem UI to Typescript

svelte/src/layout/Button.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export let highlight = false;
 export let highlight_on_click = false
 export let red = false;
@@ -11,12 +11,12 @@ export let label = ""
 export let title = null
 export let link_href = ""
 export let link_target = "_self"
-export let click = e => {}
+export let click: (e?: MouseEvent) => void = null
 export let style = null
 export let type = null
 export let form = null
 
-let click_int = e => {
+let click_int = (e: MouseEvent) => {
 	if (highlight_on_click) {
 		try {
 			click(e)
@@ -25,7 +25,7 @@ let click_int = e => {
 			red = true
 			throw err
 		}
-	} else {
+	} else if (click !== null) {
 		click(e)
 	}
 }
@@ -43,7 +43,7 @@ let click_int = e => {
 		style={style}
 		type={type}
 		form={form}
-		disabled={disabled ? "disabled":null}
+		disabled={disabled ? true:null}
 	>
 		{#if icon !== ""}
 			<i class="icon" class:small={icon_small}>{icon}</i>
@@ -63,7 +63,6 @@ let click_int = e => {
 		class:flat
 		title={title}
 		style={style}
-		disabled={disabled ? "disabled":null}
 	>
 		{#if icon !== ""}
 			<i class="icon" class:small={icon_small}>{icon}</i>

svelte/src/layout/CopyButton.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import { copy_text } from "util/Util.svelte";
 
 export let text = ""

svelte/src/layout/FileTitle.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export let title = ""
 </script>
 

svelte/src/layout/Footer.svelte

@@ -1,11 +1,12 @@
-<script>
+<script lang="ts">
 import { onMount } from "svelte";
 import Discord from "icons/Discord.svelte";
 import Github from "icons/Github.svelte";
 import Mastodon from "icons/Mastodon.svelte";
 import Patreon from "icons/Patreon.svelte";
 import Reddit from "icons/Reddit.svelte";
-import { formatDataVolumeBits } from "util/Formatting.svelte";
+import { formatDataVolumeBits } from "util/Formatting";
+import { get_endpoint, get_hostname } from "lib/PixeldrainAPI";
 
 export let nobg = false
 let server_tx = 0
@@ -13,7 +14,7 @@ let cache_tx = 0
 let storage_tx = 0
 onMount(async () => {
 	try {
-		const resp = await fetch(window.api_endpoint+"/misc/cluster_speed")
+		const resp = await fetch(get_endpoint()+"/misc/cluster_speed")
 		if (resp.status >= 400) {
 			throw Error(await resp.text())
 		}
@@ -59,7 +60,7 @@ onMount(async () => {
 		</div>
 		<br/>
 		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
-			page rendered by {window.server_hostname}
+			page rendered by {get_hostname()}
 		</span>
 	</div>
 </footer>

svelte/src/layout/HelpButton.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export let toggle = false;
 </script>
 

svelte/src/layout/IconBlock.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export let icon_href = ""
 export let width = "750px"
 </script>

svelte/src/layout/Menu.svelte

@@ -1,5 +1,7 @@
-<script>
-let nav;
+<script lang="ts">
+import { user } from "lib/UserStore";
+
+let nav: HTMLElement;
 
 export const toggle = () => {
 	var body = document.getElementById("page_body");
@@ -24,11 +26,11 @@ export const reset = () => {
 	<a href="/#">Home</a>
 	<a href="/#prepaid">For Creators</a>
 	<hr />
-	{#if window.user !== ""}
-		<a href="/user">{window.user.username}</a>
+	{#if $user.username !== ""}
+		<a href="/user">{$user.username}</a>
 		<a href="/user/filemanager#files">My Files</a>
 		<a href="/user/filemanager#lists">My Albums</a>
-		{#if window.user.is_admin}
+		{#if $user.is_admin}
 			<a href="/user/buckets">Buckets</a>
 			<a href="/admin">Admin Panel</a>
 		{/if}

svelte/src/layout/SlowDown.svelte

@@ -1,7 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
-import { formatDataVolume, formatDuration } from "util/Formatting.svelte";
-import { stats } from "lib/StatsSocket.mjs"
+import { formatDataVolume, formatDuration } from "util/Formatting";
+import { stats } from "lib/StatsSocket"
 import TextBlock from "./TextBlock.svelte"
 import IconBlock from "./IconBlock.svelte";
 let dispatch = createEventDispatcher()