rc-1

frontend/source/functions/Context.ts

@@ -0,0 +1,41 @@
+import { createContext, useContext } from 'react'
+
+export const ScrollContext = createContext<HTMLElement | null>(null)
+export const useScrollRoot = () => useContext(ScrollContext)
+
+// delete all the toastz
+export function toastNuke() {
+    document.querySelectorAll('.layout-tooltip').forEach((e) => e.remove())
+}
+window.addEventListener('popstate', toastNuke)
+
+// janky tooltips which are evil!1!
+export function toast(anchorId: string, message: string) {
+    const anchor = document.getElementById(anchorId)
+    if (!anchor) return
+
+    const dialog = anchor.closest('dialog') ?? document.body
+    const parent = dialog.getBoundingClientRect()
+    const rect = anchor.getBoundingClientRect()
+    const elem = document.createElement('span')
+
+    // monospace font 4 da win
+    const tooltipWidth = message.length * 8
+    const clampedLeft = Math.max(
+        tooltipWidth / 2 + 8,
+        Math.min(rect.left + rect.width / 2, window.innerWidth - tooltipWidth / 2 - 8),
+    )
+
+    elem.classList.add('layout-tooltip', 'animation-scroll-in')
+    elem.textContent = message
+    elem.style.cssText = `
+        position: absolute;
+        left: ${clampedLeft - parent.left}px;
+        top: ${rect.top - parent.top - 8}px;
+        transform: translateX(-50%) translateY(-100%);
+    `
+
+    toastNuke()
+    dialog.appendChild(elem)
+    setTimeout(() => elem.remove(), 2000)
+}