From 5fcf2e86f129518f80ed222cf322bd32bd339ade Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 16 Apr 2026 19:48:09 -0400
Subject: [PATCH] Making things look nicer

---
 .../ae_comp__pres_mgmt_session_search.svelte  | 134 ++++++++++++------
 1 file changed, 88 insertions(+), 46 deletions(-)

diff --git a/src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/ae_comp__pres_mgmt_session_search.svelte b/src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/ae_comp__pres_mgmt_session_search.svelte
index 5e611305..b0373170 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/ae_comp__pres_mgmt_session_search.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/ae_comp__pres_mgmt_session_search.svelte
@@ -29,33 +29,31 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
         autocomplete="off"
         class="form flex w-full grow flex-row flex-wrap items-center justify-center gap-1 px-2 py-2">
 
-        <!-- {#if $ae_loc.edit_mode} -->
+        <span>
 
-        <!-- Location filter toggle + select (authenticated users only) -->
-        <button
-            type="button"
-            class="btn btn-sm mx-1"
-            class:hidden={!$ae_loc.authenticated_access}
-            class:opacity-10={pres_mgmt_loc.current.show_content__session_search_room_name}
-            class:preset-filled-primary-300-700={pres_mgmt_loc.current.show_content__session_search_room_name}
-            class:preset-filled-primary-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name}
-            onclick={() => {
-                pres_mgmt_loc.current.location_name_qry_str = '';
-                pres_mgmt_loc.current.show_content__session_search_room_name =
-                    !pres_mgmt_loc.current.show_content__session_search_room_name;
-                handle_search_trigger();
-            }}
-            title="Filter by room / location">
-            <MapPin size="1em" />
-        </button>
+            <!-- Location filter toggle + select (authenticated users only) -->
+            <button
+                type="button"
+                class="btn btn-sm mx-1"
+                class:hidden={!$ae_loc.authenticated_access}
+                class:opacity-10={pres_mgmt_loc.current.show_content__session_search_room_name}
+                class:preset-filled-primary-300-700={pres_mgmt_loc.current.show_content__session_search_room_name}
+                class:preset-filled-primary-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name}
+                onclick={() => {
+                    pres_mgmt_loc.current.location_name_qry_str = '';
+                    pres_mgmt_loc.current.show_content__session_search_room_name =
+                        !pres_mgmt_loc.current.show_content__session_search_room_name;
+                    handle_search_trigger();
+                }}
+                title="Filter by room / location">
+                <MapPin size="1em" />
+            </button>
 
+            <!-- Time window toggle icon button (authenticated only).
+                Highlighted when active so onsite staff can see at a glance whether the
+                filter is on. The controls below only appear when enabled. -->
 
-
-        <!-- Time window toggle icon button (authenticated only).
-             Highlighted when active so onsite staff can see at a glance whether the
-             filter is on. The controls below only appear when enabled. -->
-
-        <!-- TEMP: hide clock button for now, even in edit mode, since time filtering is a bit niche and the controls are a bit complex for non-technical users. Can re-enable when we have a better UI for the time filter controls. -->
+            <!-- TEMP: hide clock button for now, even in edit mode, since time filtering is a bit niche and the controls are a bit complex for non-technical users. Can re-enable when we have a better UI for the time filter controls. -->
             <button
                 type="button"
                 onclick={() => {
@@ -74,7 +72,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
                 <Clock size="1em" />
             </button>
 
-        <!-- {/if} -->
+        </span>
 
         <!-- Main search input -->
         <!-- svelte-ignore a11y_autofocus -->
@@ -123,8 +121,23 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
         <!-- Remote First (edit_mode only) -->
         {#if $ae_loc.edit_mode}
             <label
-                class="bg-surface-200-800 rounded-token flex cursor-pointer items-center gap-1 px-2 py-1 text-xs font-semibold opacity-70 transition-all hover:opacity-100">
-                <span> Remote First </span>
+                class="
+                    flex flex-wrap items-center justify-center gap-1
+                    text-xs font-semibold
+                    bg-surface-50-950/50
+                    opacity-70 hover:opacity-100
+                    px-2 py-1
+                    rounded-md
+                    cursor-pointer
+                    transition-all
+                    "
+                    >
+                <span
+                    class="opacity-50"
+                    class:opacity-100={pres_mgmt_loc.current.qry__remote_first}
+                    >
+                    Remote First
+                </span>
                 <input
                     type="checkbox"
                     bind:checked={pres_mgmt_loc.current.qry__remote_first}
@@ -136,20 +149,39 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
     {#if pres_mgmt_loc.current.enable_time_window ||
         pres_mgmt_loc.current.show_content__session_search_room_name}
 
-    <div class="w-full flex flex-wrap items-center justify-center gap-2 px-2 pb-2 text-xs">
+    <div class="
+        w-full
+        flex flex-wrap items-center justify-center gap-2
+        px-2
+        text-xs
+        "
+        >
 
-        <span class="flex flex-wrap items-center justify-center gap-2 text-xs">
+        <span class="
+            flex flex-wrap items-center justify-center gap-1
+            text-xs
+            bg-surface-50-950/50
+            opacity-70 hover:opacity-100
+            px-2 py-1
+            rounded-md
+            transition-all
+            "
+            >
+
+        <span class="opacity-50">
+            <MapPin size="0.875em" class="opacity-70" /> Location/Room:
+        </span>
         <select
             name="location_name_list"
             id="session_location_name_list"
             bind:value={pres_mgmt_loc.current.location_name_qry_str}
-            class="input mx-1 w-min max-w-40 min-w-fit font-mono text-xs font-bold transition-all"
+            class="input w-min max-w-40 min-w-fit font-mono text-xs font-semibold transition-all"
             class:hidden={!$ae_loc.authenticated_access ||
                 !pres_mgmt_loc.current.show_content__session_search_room_name}
             onchange={() => handle_search_trigger()}
             title="Filter by location / room name">
             {#if event_location_obj_li}
-                <option value="">Location / Room</option>
+                <option value="">-- none --</option>
                 {#each event_location_obj_li as loc (loc.event_location_id)}
                     <option value={loc?.name}>{loc.name}</option>
                 {/each}
@@ -161,8 +193,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
             type="button"
             class="btn btn-sm mx-1"
             class:hidden={!pres_mgmt_loc.current.show_content__session_search_room_name}
-            class:preset-filled-primary-300-700={pres_mgmt_loc.current.show_content__session_search_room_name}
-            class:preset-filled-primary-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name}
+            class:preset-filled-warning-300-700={pres_mgmt_loc.current.show_content__session_search_room_name}
             onclick={() => {
                 pres_mgmt_loc.current.location_name_qry_str = '';
                 pres_mgmt_loc.current.show_content__session_search_room_name =
@@ -178,15 +209,27 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
          Two simple selects (before / after current time) keep this readable for
          all experience levels without the noise of preset chip arrays. -->
     {#if pres_mgmt_loc.current.enable_time_window}
-        <div
-            class="flex flex-wrap items-center justify-center gap-2 text-xs">
-            <Clock size="0.875em" class="opacity-50" />
-            <span class="font-semibold opacity-70">Showing sessions:</span>
-            <span class="opacity-50">−</span>
+        <span
+            class="
+                flex flex-wrap items-center justify-center gap-1
+                text-xs
+                bg-surface-50-950/50
+                opacity-70 hover:opacity-100
+                px-2 py-1
+                rounded-md
+                transition-all
+                "
+                >
+
+            <span class="opacity-50">
+                <Clock size="0.875em" class="opacity-70" /> Showing sessions:
+            </span>
+            <span class="opacity-50">&minus;</span>
             <select
                 bind:value={pres_mgmt_loc.current.time_window_before_minutes}
                 onchange={handle_search_trigger}
-                class="select select-sm max-w-fit px-1 text-xs">
+                class="select select-sm max-w-fit px-1 py-0 text-xs font-semibold">
+                <!-- <option value="">0m</option> -->
                 <option value={0}>0m</option>
                 <option value={25}>25m</option>
                 <option value={90}>90m</option>
@@ -198,12 +241,11 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
                 {#if $ae_loc.trusted_access}<option value={4320}>3d</option>{/if}
                 {#if $ae_loc.trusted_access}<option value={10080}>7d</option>{/if}
             </select>
-            <span class="opacity-40">to</span>
-            <span class="opacity-50">+</span>
+            <span class="opacity-50">to &plus;</span>
             <select
                 bind:value={pres_mgmt_loc.current.time_window_after_minutes}
                 onchange={handle_search_trigger}
-                class="select select-sm max-w-fit px-1 text-xs">
+                class="select select-sm max-w-fit px-1 py-0 text-xs font-semibold">
                 <option value={90}>90m</option>
                 <option value={120}>2h</option>
                 <option value={240}>4h</option>
@@ -213,7 +255,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
                 {#if $ae_loc.trusted_access}<option value={4320}>3d</option>{/if}
                 {#if $ae_loc.trusted_access}<option value={10080}>7d</option>{/if}
             </select>
-            <span class="opacity-40">from now</span>
+            <!-- <span class="opacity-50">from now</span> -->
 
             <button
                 type="button"
@@ -227,11 +269,11 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
                     : 'Show only sessions near current time'}
                 class="btn btn-sm mx-1"
                 class:hidden={!pres_mgmt_loc.current.enable_time_window}
-                class:preset-filled-primary-300-700={pres_mgmt_loc.current.enable_time_window}
-                class:preset-filled-primary-100-900={!pres_mgmt_loc.current.enable_time_window}>
+                class:preset-filled-warning-300-700={pres_mgmt_loc.current.enable_time_window}
+                >
                 <Clock size="1em" />
             </button>
-        </div>
+        </span>
     {/if}
 
     </div>