Conversation
… category labels, in-page confirmations Co-authored-by: robpitcher <13648061+robpitcher@users.noreply.github.com>
|
@copilot I still want the edit and trash can icon in the top right of the checklist box when mouse hovering a checklist on the checklist overview page. |
Co-authored-by: robpitcher <13648061+robpitcher@users.noreply.github.com>
Added edit (pencil) and delete (trash) icons that appear on hover in the top-right corner of checklist cards. The edit icon opens the checklist for editing, and the delete icon triggers the delete confirmation. Both icons fade in smoothly when hovering over the card.
Commit: Added in the latest commit |
There was a problem hiding this comment.
Pull request overview
This PR implements UI enhancements to improve checklist interaction by removing the priority system in favor of category-based organization, adding visual feedback with hover indicators, and replacing browser popups with in-page confirmation dialogs for better accessibility.
Key changes:
- Removed priority field entirely from Item and ItemResponse types, replacing it with enhanced category functionality
- Added in-page confirmation dialogs for delete actions (items and checklists in detail view)
- Added hover indicators (underlines) on clickable elements and hover-visible edit/delete icons on checklist cards
- Made category labels clickable and editable from both checklist view and item edit mode
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
frontend/src/types/checklist.ts |
Removed priority field from Item and ItemResponse types; made category optional |
frontend/src/components/checklist/ItemRow.tsx |
Added in-page delete confirmation, category editing via clickable label, hover underline on item names, and category field in edit mode |
frontend/src/components/checklist/ChecklistPage.tsx |
Replaced "New Checklist" with "Delete Checklist" button when viewing a checklist, added in-page delete confirmation, updated category default to empty string |
frontend/src/components/checklist/ChecklistOverview.tsx |
Added hover underline to checklist names, added edit/delete icons with hover effects in card top-right corner |
frontend/src/components/checklist/AddItemForm.tsx |
Removed priority selector, changed category default to empty string, kept category parameter for backward compatibility |
frontend/src/components/ChecklistDemo.tsx |
Removed priority references from demo items |
README.md |
Updated feature list to reflect category-based organization and in-page confirmations |
.github/copilot-instructions.md |
Updated implemented features list with new UI patterns |
| interface AddItemFormProps { | ||
| checklistId: string; | ||
| category: string; | ||
| category?: string; // Optional, not used but kept for backward compatibility | ||
| onAdd: (checklistId: string, item: Omit<Item, 'id'>) => Promise<void>; | ||
| onCancel?: () => void; | ||
| } | ||
|
|
||
| export function AddItemForm({ checklistId, category, onAdd, onCancel }: AddItemFormProps) { | ||
| export function AddItemForm({ checklistId, onAdd, onCancel }: AddItemFormProps) { |
There was a problem hiding this comment.
The category parameter is still defined but no longer used in this component. The comment on line 6 acknowledges this is for "backward compatibility," but since this is an internal component (not a public API), there's no need to maintain backward compatibility. The parameter should be removed entirely from the interface and the function signature to keep the code clean and avoid confusion.
| <AddItemForm | ||
| checklistId={currentChecklist.id} | ||
| category="Miscellaneous" | ||
| category="" |
There was a problem hiding this comment.
Since the category parameter is no longer used in AddItemForm, passing it here (even as an empty string) is unnecessary and creates dead code. Remove the category="" prop entirely to match the updated component interface.
| category="" |
| // In-page confirmation for delete | ||
| const handleDeleteClick = () => { | ||
| setIsDeleting(true); | ||
| }; | ||
|
|
||
| const handleConfirmDelete = async () => { | ||
| await onDelete(checklistId, item.id); | ||
| }; | ||
|
|
||
| const handleCancelDelete = () => { | ||
| setIsDeleting(false); | ||
| }; | ||
|
|
||
| if (isDeleting) { | ||
| return ( | ||
| <div className="p-3 border border-red-500 rounded bg-red-50"> | ||
| <div className="space-y-3"> | ||
| <p className="text-sm text-gray-900"> | ||
| Delete "{item.name}"? | ||
| </p> | ||
| <div className="flex gap-2"> | ||
| <button | ||
| onClick={handleConfirmDelete} | ||
| className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-600" | ||
| aria-label="Confirm delete" | ||
| > | ||
| Delete | ||
| </button> | ||
| <button | ||
| onClick={handleCancelDelete} | ||
| className="px-3 py-1 bg-gray-400 text-white rounded hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-400" | ||
| aria-label="Cancel delete" | ||
| > | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The new in-page delete confirmation functionality lacks test coverage. Since the repository has comprehensive test infrastructure (Vitest + RTL) and the copilot instructions explicitly recommend adding UI component tests for checklist functionality, this new behavior should be tested. Consider adding tests that verify:
- Clicking the delete button shows the confirmation UI
- Clicking "Cancel" dismisses the confirmation
- Clicking "Delete" calls the onDelete handler and removes the item
| {item.category && ( | ||
| <span | ||
| className={`inline-block mt-1 px-2 py-0.5 text-xs rounded ${ | ||
| item.priority === 'high' | ||
| ? 'bg-warning/20 text-warning' | ||
| : item.priority === 'optional' | ||
| ? 'bg-gray-200 text-gray-600' | ||
| : 'bg-blue-100 text-blue-600' | ||
| }`} | ||
| onClick={() => setIsEditing(true)} | ||
| className="inline-block mt-1 px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-600 hover:bg-blue-200 cursor-pointer" | ||
| > | ||
| {item.priority} | ||
| {item.category} | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
The category label editing functionality (clicking the category label to enter edit mode) lacks test coverage. Since the repository has comprehensive test infrastructure and this is a key new feature, add tests to verify:
- Clicking the category label opens edit mode
- The category field is populated with the current value
- Saving updates the category correctly
- Empty category values are stored as undefined
Summary
This PR implements several UI improvements to enhance checklist interaction and item management, making the interface more intuitive and accessible while removing the priority system in favor of a simpler category-based organization.
Changes Made
Checklist Overview Page
Checklist Detail Page
Item Management
Removed priority property entirely from the codebase - priority field has been removed from:
ItemandItemResponse)Category labels now fully replace priority with improved functionality:
Added hover underline to item names to indicate they are clickable for editing
Implemented in-page confirmation for item deletion - clicking delete shows a confirmation panel with Delete/Cancel buttons instead of a browser popup
Documentation
.github/copilot-instructions.mdto reflect new UI patterns and interaction modelsREADME.mdto document the implemented features accuratelyScreenshots
Checklist Overview with Hover Icons:
Checklist with Category Label:
Item Edit Mode with Category Field:
Item Delete Confirmation (In-Page):
Checklist Delete Confirmation (In-Page):
Technical Details
Files Modified:
frontend/src/types/checklist.ts- Removed priority from Item type, made category optionalfrontend/src/components/checklist/ChecklistOverview.tsx- Added hover styles, edit and delete icons with hover effectsfrontend/src/components/checklist/ChecklistPage.tsx- Added delete checklist button with in-page confirmationfrontend/src/components/checklist/ItemRow.tsx- Replaced priority with category label, added in-page delete confirmation, hover indicatorsfrontend/src/components/checklist/AddItemForm.tsx- Removed priority selector, blank category defaultfrontend/src/components/ChecklistDemo.tsx- Updated demo to remove priority referencesTesting
Accessibility Improvements
confirm()popups with in-page confirmation dialogs for better accessibility and keyboard navigationOriginal prompt
Fixes #16
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.