From 2c8d207866fd56ad8b9e8d28d1c98fdcb4ebe096 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 23 Apr 2025 10:46:33 +0200
Subject: [PATCH] UX: floor selector: add white background pane

---
 src/Logic/State/LayerState.ts                 |  3 +++
 .../InputElement/Helpers/FloorSelector.svelte | 24 ++++++++++---------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/Logic/State/LayerState.ts b/src/Logic/State/LayerState.ts
index 88bb50783..a2ca76292 100644
--- a/src/Logic/State/LayerState.ts
+++ b/src/Logic/State/LayerState.ts
@@ -130,8 +130,11 @@ export default class LayerState {
     public setLevelFilter(level?: string) {
         // Remove all previous
         const l = this.globalFilters.data.length
+        // Remove all global filters tagged 'levels
         this.globalFilters.data = this.globalFilters.data.filter((f) => f.id !== "level")
         if (!level) {
+            // Level is undefined - we thus only want to remove the global filter
+            // We've just done this above, but the listeners are not aware yet. Let's ping (if needed) and move on
             if (l !== this.globalFilters.data.length) {
                 this.globalFilters.ping()
             }
diff --git a/src/UI/InputElement/Helpers/FloorSelector.svelte b/src/UI/InputElement/Helpers/FloorSelector.svelte
index 0713fda18..b0ee1da35 100644
--- a/src/UI/InputElement/Helpers/FloorSelector.svelte
+++ b/src/UI/InputElement/Helpers/FloorSelector.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { twJoin } from "tailwind-merge"
   import { Store, Stores, UIEventSource } from "../../../Logic/UIEventSource"
 
   /**
@@ -11,12 +10,12 @@
   export let value: UIEventSource<string>
 
   const HEIGHT = 40
+  const WIDTH = HEIGHT
 
-  let initialIndex = Math.max(0, floors?.data?.findIndex((f) => f === value?.data) ?? 0)
+  let initialIndex = Math.max(0, floors?.data?.findIndex((f) => f === value?.data) ?? floors?.data?.length + 1)
   let index: UIEventSource<number> = new UIEventSource<number>(initialIndex)
   let forceIndex: number | undefined = undefined
   let top = Math.max(0, initialIndex) * HEIGHT
-  let elevator: HTMLImageElement
 
   let mouseDown = false
 
@@ -53,7 +52,7 @@
   let momentum = 0
 
   function stabilize() {
-    // Automatically move the elevator to the closes floor
+    // Automatically move the elevator to the closest floor
     if (mouseDown) {
       return
     }
@@ -73,7 +72,7 @@
     top = Math.max(top, 0)
   }
 
-  Stores.Chronic(50).addCallback((_) => stabilize())
+  Stores.Chronic(50).addCallback(() => stabilize())
   floors.addCallback((floors) => {
     forceIndex = floors.findIndex((s) => s === value.data)
   })
@@ -101,16 +100,17 @@
 <div
   bind:this={container}
   class="relative"
-  style={`height: calc(${HEIGHT}px * ${$floors.length}); width: 96px`}
+  style={`height: calc(${HEIGHT}px * ${$floors.length}); width: calc( 96px )`}
 >
+  <div class="absolute top-0 left-0 rounded-xl"
+       style="margin: -0.25rem; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); background: rgba(255,255,255, 0.65); backdrop-filter: blur(2px)">
+  </div>
   <div class="absolute right-0 h-full w-min">
     {#each $floors as floor, i}
       <button
         style={`height: ${HEIGHT}px; width: ${HEIGHT}px`}
-        class={twJoin(
-          "content-box m-0 flex items-center justify-center border-2 border-gray-300",
-          i === (forceIndex ?? $index) && "selected"
-        )}
+        class:selected={i === (forceIndex ?? $index)}
+        class={"content-box m-0 flex items-center justify-center border-2 border-gray-300"}
         on:click={() => {
           forceIndex = i
         }}
@@ -120,8 +120,10 @@
     {/each}
   </div>
 
-  <div style={`width: ${HEIGHT}px`}>
+  <div style={`width: ${WIDTH}px`}>
     <img
+      alt=""
+      aria-hidden="true"
       bind:this={image}
       class="draggable"
       draggable="false"