Skip to content

UI-05: Board card and board-surface polish pass #501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Chris0Jeky merged 8 commits into from
Mar 29, 2026
Merged

UI-05: Board card and board-surface polish pass #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c951fb2
polish: standardize board card visual states with design tokens
Chris0Jeky Mar 29, 2026
e5555a5
polish: apply token-based styling to column lanes
Chris0Jeky Mar 29, 2026
1fe2f76
polish: use token-based spacing for board canvas layout
Chris0Jeky Mar 29, 2026
0d1dd47
polish: align board toolbar buttons with design token system
Chris0Jeky Mar 29, 2026
3a91a68
polish: token-based styling for board action rail
Chris0Jeky Mar 29, 2026
6891eb3
polish: token-based styling for create column form in BoardView
Chris0Jeky Mar 29, 2026
3320cef
fix: replace hardcoded 10px font-size with token in filter count badge
Chris0Jeky Mar 29, 2026
c5be917
fix: add combined selected+focus-visible state for keyboard nav
Chris0Jeky Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 69 additions & 23 deletions frontend/taskdeck-web/src/components/board/BoardActionRail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,88 @@ defineEmits<{

<template>
<div
class="mt-4 flex flex-wrap items-center gap-2 rounded-xl border border-outline-variant/15 bg-surface-container-low px-4 py-3"
class="td-action-rail"
data-board-action-rail
>
<span class="text-xs font-semibold uppercase tracking-wide text-on-surface/60">Board Actions</span>
<button
class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
@click="$emit('capture')"
>
<span class="td-action-rail__label">Board Actions</span>
<button class="td-action-rail__btn" @click="$emit('capture')">
Capture here
</button>
<button
class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
@click="$emit('chat')"
>
<button class="td-action-rail__btn" @click="$emit('chat')">
Ask assistant
</button>
<button
class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
@click="$emit('review')"
>
<button class="td-action-rail__btn" @click="$emit('review')">
Review proposals
</button>
<button
class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
@click="$emit('inbox')"
>
<button class="td-action-rail__btn" @click="$emit('inbox')">
Open Inbox
</button>
<button
class="px-3 py-2 text-sm font-medium text-on-primary-container bg-primary-container hover:brightness-110 rounded-lg transition-colors"
@click="$emit('addCard')"
>
<button class="td-action-rail__btn td-action-rail__btn--primary" @click="$emit('addCard')">
Add card
</button>
<p class="text-sm text-on-surface/60">
<p class="td-action-rail__hint">
New input starts in Capture or Inbox. Only approved changes land on this board.
</p>
</div>
</template>

<style scoped>
.td-action-rail {
margin-top: var(--td-space-5);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--td-space-2);
border-radius: var(--td-radius-xl);
border: 0.5px solid var(--td-border-ghost);
background: var(--td-surface-container-low);
padding: var(--td-space-4) var(--td-space-5);
}

.td-action-rail__label {
font-size: var(--td-font-xs);
font-family: 'Space Grotesk', system-ui, sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--td-text-tertiary);
}

.td-action-rail__btn {
padding: var(--td-space-2) var(--td-space-4);
font-size: var(--td-font-sm);
font-weight: 500;
color: var(--td-text-muted);
border: 1px solid var(--td-border-default);
border-radius: var(--td-radius-lg);
transition:
background-color var(--td-transition-fast),
color var(--td-transition-fast);
}

.td-action-rail__btn:hover {
background: var(--td-surface-container);
color: var(--td-text-primary);
}

.td-action-rail__btn:focus-visible {
outline: none;
box-shadow: var(--td-focus-ring);
}

.td-action-rail__btn--primary {
background: var(--td-color-primary);
color: var(--td-text-inverse);
border-color: transparent;
}

.td-action-rail__btn--primary:hover {
background: var(--td-color-primary-hover);
color: var(--td-text-inverse);
}

.td-action-rail__hint {
font-size: var(--td-font-sm);
color: var(--td-text-tertiary);
}
</style>
53 changes: 47 additions & 6 deletions frontend/taskdeck-web/src/components/board/BoardCanvas.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ defineEmits<{
</script>

<template>
<div class="h-[calc(100vh-120px)] overflow-x-auto">
<div class="flex gap-4 p-6 min-h-full">
<div class="td-board-canvas">
<div class="td-board-canvas__lanes">
<div
v-for="column in sortedColumns"
:key="column.id"
Expand Down Expand Up @@ -59,10 +59,10 @@ defineEmits<{
<!-- Empty State -->
<div
v-if="!hasColumns"
class="flex-1 flex flex-col items-center justify-center text-on-surface/20"
class="td-board-canvas__empty"
>
<svg
class="w-16 h-16 mb-4"
class="td-board-canvas__empty-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
Expand All @@ -74,9 +74,50 @@ defineEmits<{
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
/>
</svg>
<p class="text-lg font-medium">No columns yet</p>
<p class="text-sm mt-1">Click "Add Column" to get started</p>
<p class="td-board-canvas__empty-title">No columns yet</p>
<p class="td-board-canvas__empty-hint">Click "Add Column" to get started</p>
</div>
</div>
</div>
</template>

<style scoped>
.td-board-canvas {
height: calc(100vh - 120px);
overflow-x: auto;
}

.td-board-canvas__lanes {
display: flex;
gap: var(--td-space-5);
padding: var(--td-space-6);
min-height: 100%;
}

.td-board-canvas__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--td-text-tertiary);
}

.td-board-canvas__empty-icon {
width: 4rem;
height: 4rem;
margin-bottom: var(--td-space-5);
}

.td-board-canvas__empty-title {
font-size: var(--td-font-lg);
font-weight: 500;
color: var(--td-text-tertiary);
}

.td-board-canvas__empty-hint {
font-size: var(--td-font-sm);
color: var(--td-text-tertiary);
margin-top: var(--td-space-1);
}
</style>
Loading
Loading