small design decisions

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

@@ -7,24 +7,28 @@
   let videoSrc = $state<string | null>(null);
 
   onMount(() => {
-        if (typeof window !== 'object') return;
+    if (typeof window !== "object") return;
 
     if (!loggedIn()) {
-            window.location.href = '/login';
+      window.location.href = "/login";
       return;
     }
 
     const vault = getKeyVault();
-        fetch(`/api/log?pubkey=${encodeURIComponent(uint8ToHex(vault!.pubKey))}`).then(async res => {
+    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));
+      entryUrls = ((await res.json()) as any[]).sort((a, b) =>
+        b.date.localeCompare(a.date),
+      );
       console.log(entryUrls);
     });
   });
 
   const update = async (date: string) => {
-        videoSrc = '';
+    videoSrc = "";
 
     const entry = entryUrls?.find((e) => e.date === date);
     if (!entry) return;
@@ -35,28 +39,37 @@
     console.log(cipherBuffer);
 
     const vault = getKeyVault()!;
-        const videoData = await decrypt(vault.symmKey, new Uint8Array(cipherBuffer));
+    const videoData = await decrypt(
+      vault.symmKey,
+      new Uint8Array(cipherBuffer),
+    );
 
-        const blob = new Blob([videoData], { type: 'video/webm' });
+    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="absolute z-1 top-0 left-0 right-0 m-auto w-fit bg-white rounded-3xl mt-6">
-    <div class="shrink-0">
+  <input
-        <input type="date"
+    type="date"
     class="px-4 py-2 rounded-full bg-white min-w-0"
-            onchange={(e) => update((e.target as any).value)}>
+    onchange={(e) => update((e.target as any).value)}
-    </div>
+  />
+</div>
 
-    <div class="grow w-full pt-3 flex flex-col items-center justify-items-stretch overflow-hidden">
+<div class="rh-screen p-4 flex flex-col items-center">
-        <video src={videoSrc} controls
+  <div
-            class="h-full w-full min-w-0 min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030]">
+    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>

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