Rename the "All tasks" tab to "Explore"
Also refreshed web/README.md while touching this section: fixed the project/project-configure header descriptions to describe the current inline .title-back arrow (they still described the old separate "Back to project" button), and added a "Card detail" section documenting CardView/CardConfigureView/CardManageMenu, which had none. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+36
-10
@@ -138,21 +138,23 @@ ghost. The same rule covers every kanban status column too (below).
|
|||||||
`/projects/:id` shows one project. It renders on a **full-width** layout (the
|
`/projects/:id` shows one project. It renders on a **full-width** layout (the
|
||||||
route sets `meta.wide`, which widens `.app__main` in `App.vue`), so the header
|
route sets `meta.wide`, which widens `.app__main` in `App.vue`), so the header
|
||||||
spans the full width and the **Manage** menu sits top right. The title is a
|
spans the full width and the **Manage** menu sits top right. The title is a
|
||||||
plain heading here -- renaming lives on the configuration view (below). Manage
|
plain heading, with an inline `.title-back` arrow to the dashboard right
|
||||||
|
before the text -- renaming lives on the configuration view (below). Manage
|
||||||
(`ProjectManageMenu.vue`) has a **Configure** link (to that view) and a
|
(`ProjectManageMenu.vue`) has a **Configure** link (to that view) and a
|
||||||
**Delete project** action that opens a confirmation modal; confirming calls
|
**Delete project** action that opens a confirmation modal; confirming calls
|
||||||
`DELETE /api/projects/:id` and returns to the dashboard.
|
`DELETE /api/projects/:id` and returns to the dashboard.
|
||||||
|
|
||||||
Below the header are two tabs (local `activeTab` state, `v-show` so both stay
|
Below the header are two tabs (local `activeTab` state, `v-show` so both stay
|
||||||
mounted). The tab order is fixed — **All tasks** first, **Kanban** second — but
|
mounted). The tab order is fixed — **Explore** first, **Kanban** second — but
|
||||||
`activeTab` initialises to `'kanban'`, so a project opens on the board.
|
`activeTab` initialises to `'kanban'`, so a project opens on the board.
|
||||||
|
|
||||||
### All tasks
|
### Explore
|
||||||
|
|
||||||
The flat card list, **sorted by name (case-insensitive)** via a `sortedCards`
|
The flat card list, **sorted by name (case-insensitive)** via a `sortedCards`
|
||||||
computed — there is no manual order here. Each row is an inline-editable text
|
computed — there is no manual order here. Each row links to the card's own
|
||||||
field (saved on blur), a status chip (`card.status.name` or "No status"), and a
|
view (`/cards/:id` — see [Card detail](#card-detail)) and shows its status
|
||||||
delete button.
|
chip (`card.status.name` or "No status") next to the text; a delete button
|
||||||
|
sits outside that link.
|
||||||
|
|
||||||
### Kanban
|
### Kanban
|
||||||
|
|
||||||
@@ -172,10 +174,10 @@ side of the move.
|
|||||||
## Project configuration
|
## Project configuration
|
||||||
|
|
||||||
`/projects/:id/configure` (`ProjectConfigureView.vue`) manages a project's
|
`/projects/:id/configure` (`ProjectConfigureView.vue`) manages a project's
|
||||||
statuses. The header mirrors the project view's — title, then a
|
statuses. The header mirrors the project view's — an inline `.title-back`
|
||||||
"← Back to project" link and `ProjectManageMenu` together, top right, styled
|
arrow before the title, this time back to the project, and
|
||||||
alike (both `.menu__toggle`) (Manage's own Configure link is hidden here,
|
`ProjectManageMenu` top right (its own Configure link is hidden here, since
|
||||||
since it would just point at the current page).
|
it would just point at the current page).
|
||||||
|
|
||||||
A **Rename project** section (a plain `PATCH /api/projects/:id` form,
|
A **Rename project** section (a plain `PATCH /api/projects/:id` form,
|
||||||
`{ title }`) sits above **Statuses**. On success it also calls the
|
`{ title }`) sits above **Statuses**. On success it also calls the
|
||||||
@@ -200,6 +202,30 @@ delete with `{ reassign_to }`, which reassigns and deletes in one request. The
|
|||||||
last remaining status can't be deleted (a project card always needs one); its
|
last remaining status can't be deleted (a project card always needs one); its
|
||||||
row's delete button is disabled once `statuses.length <= 1`.
|
row's delete button is disabled once `statuses.length <= 1`.
|
||||||
|
|
||||||
|
## Card detail
|
||||||
|
|
||||||
|
A card's text is no longer inline-editable anywhere it's listed -- the
|
||||||
|
Explore row, a kanban column, and the sidebar inbox all just link to
|
||||||
|
`/cards/:id` (`CardView.vue`) instead. Its header follows the same pattern as
|
||||||
|
every other view now: an inline `.title-back` arrow before the title text,
|
||||||
|
`Manage` in the actions corner. The arrow goes to the card's project, or the
|
||||||
|
dashboard for an inbox card (there's no standalone view of the inbox to
|
||||||
|
return to). Below the header sits just the status badge -- no tabs, since
|
||||||
|
there's nothing else to show for a single card.
|
||||||
|
|
||||||
|
`/cards/:id/configure` (`CardConfigureView.vue`) mirrors the project
|
||||||
|
configuration view once more: same header (its back arrow instead returns to
|
||||||
|
the card view), with a **Rename card** form below it (`PATCH /api/cards/:id`,
|
||||||
|
`{ text }`). `CardManageMenu.vue` -- the card equivalent of
|
||||||
|
`ProjectManageMenu.vue` -- provides both views' **Manage** menu: a
|
||||||
|
**Configure** link (hidden on the configure view itself) and a **Delete
|
||||||
|
card** action behind a confirmation modal.
|
||||||
|
|
||||||
|
Saving a rename or confirming a delete refreshes whichever store holds the
|
||||||
|
card -- the `cards` store (for a project card) or the `inbox` store -- so the
|
||||||
|
board or sidebar it came from picks up the change; deleting also navigates
|
||||||
|
back to wherever its back arrow points.
|
||||||
|
|
||||||
## Auth flow
|
## Auth flow
|
||||||
|
|
||||||
There is no password and no separate sign-up — `LoginView` is an email field
|
There is no password and no separate sign-up — `LoginView` is an email field
|
||||||
|
|||||||
@@ -21,9 +21,9 @@ const statuses = ref<CardStatus[]>([])
|
|||||||
const loadError = ref<string | null>(null)
|
const loadError = ref<string | null>(null)
|
||||||
const actionError = ref<string | null>(null)
|
const actionError = ref<string | null>(null)
|
||||||
|
|
||||||
// Tab order is unchanged (All tasks first); Kanban is just the default view.
|
// Tab order is unchanged (Explore first); Kanban is just the default view.
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{ key: 'all', label: 'All tasks' },
|
{ key: 'all', label: 'Explore' },
|
||||||
{ key: 'kanban', label: 'Kanban' },
|
{ key: 'kanban', label: 'Kanban' },
|
||||||
] as const
|
] as const
|
||||||
const activeTab = ref<(typeof tabs)[number]['key']>('kanban')
|
const activeTab = ref<(typeof tabs)[number]['key']>('kanban')
|
||||||
@@ -191,7 +191,7 @@ async function onCreateInColumn(column: Column) {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab: All tasks -->
|
<!-- Tab: Explore -->
|
||||||
<div v-show="activeTab === 'all'" class="tabs__panel" role="tabpanel">
|
<div v-show="activeTab === 'all'" class="tabs__panel" role="tabpanel">
|
||||||
<p class="muted">{{ summary }}</p>
|
<p class="muted">{{ summary }}</p>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user