#34

frontend/src/pages/users/SettingPage.tsx

@@ -71,6 +71,7 @@ type SharedSectionProps = {
     selectedTheme:         ClientTheme
     draftTagColours:       ThemeTagColours
     onThemeChange:         (themeId: ActiveThemeId) => void
+    onEnsureEditableTheme: () => void
     onTagColourChange:     (category: Category, colour: string) => void
     onResetAllTagColours:  () => void
     onResetTagColour:      (category: Category) => void
@@ -252,6 +253,7 @@ const ThemeSection: FC<SharedSectionProps> = ({
     draftCustomThemes,
     selectedTheme,
     draftTagColours,
+    onEnsureEditableTheme,
     onResetAllTagColours,
     onResetTagColour,
     onTagColourChange,
@@ -331,6 +333,8 @@ const ThemeSection: FC<SharedSectionProps> = ({
 		      <input
 			  type="color"
 			  value={draftTagColours[category]}
+			  onPointerDown={onEnsureEditableTheme}
+			  onFocus={onEnsureEditableTheme}
 			  onChange={ev => onTagColourChange (category, ev.target.value)}
 			  className="h-10 w-16 cursor-pointer rounded border border-border
 				     bg-transparent p-1"/>
@@ -514,6 +518,21 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
     }
   }
 
+  const handleEnsureEditableTheme = (): {
+      activeThemeId: ActiveThemeId
+      customThemes:  Record<string, CustomClientTheme>
+  } => {
+    const editable = ensureEditableCustomTheme ()
+
+    if (editable.activeThemeId !== draftActiveThemeId
+	|| editable.customThemes !== draftCustomThemes)
+      {
+	applyDraftThemeSelection (editable.activeThemeId, editable.customThemes)
+      }
+
+    return editable
+  }
+
   const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
     const currentIndex = tabs.findIndex (tab => tab.id === activeTab)
 
@@ -677,8 +696,11 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       onThemeChange: themeId => {
 	  applyDraftThemeSelection (themeId, draftCustomThemes)
       },
+      onEnsureEditableTheme: () => {
+	  handleEnsureEditableTheme ()
+      },
       onTagColourChange: (category, colour) => {
-	  const editable = ensureEditableCustomTheme ()
+	  const editable = handleEnsureEditableTheme ()
 	  const editableTheme = editable.customThemes[editable.activeThemeId]
 	  const nextCustomThemes = {
 	      ...editable.customThemes,