small design decisions

src/routes/(area)/log/+page.svelte

@@ -1,65 +1,78 @@
 <script lang="ts">
-    import { getKeyVault, loggedIn } from "$lib/auth";
-    import { decrypt, uint8ToHex } from "$lib/crypto";
-    import { onMount } from "svelte";
+  import { getKeyVault, loggedIn } from "$lib/auth";
+  import { decrypt, uint8ToHex } from "$lib/crypto";
+  import { onMount } from "svelte";
 
-    let entryUrls = $state<any[] | null>(null);
-    let videoSrc = $state<string | null>(null);
+  let entryUrls = $state<any[] | null>(null);
+  let videoSrc = $state<string | null>(null);
 
-    onMount(() => {
-        if (typeof window !== 'object') return;
+  onMount(() => {
+    if (typeof window !== "object") return;
 
-        if (!loggedIn()) {
-            window.location.href = '/login';
-            return;
-        }
+    if (!loggedIn()) {
+      window.location.href = "/login";
+      return;
+    }
 
-        const vault = getKeyVault();
-        fetch(`/api/log?pubkey=${encodeURIComponent(uint8ToHex(vault!.pubKey))}`).then(async res => {
-            if (!res.ok) return;
+    const vault = getKeyVault();
+    fetch(
+      `/api/log?pubkey=${encodeURIComponent(uint8ToHex(vault!.pubKey))}`,
+    ).then(async (res) => {
+      if (!res.ok) return;
 
-            entryUrls = (await res.json() as any[]).sort((a, b) => b.date.localeCompare(a.date));
-            console.log(entryUrls);
-        });
+      entryUrls = ((await res.json()) as any[]).sort((a, b) =>
+        b.date.localeCompare(a.date),
+      );
+      console.log(entryUrls);
     });
+  });
 
-    const update = async (date: string) => {
-        videoSrc = '';
-        
-        const entry = entryUrls?.find((e) => e.date === date);
-        if (!entry) return;
+  const update = async (date: string) => {
+    videoSrc = "";
 
-        const res = await fetch(entry.url);
-        if (!res.ok) return;
-        const cipherBuffer = await res.bytes();
-        console.log(cipherBuffer);
+    const entry = entryUrls?.find((e) => e.date === date);
+    if (!entry) return;
 
-        const vault = getKeyVault()!;
-        const videoData = await decrypt(vault.symmKey, new Uint8Array(cipherBuffer));
+    const res = await fetch(entry.url);
+    if (!res.ok) return;
+    const cipherBuffer = await res.bytes();
+    console.log(cipherBuffer);
 
-        const blob = new Blob([videoData], { type: 'video/webm' });
-        videoSrc = URL.createObjectURL(blob);
-    };
+    const vault = getKeyVault()!;
+    const videoData = await decrypt(
+      vault.symmKey,
+      new Uint8Array(cipherBuffer),
+    );
+
+    const blob = new Blob([videoData], { type: "video/webm" });
+    videoSrc = URL.createObjectURL(blob);
+  };
 </script>
 
-
 <svelte:head>
-    <title>Somri Wormhole - Go back in time!</title>
+  <title>Sonri Wormhole - Go back in time!</title>
 </svelte:head>
 
-<div class="rh-screen p-4 flex flex-col items-center">
-    <div class="shrink-0">
-        <input type="date"
-            class="px-4 py-2 rounded-full bg-white min-w-0"
-            onchange={(e) => update((e.target as any).value)}>
-    </div>
+<div class="absolute z-1 top-0 left-0 right-0 m-auto w-fit bg-white rounded-3xl mt-6">
+  <input
+    type="date"
+    class="px-4 py-2 rounded-full bg-white min-w-0"
+    onchange={(e) => update((e.target as any).value)}
+  />
+</div>
 
-    <div class="grow w-full pt-3 flex flex-col items-center justify-items-stretch overflow-hidden">
-        <video src={videoSrc} controls
-            class="h-full w-full min-w-0 min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030]">
-            <track kind="captions" />
-        </video>
-    </div>
+<div class="rh-screen p-4 flex flex-col items-center">
+  <div
+    class="grow w-full flex flex-col items-center justify-items-stretch overflow-hidden"
+  >
+    <video
+      src={videoSrc}
+      controls
+      class="h-full w-full min-w-0 min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030]"
+    >
+      <track kind="captions" />
+    </video>
+  </div>
 </div>
 
 <!-- <button class="fixed bg-[#e14c2f] rounded-xl top-3 right-3 p-1 cursor-pointer">

src/routes/(area)/login/+page.svelte

@@ -3,6 +3,8 @@
     import { deriveKeyVault, encodeKeyVault } from "$lib/crypto";
     import { onMount } from "svelte";
 
+    let loading = $state(false);
+
     const onSubmit = async (e: SubmitEvent) => {
         e.preventDefault();
 
@@ -10,9 +12,14 @@
         const passkey = formData.get('passkey') as string;
         if (!passkey) return;
 
-
-        await login(passkey, !!formData.get('persistent'));
-        window.location.href = '/today';
+        loading = true;
+        try {
+            await login(passkey, !!formData.get('persistent'));
+            window.location.href = '/today';
+            return;
+        } finally {
+            loading = false;
+        }
     };
 
     onMount(() => {
@@ -25,11 +32,11 @@
 </script>
 
 <svelte:head>
-    <title>Somri Login</title>
+    <title>Sonri Login</title>
 </svelte:head>
 
 <div class="absolute left-0 right-0 m-auto p-6 max-w-[400px] font-serif">
-    <form method="POST" class="p-6 rounded-3xl bg-white flex flex-col gap-2"
+    <form method="POST" class={`p-6 rounded-3xl bg-white flex flex-col gap-2 ${loading ? 'blur-md' : ''} duration-300`}
         onsubmit={onSubmit}
     >
         <h1 class="text-3xl font-bold p-2">Login</h1>
@@ -37,7 +44,7 @@
         <input type="password" name="passkey" placeholder="Passkey"
             class="text-xl px-3 py-1 rounded-3xl outline-none bg-[#00000010]">
 
-        <div class="p-2">
+        <div class="p-2 pt-0">
             <input id="persistent" name="persistent" type="checkbox">
             <label for="persistent">Stay signed in</label>
         </div>