Bank selector in top bar

Author: simonredfern

src/routes/(protected)/user/+page.svelte

@@ -4,23 +4,6 @@
   import ConsentCard from "$lib/components/ConsentCard.svelte";
   import { toast } from "$lib/utils/toastService.js";
   import { Clock } from "@lucide/svelte";
-  import { currentBank } from "$lib/stores/currentBank.svelte";
-  import { onMount } from "svelte";
-
-  let bankSelectorId = $state(currentBank.bankId);
-  let banksReady = $state(false);
-
-  onMount(async () => {
-    await currentBank.fetchBanks();
-    banksReady = true;
-  });
-
-  $effect(() => {
-    if (banksReady && bankSelectorId !== currentBank.bankId) {
-      currentBank.selectById(bankSelectorId);
-    }
-  });
-
   const { data } = $props();
   const userData: SessionData["user"] = data.userData || undefined;
   const entitlementRequests = data.entitlementRequests || [];
@@ -375,26 +358,6 @@
 {/snippet}
 
 <div class="flex flex-col space-y-6">
-  <!-- Current Bank Selection -->
-  <div class="mx-10 pr-5">
-    <header class="flex items-center justify-between py-4">
-      <h1 class="h4 text-center align-middle">Current Bank</h1>
-    </header>
-    <div class="max-w-md">
-      <select
-        class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-        bind:value={bankSelectorId}
-      >
-        <option value="">No bank selected</option>
-        {#each currentBank.banks as bank}
-          <option value={bank.bank_id}>
-            {bank.short_name} - {bank.full_name}
-          </option>
-        {/each}
-      </select>
-    </div>
-  </div>
-
   {@render userInfo(userData)}
 
   <!-- My Entitlement Requests Section -->

src/routes/+layout.svelte

@@ -12,7 +12,7 @@
   import { createLogger } from "$lib/utils/logger";
   import { resourceDocsCache } from "$lib/stores/resourceDocsCache";
   import { currentBank } from "$lib/stores/currentBank.svelte";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
 
   const logger = createLogger("LayoutClient");
   const layoutStartTime = performance.now();
@@ -48,6 +48,14 @@
   let expandedSections = $state<Record<string, boolean>>({});
   let displayMode: "dark" | "light" = $state("dark");
   let userMenuOpen = $state(false);
+  let bankSelectorOpen = $state(false);
+  let bankSelectEl: HTMLSelectElement | undefined = $state();
+
+  async function openBankSelector() {
+    bankSelectorOpen = true;
+    await tick();
+    try { bankSelectEl?.showPicker(); } catch {}
+  }
   let systemDynamicEntities = $state<any[]>([]);
 
   async function clearCache() {
@@ -482,8 +490,37 @@
         style="height: 80px; flex-shrink: 0;"
       >
         <div>
-          {#if isAuthenticated && currentBank.bank}
-            <span class="text-sm">{currentBank.bank.full_name}: {currentBank.bank.bank_id} ({currentBank.bank.bank_code}) <a href="/user" class="hover:text-tertiary-400" title="Change current bank">&#9998;</a></span>
+          {#if isAuthenticated}
+            {#if bankSelectorOpen}
+              <div class="flex items-center gap-2">
+                <select
+                  bind:this={bankSelectEl}
+                  class="rounded-md border border-surface-300-700 bg-surface-100-900 px-2 py-1 text-sm"
+                  value={currentBank.bankId}
+                  onchange={(e) => {
+                    currentBank.selectById(e.currentTarget.value);
+                    bankSelectorOpen = false;
+                  }}
+                >
+                  <option value="">-- Select a bank --</option>
+                  {#each currentBank.banks as bank}
+                    <option value={bank.bank_id}>
+                      {bank.short_name} — {bank.full_name}
+                    </option>
+                  {/each}
+                </select>
+                <button
+                  type="button"
+                  class="text-sm opacity-60 hover:opacity-100"
+                  onclick={() => bankSelectorOpen = false}
+                  title="Close"
+                >&times;</button>
+              </div>
+            {:else if currentBank.bank}
+              <span class="text-sm">{currentBank.bank.full_name}: {currentBank.bank.bank_id} ({currentBank.bank.bank_code}) <button type="button" class="hover:text-tertiary-400" onclick={openBankSelector} title="Change current bank">&#9998;</button></span>
+            {:else}
+              <button type="button" class="text-sm opacity-70 hover:text-tertiary-400 hover:opacity-100" onclick={openBankSelector}>Select Bank &#9998;</button>
+            {/if}
           {/if}
         </div>
         {#if isAuthenticated}