v0.9.79 colour picker update

frontend/src/components/MobileEventForm.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import { api } from '../utils/api.js';
+import ColourPickerSheet from './ColourPickerSheet.jsx';
 import { useToast } from '../contexts/ToastContext.jsx';
 
 // ── Utilities ─────────────────────────────────────────────────────────────────
@@ -193,6 +194,7 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
   const [showAddType, setShowAddType] = useState(false);
   const [newTypeName, setNewTypeName] = useState('');
   const [newTypeColour, setNewTypeColour] = useState('#6366f1');
+  const [showTypeColourPicker, setShowTypeColourPicker] = useState(false);
   const [savingType, setSavingType] = useState(false);
   const [sd, setSd] = useState(event ? toDateIn(event.start_at) : def);
   const [st, setSt] = useState(event ? toTimeIn(event.start_at) : '09:00');
@@ -377,6 +379,9 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
       {showStartDate && <CalendarPicker value={sd} onChange={v=>{setSd(v);setShowStartDate(false);}} onClose={()=>setShowStartDate(false)}/>}
       {showEndDate   && <CalendarPicker value={ed} onChange={v=>{setEd(v);setShowEndDate(false);}} onClose={()=>setShowEndDate(false)}/>}
       {showRecurrence && <RecurrenceSheet value={recRule} onChange={v=>{setRecRule(v);}} onClose={()=>setShowRecurrence(false)}/>}
+      {showTypeColourPicker && (
+        <ColourPickerSheet value={newTypeColour} onChange={setNewTypeColour} onClose={()=>setShowTypeColourPicker(false)} title="Event Type Colour"/>
+      )}
       {showAddType && (
         <div style={{ position:'fixed',inset:0,zIndex:200,display:'flex',alignItems:'flex-end' }} onClick={e=>e.target===e.currentTarget&&setShowAddType(false)}>
           <div style={{ width:'100%',background:'var(--surface)',borderRadius:'16px 16px 0 0',padding:20,boxShadow:'0 -4px 20px rgba(0,0,0,0.2)' }}>
@@ -394,7 +399,7 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
             />
             <div style={{ display:'flex',alignItems:'center',gap:12,marginBottom:16 }}>
               <label style={{ fontSize:14,color:'var(--text-tertiary)',flexShrink:0 }}>Colour</label>
-              <input type="color" value={newTypeColour} onChange={e=>setNewTypeColour(e.target.value)} style={{ flex:1,height:40,border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:3,cursor:'pointer' }}/>
+              <button onClick={()=>setShowTypeColourPicker(true)} style={{ flex:1,height:40,borderRadius:'var(--radius)',border:'2px solid var(--border)',background:newTypeColour,cursor:'pointer' }}/>
             </div>
             <button
               onClick={createEventType}