From e042c5e2795295d24c97e26ab8fedb32fe74877a Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Sun, 16 Aug 2026 05:37:26 -0400
Subject: [PATCH] refactor: migrate context menu to floating ui

might as well since we're already importing it
---
 src/lib/components/ContextMenu.svelte | 158 +++++++++++++++++---------
 1 file changed, 107 insertions(+), 51 deletions(-)

diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte
index 930e6b3..d90a67c 100644
--- a/src/lib/components/ContextMenu.svelte
+++ b/src/lib/components/ContextMenu.svelte
@@ -1,4 +1,11 @@
 <script lang="ts">
+import {
+	autoUpdate,
+	computePosition,
+	flip,
+	shift,
+	type VirtualElement,
+} from "@floating-ui/dom";
 import { t } from "../languages/translate.svelte.js";
 
 export type SubItem = {
@@ -55,15 +62,9 @@ const exec = (action?: () => void) => {
 	}
 };
 
-const left = $derived(
-	x + width > window.innerWidth ? Math.max(0, x - width) : x,
-);
-const top = $derived(
-	y + height > window.innerHeight ? Math.max(0, y - height) : y,
-);
-
 const clamp = (value: number, min: number, max: number) =>
 	Math.max(min, Math.min(value, max));
+const positionPadding = 8;
 
 const activeRow = $derived.by(() =>
 	active === null || !element
@@ -139,21 +140,98 @@ $effect(() => {
 		container.scrollTop = bottom - container.clientHeight;
 });
 
-const submenuLeft = $derived.by(() => {
-	if (!activeItem) return 0;
-	const subWidth = submenuWidth || 160;
-	return left + width + subWidth > window.innerWidth
-		? left - subWidth
-		: left + width;
+$effect(() => {
+	const floating = element;
+	const point = { x, y };
+	if (!floating) return;
+
+	const reference: VirtualElement = {
+		getBoundingClientRect: () => DOMRect.fromRect(point),
+	};
+	const update = () => {
+		void computePosition(reference, floating, {
+			strategy: "fixed",
+			placement: "bottom-start",
+			middleware: [
+				flip({ padding: positionPadding }),
+				shift({ padding: positionPadding }),
+			],
+		}).then(({ x: left, y: computedTop }) => {
+			const menuWidth = floating.offsetWidth;
+			const menuHeight = floating.offsetHeight;
+			const spaceAbove = point.y - positionPadding;
+			const spaceBelow = window.innerHeight - point.y - positionPadding;
+			const top =
+				spaceAbove < menuHeight && spaceBelow < menuHeight
+					? Math.max(positionPadding, (window.innerHeight - menuHeight) / 2)
+					: computedTop;
+			floating.style.left = `${left}px`;
+			floating.style.top = `${top}px`;
+			floating.style.setProperty(
+				"--menu-origin-x",
+				`${keyboard ? menuWidth / 2 : clamp(point.x - left, 0, menuWidth)}px`,
+			);
+			floating.style.setProperty(
+				"--menu-origin-y",
+				`${
+					keyboard
+						? top < point.y
+							? menuHeight
+							: 0
+						: clamp(point.y - top, 0, menuHeight)
+				}px`,
+			);
+		});
+	};
+
+	update();
+	return autoUpdate(reference, floating, update);
 });
-const submenuTop = $derived.by(() => {
-	if (!activeRow) return 0;
-	return clamp(
-		top + activeRow.offsetTop,
-		0,
-		window.innerHeight -
-			(submenuHeight || (activeItem?.items?.length || 0) * 32),
-	);
+
+$effect(() => {
+	const reference = activeRow;
+	const floating = submenuElement;
+	if (!submenuOpen || !reference || !floating) return;
+
+	const update = () => {
+		void computePosition(reference, floating, {
+			strategy: "fixed",
+			placement: "right-start",
+			middleware: [
+				flip({
+					fallbackPlacements: ["left-start"],
+					padding: positionPadding,
+				}),
+				shift({ padding: positionPadding }),
+			],
+		}).then(({ x: left, y: top, placement }) => {
+			const opensLeft = placement.startsWith("left");
+			const menuWidth = floating.offsetWidth;
+			const menuHeight = floating.offsetHeight;
+			const referenceRect = reference.getBoundingClientRect();
+			floating.style.left = `${left}px`;
+			floating.style.top = `${top}px`;
+			floating.style.setProperty(
+				"--menu-origin-x",
+				`${opensLeft ? menuWidth : 0}px`,
+			);
+			floating.style.setProperty(
+				"--menu-origin-y",
+				`${clamp(
+					referenceRect.top + referenceRect.height / 2 - top,
+					0,
+					menuHeight,
+				)}px`,
+			);
+			floating.style.setProperty(
+				"--menu-enter-x",
+				opensLeft ? "0.1875rem" : "-0.1875rem",
+			);
+		});
+	};
+
+	update();
+	return autoUpdate(reference, floating, update);
 });
 
 function onKey(event: KeyboardEvent) {
@@ -269,12 +347,6 @@ function onKey(event: KeyboardEvent) {
 		bind:this={element}
 		class="menu"
 		class:ready={width > 0 && height > 0}
-		style:--menu-y={`${top}px`}
-		style:--menu-x={`${left}px`}
-		style:--menu-width={`${width}px`}
-		style:--menu-height={`${height}px`}
-		style:--menu-origin-x={`${keyboard ? width / 2 : clamp(x - left, 0, width)}px`}
-		style:--menu-origin-y={`${keyboard ? (top < y ? height : 0) : clamp(y - top, 0, height)}px`}
 		onclick={(event) => event.stopPropagation()}
 		onpointermove={(event) => hoverItem(event, false)}
 		onkeydown={onKey}
@@ -303,13 +375,6 @@ function onKey(event: KeyboardEvent) {
 			id={submenuId}
 			class="menu submenu"
 			class:ready={submenuWidth > 0 && submenuHeight > 0}
-			style:--menu-y={`${submenuTop}px`}
-			style:--menu-x={`${submenuLeft}px`}
-			style:--menu-width={`${submenuWidth}px`}
-			style:--menu-height={`${submenuHeight}px`}
-			style:--menu-origin-x={`${submenuLeft < left ? submenuWidth : 0}px`}
-			style:--menu-origin-y={`${activeRow ? clamp(top + activeRow.offsetTop + activeRow.offsetHeight / 2 - submenuTop, 0, submenuHeight) : 0}px`}
-			style:--menu-enter-x={submenuLeft < left ? "0.1875rem" : "-0.1875rem"}
 			onclick={(event) => event.stopPropagation()}
 			onpointermove={(event) => hoverItem(event, true)}
 			bind:this={submenuElement}
@@ -338,28 +403,19 @@ function onKey(event: KeyboardEvent) {
 	}
 	.menu {
 		position: fixed;
-		top: clamp(
-			var(--viewport-inset-top),
-			var(--menu-y),
-			calc(
-				100dvh - var(--viewport-inset-bottom) - var(--menu-height)
-			)
-		);
-		left: clamp(
-			var(--viewport-inset-left),
-			var(--menu-x),
-			calc(
-				100dvw - var(--viewport-inset-right) - var(--menu-width)
-			)
-		);
+		top: 0;
+		left: 0;
 		transform-origin: var(--menu-origin-x) var(--menu-origin-y);
 		background: Canvas;
 		color: CanvasText;
 		border: var(--border);
 		box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
-		min-inline-size: min(160px, var(--viewport-inline-size));
-		max-inline-size: var(--viewport-inline-size);
-		max-block-size: var(--viewport-block-size);
+		min-inline-size: min(
+			160px,
+			max(0px, calc(var(--viewport-inline-size) - 16px))
+		);
+		max-inline-size: max(0px, calc(var(--viewport-inline-size) - 16px));
+		max-block-size: max(0px, calc(var(--viewport-block-size) - 16px));
 		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
-- 
2.51.2