Merge pull request #31 from markrai/ux/minor_aesthetic_usability_fixes_2

multiple UX enhancements added from April 3rd '26 backlog

Author: markrai

CHANGELOG.md

@@ -3,6 +3,18 @@
 > **Upgrades:** No breaking changes in **3.7.x** / **3.8.x** / **3.9.x** unless noted below.
 
 
+## [3.9.3] - 2026-04-05
+
+### Improvements
+
+- **Board search (Escape)** — While the search field is focused, **Esc** blurs it and, when there is text, clears the query using the same path as the clear control (**`setSearchParam("")`** + board reload). Escape handling runs **before** the global modal gate so search dismisses consistently.
+- **Settings** — **Tab** cycles the visible settings tabs (wrapped); **Shift+Tab** is left for normal focus. Tab switching goes through a single **`switchSettingsTab`** helper (workflow dirty confirm, cache invalidation, re-render). Sprints tab empty copy now says **Create one above** (the form is above the list).
+- **Main navigation** — **Shift+Tab** cycles **Dashboard → Projects → Temporary** in reverse (**Tab** still cycles forward). Tab vs Shift+Tab are dispatched explicitly by chord so the two actions cannot both run.
+- **Dashboard** — Initial dashboard load also fetches **`/api/projects`** so chip counts stay correct on a direct **`/dashboard`** visit; failed project fetch does not wipe an existing in-memory list.
+- **Projects / Dashboard chips** — **Temporary** vs **Temporary Boards** label uses one shared helper (**`temporaryBoardsNavLabel`**, **767px** breakpoint) so dashboard and projects stay aligned.
+
+---
+
 ## [3.9.1] - 2026-04-04
 
 ### Fixes

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <img width="372" src="internal/httpapi/web/githublogo.png" alt="scrumboy logo" />
   <br />
-  <img src="https://img.shields.io/badge/version-v3.9.1-blue" alt="version" />
+  <img src="https://img.shields.io/badge/version-v3.9.3-blue" alt="version" />
   <a href="LICENSE">
     <img src="https://img.shields.io/badge/license-AGPL--v3-orange" alt="license" />
   </a>

internal/httpapi/web/dist/core/keybindings.js

@@ -57,6 +57,7 @@ export const DEFAULT_KEY_CHORDS = {
     projectsList8: "8",
     projectsList9: "9",
     cycleMainNavTabs: "tab",
+    cycleMainNavTabsReverse: "shift+tab",
 };
 export const KEY_ACTION_LIST = [
     { id: "newTodo", label: "New Todo", contexts: ["board"] },
@@ -67,6 +68,11 @@ export const KEY_ACTION_LIST = [
         label: "Cycle Dashboard / Projects / Temporary",
         contexts: ["dashboard", "projects"],
     },
+    {
+        id: "cycleMainNavTabsReverse",
+        label: "Cycle Dashboard / Projects / Temporary (reverse)",
+        contexts: ["dashboard", "projects"],
+    },
     { id: "createProject", label: "Create project", contexts: ["projects"] },
     { id: "boardEscapeBack", label: "Back to projects (Esc)", contexts: ["board"] },
     ...DASHBOARD_PROJECT_IDS.map((id, i) => ({
@@ -406,7 +412,8 @@ export function executeAction(actionId) {
                 void Promise.resolve(deps.openSettings());
             return;
         }
-        case "cycleMainNavTabs": {
+        case "cycleMainNavTabs":
+        case "cycleMainNavTabsReverse": {
             if (view !== "dashboard" && view !== "projects")
                 return;
             const route = getRoute();
@@ -421,7 +428,8 @@ export function executeAction(actionId) {
             else {
                 return;
             }
-            const next = (idx + 1) % 3;
+            const delta = actionId === "cycleMainNavTabsReverse" ? 2 : 1;
+            const next = (idx + delta) % 3;
             const persistProjectsTab = (value) => {
                 setProjectsTab(value);
                 localStorage.setItem("projectsTab", value);
@@ -528,13 +536,25 @@ function onGlobalKeydown(ev) {
     const chord = chordFromKeyboardEvent(ev);
     if (!chord)
         return;
+    // --- Escape: search blur MUST run before isModalOpen() check ---
+    if (chord === "escape") {
+        const active = document.activeElement;
+        if (active && active.id === "searchInput") {
+            ev.preventDefault();
+            active.blur();
+            const clearBtn = document.getElementById("searchClear");
+            if (clearBtn)
+                clearBtn.click();
+            return;
+        }
+    }
     if (isModalOpen()) {
         return;
     }
     if (ev.repeat)
         return;
     const view = getCurrentView();
-    const tabCyclesMainNav = chord === "tab" && (view === "dashboard" || view === "projects");
+    const tabCyclesMainNav = (chord === "tab" || chord === "shift+tab") && (view === "dashboard" || view === "projects");
     if (tabCyclesMainNav) {
         if (isTypingInTextField())
             return;
@@ -565,7 +585,9 @@ function onGlobalKeydown(ev) {
     if (tryExec("openSettings"))
         return;
     if (view === "dashboard" || view === "projects") {
-        if (tryExec("cycleMainNavTabs"))
+        if (chord === "tab" && tryExec("cycleMainNavTabs"))
+            return;
+        if (chord === "shift+tab" && tryExec("cycleMainNavTabsReverse"))
             return;
     }
     if (view === "projects") {

internal/httpapi/web/dist/dialogs/settings.js

@@ -10,7 +10,7 @@ import { invalidateBoard, refreshSprintsAndChips } from '../orchestration/board-
 import { emit } from '../events.js';
 import { normalizeSprints } from '../sprints.js';
 import { recordLocalMutation } from '../realtime/guard.js';
-import { KEY_ACTION_LIST, chordFromKeyboardEvent, formatChordForDisplay, getResolvedChordForAction, reloadKeybindingsFromStorage, saveKeybindingOverride, setKeybindingsCaptureListening, } from '../core/keybindings.js';
+import { KEY_ACTION_LIST, chordFromKeyboardEvent, formatChordForDisplay, getResolvedChordForAction, isTypingInTextField, reloadKeybindingsFromStorage, saveKeybindingOverride, setKeybindingsCaptureListening, } from '../core/keybindings.js';
 /** Active keybinding capture listener (settings customization); removed when starting a new capture or on abort. */
 let keybindingCaptureKeydown = null;
 function resetKeybindingCaptureUI() {
@@ -148,6 +148,33 @@ function invalidateChartCache() {
     cachedRealBurndownData = null;
     cachedRealBurndownURL = null;
 }
+/**
+ * Single source of truth for all settings tab switches (click + keyboard).
+ * Handles workflow dirty checks, cache invalidation, re-render, and dialog height fix.
+ */
+async function switchSettingsTab(tabName) {
+    if (tabName === getSettingsActiveTab())
+        return;
+    if (getSettingsActiveTab() === "workflow" && isWorkflowDraftDirty()) {
+        const discard = await showConfirmDialog("You have unsaved changes. Discard them?", "Unsaved changes", "Discard");
+        if (!discard)
+            return;
+        resetWorkflowDraftToBaseline();
+    }
+    if (tabName === "workflow") {
+        invalidateWorkflowLaneCountsCache();
+        clearWorkflowDraftState();
+    }
+    setSettingsActiveTab(tabName);
+    await renderSettingsModal();
+    const dialog = document.getElementById("settingsDialog");
+    if (dialog && dialog.open) {
+        const currentHeight = dialog.style.height;
+        dialog.style.height = "auto";
+        void dialog.offsetHeight;
+        dialog.style.height = currentHeight || "";
+    }
+}
 // Invalidate sprints cache when sprints are created/activated/closed (so Charts tab shows fresh list)
 /** Auto-select sprint for Charts: active > last closed > first planned. */
 function computeDefaultBurndownSprintIndex(sprints) {
@@ -910,7 +937,7 @@ async function renderSprintsTabContent() {
             minute: "2-digit",
         });
         const listHTML = sprints.length === 0
-            ? "<div class='muted'>No sprints yet. Create one below.</div>"
+            ? "<div class='muted'>No sprints yet. Create one above.</div>"
             : sprints.map((sp) => {
                 const isEditing = editingSprintId === sp.id;
                 const dateRange = `${formatDate(sp.plannedStartAt)} – ${formatDate(sp.plannedEndAt)}`;
@@ -1504,37 +1531,34 @@ export async function renderSettingsModal(options) {
     else {
         contentEl.classList.remove("settings-content--profile");
     }
-    // Setup tab switching
+    // Setup tab switching (click)
     document.querySelectorAll(".settings-tab").forEach(tab => {
-        tab.addEventListener("click", async (e) => {
+        tab.addEventListener("click", (e) => {
             const tabName = e.target.getAttribute("data-tab");
-            if (!tabName || tabName === getSettingsActiveTab())
-                return;
-            if (getSettingsActiveTab() === "workflow" && isWorkflowDraftDirty()) {
-                const discard = await showConfirmDialog("You have unsaved changes. Discard them?", "Unsaved changes", "Discard");
-                if (!discard)
-                    return;
-                resetWorkflowDraftToBaseline();
-            }
-            if (tabName === "workflow") {
-                invalidateWorkflowLaneCountsCache();
-                clearWorkflowDraftState();
-            }
-            setSettingsActiveTab(tabName);
-            await renderSettingsModal();
-            // Force dialog to recalculate height after content change
-            const dialog = document.getElementById("settingsDialog");
-            if (dialog && dialog.open) {
-                // Reset height to force recalculation
-                const currentHeight = dialog.style.height;
-                dialog.style.height = "auto";
-                // Force a reflow
-                void dialog.offsetHeight;
-                // Reset to let CSS take over
-                dialog.style.height = currentHeight || "";
-            }
+            if (tabName)
+                void switchSettingsTab(tabName);
         }, { signal });
     });
+    // Setup tab switching (keyboard: Tab cycles visible tabs)
+    const settingsDlgForKeyboard = document.getElementById("settingsDialog");
+    if (settingsDlgForKeyboard) {
+        settingsDlgForKeyboard.addEventListener("keydown", (e) => {
+            if (e.key !== "Tab" || e.shiftKey)
+                return;
+            if (isTypingInTextField())
+                return;
+            e.preventDefault();
+            const tabs = Array.from(settingsDlgForKeyboard.querySelectorAll(".settings-tab[data-tab]"));
+            if (tabs.length === 0)
+                return;
+            const current = getSettingsActiveTab();
+            const idx = tabs.findIndex((t) => t.getAttribute("data-tab") === current);
+            const next = (idx + 1) % tabs.length;
+            const nextTab = tabs[next].getAttribute("data-tab");
+            if (nextTab)
+                void switchSettingsTab(nextTab);
+        }, { signal });
+    }
     // Setup backup tab if it's active
     if (getSettingsActiveTab() === "backup") {
         // Wait a tick for DOM to be ready

internal/httpapi/web/dist/nav-labels.js

@@ -0,0 +1,4 @@
+const MOBILE_BREAKPOINT = 767;
+export function temporaryBoardsNavLabel() {
+    return window.innerWidth <= MOBILE_BREAKPOINT ? "Temporary" : "Temporary Boards";
+}

internal/httpapi/web/dist/views/dashboard.js

@@ -3,8 +3,9 @@ import { apiFetch } from '../api.js';
 import { navigate } from '../router.js';
 import { escapeHTML, renderUserAvatar, sanitizeHexColor } from '../utils.js';
 import { getDashboardLoading, getDashboardNextCursor, getDashboardSummary, getDashboardTodos, getDashboardTodoSort, getProjects, getUser, } from '../state/selectors.js';
-import { appendDashboardTodos, setDashboardLoading, setDashboardNextCursor, setDashboardTodoSort, setProjectsTab, setSettingsActiveTab, setDashboardSummary, setDashboardTodos, } from '../state/mutations.js';
+import { appendDashboardTodos, setDashboardLoading, setDashboardNextCursor, setDashboardTodoSort, setProjects, setProjectsTab, setSettingsActiveTab, setDashboardSummary, setDashboardTodos, } from '../state/mutations.js';
 import { renderSettingsModal } from '../dialogs/settings.js';
+import { temporaryBoardsNavLabel } from '../nav-labels.js';
 const BOUND_FLAG = Symbol('bound');
 const DASHBOARD_SORT_HINT = "Order matches each project's board: column, then drag order. Projects appear in a fixed order (not alphabetical or by activity).";
 function dashboardTodosQueryString() {
@@ -40,7 +41,7 @@ function renderTopTabs() {
     const projects = getProjects() || [];
     const durableProjects = projects.filter((p) => !p.expiresAt);
     const temporaryBoards = projects.filter((p) => !!p.expiresAt);
-    const temporaryLabel = window.innerWidth <= 767 ? "Temporary" : "Temporary Boards";
+    const temporaryLabel = temporaryBoardsNavLabel();
     return `
     <div class="chips" style="margin-top: 10px;">
       <button class="chip chip--active" id="dashboardTabBtn" type="button">Dashboard</button>
@@ -473,13 +474,17 @@ export async function renderDashboard() {
     setDashboardLoading(true);
     try {
         const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        const [summary, todosResp] = await Promise.all([
+        const [summary, todosResp, projects] = await Promise.all([
             apiFetch(`/api/dashboard/summary?tz=${encodeURIComponent(tz)}`),
             apiFetch(`/api/dashboard/todos?${dashboardTodosQueryString()}`),
+            apiFetch("/api/projects").catch(() => null),
         ]);
         setDashboardSummary(summary);
         setDashboardTodos(todosResp.items || []);
         setDashboardNextCursor(todosResp.nextCursor || null);
+        if (projects) {
+            setProjects(projects);
+        }
     }
     catch (err) {
         const e = err;

internal/httpapi/web/dist/views/projects.js

@@ -5,6 +5,7 @@ import { escapeHTML, showToast, renderUserAvatar } from '../utils.js';
 import { getProjectsTab, getProjectView, getUser, } from '../state/selectors.js';
 import { setProjects, setProjectsTab, setProjectView, setSettingsActiveTab, } from '../state/mutations.js';
 import { renderSettingsModal } from '../dialogs/settings.js';
+import { temporaryBoardsNavLabel } from '../nav-labels.js';
 // Symbol for idempotent listener attachment
 const BOUND_FLAG = Symbol('bound');
 // Board prefetch cache for Projects → Board navigation (hover to prefetch, click to use)
@@ -349,7 +350,7 @@ export async function renderProjects() {
     const temporaryBoards = projects.filter((p) => !!p.expiresAt);
     const activeList = getProjectsTab() === "temporary" ? temporaryBoards : durableProjects;
     const emptyMsg = getProjectsTab() === "temporary" ? "No temporary boards yet." : "No projects yet.";
-    const temporaryLabel = window.innerWidth <= 767 ? "Temporary" : "Temporary Boards";
+    const temporaryLabel = temporaryBoardsNavLabel();
     const tabsHTML = `
     <div class="chips" style="margin-top: 10px; margin-bottom: 12px;">
       <button class="chip" id="dashboardTabBtn" type="button">

internal/httpapi/web/modules/core/keybindings.ts

@@ -39,7 +39,8 @@ export type KeyActionId =
   | "projectsList7"
   | "projectsList8"
   | "projectsList9"
-  | "cycleMainNavTabs";
+  | "cycleMainNavTabs"
+  | "cycleMainNavTabsReverse";
 
 export interface KeybindingDeps {
   openSettings: () => void | Promise<void>;
@@ -95,6 +96,7 @@ export const DEFAULT_KEY_CHORDS: Record<KeyActionId, string> = {
   projectsList8: "8",
   projectsList9: "9",
   cycleMainNavTabs: "tab",
+  cycleMainNavTabsReverse: "shift+tab",
 };
 
 export interface KeyActionMeta {
@@ -113,6 +115,11 @@ export const KEY_ACTION_LIST: KeyActionMeta[] = [
     label: "Cycle Dashboard / Projects / Temporary",
     contexts: ["dashboard", "projects"],
   },
+  {
+    id: "cycleMainNavTabsReverse",
+    label: "Cycle Dashboard / Projects / Temporary (reverse)",
+    contexts: ["dashboard", "projects"],
+  },
   { id: "createProject", label: "Create project", contexts: ["projects"] },
   { id: "boardEscapeBack", label: "Back to projects (Esc)", contexts: ["board"] },
   ...DASHBOARD_PROJECT_IDS.map((id, i) => ({
@@ -416,7 +423,8 @@ export function executeAction(actionId: KeyActionId): void {
       if (deps) void Promise.resolve(deps.openSettings());
       return;
     }
-    case "cycleMainNavTabs": {
+    case "cycleMainNavTabs":
+    case "cycleMainNavTabsReverse": {
       if (view !== "dashboard" && view !== "projects") return;
       const route = getRoute();
       const tab = getProjectsTab();
@@ -428,7 +436,8 @@ export function executeAction(actionId: KeyActionId): void {
       } else {
         return;
       }
-      const next = (idx + 1) % 3;
+      const delta = actionId === "cycleMainNavTabsReverse" ? 2 : 1;
+      const next = (idx + delta) % 3;
       const persistProjectsTab = (value: "projects" | "temporary"): void => {
         setProjectsTab(value);
         localStorage.setItem("projectsTab", value);
@@ -535,14 +544,26 @@ function onGlobalKeydown(ev: KeyboardEvent): void {
   const chord = chordFromKeyboardEvent(ev);
   if (!chord) return;
 
+  // --- Escape: search blur MUST run before isModalOpen() check ---
+  if (chord === "escape") {
+    const active = document.activeElement;
+    if (active && (active as HTMLElement).id === "searchInput") {
+      ev.preventDefault();
+      (active as HTMLElement).blur();
+      const clearBtn = document.getElementById("searchClear");
+      if (clearBtn) clearBtn.click();
+      return;
+    }
+  }
+
   if (isModalOpen()) {
     return;
   }
 
   if (ev.repeat) return;
 
   const view = getCurrentView();
-  const tabCyclesMainNav = chord === "tab" && (view === "dashboard" || view === "projects");
+  const tabCyclesMainNav = (chord === "tab" || chord === "shift+tab") && (view === "dashboard" || view === "projects");
   if (tabCyclesMainNav) {
     if (isTypingInTextField()) return;
   } else if (shouldBlockForFocus()) {
@@ -566,7 +587,8 @@ function onGlobalKeydown(ev: KeyboardEvent): void {
   }
   if (tryExec("openSettings")) return;
   if (view === "dashboard" || view === "projects") {
-    if (tryExec("cycleMainNavTabs")) return;
+    if (chord === "tab" && tryExec("cycleMainNavTabs")) return;
+    if (chord === "shift+tab" && tryExec("cycleMainNavTabsReverse")) return;
   }
   if (view === "projects") {
     if (tryExec("createProject")) return;