oier/collective-lists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tasks): match /lists + /notes create pattern

Browse Source 
Two concrete problems the user hit:
  1) /tasks overview had no visible "create" button — only an enter-to-submit
     input hidden behind a decorative Plus icon.
  2) /tasks/[id] add-task form had no visible submit button either.

Both now mirror the /lists + /notes pattern:

  /tasks — new "New list" button in the masthead (bg-slate-900 primary
    style matching "New list" on /lists and "New note" on /notes). Click
    creates an empty task_list and navigates to /tasks/[id] where the
    user names it inline via the new big editable title input
    (autosaves after NAME_SAVE_DEBOUNCE_MS, 500 ms — same hook as
    /lists/[id] and /notes/[id]).
  /tasks/[id] — sticky add-task footer gains a filled "+" submit button
    on the right; clicking it or pressing Enter both fire handleAdd.
    Input is now wrapped in the same rounded-lg card used on /lists/[id]
    so the two screens look identical.

i18n
  tasks_new_list = "New list" / "Nueva lista" (en / es).

Tests
  tasks.test.ts helper updated to drive the new button-then-title flow
  (same shape as lists.test.ts). T-UI-01..03 all pass.

just test-all → exit 0, 228 green, 2 skipped.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Oier Bravo
2026-04-14 02:25:14 +02:00
parent 3dd4f64cb2
commit ab8ac08226
5 changed files with 101 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/tests/e2e/tasks.test.ts
View File

@@ -14,17 +14,20 @@ const NEW_TASK_PLACEHOLDER = /add task|añadir tarea/i;
async function gotoTasksClean(page: Page) {
await page.goto('/tasks');
await expect(page.getByPlaceholder(NEW_LIST_PLACEHOLDER)).toBeVisible({ timeout: 15_000 });
await expect(
page.getByRole('button', { name: /new list|nueva lista/i })
).toBeVisible({ timeout: 15_000 });
}
async function createTaskList(page: Page, name: string) {
const input = page.getByPlaceholder(NEW_LIST_PLACEHOLDER);
await input.fill(name);
await input.press('Enter');
const heading = page.getByRole('heading', { name: new RegExp(`^${name}$`) });
await expect(heading).toBeVisible({ timeout: 5_000 });
await heading.click();
await expect(page).toHaveURL(/\/tasks\/[0-9a-f-]+$/, { timeout: 5_000 });
// Masthead "New list" button → creates empty list and navigates to the detail.
await page.getByRole('button', { name: /new list|nueva lista/i }).click();
await expect(page).toHaveURL(/\/tasks\/[0-9a-f-]+$/, { timeout: 10_000 });
const titleInput = page.getByPlaceholder(NEW_LIST_PLACEHOLDER);
await expect(titleInput).toBeVisible({ timeout: 10_000 });
await titleInput.fill(name);
await titleInput.blur();
await page.waitForTimeout(900); // autosave debounce
}
test.describe('Tasks — member (Borja)', () => {