Implement P&M focused in CSS, instead of JS (#82)

Author: endorpersand

src/lib/components/motions/form/InputSpeakingTime.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
-    import { fade } from "svelte/transition";
-
     import type { InputComponentProps } from "$lib/motions/definitions";
     import { parseTime, sanitizeTime, stringifyTime } from "$lib/util/time";
 
     type Props = InputComponentProps<string>;
     let {
         name,
-        focused = false,
         value = $bindable(),
         error,
         isExtending
@@ -21,16 +18,14 @@
 
     const inpId = $props.id();
 </script>
-<label class="label" for="input-stime-{inpId}">
+<label class="label group" for="input-stime-{inpId}">
     <div class="flex justify-between">
         <span>
             Speaking Time
-            {#if focused}
-                <!-- Time guide -->
-                <span class="text-surface-500" transition:fade={{ duration: 150 }}>
-                    &middot; {sanitizeTime(value)}
-                </span>
-            {/if}
+            <!-- Time guide -->
+            <span class="text-surface-500 not-group-has-focus-within:opacity-0 transition-opacity duration-150">
+                &middot; {sanitizeTime(value)}
+            </span>
         </span>
         <div class="flex gap-1 items-center">
             <!-- Items are const and won't change, so key not necessary -->

src/lib/components/motions/form/InputTotalTime.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { fade } from "svelte/transition";
-
     import type { InputComponentProps } from "$lib/motions/definitions";
     import { a11yLabel, hasKey, lazyslide } from "$lib/util";
     import { sanitizeTime, stringifyTime } from "$lib/util/time";
@@ -10,7 +8,6 @@
     let {
         name,
         error,
-        focused = false,
         value = $bindable(),
         isExtending,
         motion
@@ -26,16 +23,14 @@
         }
     }
 </script>
-<label class="label">
+<label class="label group">
     <div class="flex justify-between">
         <span>
             Total Time
-            {#if focused}
-                <!-- Time guide -->
-                <span class="text-surface-500" transition:fade={{ duration: 150 }}>
-                    &middot; {sanitizeTime(value)}
-                </span>
-            {/if}
+            <!-- Time guide -->
+            <span class="text-surface-500 not-group-has-focus-within:opacity-0 transition-opacity duration-150">
+                &middot; {sanitizeTime(value)}
+            </span>
         </span>
         {#if isExtending}
             <button

src/lib/components/motions/form/MotionForm.svelte

@@ -83,7 +83,6 @@
         }
     }
 
-    let activeElement = $state<HTMLElement>();
     // Motions that you can input into dropdown (taking into account provided preferences)
     let allowedMotions = $derived.by(() => {
         // A map indicating whether a given motion type should appear.
@@ -182,7 +181,6 @@
     }
 </script>
 
-<svelte:document bind:activeElement />
 <form 
     onsubmit={submitMotion}
     oninput={() => inputError = undefined}
@@ -229,7 +227,6 @@
             <Component
                 {name}
                 error={inputError?.path.includes(name)}
-                focused={(activeElement as any)?.name === name}
                 bind:value={(inputMotion as any)[name]}
                 isExtending={isExtending(inputMotion)}
                 motion={$selectedMotion}

src/lib/motions/definitions.ts

@@ -71,7 +71,6 @@ export const MOTION_DEFS = {
 export type InputComponentProps<V> = {
     name: string,
     error?: boolean,
-    focused?: boolean,
     value?: V,
     isExtending?: boolean,
     motion: Motion | null