From d64e93674e2960de61dc8968c5b8f742e67d548b Mon Sep 17 00:00:00 2001
From: Pen Anderson <pen@pentacle.games>
Date: Wed, 11 Mar 2026 12:26:33 -0500
Subject: [PATCH] Refactored styles.

---
 frontend/src/App.svelte                 |  1 +
 frontend/src/api.js                     |  4 +-
 frontend/src/app.css                    |  5 +-
 frontend/src/pages/Departments.svelte   |  5 +-
 frontend/src/pages/Login.svelte         |  6 ++-
 frontend/src/pages/ScheduleBoard.svelte | 64 +++++++++++++------------
 frontend/src/pages/Settings.svelte      | 15 ++++--
 frontend/src/pages/Users.svelte         |  2 +-
 frontend/src/pages/Volunteers.svelte    |  7 ++-
 9 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index f680143..ac0957e 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -37,6 +37,7 @@
     history.pushState(null, '', path)
     route = path
     mobileNavOpen = false
+    window.scrollTo(0, 0)
   }
 
   async function checkVersion() {
diff --git a/frontend/src/api.js b/frontend/src/api.js
index 31a517f..d15abc4 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -1,4 +1,4 @@
-import { db } from './db.js'
+import { db, clearSession } from './db.js'
 
 async function getToken() {
   const session = await db.session.get(1)
@@ -17,7 +17,7 @@ export async function apiFetch(path, options = {}) {
 
   const res = await fetch(path, { ...options, headers })
   if (res.status === 401) {
-    await db.session.clear()
+    await clearSession()
     window.location.pathname = '/login'
     throw new Error('unauthorized')
   }
diff --git a/frontend/src/app.css b/frontend/src/app.css
index b61ed5e..3a685ae 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -111,6 +111,7 @@ input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-a
 input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); }
 input::placeholder { color: var(--c-muted); }
 .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; }
 .form-grid .full { grid-column: 1 / -1; }
 .checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
 .checkbox-label-sm { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; color: var(--c-text); }
@@ -137,8 +138,8 @@ tr:hover td { background: rgba(255,255,255,0.02); }
   padding: 0.18rem 0.55rem; border-radius: 99px;
   font-size: 0.72rem; font-weight: 600;
   text-transform: uppercase; letter-spacing: 0.04em;
-  margin-left: 0.3rem;
 }
+* + .badge { margin-left: 0.3rem; }
 .badge-checked     { background: rgba(34,197,94,0.15); color: var(--c-success); }
 .badge-confirmed   { background: rgba(99,102,241,0.15); color: var(--c-accent-h); }
 .badge-registered  { background: rgba(14,165,233,0.15); color: #0ea5e9; }
@@ -246,5 +247,5 @@ tr:hover td { background: rgba(255,255,255,0.02); }
 
   /* Forms — 16px prevents iOS auto-zoom on focus */
   input, select, textarea { font-size: 16px; }
-  .form-grid { grid-template-columns: 1fr !important; }
+  .form-grid, .form-grid-3 { grid-template-columns: 1fr !important; }
 }
diff --git a/frontend/src/pages/Departments.svelte b/frontend/src/pages/Departments.svelte
index 26164eb..863c4a1 100644
--- a/frontend/src/pages/Departments.svelte
+++ b/frontend/src/pages/Departments.svelte
@@ -101,7 +101,7 @@
   {#if showAdd && canCreate}
     <div class="card" style="margin-bottom:1.5rem">
       <form onsubmit={addDept}>
-        <div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end">
+        <div class="form-grid-3">
           <div class="form-group" style="margin-bottom:0">
             <label for="d-name">Name *</label>
             <input id="d-name" bind:value={newName} required placeholder="e.g. Security" />
@@ -112,7 +112,7 @@
           </div>
           <div class="form-group" style="margin-bottom:0">
             <label for="d-color">Color</label>
-            <input id="d-color" type="color" bind:value={newColor} style="width:60px;padding:0.2rem;height:2.3rem;cursor:pointer" />
+            <input id="d-color" type="color" bind:value={newColor} class="color-input" />
           </div>
         </div>
         <div class="actions" style="margin-top:1rem">
@@ -191,6 +191,7 @@
 </div>
 
 <style>
+  .color-input { width: 60px; padding: 0.2rem; height: 2.3rem; cursor: pointer; }
   @media (max-width: 640px) {
     .td-name { width: 100%; }
     .td-desc { width: 100%; }
diff --git a/frontend/src/pages/Login.svelte b/frontend/src/pages/Login.svelte
index 993dbb4..5249231 100644
--- a/frontend/src/pages/Login.svelte
+++ b/frontend/src/pages/Login.svelte
@@ -3,11 +3,13 @@
   import { api } from '../api.js'
   import { saveSession } from '../db.js'
 
-  let { onlogin, error: initialError = '' } = $props()
+  let { onlogin, error: externalError = '' } = $props()
 
   let email = $state('')
   let password = $state('')
-  let error = $state(initialError)
+  let error = $state('')
+
+  $effect(() => { if (externalError) error = externalError })
   let loading = $state(false)
   let ssoEnabled = $state(false)
   let ssoLoading = $state(false)
diff --git a/frontend/src/pages/ScheduleBoard.svelte b/frontend/src/pages/ScheduleBoard.svelte
index a09bf0f..529264f 100644
--- a/frontend/src/pages/ScheduleBoard.svelte
+++ b/frontend/src/pages/ScheduleBoard.svelte
@@ -384,14 +384,16 @@
                       {/if}
                     </div>
 
-                    <div class="board-shift-actions">
-                      <button class="btn btn-ghost btn-sm" onclick={() => startEdit(shift)}>Edit</button>
-                      <button class="btn btn-ghost btn-sm" title="Move up"
-                        onclick={() => reorder(shift.id, -1, rows)}>↑</button>
-                      <button class="btn btn-ghost btn-sm" title="Move down"
-                        onclick={() => reorder(shift.id, 1, rows)}>↓</button>
-                      <button class="btn btn-danger btn-sm" onclick={() => deleteShift(shift)}>Delete</button>
-                    </div>
+                    {#if canManage}
+                      <div class="board-shift-actions">
+                        <button class="btn btn-ghost btn-sm" onclick={() => startEdit(shift)}>Edit</button>
+                        <button class="btn btn-ghost btn-sm" title="Move up"
+                          onclick={() => reorder(shift.id, -1, rows)}>↑</button>
+                        <button class="btn btn-ghost btn-sm" title="Move down"
+                          onclick={() => reorder(shift.id, 1, rows)}>↓</button>
+                        <button class="btn btn-danger btn-sm" onclick={() => deleteShift(shift)}>Delete</button>
+                      </div>
+                    {/if}
                   </div>
 
                   <!-- Assigned volunteers -->
@@ -406,34 +408,36 @@
                           {#if checkConflict(volunteer.id, shift.id, $allVolunteerShifts ?? [], $allShifts ?? [])}
                             <span title="Scheduling conflict" style="color:var(--c-warn)">⚠</span>
                           {/if}
-                          <button class="board-vol-remove" onclick={() => unassign(shift.id, volunteer.id)} title="Remove">×</button>
+                          {#if canManage}<button class="board-vol-remove" onclick={() => unassign(shift.id, volunteer.id)} title="Remove">×</button>{/if}
                         </div>
                       {/each}
                     </div>
                   {/if}
 
                   <!-- Assign volunteer -->
-                  {#if assigningShiftID === shift.id}
-                    <div class="board-assign-row">
-                      <select bind:value={assignVolID} style="width:auto">
-                        <option value={0}>— Select volunteer —</option>
-                        {#each ($allVolunteers ?? [])
-                          .filter(v => v.department_id === shift.department_id)
-                          .filter(v => !assigned.some(a => a.volunteer.id === v.id))
-                          as v}
-                          <option value={v.id}>{v.name}</option>
-                        {/each}
-                      </select>
-                      <button class="btn btn-primary btn-sm" onclick={() => doAssign(shift.id)} disabled={!assignVolID || assigning}>
-                        {assigning ? '…' : 'Assign'}
-                      </button>
-                      <button class="btn btn-ghost btn-sm" onclick={() => doAssignForce(shift.id)} disabled={!assignVolID || assigning} title="Assign ignoring conflicts">
-                        Force
-                      </button>
-                      <button class="btn btn-ghost btn-sm" onclick={() => { assigningShiftID = null; assignVolID = 0 }}>Cancel</button>
-                    </div>
-                  {:else}
-                    <button class="board-add-vol" onclick={() => startAssign(shift.id)}>+ Assign volunteer</button>
+                  {#if canManage}
+                    {#if assigningShiftID === shift.id}
+                      <div class="board-assign-row">
+                        <select bind:value={assignVolID} style="width:auto">
+                          <option value={0}>— Select volunteer —</option>
+                          {#each ($allVolunteers ?? [])
+                            .filter(v => v.department_id === shift.department_id)
+                            .filter(v => !assigned.some(a => a.volunteer.id === v.id))
+                            as v}
+                            <option value={v.id}>{v.name}</option>
+                          {/each}
+                        </select>
+                        <button class="btn btn-primary btn-sm" onclick={() => doAssign(shift.id)} disabled={!assignVolID || assigning}>
+                          {assigning ? '…' : 'Assign'}
+                        </button>
+                        <button class="btn btn-ghost btn-sm" onclick={() => doAssignForce(shift.id)} disabled={!assignVolID || assigning} title="Assign ignoring conflicts">
+                          Force
+                        </button>
+                        <button class="btn btn-ghost btn-sm" onclick={() => { assigningShiftID = null; assignVolID = 0 }}>Cancel</button>
+                      </div>
+                    {:else}
+                      <button class="board-add-vol" onclick={() => startAssign(shift.id)}>+ Assign volunteer</button>
+                    {/if}
                   {/if}
                 {/if}
               </div>
diff --git a/frontend/src/pages/Settings.svelte b/frontend/src/pages/Settings.svelte
index 1c8b6c4..9df6b81 100644
--- a/frontend/src/pages/Settings.svelte
+++ b/frontend/src/pages/Settings.svelte
@@ -7,6 +7,7 @@
   let saving = $state(false)
   let savingEvent = $state(false)
   let testing = $state(false)
+  let resetting = $state(false)
   let error = $state('')
   let success = $state('')
 
@@ -130,7 +131,9 @@
   }
 
   async function resetModel(label, fn) {
+    if (resetting) return
     if (!confirm(`PERMANENTLY DELETE all ${label}? This cannot be undone.`)) return
+    resetting = true
     error = ''
     success = ''
     try {
@@ -138,6 +141,8 @@
       success = `Deleted ${result.deleted} ${label}.`
     } catch (err) {
       error = err.message
+    } finally {
+      resetting = false
     }
   }
 
@@ -332,19 +337,19 @@
         Permanently delete all records of a given type. This cannot be undone.
       </p>
       <div style="display:flex;flex-wrap:wrap;gap:0.5rem">
-        <button class="btn btn-danger" onclick={() => resetModel('tickets', api.settings.resetTickets)}>
+        <button class="btn btn-danger" disabled={resetting} onclick={() => resetModel('tickets', api.settings.resetTickets)}>
           Delete All Tickets
         </button>
-        <button class="btn btn-danger" onclick={() => resetModel('volunteers', api.settings.resetVolunteers)}>
+        <button class="btn btn-danger" disabled={resetting} onclick={() => resetModel('volunteers', api.settings.resetVolunteers)}>
           Delete All Volunteers
         </button>
-        <button class="btn btn-danger" onclick={() => resetModel('shifts', api.settings.resetShifts)}>
+        <button class="btn btn-danger" disabled={resetting} onclick={() => resetModel('shifts', api.settings.resetShifts)}>
           Delete All Shifts
         </button>
-        <button class="btn btn-danger" onclick={() => resetModel('departments', api.settings.resetDepartments)}>
+        <button class="btn btn-danger" disabled={resetting} onclick={() => resetModel('departments', api.settings.resetDepartments)}>
           Delete All Departments
         </button>
-        <button class="btn btn-danger" onclick={() => resetModel('volunteer shift assignments', api.settings.resetVolunteerShifts)}>
+        <button class="btn btn-danger" disabled={resetting} onclick={() => resetModel('volunteer shift assignments', api.settings.resetVolunteerShifts)}>
           Delete All Shift Assignments
         </button>
       </div>
diff --git a/frontend/src/pages/Users.svelte b/frontend/src/pages/Users.svelte
index e75364c..f49c8c6 100644
--- a/frontend/src/pages/Users.svelte
+++ b/frontend/src/pages/Users.svelte
@@ -149,7 +149,7 @@
   {#if showAdd}
     <div class="card" style="margin-bottom:1.5rem">
       <form onsubmit={addUser}>
-        <div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem">
+        <div class="form-grid-3">
           <div class="form-group">
             <label for="u-email">Email *</label>
             <input id="u-email" type="email" bind:value={newEmail} required placeholder="email@example.com" autocomplete="off" />
diff --git a/frontend/src/pages/Volunteers.svelte b/frontend/src/pages/Volunteers.svelte
index 4bced77..8f5abe5 100644
--- a/frontend/src/pages/Volunteers.svelte
+++ b/frontend/src/pages/Volunteers.svelte
@@ -24,6 +24,7 @@
   let editIsLead = $state(false)
   let editNote = $state('')
   let saving = $state(false)
+  let confirmingID = $state(null)
 
   const roles = $derived(session?.user?.roles ?? [])
   function hasRole(...allowed) { return roles.some(r => allowed.includes(r)) }
@@ -76,11 +77,15 @@
   }
 
   async function confirmVolunteer(v) {
+    if (confirmingID) return
+    confirmingID = v.id
     try {
       const updated = await api.volunteers.confirm(v.id)
       await db.volunteers.put(updated)
     } catch (err) {
       error = err.message
+    } finally {
+      confirmingID = null
     }
   }
 
@@ -349,7 +354,7 @@
                 {#if canManage}
                   <td class="td-actions">
                     {#if canConfirm && v.email_confirmed && !v.confirmed}
-                      <button class="btn btn-primary btn-sm" onclick={() => confirmVolunteer(v)}>Confirm</button>
+                      <button class="btn btn-primary btn-sm" onclick={() => confirmVolunteer(v)} disabled={confirmingID === v.id}>Confirm</button>
                     {/if}
                     <button class="btn btn-ghost btn-sm" onclick={() => startEdit(v)}>Edit</button>
                     <button class="btn btn-danger btn-sm" onclick={() => deleteVolunteer(v)}>Delete</button>