From 754e781c69dca7748c10c6e9f7a7e0d29cfae6b6 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Mon, 21 Jul 2025 19:10:29 +0200
Subject: [PATCH] chore: improve grouped view

---
 .../components/StatusGroup.tsx                |  7 +++-
 components/SettingsUI.tsx/StatusGroup.tsx     |  8 ++--
 .../StatusFileInfoPopup.tsx                   |  8 ++--
 styles/components/file-explorer.css           | 23 ++++++++---
 styles/components/grouped-view.css            | 38 +++++++++++++++++--
 styles/components/settings.css                | 21 +++++++---
 6 files changed, 82 insertions(+), 23 deletions(-)

diff --git a/components/GroupedStatusView/components/StatusGroup.tsx b/components/GroupedStatusView/components/StatusGroup.tsx
index 58b6af0..8a34f9c 100644
--- a/components/GroupedStatusView/components/StatusGroup.tsx
+++ b/components/GroupedStatusView/components/StatusGroup.tsx
@@ -47,7 +47,10 @@ export const StatusGroup = ({
 
 	return (
 		<div className="grouped-status-group">
-			<div className="grouped-status-group-header" onClick={handleToggle}>
+			<div
+				className="grouped-status-group__header"
+				onClick={handleToggle}
+			>
 				<div className="grouped-status-group__status">
 					<StatusDisplay
 						status={
@@ -61,7 +64,7 @@ export const StatusGroup = ({
 						</span>
 					)}
 				</div>
-				<div className="grouped-status-group-info">
+				<div className="grouped-status-group__info">
 					<CollapsibleCounter
 						count={files.length}
 						isCollapsed={!isExpanded}
diff --git a/components/SettingsUI.tsx/StatusGroup.tsx b/components/SettingsUI.tsx/StatusGroup.tsx
index cdee693..56d391a 100644
--- a/components/SettingsUI.tsx/StatusGroup.tsx
+++ b/components/SettingsUI.tsx/StatusGroup.tsx
@@ -18,13 +18,13 @@ export const StatusGroup: React.FC<StatusGroupProps> = ({
 	onToggle,
 }) => (
 	<div className="status-group">
-		<div className="status-group-header">
-			<div className="status-group-title">{title}</div>
+		<div className="status-group__header">
+			<div className="status-group__title">{title}</div>
 			{description && (
-				<div className="status-group-description">{description}</div>
+				<div className="status-group__description">{description}</div>
 			)}
 		</div>
-		<div className="status-group-items">
+		<div className="status-group__items">
 			{statuses.map((status) => (
 				<SettingItem
 					key={`${status.templateId || "custom"}:${status.name}`}
diff --git a/components/StatusFileInfoPopup/StatusFileInfoPopup.tsx b/components/StatusFileInfoPopup/StatusFileInfoPopup.tsx
index 6cd42c7..e1011a2 100644
--- a/components/StatusFileInfoPopup/StatusFileInfoPopup.tsx
+++ b/components/StatusFileInfoPopup/StatusFileInfoPopup.tsx
@@ -29,16 +29,16 @@ export const StatusFileInfoPopup: React.FC<Props> = ({ statuses }) => {
 			<div className="status-popup-content">
 				{statusEntries.map(([groupName, statusList]) => (
 					<div key={groupName} className="status-group">
-						<div className="status-group-header">
-							<span className="status-group-name">
+						<div className="status-group__header">
+							<span className="status-group__name">
 								{groupName.toLowerCase()}
 							</span>
-							<span className="status-group-count">
+							<span className="status-group__count">
 								{statusList.length}
 							</span>
 						</div>
 
-						<div className="status-group-items">
+						<div className="status-group__items">
 							{statusList.map((status, index) => (
 								<div
 									key={`${groupName}-${index}`}
diff --git a/styles/components/file-explorer.css b/styles/components/file-explorer.css
index 2ad913c..42fbc3b 100644
--- a/styles/components/file-explorer.css
+++ b/styles/components/file-explorer.css
@@ -112,7 +112,7 @@
 	margin-bottom: 0;
 }
 
-.status-group-header {
+.status-group__header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -120,26 +120,39 @@
 	background: var(--background-secondary-alt);
 	border-radius: var(--radius-s);
 	margin-bottom: var(--size-2-2);
+	border: 1px solid var(--background-modifier-border);
+	transition: background var(--anim-duration-fast) ease;
 }
 
-.status-group-name {
+.status-group__header:hover {
+	background: var(--background-modifier-hover);
+}
+
+.status-group__name {
 	text-transform: capitalize;
 	font-weight: var(--font-medium);
 	font-size: var(--font-ui-smaller);
+	color: var(--text-normal);
 }
 
-.status-group-count {
-	padding: 1px var(--size-2-2);
+.status-group__count {
+	display: inline-flex;
+	align-items: center;
+	padding: var(--size-2-1) var(--size-2-2);
 	background: var(--background-modifier-border);
 	border-radius: var(--radius-s);
 	font-size: var(--font-ui-smaller);
 	color: var(--text-muted);
+	font-weight: var(--font-medium);
+	min-width: 20px;
+	justify-content: center;
 }
 
-.status-group-items {
+.status-group__items {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 	gap: var(--size-2-2);
+	padding: 0 var(--size-2-1);
 }
 
 .status-item {
diff --git a/styles/components/grouped-view.css b/styles/components/grouped-view.css
index e8c5b0e..372938b 100644
--- a/styles/components/grouped-view.css
+++ b/styles/components/grouped-view.css
@@ -83,25 +83,57 @@
 	border: 1px solid var(--background-modifier-border);
 	border-radius: var(--radius-m);
 	overflow: hidden;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	transition: box-shadow var(--anim-duration-fast) ease;
 }
 
-.grouped-status-group-header {
+.grouped-status-group:hover {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.grouped-status-group__header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding: var(--size-4-2) var(--size-4-3);
 	cursor: pointer;
 	transition: background var(--anim-duration-fast) ease;
+	position: relative;
 }
 
-.grouped-status-group-header:hover {
+.grouped-status-group__header:hover {
 	background: var(--background-modifier-hover);
 }
 
-.grouped-status-group-info {
+.grouped-status-group__header:focus {
+	outline: 2px solid var(--color-accent);
+	outline-offset: -2px;
+}
+
+.grouped-status-group__status {
 	display: flex;
 	align-items: center;
 	gap: var(--size-2-2);
+	min-width: 0;
+	flex: 1;
+}
+
+.grouped-status-group__template-badge {
+	display: inline-flex;
+	align-items: center;
+	padding: var(--size-2-1) var(--size-2-2);
+	background: var(--background-modifier-border);
+	border-radius: var(--radius-s);
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+	font-weight: var(--font-medium);
+}
+
+.grouped-status-group__info {
+	display: flex;
+	align-items: center;
+	gap: var(--size-2-2);
+	margin-left: auto;
 }
 
 /* Files List */
diff --git a/styles/components/settings.css b/styles/components/settings.css
index c67cc1b..937f5e4 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -256,24 +256,35 @@
 /* Status Group for Quick Commands */
 .status-group {
 	margin-bottom: var(--size-4-4);
+	padding: var(--size-4-3);
+	background: var(--background-primary-alt);
+	border-radius: var(--radius-m);
+	border: 1px solid var(--background-modifier-border);
 }
 
-.status-group-header {
+.status-group__header {
 	margin-bottom: var(--size-4-2);
+	padding-bottom: var(--size-2-2);
+	border-bottom: 1px solid var(--background-modifier-border);
 }
 
-.status-group-title {
+.status-group__title {
 	font-weight: var(--font-semibold);
+	color: var(--text-normal);
+	font-size: var(--font-ui-medium);
 }
 
-.status-group-description {
+.status-group__description {
 	font-size: var(--font-ui-smaller);
 	color: var(--text-muted);
 	margin-top: var(--size-2-1);
+	line-height: var(--line-height-tight);
 }
 
-.status-group-items {
-	margin-left: var(--size-4-2);
+.status-group__items {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-2-2);
 }
 
 /* Quick Commands Container */