Add collapsible, applied to P&M page (#87)

Author: endorpersand

src/lib/components/OrientedCollapsible.svelte

@@ -0,0 +1,67 @@
+<!-- @component A collapsible component, which collapses right to left if longer than wider,
+    and collapses bottom to top if wider than longer.
+-->
+<script lang="ts">
+    import { Collapsible } from "@skeletonlabs/skeleton-svelte";
+    import type { Snippet } from "svelte";
+    import { slide } from "svelte/transition";
+    
+    import MdiChevronLeft from "~icons/mdi/chevron-left";
+
+    interface Props {
+        /** Whether the collapsible is open (bindable). */
+        open?: boolean,
+        /**
+         * The uncollapsed content.
+         * 
+         * This also decides the width/height of the collapsible,
+         * so it should be set accordingly to the ratio of
+         * uncollapsed content to everything else on the page.
+         **/
+        children: Snippet<[]>
+    }
+
+    let { open = $bindable(true), children }: Props = $props();
+
+    let collapsibleEl = $state<HTMLDivElement>();
+    let collapsibleHoriz = $state(getCHoriz());
+    function getCHoriz() {
+        return collapsibleEl ? getComputedStyle(collapsibleEl).flexDirection == "row" : true;
+    }
+</script>
+<Collapsible
+    class="flex-col md:flex-row items-stretch gap-0"
+    {open}
+    onOpenChange={e => open = e.open}
+>
+    {#snippet element(attributes)}
+        <div {...attributes} bind:this={collapsibleEl}>
+            <Collapsible.Content class="grow">
+            {#snippet element(attributes)}
+                {#if !attributes.hidden}
+                <div
+                    {...attributes}
+                    class="overflow-hidden"
+                    transition:slide={{ duration: 150, axis: collapsibleHoriz ? "x" : "y" }}
+                >
+                    {@render children()}
+                </div>
+                {/if}
+            {/snippet}
+            </Collapsible.Content>
+            <div class="flex items-center justify-center">
+                <Collapsible.Trigger class="btn-icon-std p-0 m-1 hover:preset-tonal">
+                    <MdiChevronLeft
+                    class={[
+                        "transition-transform duration-150",
+                        open ? "rotate-90 md:rotate-0" : "rotate-270 md:rotate-180"
+                    ]}
+                    />
+                </Collapsible.Trigger>
+            </div>
+        </div>
+    {/snippet}
+</Collapsible>
+
+<!-- HACK: Get orientation of collapsible in JS -->
+<svelte:window onresize={() => collapsibleHoriz = getCHoriz()}></svelte:window>

src/routes/dashboard/points-motions/+page.svelte

@@ -16,6 +16,7 @@
   import EditMotionContent from "$lib/components/modals/EditMotionContent.svelte";
   import UniModal from "$lib/components/modals/UniModal.svelte";
   import MotionForm, { numSpeakersStr } from "$lib/components/motions/form/MotionForm.svelte";
+  import OrientedCollapsible from "$lib/components/OrientedCollapsible.svelte";
   import { getSessionContext } from "$lib/context/index.svelte";
   import { findDelegate } from "$lib/db/delegates";
   import { db } from "$lib/db/index.svelte";
@@ -141,12 +142,16 @@
   }
 </script>
 
-<div class="grid gap-5 min-h-full md:grid-cols-[1fr_2fr] md:h-full">
-  <div class="card-filled motion-form">
-    <MotionForm submit={submitMotion} {motionSchema} />
+<div class="flex flex-col gap-3 min-h-full md:h-full md:flex-row @container">
+  <div class="flex card-filled">
+    <OrientedCollapsible>
+      <div class="w-full md:w-[30cqw] *:md:pr-0">
+        <MotionForm submit={submitMotion} {motionSchema} />
+      </div>
+    </OrientedCollapsible>
   </div>
 
-  <div class="flex flex-col gap-2 overflow-x-auto">
+  <div class="flex flex-col gap-2 overflow-x-auto md:min-w-[60cqw] grow">
     <div class="grid grid-cols-[auto_1fr_auto] items-center">
       <button
         class="btn-icon-std transition-colors preset-filled-primary-500"