Move new-project form to the dashboard; sidebar project list becomes a switcher; Kanban is the default project tab
- DashboardView: a "New project title" form now sits directly below the project grid (creating one stays on the dashboard -- the grid and the sidebar dropdown pick it up via the shared projects store, no navigation). - AppSidebar: the per-project RouterLink list is replaced by a <select>. It's a v-model-bound writable computed (selectedProjectId): the getter tracks route.params.id so it reflects whichever project is open, the setter router.pushes to the chosen one -- so it doubles as a project switcher from anywhere, not just a picker from the dashboard. Removed the now-unused .sidebar__link--project/.sidebar__projects/.sidebar__form CSS; added .sidebar__select, and .form--new-project back for the dashboard form. - ProjectView: activeTab now initialises to 'kanban' instead of 'all'. The tabs array (and so the tab bar's DOM order, All tasks first) is untouched -- only the default selection changed. Verified via headless Chrome: sidebar has no per-project links (a <select> listing both projects instead); the new-project form follows the grid and creating from it stays on /dashboard while the grid and dropdown both update; selecting a project in the dropdown navigates there and the dropdown reflects it once there; a project opens on Kanban with the tab bar still reading "All tasks, Kanban" in that order. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+15
-9
@@ -37,7 +37,7 @@ src/stores/cards.ts Pinia store: one project's cards (CRUD; no reordering --
|
||||
src/stores/inbox.ts Pinia store: the caller's global inbox (fetch + create)
|
||||
src/lib/api.ts fetch wrapper, bearer token, typed ApiError
|
||||
src/lib/cardOrder.ts reorderColumn() -- PUT /api/cards/order, shared by the sidebar and kanban board
|
||||
src/components/AppSidebar.vue left nav: Dashboard link, project list + form, Inbox + form
|
||||
src/components/AppSidebar.vue left nav: Dashboard link, project dropdown, Inbox + form
|
||||
src/components/CardRow.vue editable text + status chip + delete, one card
|
||||
src/components/KanbanCard.vue small draggable card for the board columns and the inbox
|
||||
src/views/ DashboardView, ProjectView, LoginView, ProfileView,
|
||||
@@ -47,14 +47,19 @@ src/views/ DashboardView, ProjectView, LoginView, ProfileView,
|
||||
Signed-in "app" routes (`meta.requiresAuth`) render inside a persistent shell:
|
||||
the top bar, then a left **sidebar** (`AppSidebar.vue`) beside the routed view.
|
||||
The sidebar stays mounted across navigation — it holds a **Dashboard** link, a
|
||||
divider, the project list + new-project form, another divider, then the
|
||||
**Inbox** (see below). The current page is highlighted via RouterLink's
|
||||
`active-class`. `<RouterView :key="route.path">` remounts the view on every
|
||||
path change so sidebar → project → project navigation always does a fresh load.
|
||||
divider, a project `<select>`, another divider, then the **Inbox** (see below).
|
||||
The dropdown is a `v-model`-bound writable `computed` (`selectedProjectId`):
|
||||
its getter reads the open project from `route.params.id`, so it tracks
|
||||
whichever project is current; its setter `router.push`es to the chosen one, so
|
||||
it also works as a project switcher from anywhere. `<RouterView
|
||||
:key="route.path">` remounts the view on every path change so switching
|
||||
projects always does a fresh load.
|
||||
|
||||
`/` redirects to `/dashboard` (`DashboardView.vue`), a full-width grid linking
|
||||
to each project, showing its title and card count. Signed-out routes (`/login`,
|
||||
`/verify-email`) render without the sidebar.
|
||||
`/` redirects to `/dashboard` (`DashboardView.vue`): a full-width grid linking
|
||||
to each project (title + card count), then a **new-project form** directly
|
||||
below it (creating one stays on the dashboard; the grid and the sidebar
|
||||
dropdown both pick it up via the shared `projects` store). Signed-out routes
|
||||
(`/login`, `/verify-email`) render without the sidebar.
|
||||
|
||||
## Inbox
|
||||
|
||||
@@ -79,7 +84,8 @@ menu (top right) has a **Delete project** action that opens a confirmation modal
|
||||
confirming calls `DELETE /api/projects/:id` and returns to the dashboard.
|
||||
|
||||
Below the header are two tabs (local `activeTab` state, `v-show` so both stay
|
||||
mounted):
|
||||
mounted). The tab order is fixed — **All tasks** first, **Kanban** second — but
|
||||
`activeTab` initialises to `'kanban'`, so a project opens on the board.
|
||||
|
||||
### All tasks
|
||||
|
||||
|
||||
Reference in New Issue
Block a user