Resizable right panel

frontend/app/src/components/Resizable.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { rightPanelWidth } from "../stores/layout";
+    import { mobileWidth } from "../stores/screenDimensions";
+
+    const MIN_COL_WIDTH = 400;
+    const MAX_COL_WIDTH = 900;
+
+    export let section: HTMLElement;
+    export let modal: boolean;
+    export let resizedWidth: string;
+    export let resized: boolean;
+    export let resizing = false;
+
+    let previous = 0;
+
+    onMount(() => {
+        return rightPanelWidth.subscribe((width) => {
+            resized = width !== undefined;
+            resizedWidth = getWidthVar(width);
+        });
+    });
+
+    function startResize(ev: MouseEvent) {
+        previous = ev.screenX;
+        resizing = true;
+        document.body.style.cursor = "ew-resize";
+    }
+
+    function stopResize() {
+        resizing = false;
+        document.body.style.cursor = "";
+    }
+
+    function resetSize() {
+        rightPanelWidth.set(undefined);
+    }
+
+    function clampResize(size: number): number {
+        if (size > MAX_COL_WIDTH) return MAX_COL_WIDTH;
+        if (size < MIN_COL_WIDTH) return MIN_COL_WIDTH;
+        return size;
+    }
+
+    function drag(ev: MouseEvent) {
+        if (resizing) {
+            const diff = previous - ev.screenX;
+            const updated = clampResize(section.offsetWidth + diff);
+            rightPanelWidth.set(updated);
+            previous = ev.screenX;
+        }
+    }
+
+    function getWidthVar(rw: number | undefined): string {
+        if (modal) {
+            return rw ? `${rw}px` : "500px";
+        } else {
+            return rw ? `${rw}px` : "7";
+        }
+    }
+</script>
+
+<svelte:window on:mousemove={drag} on:mouseup={stopResize} />
+
+{#if !$mobileWidth}
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <div
+        role="separator"
+        class:resizing
+        on:mousedown={startResize}
+        on:dblclick={resetSize}
+        class="handle">
+    </div>
+{/if}
+
+<style lang="scss">
+    .handle {
+        position: absolute;
+        left: 0;
+        height: 100%;
+        width: 5px;
+        cursor: ew-resize;
+        transition: background-color 300ms ease-in-out;
+
+        &.resizing,
+        &:hover {
+            background-color: var(--accent);
+        }
+    }
+</style>

frontend/app/src/components/SelectChatModal.svelte

@@ -15,7 +15,6 @@
     import Avatar from "./Avatar.svelte";
     import CollapsibleCard from "./CollapsibleCard.svelte";
     import { AvatarSize, chatIdentifiersEqual } from "openchat-client";
-    import Panel from "./Panel.svelte";
     import { iconSize } from "../stores/iconSize";
     import HoverIcon from "./HoverIcon.svelte";
     import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
@@ -250,7 +249,7 @@
     }
 </script>
 
-<Panel right forceModal>
+<section>
     <SectionHeader border={false} gap>
         <HoverIcon>
             <AccountMultiple size={$iconSize} color={"var(--icon-txt)"} />
@@ -419,7 +418,7 @@
             {/each}
         </div>
     {/if}
-</Panel>
+</section>
 
 <style lang="scss">
     :global(.selectable-chats .body) {
@@ -436,6 +435,19 @@
         margin-top: 2px;
     }
 
+    section {
+        background: var(--panel-right-modal);
+        height: calc(var(--vh, 1vh) * 100);
+        position: relative;
+        width: 500px;
+        overflow: auto;
+        overflow-x: hidden;
+
+        @include mobile() {
+            width: 100%;
+        }
+    }
+
     .no-chats {
         margin: $sp3;
         padding: $sp3 $sp4;