Skip to content

fix: polish pass — label noise, drag handle, toast spacing (#522) #563

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 3 commits into from
Mar 29, 2026
Merged

fix: polish pass — label noise, drag handle, toast spacing (#522) #563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c3c7de
fix: reduce label and drag-handle visual noise (#522)
Chris0Jeky Mar 29, 2026
4481309
fix: trim card title before toast interpolation (#522)
Chris0Jeky Mar 29, 2026
1237ce0
fix: address adversarial review findings for #522
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
18 changes: 17 additions & 1 deletion frontend/taskdeck-web/src/components/board/CardItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function isOverdue(dateString: string | null): boolean {
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h.01M8 12h.01M8 18h.01M16 6h.01M16 12h.01M16 18h.01" />
</svg>
<span class="td-board-card__drag-label">Drag card</span>
<span class="td-board-card__drag-label td-board-card__drag-label--hidden">Drag card</span>
</button>

<!-- Blocked Badge -->
Expand Down Expand Up @@ -203,6 +203,22 @@ function isOverdue(dateString: string | null): boolean {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: opacity var(--td-transition-fast);
}

/* Hide "Drag card" text by default; reveal only on drag-handle hover.
Use width/overflow collapse (not just opacity) so the invisible text
does not consume horizontal space in the flex button layout. */
.td-board-card__drag-label--hidden {
opacity: 0;
width: 0;
overflow: hidden;
}

.td-card-drag-handle:hover .td-board-card__drag-label--hidden {
opacity: 1;
width: auto;
overflow: visible;
}
Comment on lines +206 to 222
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This implementation can be simplified by setting opacity: 0 on the base .td-board-card__drag-label class and removing the td-board-card__drag-label--hidden class modifier. This makes the template cleaner and the CSS more direct.

To apply this, you would:

  1. Modify this block with the suggestion below.
  2. Remove the td-board-card__drag-label--hidden class from the <span> in the template (line 86).
  transition: opacity var(--td-transition-fast);
  opacity: 0;
}

.td-card-drag-handle:hover .td-board-card__drag-label {
  opacity: 1;
}


/* ── Badge row ── */
Expand Down
6 changes: 6 additions & 0 deletions frontend/taskdeck-web/src/components/board/CardModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,12 @@ onBeforeUnmount(() => {
:value="label.id"
class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary/50"
/>
<!-- Color swatch always visible so users can identify labels before selecting -->
<span
class="inline-block w-3 h-3 rounded-full flex-shrink-0 bg-outline-variant"
:style="label.colorHex ? { backgroundColor: label.colorHex } : {}"
aria-hidden="true"
/>
<span>{{ label.name }}</span>
</label>
</div>
Expand Down
5 changes: 4 additions & 1 deletion frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,10 @@ defineExpose({
<div class="td-sidebar__header">
<div v-if="!sidebarCollapsed" class="td-sidebar__brand">
<span class="td-sidebar__title">Taskdeck</span>
<span class="td-sidebar__subtitle">Precision Mode Active</span>
<span
class="td-sidebar__subtitle"
title="Precision Mode: the workspace operates with guided automation — all proposals require explicit review before applying to the board. Change this in Preferences."
>Precision Mode Active</span>
</div>
<button
class="td-sidebar__toggle"
Expand Down
2 changes: 1 addition & 1 deletion frontend/taskdeck-web/src/store/board/cardStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function createCardActions(state: BoardState, helpers: BoardHelpers) {
const newCard = await cardsApi.createCard(boardId, card)
state.currentBoardCards.value.push(newCard)
helpers.updateColumnCardCount(newCard.columnId, 1)
helpers.toast.success(`Card "${newCard.title}" created successfully`)
helpers.toast.success(`Card "${newCard.title.trim()}" created successfully`)
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

This change correctly trims the whitespace for the toast message, but the underlying card data in the state and on the server will still contain the whitespace. This can lead to inconsistent display of the card title.

A more robust fix would be to trim the title before sending it to the API. This ensures data consistency across the application. You could modify the createCard function like this:

async function createCard(boardId: string, card: CreateCardDto) {
  // ...
  const cardData = { ...card, title: card.title.trim() };
  const newCard = await cardsApi.createCard(boardId, cardData);
  state.currentBoardCards.value.push(newCard);
  helpers.updateColumnCardCount(newCard.columnId, 1);
  // The title from `newCard` should now be trimmed, so no .trim() is needed here.
  helpers.toast.success(`Card "${newCard.title}" created successfully`);
  // ...
}

This would fix the issue at its source.

return newCard
} catch (e: unknown) {
helpers.handleApiError(e, 'Failed to create card')
Expand Down
Loading