From 681b4e1fa90be13f31776a2029361562ef4e8a69 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Fri, 20 Feb 2026 04:21:07 -0500
Subject: [PATCH] refactor: enhance area creation form with color picker and
 display area color in the card

---
 client/src/components/MiningAreasPanel.jsx | 27 +++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/client/src/components/MiningAreasPanel.jsx b/client/src/components/MiningAreasPanel.jsx
index 8c2c9b3..9abb251 100644
--- a/client/src/components/MiningAreasPanel.jsx
+++ b/client/src/components/MiningAreasPanel.jsx
@@ -76,6 +76,7 @@ export default function MiningAreasPanel({ turtles, selectedTurtle, apiUrl }) {
         setShowCreateForm(false);
         setNewArea({
           areaName: '',
+          color: '#4a8c2a',
           startX: '',
           startY: '',
           startZ: '',
@@ -261,6 +262,27 @@ export default function MiningAreasPanel({ turtles, selectedTurtle, apiUrl }) {
               />
             </div>
 
+            <div className="form-group">
+              <label>Area Color:</label>
+              <div className="color-picker-row">
+                <input
+                  type="color"
+                  value={newArea.color}
+                  onChange={(e) => setNewArea({ ...newArea, color: e.target.value })}
+                  className="color-input"
+                />
+                {['#4a8c2a', '#345ec3', '#c9a000', '#cc3333', '#8833cc', '#33aacc', '#cc6633'].map(c => (
+                  <button
+                    key={c}
+                    type="button"
+                    className={`color-swatch ${newArea.color === c ? 'active' : ''}`}
+                    style={{ backgroundColor: c }}
+                    onClick={() => setNewArea({ ...newArea, color: c })}
+                  />
+                ))}
+              </div>
+            </div>
+
             <div className="form-group">
               <label>Assign Turtle:</label>
               <select
@@ -366,7 +388,10 @@ export default function MiningAreasPanel({ turtles, selectedTurtle, apiUrl }) {
             return (
               <div key={area.areaID} className={`area-card ${conflicts.length > 0 ? 'has-conflict' : ''}`}>
                 <div className="area-header">
-                  <h3>{area.areaName}</h3>
+                  <div className="area-title-row">
+                    <span className="area-color-dot" style={{ backgroundColor: area.color || '#4a8c2a' }} />
+                    <h3>{area.areaName}</h3>
+                  </div>
                   <StatusBadge status={area.status} />
                 </div>