Merge pull request #25 from markrai/ux/minor_aesthetic_usability_fixes

enhancement/dashboard - sorting + new todo creation modal scroll concern

Author: markrai

API.md

@@ -310,6 +310,24 @@ Invalid column keys in `cursorByColumn` or malformed cursors → `VALIDATION_ERR
 
 ---
 
+## REST: Dashboard assigned todos (`GET /api/dashboard/todos`)
+
+The web app and other REST clients use this endpoint (separate from MCP). In **full** mode it requires a valid **session cookie** or **`Authorization: Bearer`** API token.
+
+Query parameters:
+
+- **`limit`** (optional): page size; default **20**, maximum **100**.
+- **`sort`** (optional): **`activity`** (default) or **`board`**. Invalid or empty values are treated as **`activity`** (backward compatible).
+- **`cursor`** (optional): pagination token from the previous JSON response’s **`nextCursor`** field.
+
+**Activity sort** (default): rows are ordered by **`updated_at` DESC, `id` DESC**. The cursor is **`updatedAtMs:id`** (two integers, colon-separated, Unix ms for the todo’s `updated_at`).
+
+**Board sort** (`sort=board`): rows are ordered by **`project_id` ASC, workflow column `position` ASC, `rank` ASC, `id` ASC**, matching board order within each project. Cross-project order follows numeric project id, not name or recency. The cursor is **`projectId:wcPosition:rank:todoId`** (four integers, colon-separated).
+
+A **`cursor`** that does not match the selected **`sort`** (for example, an activity cursor while `sort=board`) is rejected with **HTTP 400** and error code **`VALIDATION_ERROR`**.
+
+---
+
 ## Error codes
 
 - **`AUTH_REQUIRED`** - Sign-in required (including some store unauthorized paths mapped from the store layer).

CHANGELOG.md

@@ -3,6 +3,19 @@
 > **Upgrades:** No breaking changes in **3.7.x** unless noted below.
 
 
+## [3.7.7] - 2026-04-03
+
+### Features
+
+- **Dashboard todo sort** - Sort assigned todos by **Activity** (recently updated, default) or **Board order** (per project: workflow column position, then lane rank). **`GET /api/dashboard/todos`** supports optional query **`sort=activity`** or **`sort=board`**; pagination **`cursor`** is tied to the active sort, and a cursor from the wrong mode is rejected with **400** **`VALIDATION_ERROR`**.
+
+### Improvements
+
+- **Todo dialog (mobile)** - New/edit todo form scrolls inside the modal on narrow viewports so header, fields, and Save stay usable (aligned with Settings-style scrolling).
+- **Dashboard sort preference (signed-in)** - Choice is saved under **`user_preferences`** key **`dashboardTodoSort`** and restored after login (still mirrored in **localStorage** for fast defaults). Server hydrate skips applying the stored value when it already matches in-memory state, and does not overwrite a sort the user changed locally before preferences finish loading.
+
+---
+
 ## [3.7.6] - 2026-04-02
 
 ### Features

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.7.6-blue" alt="version" />
+  <img src="https://img.shields.io/badge/version-v3.7.7-blue" alt="version" />
   <a href="LICENSE">
     <img src="https://img.shields.io/badge/license-AGPL--v3-orange" alt="license" />
   </a>

internal/httpapi/dashboard.go

@@ -58,9 +58,11 @@ func (s *Server) handleDashboard(w http.ResponseWriter, r *http.Request, rest []
 			cursor = &rawCursor
 		}
 
-		items, nextCursor, err := s.store.ListDashboardTodos(ctx, userID, limit, cursor)
+		sort := strings.TrimSpace(r.URL.Query().Get("sort"))
+
+		items, nextCursor, err := s.store.ListDashboardTodos(ctx, userID, limit, cursor, sort)
 		if err != nil {
-			writeInternal(w, err)
+			writeStoreErr(w, err, false)
 			return
 		}
 		writeJSON(w, http.StatusOK, dashboardTodosToJSON(items, nextCursor))

internal/httpapi/server.go

@@ -101,7 +101,7 @@ type storeAPI interface {
 	ListTagCounts(ctx context.Context, pc *store.ProjectContext) ([]store.TagCount, error)
 	ListTodosForBoardLane(ctx context.Context, projectID int64, columnKey string, limit int, afterRank, afterID int64, tagFilter, searchFilter string, sprintFilter store.SprintFilter) ([]store.Todo, string, bool, error)
 	GetDashboardSummary(ctx context.Context, userID int64, timezone string) (store.DashboardSummary, error)
-	ListDashboardTodos(ctx context.Context, userID int64, limit int, cursor *string) ([]store.DashboardTodo, *string, error)
+	ListDashboardTodos(ctx context.Context, userID int64, limit int, cursor *string, sort string) ([]store.DashboardTodo, *string, error)
 	GetBacklogSize(ctx context.Context, projectID int64, mode store.Mode) ([]store.BurndownPoint, error)
 	GetRealBurndown(ctx context.Context, projectID int64, mode store.Mode) ([]store.RealBurndownPoint, error)
 	GetRealBurndownForSprint(ctx context.Context, projectID, sprintID int64, mode store.Mode) ([]store.RealBurndownPoint, error)

internal/httpapi/web/dist/router.js

@@ -1,7 +1,7 @@
 import { apiFetch } from './api.js';
 import { renderAuth, renderResetPassword, renderProjects, renderDashboard, renderBoard, renderNotFound, stopBoardEvents } from './views/index.js';
 import { getAuthStatusChecked, getUser, getBootstrapAvailable, getAuthStatusAvailable, getBoard } from './state/selectors.js';
-import { setAuthStatusChecked, setAuthStatusAvailable, setUser, setBootstrapAvailable, setRoute, setTag, setSearch, setSlug, setProjectId, setBoard, resetUserScopedState, setTagColors, setOpenTodoSegment } from './state/mutations.js';
+import { setAuthStatusChecked, setAuthStatusAvailable, setUser, setBootstrapAvailable, setRoute, setTag, setSearch, setSlug, setProjectId, setBoard, resetUserScopedState, setTagColors, setOpenTodoSegment, hydrateDashboardTodoSortFromServer } from './state/mutations.js';
 import { loadUserTheme } from './theme.js';
 let isRouting = false;
 let rerouteRequested = false;
@@ -118,6 +118,16 @@ async function routeOnce() {
             catch (err) {
                 // Ignore errors
             }
+            try {
+                const sortResp = await apiFetch('/api/user/preferences?key=dashboardTodoSort');
+                const v = sortResp?.value;
+                if (v === 'board' || v === 'activity') {
+                    hydrateDashboardTodoSortFromServer(v);
+                }
+            }
+            catch (err) {
+                // Ignore errors
+            }
         }
     }
     const r = parseRoute();

internal/httpapi/web/dist/state/mutations.js

@@ -1,5 +1,9 @@
+import { apiFetch } from '../api.js';
 import { current } from './state.js';
+import { getUser } from './selectors.js';
 const DEFAULT_LANE_META = () => ({});
+/** True after the user changes dashboard sort (not server hydrate). Skips applying stored preference so a fast local change is not overwritten when the GET returns. */
+let dashboardTodoSortUserTouched = false;
 const VALID_ROUTES = new Set(['projects', 'dashboard', 'boardBySlug', 'reset-password', 'notfound']);
 const VALID_PROJECT_VIEWS = new Set(['list', 'grid']);
 export function setRoute(name) {
@@ -122,6 +126,38 @@ export function setDashboardNextCursor(cursor) {
 export function setDashboardLoading(loading) {
     current.dashboardLoading = loading;
 }
+export function setDashboardTodoSort(sort, opts) {
+    const next = sort === 'board' ? 'board' : 'activity';
+    if (current.dashboardTodoSort === next) {
+        return;
+    }
+    if (!opts?.skipRemote) {
+        dashboardTodoSortUserTouched = true;
+    }
+    current.dashboardTodoSort = next;
+    try {
+        localStorage.setItem('scrumboy.dashboardTodoSort', next);
+    }
+    catch {
+        /* ignore */
+    }
+    if (opts?.skipRemote || !getUser()) {
+        return;
+    }
+    void apiFetch('/api/user/preferences', {
+        method: 'PUT',
+        body: JSON.stringify({ key: 'dashboardTodoSort', value: next }),
+    }).catch(() => {
+        /* ignore */
+    });
+}
+/** Apply stored preference after login only if the user has not already changed sort this session. */
+export function hydrateDashboardTodoSortFromServer(sort) {
+    if (dashboardTodoSortUserTouched) {
+        return;
+    }
+    setDashboardTodoSort(sort, { skipRemote: true });
+}
 export function resetDashboard() {
     current.dashboardSummary = null;
     current.dashboardTodos = [];
@@ -150,4 +186,5 @@ export function resetUserScopedState() {
     current.dashboardNextCursor = null;
     current.dashboardLoading = false;
     current.boardLaneMeta = DEFAULT_LANE_META();
+    dashboardTodoSortUserTouched = false;
 }

internal/httpapi/web/dist/state/selectors.js

@@ -94,6 +94,9 @@ export function getDashboardNextCursor() {
 export function getDashboardLoading() {
     return !!current.dashboardLoading;
 }
+export function getDashboardTodoSort() {
+    return current.dashboardTodoSort === 'board' ? 'board' : 'activity';
+}
 export function getBoardLaneMeta() {
     return current.boardLaneMeta ?? {
         BACKLOG: { hasMore: false, nextCursor: null, loading: false },

internal/httpapi/web/dist/state/state.js

@@ -22,6 +22,17 @@ let _current = {
     dashboardTodos: [],
     dashboardNextCursor: null,
     dashboardLoading: false,
+    dashboardTodoSort: (() => {
+        try {
+            if (typeof localStorage !== 'undefined' && localStorage.getItem('scrumboy.dashboardTodoSort') === 'board') {
+                return 'board';
+            }
+        }
+        catch {
+            /* ignore */
+        }
+        return 'activity';
+    })(),
     boardLaneMeta: { BACKLOG: { hasMore: false, nextCursor: null, loading: false }, NOT_STARTED: { hasMore: false, nextCursor: null, loading: false }, IN_PROGRESS: { hasMore: false, nextCursor: null, loading: false }, TESTING: { hasMore: false, nextCursor: null, loading: false }, DONE: { hasMore: false, nextCursor: null, loading: false } },
 };
 // DEPRECATED: Direct access to current is deprecated. Use selectors/mutations instead.

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

@@ -2,10 +2,40 @@ import { app, settingsDialog } from '../dom/elements.js';
 import { apiFetch } from '../api.js';
 import { navigate } from '../router.js';
 import { escapeHTML, renderUserAvatar, sanitizeHexColor } from '../utils.js';
-import { getDashboardLoading, getDashboardNextCursor, getDashboardSummary, getDashboardTodos, getProjects, getUser, } from '../state/selectors.js';
-import { appendDashboardTodos, setDashboardLoading, setDashboardNextCursor, setProjectsTab, setSettingsActiveTab, setDashboardSummary, setDashboardTodos, } from '../state/mutations.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 { renderSettingsModal } from '../dialogs/settings.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() {
+    let q = 'limit=20';
+    if (getDashboardTodoSort() === 'board') {
+        q += '&sort=board';
+    }
+    return q;
+}
+/** Narrow viewports use a shorter board option label so the select can stay compact. */
+function boardOrderOptionText() {
+    return typeof window !== 'undefined' && window.innerWidth <= 767 ? 'Board Order' : 'Board Order (per project)';
+}
+function renderDashboardPanelHeader() {
+    const sort = getDashboardTodoSort();
+    const hint = escapeHTML(DASHBOARD_SORT_HINT);
+    const titleAttr = escapeHTML(DASHBOARD_SORT_HINT);
+    const boardLabel = escapeHTML(boardOrderOptionText());
+    return `
+          <div class="panel__header panel__header--dashboard">
+            <div class="panel__title">Dashboard</div>
+            <div class="dashboard-sort">
+              <label class="dashboard-sort__label" for="dashboardTodoSort">Sort</label>
+              <select id="dashboardTodoSort" class="dashboard-sort__select" aria-describedby="dashboardSortHint" title="${titleAttr}">
+                <option value="activity" ${sort === 'activity' ? 'selected' : ''}>Activity</option>
+                <option value="board" ${sort === 'board' ? 'selected' : ''}>${boardLabel}</option>
+              </select>
+            </div>
+          </div>
+          <p id="dashboardSortHint" class="dashboard-sort__hint muted">${hint}</p>`;
+}
 function renderTopTabs() {
     const projects = getProjects() || [];
     const durableProjects = projects.filter((p) => !p.expiresAt);
@@ -47,9 +77,7 @@ function renderLoadingShell() {
       </div>
       <div class="container">
         <div class="panel">
-          <div class="panel__header">
-            <div class="panel__title">Dashboard</div>
-          </div>
+          ${renderDashboardPanelHeader()}
           ${renderTopTabs()}
           <div class="list">
             <div class="list__item"><div class="muted">Loading assigned todos...</div></div>
@@ -61,6 +89,7 @@ function renderLoadingShell() {
     </div>
   `;
     bindTopNav();
+    bindDashboardSort();
     bindAvatarButton();
 }
 function renderDashboardContent() {
@@ -205,9 +234,7 @@ function renderDashboardContent() {
       </div>
       <div class="container">
         <div class="panel">
-          <div class="panel__header">
-            <div class="panel__title">Dashboard</div>
-          </div>
+          ${renderDashboardPanelHeader()}
           ${renderTopTabs()}
           ${contentMarkup}
         </div>
@@ -216,6 +243,7 @@ function renderDashboardContent() {
   `;
     bindTopNav();
     bindLoadMore();
+    bindDashboardSort();
     bindAvatarButton();
 }
 function hexToRgba(hex, alpha) {
@@ -381,6 +409,41 @@ function bindTopNav() {
         }
     });
 }
+function bindDashboardSort() {
+    const sel = document.getElementById('dashboardTodoSort');
+    if (!sel || sel[BOUND_FLAG]) {
+        return;
+    }
+    sel.addEventListener('change', async () => {
+        const next = sel.value === 'board' ? 'board' : 'activity';
+        const prev = getDashboardTodoSort();
+        if (next === prev) {
+            return;
+        }
+        setDashboardTodoSort(next);
+        setDashboardLoading(true);
+        renderDashboardContent();
+        try {
+            const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            const [summary, todosResp] = await Promise.all([
+                apiFetch(`/api/dashboard/summary?tz=${encodeURIComponent(tz)}`),
+                apiFetch(`/api/dashboard/todos?${dashboardTodosQueryString()}`),
+            ]);
+            setDashboardSummary(summary);
+            setDashboardTodos(todosResp.items || []);
+            setDashboardNextCursor(todosResp.nextCursor || null);
+        }
+        catch (err) {
+            setDashboardTodoSort(prev);
+            console.error('Dashboard refetch failed:', err);
+        }
+        finally {
+            setDashboardLoading(false);
+            renderDashboardContent();
+        }
+    });
+    sel[BOUND_FLAG] = true;
+}
 function bindLoadMore() {
     const loadMoreBtn = document.getElementById('dashboardLoadMoreBtn');
     if (!loadMoreBtn || loadMoreBtn[BOUND_FLAG]) {
@@ -394,7 +457,7 @@ function bindLoadMore() {
         renderDashboardContent();
         try {
             const cursor = getDashboardNextCursor();
-            const resp = await apiFetch(`/api/dashboard/todos?limit=20&cursor=${encodeURIComponent(cursor || '')}`);
+            const resp = await apiFetch(`/api/dashboard/todos?${dashboardTodosQueryString()}&cursor=${encodeURIComponent(cursor || '')}`);
             appendDashboardTodos(resp.items || []);
             setDashboardNextCursor(resp.nextCursor || null);
         }
@@ -412,7 +475,7 @@ export async function renderDashboard() {
         const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
         const [summary, todosResp] = await Promise.all([
             apiFetch(`/api/dashboard/summary?tz=${encodeURIComponent(tz)}`),
-            apiFetch('/api/dashboard/todos?limit=20'),
+            apiFetch(`/api/dashboard/todos?${dashboardTodosQueryString()}`),
         ]);
         setDashboardSummary(summary);
         setDashboardTodos(todosResp.items || []);