Show latest window or context menu on top

Update a global "latest z-index" every time a dialog or context menu
pops up to guarantee it is on top, and allow changing the z-order (while
implicitly maintaining the order of the stack of previous ones).

@lsnow99 came up with the good idea to have the value come from a
function that closes over a variable and increments it after returning.

Author: jstrieb

src/App.svelte

@@ -50,7 +50,6 @@
     gap: 0.5ch;
     overflow-x: auto;
     background-color: var(--bg-color);
-    z-index: 19;
   }
 
   .bottombar {
@@ -117,7 +116,7 @@
   import { State, Sheet } from "./classes.svelte.js";
   import { compressText } from "./compress.js";
   import { evalDebounced, functions } from "./formula-functions.svelte.js";
-  import { debounce, replaceValues } from "./helpers.js";
+  import { debounce, replaceValues, nextZIndex } from "./helpers.js";
   import { actions, keyboardHandler, keybindings } from "./keyboard.js";
 
   let { urlData } = $props();
@@ -292,6 +291,7 @@
   bind:innerHeight
 />
 
+<!-- TODO: Better heuristic that doesn't trigger on touchscreen laptops -->
 {#if navigator.maxTouchPoints <= 1}
   <!-- Else float the bar above the virtual keyboard -->
   <div>
@@ -442,7 +442,7 @@
   <div class="keyboardbar" style:top="calc({visualBottom}px - 2.5em * 2)">
     <FormulaBar bind:globals bind:editor={globals.elements.formulaBar} />
     {#if showInputButtons}
-      <div class="buttonbar">
+      <div class="buttonbar" style:z-index={nextZIndex()}>
         {@render insertTextButton("=")}
         {@render insertTextButton("(")}
         {@render insertTextButton(")")}
@@ -471,6 +471,7 @@
       <div
         class="startmenu"
         bind:offsetHeight={startHeight}
+        style:z-index={nextZIndex()}
         style:--height="{startHeight}px"
       >
         {@render builder([

src/ContextMenu.svelte

@@ -37,7 +37,6 @@
 <style>
   .menu {
     position: absolute;
-    z-index: 20;
     background: none;
     /* TODO: Keep? Adjust? */
     width: 300px;
@@ -47,7 +46,7 @@
 
 <script>
   import ShyMenu from "./ShyMenu.svelte";
-
+  import { nextZIndex } from "./helpers.js";
   import { tick } from "svelte";
 
   const {
@@ -93,6 +92,7 @@
       class="menu"
       style:left="{menuX}px"
       style:top="{menuY}px"
+      style:z-index={nextZIndex()}
       bind:offsetWidth={menuWidth}
       bind:offsetHeight={menuHeight}
     >

src/Dialog.svelte

@@ -85,7 +85,7 @@
 
 <script>
   import Button from "./Button.svelte";
-  import { randomId } from "./helpers.js";
+  import { randomId, nextZIndex } from "./helpers.js";
 
   const minDimension = Math.min(window.innerWidth, window.innerHeight);
 
@@ -102,6 +102,13 @@
   let pointerStart = $state();
   let dragging = $state(false);
 
+  let zindex = $state(nextZIndex());
+  $effect(() => {
+    if (open) {
+      zindex = nextZIndex();
+    }
+  });
+
   // If the dots pattern is redeclared (when there are multiple <Dialog>
   // components, for example), and the first one is inside of a `display:
   // none` element, then they will not render. Giving each a unique ID
@@ -168,6 +175,8 @@
   style:left="max(0px, {left}px)"
   style:--width="min(calc(100% - {left}px), {width}px)"
   style:--height="min(calc(100% - {top}px), {height}px)"
+  style:z-index={zindex}
+  onpointerdown={() => (zindex = nextZIndex())}
 >
   <div class="top">
     <svg class="drag" onpointerdown={topPointerDown} onpointerup={topPointerUp}>

src/helpers.js

@@ -74,3 +74,10 @@ export function replaceValues(k, v) {
   // TODO: Do other things to make the data URL smaller
   return v;
 }
+
+let nextIndex = 10;
+export function nextZIndex(increment = 1) {
+  const result = nextIndex;
+  nextIndex += increment;
+  return result;
+}