Numerous changes

- Set file.result to null when changing type (so the user remembers to redo the conversion by disabling dl btn)
- If link is to external site, open in new tab, else open in current
- Add animation when loading about page
- Add underline to hyperlink in about
- Fix conversion boxes misaligned
- Fix footer links not clickable
- Minor language changes

src/lib/components/functional/ConversionPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { files } from "$lib/store/index.svelte";
 	import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
 	import Panel from "../visual/Panel.svelte";
-	import { files } from "$lib/store/index.svelte";
 	import Dropdown from "./Dropdown.svelte";
 </script>
 
@@ -28,7 +28,10 @@
 		{#if files.requiredConverters.length === 1}
 			<p class="whitespace-nowrap">Set all to</p>
 			<Dropdown
-				onselect={(r) => files.files.forEach((f) => (f.to = r))}
+				onselect={(r) => files.files.forEach((f) => {
+					f.to = r;
+					f.result = null;
+				})}
 				options={files.files[0]?.converter?.supportedFormats || []}
 			/>
 		{/if}

src/lib/components/visual/Footer.svelte

@@ -22,9 +22,13 @@
 		{#each links as [name, url] (name)}
 			<!-- bullet point -->
 			<p>•</p>
-			<a target="_blank" class="hover:underline font-normal" href={url}
+			<a
-				>{name}</a
+				class="hover:underline font-normal"
+				href={url}
+				target={url.startsWith("http") ? "_blank" : "_self"}
 			>
+				{name}
+			</a>
 		{/each}
 	</div>
 </footer>

src/lib/sections/about/Credits.svelte

@@ -47,7 +47,7 @@
             <p class="text-sm text-muted font-normal">
                 Big thanks to all these people for helping out!
                 <a
-                    class="text-blue-500 font-normal"
+                    class="text-blue-500 font-normal hover:underline"
                     href="https://github.com/not-nullptr/VERT"
                     target="_blank"
                     rel="noopener noreferrer"

src/lib/sections/about/Resources.svelte

@@ -23,7 +23,7 @@
                 size="24"
                 class="inline-block mr-2"
             />
-            Discord Server
+            Discord server
         </a>
         <a
             href="https://github.com/not-nullptr/VERT"
@@ -32,7 +32,7 @@
             class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
         >
             <GithubIcon size="24" class="inline-block mr-2" />
-            Source Code
+            Source code
         </a>
     </div>
 </Panel>

src/lib/sections/about/Why.svelte

@@ -4,24 +4,22 @@
 </script>
 
 <Panel class="flex flex-col gap-3 p-6">
-    <h2 class="text-2xl font-bold">
+	<h2 class="text-2xl font-bold">
-        <MessageCircleQuestionIcon
+		<MessageCircleQuestionIcon
-            size="40"
+			size="40"
-            class="inline-block -mt-1 mr-2 bg-accent p-1.5 rounded-full"
+			class="inline-block -mt-1 mr-2 bg-accent p-1.5 rounded-full"
-            color="black"
+			color="black"
-        />
+		/>
-        Why VERT?
+		Why VERT?
-    </h2>
+	</h2>
-    <p class="text-lg font-normal">
+	<p class="text-lg font-normal">
-        <b>File converters have always disappointed us.</b> They're
+		<b>File converters have always disappointed us.</b> They're ugly,
-        ugly, riddled with ads, and most importantly; slow. We
+		riddled with ads, and most importantly; slow. We decided to solve this
-        decided to solve this problem once and for all by making an
+		problem once and for all by making an alternative that solves all those
-        alternative that solves all those problems, and then some.<br
+		problems, and more.<br />
-        />
+		<br />
-        <br />
+		All your files are converted completely on-device; this means that there's
-        All your files are converted completely on—device, which means
+		no delay between sending and receiving the files from a server, and we never
-        that there's no delay between sending and receiving the file
+		get to snoop on the files you convert.
-        from a server, and that we never get to snoop on the files you
+	</p>
-        convert.
+</Panel>
-    </p>
-</Panel>

src/routes/+layout.svelte

@@ -190,14 +190,14 @@
 						{@render children()}
 					</div>
 					<div
-						class="w-full h-14 border-t border-separator relative -z-50"
+						class="w-full h-14 border-t border-separator relative"
 					>
 						<Footer
 							class="w-full h-full"
 							items={{
-								"Privacy Policy": "#",
+								"Privacy policy": "#",
-								"Source Code": "#",
+								"Source code": "https://github.com/not-nullptr/VERT",
-								"Discord Server": "#",
+								"Discord server": "https://discord.gg/kqevGxYPak",
 							}}
 						/>
 					</div>

src/routes/+page.svelte

@@ -33,8 +33,8 @@
 						class="font-normal text-xl text-muted blur-in"
 						style:--delay="60ms"
 					>
-						All processing done on your device. No file size limit,
+						All processing is done on your device. No file size
-						no ads, and completely open source.
+						limit, no ads, and completely open source.
 					</p>
 				</div>
 				<div

src/routes/about/+page.svelte

@@ -99,16 +99,19 @@
 	];
 </script>
 
-<div class="flex flex-col h-full items-center blur-in">
+<div class="flex flex-col h-full items-center">
 	<h1
-		class="text-3xl tracking-tight leading-[72px] mb-6"
+		class="text-3xl tracking-tight leading-[72px] mb-6 blur-in"
-		style:--delay="20ms"
+		style="--delay: 20ms;"
 	>
 		<InfoIcon size="40" class="inline-block -mt-2 mr-2" />
 		About
 	</h1>
 
-	<div class="w-full max-w-[1280px] flex flex-row gap-4">
+	<div
+		class="w-full max-w-[1280px] flex flex-row gap-4 blur-in"
+		style="--delay: 60ms"
+	>
 		<!-- Why VERT? & Credits -->
 		<div class="flex flex-col gap-4 flex-1">
 			<About.Why />

src/routes/convert/+page.svelte

@@ -69,6 +69,7 @@
 				<Dropdown
 					options={file.converter?.supportedFormats || []}
 					bind:selected={file.to}
+					onselect={() => file.result && (file.result = null)}
 				/>
 				<div class="w-full flex items-center justify-around">
 					<button
@@ -91,7 +92,7 @@
 	</Panel>
 {/snippet}
 
-<div class="w-full h-full flex justify-center pt-60 pb-20">
+<div class="w-full h-full flex justify-center">
 	<div
 		class="w-[794px] grid"
 		style="grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; gap: 16px"