From a3076b52caa3f5aaaa07f0279e2aecc805cc278c Mon Sep 17 00:00:00 2001
From: Dlurak <84224239+Dlurak@users.noreply.github.com>
Date: Sun, 23 Jun 2024 14:16:03 +0200
Subject: [PATCH] Implement snapping for panes

---
 .github/workflows/{format.yml => lint.yml}   |  4 +-
 src/lib/components/panes/Panes.svelte        | 73 +++++++++++++++++---
 src/lib/components/select/NotTyppable.svelte |  1 -
 3 files changed, 67 insertions(+), 11 deletions(-)
 rename .github/workflows/{format.yml => lint.yml} (88%)

diff --git a/.github/workflows/format.yml b/.github/workflows/lint.yml
similarity index 88%
rename from .github/workflows/format.yml
rename to .github/workflows/lint.yml
index aacf252..72cfb50 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/lint.yml
@@ -1,8 +1,8 @@
-name: Linting & formatting
+name: Lint
 
 on:
   push:
-    branches: ['master', 'actions']
+    branches: 'master'
   workflow_dispatch:
 
 jobs:
diff --git a/src/lib/components/panes/Panes.svelte b/src/lib/components/panes/Panes.svelte
index a984a4a..96e64d3 100644
--- a/src/lib/components/panes/Panes.svelte
+++ b/src/lib/components/panes/Panes.svelte
@@ -1,18 +1,23 @@
 <script context="module" lang="ts">
-	const isTouchEvent = (e: MouseEvent | TouchEvent): e is TouchEvent => 'touches' in e;
+	import { calculatePercentage } from '$lib/utils/math/percentages';
+
+	const isTouchEvent = (e: Event): e is TouchEvent => 'touches' in e;
 
 	interface Props {
 		setPos: (p: number) => void;
 		getPos: () => number;
+		setShowSideBar: (show: boolean) => void;
+		setPercentages: (p: number) => void;
 		min: number;
 		max: number;
 	}
 
 	const handleMouseDownOrTouchStart =
-		({ setPos, getPos, min, max }: Props) =>
+		({ setPos, getPos, setShowSideBar, setPercentages, min, max }: Props) =>
 		(e: MouseEvent | TouchEvent) => {
 			let isDragging = true;
 			let initialPosition = isTouchEvent(e) ? e.touches[0].clientX : e.clientX;
+			let percentage = 0;
 
 			const handleMouseMoveOrTouchMove = (e: MouseEvent | TouchEvent) => {
 				if (!isDragging) return;
@@ -21,19 +26,32 @@
 				const delta = clientX - initialPosition;
 				const potentialPos = getPos() + delta;
 
+				if (potentialPos <= min) {
+					percentage = Math.min(
+						calculatePercentage((potentialPos - min) * -1, ((min - min / 3) / 5) * 4),
+						100
+					);
+					setPercentages(percentage);
+					return setPos(min);
+				}
+				percentage = 0;
+				setPercentages(percentage);
 				if (potentialPos >= max) return setPos(max);
-				if (potentialPos <= min) return setPos(min);
 
 				setPos(potentialPos);
 				initialPosition = clientX;
 			};
 
 			const handleMouseUpOrTouchEnd = () => {
-				isDragging = false;
 				document.removeEventListener('mousemove', handleMouseMoveOrTouchMove);
 				document.removeEventListener('touchmove', handleMouseMoveOrTouchMove);
 				document.removeEventListener('mouseup', handleMouseUpOrTouchEnd);
 				document.removeEventListener('touchend', handleMouseUpOrTouchEnd);
+				isDragging = false;
+				if (percentage >= 70) setShowSideBar(false);
+
+				percentage = 0;
+				setPercentages(percentage);
 			};
 
 			document.addEventListener('mousemove', handleMouseMoveOrTouchMove);
@@ -45,30 +63,60 @@
 
 <script lang="ts">
 	import { clamp } from '$lib/utils/numbers/clamp';
+	import { ArrowLeft, ChevronLeft, Icon } from 'svelte-hero-icons';
+	import QuickAction from '../buttons/QuickAction.svelte';
 
 	export let min = 120;
 	export let max = 550;
 	export let position = clamp(min, 160, max);
+	export let showSidebar = true;
+
+	let percentageCollapsing = 0;
 
 	const handler = handleMouseDownOrTouchStart({
 		max,
 		min,
 		setPos: (p) => (position = p),
-		getPos: () => position
+		getPos: () => position,
+		setShowSideBar: (b) => (showSidebar = b),
+		setPercentages: (p) => (percentageCollapsing = p)
 	});
 </script>
 
 <div
-	class="grid h-full w-full max-w-full grid-cols-1 grid-rows-1 gap-2 md:grid-cols-[var(--w),1fr]"
+	class="grid h-full w-full max-w-full grid-cols-1 grid-rows-1 gap-2"
+	class:md:grid-cols-[var(--w),1fr]={showSidebar}
+	class:grid-cols-1={!showSidebar}
 	style:--w={`${position}px`}
 >
-	<div class="h-full">
+	<div class="relative flex h-full flex-col gap-2 px-2 py-1" class:hidden={!showSidebar}>
+		<div class="hidden md:inline-block">
+			<QuickAction
+				icon={ChevronLeft}
+				small
+				on:click={() => {
+					showSidebar = false;
+				}}
+			/>
+		</div>
+
 		<slot name="a" />
+
+		<div
+			class="absolute inset-0 flex h-full w-full items-center justify-center rounded bg-black bg-opacity-[--effect]"
+			class:hidden={percentageCollapsing === 0}
+			style:--effect={Math.round(percentageCollapsing) / 100}
+		>
+			<div class="aspect-square scale-[--effect] rounded-full bg-emerald-300 p-2">
+				<Icon src={ArrowLeft} class="h-7 w-7" small />
+			</div>
+		</div>
 	</div>
 
 	<div class="flex h-full w-full max-w-full gap-2 overflow-hidden">
 		<button
 			class="hidden cursor-col-resize px-1 md:inline-block"
+			class:md:hidden={!showSidebar}
 			tabindex="-1"
 			on:mousedown={handler}
 			on:touchstart={handler}
@@ -76,7 +124,16 @@
 			<div class="h-full w-1 rounded-full bg-zinc-200 touch:w-1.5 dark:bg-zinc-700" />
 		</button>
 
-		<div class="flex w-full max-w-full overflow-hidden p-1">
+		<div class="flex w-full max-w-full flex-col gap-2 overflow-hidden p-1">
+			<div class="hidden md:inline-block" class:md:hidden={showSidebar}>
+				<QuickAction
+					icon={ChevronLeft}
+					small
+					on:click={() => {
+						showSidebar = true;
+					}}
+				/>
+			</div>
 			<slot name="b" />
 		</div>
 	</div>
diff --git a/src/lib/components/select/NotTyppable.svelte b/src/lib/components/select/NotTyppable.svelte
index d9a292b..e031c6d 100644
--- a/src/lib/components/select/NotTyppable.svelte
+++ b/src/lib/components/select/NotTyppable.svelte
@@ -4,7 +4,6 @@
 	import { flip, offset, shift } from '@floating-ui/core';
 	import { createFloatingActions } from 'svelte-floating-ui';
 	import { ChevronDown, Icon } from 'svelte-hero-icons';
-	import QuickAction from '../buttons/QuickAction.svelte';
 	import Frame from '../input/Frame.svelte';
 	import type { Readable } from 'svelte/store';
 	import Store from '../utils/Store.svelte';