dreampiler/kandev
1
0
Fork 0
Code Issues 43 Pull Requests Actions 6 Packages Projects Releases Wiki Activity

fix(web): align empty sidebar task message (#2632)

Browse Source
This commit is contained in:
José Almeida
2026-08-13 18:02:58 +01:00
committed by GitHub
parent cb965b77c4
commit 7eebb42570
8 changed files with 244 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/app-sidebar/sections/tasks-section.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export function TasksSection({ collapsed }: TasksSectionProps) {
headerAction={<TasksViewPicker />}
grow
>
<div className="-mx-2 flex-1 min-h-0 [&_[data-testid=task-sidebar]]:bg-transparent [&_[data-testid=task-sidebar-scroll]]:bg-transparent">
<div className="-mx-2 flex-1 min-h-0 [&_[data-testid=task-sidebar]]:bg-transparent [&_[data-testid=task-sidebar-scroll]]:bg-transparent [&_[data-slot=task-switcher-empty-state]]:px-4">
<TaskSessionSidebar workspaceId={workspaceId} workflowId={workflowId} hideFilterBar />
</div>
</AppSidebarSection>
apps/web/components/task/task-switcher.tsx
+6 -1
View File
@@ -117,7 +117,12 @@ export const TaskSwitcher = memo(function TaskSwitcher(props: TaskSwitcherProps)
return (
<>
{loadErrorNotice}
<div className="px-3 py-3 text-xs text-muted-foreground">{t("sidebar:noTasksYet")}</div>
<div
data-slot="task-switcher-empty-state"
className="px-3 py-3 text-xs text-muted-foreground"
>
{t("sidebar:noTasksYet")}
</div>
</>
);
}
apps/web/e2e/tests/task/mobile-task-listing-display.spec.ts
+1
View File
@@ -70,6 +70,7 @@ test.describe("Mobile task listing display preferences", () => {
);
await testPage.goto("/");
await expect(testPage.getByTestId("mobile-kanban-layout")).toBeVisible();
await expect(testPage.getByTestId("app-sidebar-layout")).toBeHidden();
await expect(
testPage.evaluate((key) => window.localStorage.getItem(key), VIEW_STORAGE_KEY),
).resolves.toBe(JSON.stringify("pipeline"));
apps/web/e2e/tests/task/sidebar-scroll-preservation.spec.ts
+15 -5
View File
@@ -24,23 +24,33 @@ test.describe("sidebar scrolling", () => {
const appSidebar = testPage.getByTestId("app-sidebar");
const taskSidebar = testPage.getByTestId("task-sidebar");
const scrollRoot = taskSidebar.locator("[data-slot='scroll-area']");
await expect(taskSidebar.getByText("No tasks yet.")).toBeVisible();
const emptyMessage = taskSidebar.locator("[data-slot='task-switcher-empty-state']");
await expect(emptyMessage).toHaveText("No tasks yet.");
await expect
.poll(() => scrollRoot.evaluate((element) => getComputedStyle(element).backgroundColor))
.toBe("rgba(0, 0, 0, 0)");
const [navigationBox, taskSidebarBox] = await Promise.all([
appSidebar.locator("nav").boundingBox(),
taskSidebar.boundingBox(),
]);
const [navigationBox, taskSidebarBox, tasksTitleBox, emptyMessageBox, emptyPaddingLeft] =
await Promise.all([
appSidebar.locator("nav").boundingBox(),
taskSidebar.boundingBox(),
tasksToggle.locator("span").first().boundingBox(),
emptyMessage.boundingBox(),
emptyMessage.evaluate((element) => parseFloat(getComputedStyle(element).paddingLeft)),
]);
expect(navigationBox).not.toBeNull();
expect(taskSidebarBox).not.toBeNull();
expect(tasksTitleBox).not.toBeNull();
expect(emptyMessageBox).not.toBeNull();
expect(taskSidebarBox!.x).toBeCloseTo(navigationBox!.x, 0);
expect(taskSidebarBox!.x + taskSidebarBox!.width).toBeCloseTo(
navigationBox!.x + navigationBox!.width,
0,
);
expect(Math.abs(emptyMessageBox!.x + emptyPaddingLeft - tasksTitleBox!.x)).toBeLessThanOrEqual(
0.5,
);
});
test("fades overflowing tasks and reveals the scrollbar on hover", async ({
docs/plans/sidebar-empty-task-alignment/plan.md
+83
View File
@@ -0,0 +1,83 @@
---
spec: docs/specs/ui/sidebar-empty-task-alignment.md
created: 2026-08-13
status: complete
---
# Implementation Plan: Sidebar empty task alignment
## Overview
Add a stable slot marker to the shared task-switcher empty state, then override only that slot's horizontal padding inside the full-width desktop Tasks host. Extend the existing empty-sidebar E2E with a text-anchor geometry assertion and add a mobile preservation assertion for the separate phone composition.
## Confirmed root cause
`apps/web/components/app-sidebar/app-sidebar.tsx` gives the navigation `px-2`. The Tasks section title adds another `px-2`, so its text starts at x=16 in the rendered 1280px diagnostic viewport. `apps/web/components/app-sidebar/sections/tasks-section.tsx` intentionally uses `-mx-2` so the task scroll surface still spans the full navigation width, but `apps/web/components/task/task-switcher.tsx` gives the empty message only `px-3`. Its text therefore starts at x=12, four pixels left of the title.
Browser evidence from an isolated mock instance confirmed the mismatch: Tasks title x=16, empty-message text anchor x=12. At 393px the desktop app sidebar had `display: none` and no visible sidebar empty message.
---
## Frontend
### Shared task-switcher empty state
- `apps/web/components/task/task-switcher.tsx`: add `data-slot="task-switcher-empty-state"` to the existing empty-state element. Keep its base `px-3` class so standalone and mobile task-switcher hosts retain their current inset.
### Desktop app sidebar Tasks host
- `apps/web/components/app-sidebar/sections/tasks-section.tsx`: extend the existing full-width wrapper with `[&_[data-slot=task-switcher-empty-state]]:px-4`. Within its `-mx-2` geometry, 16px padding places the message at the same x-coordinate as the section title without shifting task rows, group headers, loading/error states, or the shared mobile surface.
No API, store, state, copy, or backend change is required.
## Mobile parity
- **Desktop outcome:** the empty message aligns with the Tasks title while the list remains full-width.
- **Mobile entry point and exemplar:** phone task navigation remains the existing `SessionTaskSwitcherSheet` in `apps/web/components/task/mobile/session-task-switcher-sheet.tsx`, whose `p-2` list wrapper and shared `px-3` task content remain unchanged.
- **Presentation, hierarchy, scrolling, and touch behavior:** unchanged. The desktop AppSidebar remains hidden below `md`; the mobile drawer remains the scroll owner.
- **Coverage:** extend the existing `mobile-task-listing-display.spec.ts` phone scenario to assert the desktop app sidebar is hidden. The plan-phase rendered check already confirmed `display: none` at 393px; implementation reruns the mobile project against the fresh production build.
## Tests
- **What:** the empty message's left text anchor equals the Tasks title's left edge while the task sidebar remains transparent and full-width.
**File:** `apps/web/e2e/tests/task/sidebar-scroll-preservation.spec.ts`.
**How:** extend the existing empty-list test. Read the Tasks title bounding box, compute the empty message text anchor from its box plus rendered left padding, and compare the x-coordinates with subpixel tolerance. Write and run this assertion before the host override; it must fail with the confirmed 12px versus 16px coordinates, then pass after the fix.
- **What:** phone rendering continues to use the mobile composition rather than the desktop sidebar.
**File:** `apps/web/e2e/tests/task/mobile-task-listing-display.spec.ts`.
**How:** extend the existing phone Kanban scenario with a visibility assertion for `app-sidebar-layout`. This is preservation coverage; the desktop geometry assertion is the required RED regression.
No unit test is needed because the defect is a rendered alignment relationship with no domain logic.
## E2E Tests
- **Scenario:** GIVEN the expanded desktop app sidebar has no tasks, WHEN the Tasks section renders, THEN **No tasks yet.** and **Tasks** share the same left text anchor while the transparent list still spans the navigation width.
**File:** `apps/web/e2e/tests/task/sidebar-scroll-preservation.spec.ts`.
**What to verify:** x-coordinate equality, transparent scroll background, and unchanged full-width bounds.
- **Scenario:** GIVEN a phone viewport, WHEN the task listing renders, THEN the desktop app sidebar remains hidden and mobile Kanban remains visible.
**File:** `apps/web/e2e/tests/task/mobile-task-listing-display.spec.ts`.
**What to verify:** `mobile-kanban-layout` is visible and `app-sidebar-layout` is hidden.
## Verification Results
- **RED:** the focused Chromium empty-sidebar test discovered one test and failed on the new geometry assertion with a 4px mismatch (`received: 4`, tolerance `0.5`).
- **GREEN:** the same production-build Chromium command passed its one test; the focused mobile Chrome preservation command also passed its one test.
- **Rendered geometry:** an isolated 1280x800 mock instance measured the Tasks title at x=16 and the empty-message text at x=16 (delta 0). The corrected desktop state was captured in `apps/web/.pr-assets/sidebar-empty-task-alignment.png` for PR publication.
- **Static checks:** web typecheck, targeted ESLint, targeted Prettier, the i18n ratchet, and `git diff --check` passed.
- **Cleanup:** the named browser session and isolated backend/frontend processes were stopped after capture.
## Implementation Waves And Parallel Candidates
Wave 1 - sequential:
- [x] [task-01-align-empty-task-message](task-01-align-empty-task-message.md)
The marker, desktop host override, and geometry regression describe one rendered behavior and share the same verification pass.
## Risks
- A global `px-4` change in `TaskSwitcher` would also shift the mobile drawer's empty state. The host-scoped selector avoids that regression.
- Testing only element boxes would measure the full-width empty-state container rather than its text. The E2E must include rendered left padding when deriving the text anchor.
## Open Questions
None.
docs/plans/sidebar-empty-task-alignment/task-01-align-empty-task-message.md
+103
View File
@@ -0,0 +1,103 @@
---
id: "01-align-empty-task-message"
title: "Align empty task message"
status: done
wave: 1
depends_on: []
plan: "plan.md"
spec: "../../specs/ui/sidebar-empty-task-alignment.md"
---
# Task 01: Align empty task message
## Intent
Align the desktop app sidebar's empty task message with its Tasks section title without changing the shared mobile task-switcher inset or the task list's full-width surface.
## Root cause
The desktop navigation starts with `px-2`; its Tasks title adds `px-2` and renders at x=16. The Tasks content wrapper cancels the navigation inset with `-mx-2`, while the shared empty state uses `px-3`, rendering its text at x=12. The four-pixel difference is the reported drift.
## Acceptance
- On the expanded desktop app sidebar, the **No tasks yet.** text anchor matches the **Tasks** title x-coordinate within subpixel tolerance.
- The empty task scroll surface stays transparent and spans the full navigation width; task rows, group headers, load errors, and other sidebar sections keep their current geometry.
- At the mobile Playwright viewport, the desktop app sidebar remains hidden and the existing mobile task composition remains visible and unchanged.
## Regression tests (write first)
- `apps/web/e2e/tests/task/sidebar-scroll-preservation.spec.ts`: extend the existing `keeps the empty list transparent and uses the full sidebar width` test. Locate the empty state through `data-slot="task-switcher-empty-state"`, derive its text x-coordinate as `getBoundingClientRect().x + parseFloat(getComputedStyle(element).paddingLeft)`, and compare it with the Tasks title span's bounding-box x-coordinate. Add the slot marker first, run the test before the padding override, and record the expected RED mismatch (currently x=12 versus x=16).
- `apps/web/e2e/tests/task/mobile-task-listing-display.spec.ts`: extend `uses Kanban on a phone without overwriting a saved Pipeline preference` to assert `app-sidebar-layout` is hidden while `mobile-kanban-layout` is visible. This guards the viewport boundary and is expected to remain green.
## Implementation
- `apps/web/components/task/task-switcher.tsx`: add `data-slot="task-switcher-empty-state"` to the existing empty-message element. Preserve its base `px-3` class.
- `apps/web/components/app-sidebar/sections/tasks-section.tsx`: add `[&_[data-slot=task-switcher-empty-state]]:px-4` to the wrapper that already owns `-mx-2`. Do not change shared task rows or mobile wrappers.
## Files likely touched
- `apps/web/components/task/task-switcher.tsx`
- `apps/web/components/app-sidebar/sections/tasks-section.tsx`
- `apps/web/e2e/tests/task/sidebar-scroll-preservation.spec.ts`
- `apps/web/e2e/tests/task/mobile-task-listing-display.spec.ts`
- `docs/plans/sidebar-empty-task-alignment/plan.md`
- `docs/plans/sidebar-empty-task-alignment/task-01-align-empty-task-message.md`
## Dependencies
None.
## Parallelism
Sequential. The RED geometry assertion, host-scoped class change, and desktop/mobile checks share one behavior and one production build.
## Inputs
- Repair behavior in `docs/specs/ui/sidebar-empty-task-alignment.md`.
- Root-cause geometry and host-scoping design in `docs/plans/sidebar-empty-task-alignment/plan.md`.
- Existing empty-list coverage in `apps/web/e2e/tests/task/sidebar-scroll-preservation.spec.ts`.
- Existing phone composition coverage in `apps/web/e2e/tests/task/mobile-task-listing-display.spec.ts`.
## Verification
Bootstrap a fresh worktree once if dependencies are absent:
```bash
(cd apps && pnpm install --frozen-lockfile)
```
Add the slot marker and geometry assertion, then run the desktop regression before the host override (RED):
```bash
(cd apps/web && pnpm e2e:run --project chromium tests/task/sidebar-scroll-preservation.spec.ts -- --grep "keeps the empty list transparent")
```
Apply the minimal host override, rerun the same command (GREEN), then run mobile preservation coverage against the fresh build:
```bash
(cd apps/web && pnpm e2e:run --no-build --project mobile-chrome tests/task/mobile-task-listing-display.spec.ts -- --grep "uses Kanban on a phone")
```
Run targeted static checks:
```bash
(cd apps/web && pnpm run typecheck)
(cd apps/web && pnpm exec eslint components/task/task-switcher.tsx components/app-sidebar/sections/tasks-section.tsx e2e/tests/task/sidebar-scroll-preservation.spec.ts e2e/tests/task/mobile-task-listing-display.spec.ts)
(cd apps/web && pnpm exec prettier --check components/task/task-switcher.tsx components/app-sidebar/sections/tasks-section.tsx e2e/tests/task/sidebar-scroll-preservation.spec.ts e2e/tests/task/mobile-task-listing-display.spec.ts)
(cd apps/web && pnpm run i18n:ratchet)
git diff --check
```
The managed desktop E2E run rebuilds the production web assets. Confirm each focused command discovers one test before treating it as evidence.
## Output contract
Report the RED and GREEN x-coordinates, exact commands and test counts, changed files, mobile preservation result, generated artifacts, cleanup evidence, risks, and synchronized task/plan statuses in the same conversation.
## Results
- Added a stable empty-state slot while preserving the shared `px-3` default, then applied `px-4` only from the desktop Tasks host.
- Extended the existing desktop E2E with text-anchor geometry coverage. Its RED run found the expected 4px drift; its GREEN run passed one test after the host override.
- Extended the existing phone scenario to prove the desktop sidebar remains hidden; the focused mobile Chrome run passed one test.
- Confirmed the final desktop geometry in an isolated mock instance: Tasks title x=16, empty text x=16, delta 0.
- Passed web typecheck, targeted ESLint and Prettier, the i18n ratchet, and `git diff --check`. Captured and inspected a synthetic 1280x800 PR screenshot, then stopped the browser and isolated app.
docs/specs/INDEX.md
+1
View File
@@ -184,6 +184,7 @@ Subscription quota tracking and per-agent cheap-model profile routing.
| [review-markdown-preview](ui/review-markdown-preview.md) | draft |
| [sidebar-view-creation](ui/sidebar-view-creation.md) | shipped |
| [command-panel sidebar task reveal](ui/command-panel-sidebar-task-reveal.md) | draft |
| [sidebar-empty-task-alignment](ui/sidebar-empty-task-alignment.md) | building |
| [sidebar-task-completion-icons](ui/sidebar-task-completion-icons.md) | shipped |
| [sidebar-queued-prompt-count](ui/sidebar-queued-prompt-count.md) | shipped |
| [session-tab-delete-feedback](ui/session-tab-delete-feedback.md) | shipped |
docs/specs/ui/sidebar-empty-task-alignment.md
+34
View File
@@ -0,0 +1,34 @@
---
status: building
created: 2026-08-13
owner: kandev
---
# Sidebar empty task alignment
## Why
When the expanded desktop app sidebar has no tasks, its empty-state message starts farther left than the surrounding sidebar section titles. The inconsistent inset makes the task section look detached from the sidebar hierarchy.
## What
- In the expanded desktop app sidebar, the **No tasks yet.** message aligns its left text edge with the **Tasks** section title.
- The task list keeps its full sidebar width and transparent background while empty.
- Task rows, task-group headers, other sidebar sections, and other task-switcher hosts keep their existing insets.
- Phone navigation keeps its separate mobile composition and existing task-list inset.
## Scenarios
- **GIVEN** the expanded desktop app sidebar contains no tasks, **WHEN** the Tasks section renders, **THEN** the left text edge of **No tasks yet.** aligns with the left text edge of the **Tasks** title.
- **GIVEN** the desktop task list is empty, **WHEN** its layout is measured, **THEN** its transparent scroll surface still spans the full width of the sidebar navigation area.
- **GIVEN** a phone-sized viewport, **WHEN** the task listing renders, **THEN** the desktop app sidebar remains hidden and the mobile task surface keeps its existing composition and inset.
## Out of scope
- Changing task-row, task-group, filter, or non-task sidebar spacing.
- Changing empty states outside the desktop app sidebar Tasks section.
- Redesigning mobile task navigation or introducing a new mobile surface.
## Implementation plan
- [Sidebar empty task alignment plan](../../plans/sidebar-empty-task-alignment/plan.md)