From 92f484b58232f82a406f2d8158a854aa1c74c5a5 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Mon, 21 Jul 2025 19:18:18 +0200
Subject: [PATCH] chore: improve quick commands selector ui

---
 components/SettingsUI.tsx/StatusGroup.tsx | 31 ++++++++---
 styles/components/settings.css            | 64 +++++++++++++++++++++++
 2 files changed, 87 insertions(+), 8 deletions(-)

diff --git a/components/SettingsUI.tsx/StatusGroup.tsx b/components/SettingsUI.tsx/StatusGroup.tsx
index 21844b5..4d18334 100644
--- a/components/SettingsUI.tsx/StatusGroup.tsx
+++ b/components/SettingsUI.tsx/StatusGroup.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { PluginSettings } from "@/types/pluginSettings";
-import { SettingItem } from "./SettingItem";
 
 export type StatusGroupProps = {
 	statuses: PluginSettings["customStatuses"];
@@ -30,22 +29,38 @@ export const StatusGroup: React.FC<StatusGroupProps> = ({
 					? `${status.templateId}:${status.name}`
 					: status.name;
 
+				const isSelected =
+					currentQuickCommands.includes(scopedStatusName);
+
 				return (
-					<SettingItem
+					<label
 						key={`${status.templateId || "custom"}:${status.name}`}
-						name={`${status.icon} ${status.name}`}
-						description={status.description || ""}
+						className={`status-selector ${isSelected ? "status-selector--selected" : ""}`}
 					>
+						<div className="status-selector__content">
+							<div className="status-selector__status">
+								<span className="status-selector__icon">
+									{status.icon}
+								</span>
+								<span className="status-selector__name">
+									{status.name}
+								</span>
+							</div>
+							{status.description && (
+								<div className="status-selector__description">
+									{status.description}
+								</div>
+							)}
+						</div>
 						<input
 							type="checkbox"
-							checked={currentQuickCommands.includes(
-								scopedStatusName,
-							)}
+							className="status-selector__checkbox"
+							checked={isSelected}
 							onChange={(e) =>
 								onToggle(scopedStatusName, e.target.checked)
 							}
 						/>
-					</SettingItem>
+					</label>
 				);
 			})}
 		</div>
diff --git a/styles/components/settings.css b/styles/components/settings.css
index 937f5e4..d983a80 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -287,6 +287,70 @@
 	gap: var(--size-2-2);
 }
 
+/* Status Selector for Quick Commands */
+.status-selector {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--size-2-3) var(--size-4-2);
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	background: var(--background-primary);
+	cursor: pointer;
+	transition: all var(--anim-duration-fast) ease;
+	position: relative;
+}
+
+.status-selector:hover {
+	background: var(--background-modifier-hover);
+	border-color: var(--background-modifier-border-hover);
+}
+
+.status-selector--selected {
+	background: var(--background-modifier-success);
+	border-color: var(--interactive-success);
+}
+
+.status-selector--selected:hover {
+	background: var(--background-modifier-success-hover);
+}
+
+.status-selector__content {
+	flex: 1;
+	min-width: 0;
+}
+
+.status-selector__status {
+	display: flex;
+	align-items: center;
+	gap: var(--size-2-2);
+	margin-bottom: var(--size-2-1);
+}
+
+.status-selector__icon {
+	font-size: var(--font-ui-medium);
+	width: var(--size-4-3);
+	text-align: center;
+	flex-shrink: 0;
+}
+
+.status-selector__name {
+	font-weight: var(--font-medium);
+	color: var(--text-normal);
+}
+
+.status-selector__description {
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+	line-height: var(--line-height-tight);
+}
+
+.status-selector__checkbox {
+	margin-left: var(--size-4-2);
+	pointer-events: none;
+	flex-shrink: 0;
+}
+
 /* Quick Commands Container */
 .quick-commands-container {
 	margin-top: var(--size-4-2);