From af2e0269009ecf14fff9f63f90f2167fe5327571 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Sun, 20 Jul 2025 21:05:51 +0200
Subject: [PATCH] feat: reorder arrows for custom statuses

---
 .../SettingsUI.tsx/CustomStatusItem.tsx       | 34 +++++++++++++++++
 .../SettingsUI.tsx/CustomStatusSettings.tsx   | 26 +++++++++++++
 styles/components/settings.css                | 38 +++++++++++++++++++
 3 files changed, 98 insertions(+)

diff --git a/components/SettingsUI.tsx/CustomStatusItem.tsx b/components/SettingsUI.tsx/CustomStatusItem.tsx
index 83eb70d..585f854 100644
--- a/components/SettingsUI.tsx/CustomStatusItem.tsx
+++ b/components/SettingsUI.tsx/CustomStatusItem.tsx
@@ -13,6 +13,10 @@ export type Props = {
 		value: string,
 	) => void;
 	onCustomStatusRemove: (index: number) => void;
+	onMoveUp?: (index: number) => void;
+	onMoveDown?: (index: number) => void;
+	canMoveUp?: boolean;
+	canMoveDown?: boolean;
 };
 
 export const CustomStatusItem: React.FC<Props> = ({
@@ -20,6 +24,10 @@ export const CustomStatusItem: React.FC<Props> = ({
 	index,
 	onCustomStatusChange,
 	onCustomStatusRemove,
+	onMoveUp,
+	onMoveDown,
+	canMoveUp = false,
+	canMoveDown = false,
 }) => {
 	const isValid = status.name.trim().length > 0;
 	const displayIcon = status.icon.trim() || "📝";
@@ -92,6 +100,32 @@ export const CustomStatusItem: React.FC<Props> = ({
 					/>
 				</div>
 
+				{/* Reorder buttons */}
+				{(onMoveUp || onMoveDown) && (
+					<div className="custom-status-item__field custom-status-item__field--reorder">
+						<div className="custom-status-item__reorder-buttons">
+							<button
+								onClick={() => onMoveUp && onMoveUp(index)}
+								aria-label="Move status up"
+								className="custom-status-item__reorder-btn"
+								title="Move status up"
+								disabled={!canMoveUp}
+							>
+								↑
+							</button>
+							<button
+								onClick={() => onMoveDown && onMoveDown(index)}
+								aria-label="Move status down"
+								className="custom-status-item__reorder-btn"
+								title="Move status down"
+								disabled={!canMoveDown}
+							>
+								↓
+							</button>
+						</div>
+					</div>
+				)}
+
 				{/* Remove button */}
 				<div className="custom-status-item__field custom-status-item__field--actions">
 					<button
diff --git a/components/SettingsUI.tsx/CustomStatusSettings.tsx b/components/SettingsUI.tsx/CustomStatusSettings.tsx
index e52a105..598dcce 100644
--- a/components/SettingsUI.tsx/CustomStatusSettings.tsx
+++ b/components/SettingsUI.tsx/CustomStatusSettings.tsx
@@ -45,6 +45,26 @@ export const CustomStatusSettings: React.FC<Props> = ({
 		}
 	};
 
+	const moveCustomStatusUp = (index: number) => {
+		if (index <= 0) return;
+		const currentStatuses = [...settings.customStatuses];
+		[currentStatuses[index - 1], currentStatuses[index]] = [
+			currentStatuses[index],
+			currentStatuses[index - 1],
+		];
+		onChange("customStatuses", currentStatuses);
+	};
+
+	const moveCustomStatusDown = (index: number) => {
+		if (index >= settings.customStatuses.length - 1) return;
+		const currentStatuses = [...settings.customStatuses];
+		[currentStatuses[index], currentStatuses[index + 1]] = [
+			currentStatuses[index + 1],
+			currentStatuses[index],
+		];
+		onChange("customStatuses", currentStatuses);
+	};
+
 	return (
 		<div>
 			<h3>Custom Statuses</h3>
@@ -84,6 +104,12 @@ export const CustomStatusSettings: React.FC<Props> = ({
 								settings={settings}
 								onCustomStatusChange={updateCustomStatus}
 								onCustomStatusRemove={removeCustomStatus}
+								onMoveUp={moveCustomStatusUp}
+								onMoveDown={moveCustomStatusDown}
+								canMoveUp={index > 0}
+								canMoveDown={
+									index < settings.customStatuses.length - 1
+								}
 							/>
 						))
 					)}
diff --git a/styles/components/settings.css b/styles/components/settings.css
index 6894e8a..c67cc1b 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -87,6 +87,11 @@
 	flex: 0 0 auto;
 }
 
+.custom-status-item__field--reorder {
+	flex: 0 0 auto;
+	padding-top: var(--size-4-1);
+}
+
 .custom-status-item__field--actions {
 	flex: 0 0 auto;
 	padding-top: var(--size-4-1);
@@ -156,6 +161,39 @@
 	transform: scale(1.05);
 }
 
+.custom-status-item__reorder-buttons {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.custom-status-item__reorder-btn {
+	width: 24px;
+	height: 24px;
+	border-radius: var(--radius-s);
+	background: var(--background-modifier-border);
+	color: var(--text-normal);
+	border: none;
+	cursor: pointer;
+	font-size: 12px;
+	font-weight: bold;
+	transition: all var(--anim-duration-fast) ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 1;
+}
+
+.custom-status-item__reorder-btn:hover:not(:disabled) {
+	background: var(--interactive-hover);
+	transform: scale(1.05);
+}
+
+.custom-status-item__reorder-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
 .custom-status-item__preview {
 	display: flex;
 	align-items: center;