fix: hide action buttons in TaskCard during title editing

- Updated TaskCard to conditionally render edit and delete buttons only when not in editing mode, improving user experience by preventing accidental actions while editing.
This commit is contained in:
Julien Froidefond
2025-09-17 11:52:20 +02:00
parent aa80580e8a
commit d3e7d171e4

View File

@@ -205,8 +205,8 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
)} )}
<div className="flex items-center gap-1 flex-shrink-0"> <div className="flex items-center gap-1 flex-shrink-0">
{/* Boutons d'action compacts */} {/* Boutons d'action compacts - masqués en mode édition */}
{onEdit && ( {!isEditingTitle && onEdit && (
<button <button
onClick={handleEdit} onClick={handleEdit}
className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs" className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs"
@@ -216,7 +216,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
</button> </button>
)} )}
{onDelete && ( {!isEditingTitle && onDelete && (
<button <button
onClick={handleDelete} onClick={handleDelete}
className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs" className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs"
@@ -284,8 +284,8 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
)} )}
<div className="flex items-center gap-1 flex-shrink-0"> <div className="flex items-center gap-1 flex-shrink-0">
{/* Bouton d'édition discret */} {/* Bouton d'édition discret - masqué en mode édition */}
{onEdit && ( {!isEditingTitle && onEdit && (
<button <button
onClick={handleEdit} onClick={handleEdit}
className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs" className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs"
@@ -295,8 +295,8 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
</button> </button>
)} )}
{/* Bouton de suppression discret */} {/* Bouton de suppression discret - masqué en mode édition */}
{onDelete && ( {!isEditingTitle && onDelete && (
<button <button
onClick={handleDelete} onClick={handleDelete}
className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs" className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs"