From 5086d8634054e203200031d498c7d369bc91bc23 Mon Sep 17 00:00:00 2001
From: Ricky Stretch <rick@stretchy.ca>
Date: Sat, 14 Mar 2026 16:45:06 -0400
Subject: [PATCH] v0.9.18 branding fixes

---
 .env.example                              |  2 +-
 backend/package.json                      |  2 +-
 build.sh                                  |  2 +-
 frontend/package.json                     |  2 +-
 frontend/src/components/BrandingModal.jsx | 38 ++++++++++-------------
 5 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/.env.example b/.env.example
index a9af81f..e2b15b5 100644
--- a/.env.example
+++ b/.env.example
@@ -10,7 +10,7 @@
 PROJECT_NAME=jama
 
 # Image version to run (set by build.sh, or use 'latest')
-JAMA_VERSION=0.9.17
+JAMA_VERSION=0.9.18
 
 # App port — the host port Docker maps to the container
 PORT=3000
diff --git a/backend/package.json b/backend/package.json
index 07c237b..f06824f 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jama-backend",
-  "version": "0.9.17",
+  "version": "0.9.18",
   "description": "TeamChat backend server",
   "main": "src/index.js",
   "scripts": {
diff --git a/build.sh b/build.sh
index 904ca8b..b16b319 100644
--- a/build.sh
+++ b/build.sh
@@ -13,7 +13,7 @@
 # ─────────────────────────────────────────────────────────────
 set -euo pipefail
 
-VERSION="${1:-0.9.17}"
+VERSION="${1:-0.9.18}"
 ACTION="${2:-}"
 REGISTRY="${REGISTRY:-}"
 IMAGE_NAME="jama"
diff --git a/frontend/package.json b/frontend/package.json
index 9184c83..0419707 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jama-frontend",
-  "version": "0.9.17",
+  "version": "0.9.18",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/BrandingModal.jsx b/frontend/src/components/BrandingModal.jsx
index f1a48c3..1fb3006 100644
--- a/frontend/src/components/BrandingModal.jsx
+++ b/frontend/src/components/BrandingModal.jsx
@@ -13,21 +13,13 @@ const COLOUR_SUGGESTIONS = [
 // A single colour picker card: shows suggestions by default, Custom button opens native picker
 function ColourPicker({ label, value, onChange, preview }) {
   const [mode, setMode] = useState('suggestions'); // 'suggestions' | 'custom'
-  const inputRef = useRef(null);
+  const [draft, setDraft] = useState(value);
 
-  // Auto-close custom mode as soon as a new colour is committed
-  const handleCustomChange = (e) => {
-    onChange(e.target.value);
-    // 'change' fires on close of native picker on most platforms;
-    // we also listen to 'input' for live preview but only close on 'change'
-  };
+  // Keep draft in sync if parent value changes (e.g. reset)
+  useEffect(() => { setDraft(value); }, [value]);
 
-  const handleCustomInput = (e) => {
-    onChange(e.target.value);
-  };
-
-  const handleCustomChangeClose = (e) => {
-    onChange(e.target.value);
+  const handleSet = () => {
+    onChange(draft);
     setMode('suggestions');
   };
 
@@ -62,7 +54,7 @@ function ColourPicker({ label, value, onChange, preview }) {
               />
             ))}
           </div>
-          <button className="btn btn-secondary btn-sm" onClick={() => setMode('custom')}>
+          <button className="btn btn-secondary btn-sm" onClick={() => { setDraft(value); setMode('custom'); }}>
             Custom
           </button>
         </>
@@ -70,26 +62,28 @@ function ColourPicker({ label, value, onChange, preview }) {
 
       {mode === 'custom' && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          {/* Colour input rendered as a large clickable swatch — works on mobile and desktop */}
+          {/* Large label-wrapped swatch triggers the colour input — reliable on mobile and desktop */}
           <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
             <span style={{
               display: 'inline-block', width: 56, height: 44,
-              borderRadius: 8, background: value,
+              borderRadius: 8, background: draft,
               border: '2px solid var(--border)',
               boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
               flexShrink: 0,
             }} />
             <input
-              ref={inputRef}
               type="color"
-              value={value}
-              onInput={handleCustomInput}
-              onChange={handleCustomChangeClose}
+              value={draft}
+              onInput={e => setDraft(e.target.value)}
+              onChange={e => setDraft(e.target.value)}
               style={{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }}
             />
-            <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{value}</span>
+            <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{draft}</span>
           </label>
-          <div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button className="btn btn-primary btn-sm" onClick={handleSet}>
+              Set
+            </button>
             <button className="btn btn-secondary btn-sm" onClick={() => setMode('suggestions')}>
               Back
             </button>