put back trash can

Author: ilicfilip

assets/css/page-widgets/todo.css

@@ -191,10 +191,61 @@
 	&:not(:has(.prpl-suggested-task)) {
 		display: none;
 	}
+
+	.prpl-suggested-task-points-wrapper {
+		position: relative;
+	}
+
+	.prpl-suggested-task-points {
+		position: absolute;
+		right: 0;
+		transition: all 0.3s ease-in-out;
+		color: #38296d;
+		background-color: #d1d5db;
+	}
+
+	.prpl-suggested-task-button {
+
+		&.trash {
+			display: inline-block;
+			margin-left: auto;
+			flex-shrink: 0;
+			width: 1.25rem;
+			height: 1.25rem;
+			opacity: 0;
+			transition: opacity 0.3s ease-in-out;
+
+			&:hover {
+
+				svg path {
+					fill: var(--prpl-color-accent-red);
+				}
+			}
+		}
+	}
+
+	.prpl-suggested-task:hover {
+
+		.prpl-suggested-task-points {
+			right: 100%;
+			transform: translateX(100%);
+		}
+
+		.prpl-suggested-task-button {
+			opacity: 1;
+		}
+	}
 }
 
 #todo-list {
 
+	.prpl-suggested-task-button {
+
+		&.trash {
+			display: none;
+		}
+	}
+
 	&:has(.prpl-loader) {
 		position: relative;
 

assets/css/suggested-task.css

@@ -2,7 +2,7 @@
 	margin: 0;
 	padding: 0.75rem 0.5rem 0.625rem 0.5rem;
 	display: grid;
-	grid-template-columns: 1.5rem 1fr 2rem;
+	grid-template-columns: 1.5rem 1fr 3.5rem;
 	gap: 0.25rem 0.5rem;
 	position: relative;
 	line-height: 1;

views/js-templates/suggested-task.html

@@ -25,6 +25,13 @@ <h3 class="prpl-task-title">
 					+{{ data.post.meta.prpl_points }}
 				</span>
 			<# } #>
+
+			<# if ( 'user' === data.post.prpl_category.slug ) { #>
+				<button type="button" class="prpl-suggested-task-button trash" data-post-id="{{ data.post.id }}" title="{{ data.l10n.delete }}" onclick="prplSuggestedTask.trash( {{ data.post.id }} );">
+					<svg role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#9ca3af" d="M32.99 47.88H15.01c-3.46 0-6.38-2.7-6.64-6.15L6.04 11.49l-.72.12c-.82.14-1.59-.41-1.73-1.22-.14-.82.41-1.59 1.22-1.73.79-.14 1.57-.26 2.37-.38h.02c2.21-.33 4.46-.6 6.69-.81v-.72c0-3.56 2.74-6.44 6.25-6.55 2.56-.08 5.15-.08 7.71 0 3.5.11 6.25 2.99 6.25 6.55v.72c2.24.2 4.48.47 6.7.81.79.12 1.59.25 2.38.39.82.14 1.36.92 1.22 1.73-.14.82-.92 1.36-1.73 1.22l-.72-.12-2.33 30.24c-.27 3.45-3.18 6.15-6.64 6.15Zm-17.98-3h17.97c1.9 0 3.51-1.48 3.65-3.38l2.34-30.46c-2.15-.3-4.33-.53-6.48-.7h-.03c-5.62-.43-11.32-.43-16.95 0h-.03c-2.15.17-4.33.4-6.48.7l2.34 30.46c.15 1.9 1.75 3.38 3.65 3.38ZM24 7.01c2.37 0 4.74.07 7.11.22v-.49c0-1.93-1.47-3.49-3.34-3.55-2.5-.08-5.03-.08-7.52 0-1.88.06-3.34 1.62-3.34 3.55v.49c2.36-.15 4.73-.22 7.11-.22Zm5.49 32.26h-.06c-.83-.03-1.47-.73-1.44-1.56l.79-20.65c.03-.83.75-1.45 1.56-1.44.83.03 1.47.73 1.44 1.56l-.79 20.65c-.03.81-.7 1.44-1.5 1.44Zm-10.98 0c-.8 0-1.47-.63-1.5-1.44l-.79-20.65c-.03-.83.61-1.52 1.44-1.56.84 0 1.52.61 1.56 1.44l.79 20.65c.03.83-.61 1.52-1.44 1.56h-.06Z"></path></svg>
+					<span class="screen-reader-text">{{ data.l10n.delete }}</span>
+				</button>
+			<# } #>
 		</div>
 
 		<# if ( 'user' === data.post.prpl_category.slug ) { #>