From 3a034d3442bfa4f845944be0532595e28ae62f82 Mon Sep 17 00:00:00 2001
From: Oliver <oli@worldbrain.io>
Date: Sat, 27 Jul 2024 15:55:34 +0200
Subject: [PATCH] Fix a bunch of bugs related to the color picker UX

---
 external/@worldbrain/memex-common             |  2 +-
 .../components/highlightColorPicker/index.tsx | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
index b1a422f1e9..ce9e3de309 160000
--- a/external/@worldbrain/memex-common
+++ b/external/@worldbrain/memex-common
@@ -1 +1 @@
-Subproject commit b1a422f1e94e4fb2dbd0f12dfb46ed934613e890
+Subproject commit ce9e3de30903657ffecf1d0bd3c4ca56c586ee3d
diff --git a/src/annotations/components/highlightColorPicker/index.tsx b/src/annotations/components/highlightColorPicker/index.tsx
index aa78a80825..de3001336e 100644
--- a/src/annotations/components/highlightColorPicker/index.tsx
+++ b/src/annotations/components/highlightColorPicker/index.tsx
@@ -118,14 +118,14 @@ export default class HighlightColorPicker extends React.Component<
     }
 
     componentWillUnmount(): void {
-        if (this.state.highlightColorStateChanged) {
-            this.saveHighlightColorSettings()
-        }
+        // if (this.state.highlightColorStateChanged) {
+        //     this.saveHighlightColorSettings()
+        // }
     }
 
-    getHighlightColorSettings = async () => {
+    getHighlightColorSettings = async (forceUpdate?) => {
         let highlightColors = this.state.highlightColorSettingState
-        if (!highlightColors) {
+        if (!highlightColors || forceUpdate) {
             highlightColors = await this.syncSettings.highlightColors.get(
                 'highlightColors',
             )
@@ -176,6 +176,9 @@ export default class HighlightColorPicker extends React.Component<
                 modifyDomHighlightColor(highlight, colorItem)
             }
         }
+        this.setState({
+            highlightColorSettingState: this.state.highlightColorSettingState,
+        })
 
         await this.syncSettings.highlightColors.set(
             'highlightColors',
@@ -195,11 +198,12 @@ export default class HighlightColorPicker extends React.Component<
                 onClick={(event) => {
                     event.stopPropagation()
                 }}
+                key={'ColorEditBox' + index}
             >
                 <TopBarBox>
                     <PrimaryAction
                         label={'Cancel'}
-                        onClick={(event) => {
+                        onClick={async (event) => {
                             let highlights: NodeListOf<Element> = document.querySelectorAll(
                                 '.' + DEF_HIGHLIGHT_CSS_CLASS,
                             )
@@ -225,11 +229,10 @@ export default class HighlightColorPicker extends React.Component<
                             const newShowEditColor = [
                                 ...this.state.showEditColor,
                             ]
+
+                            this.getHighlightColorSettings(true)
                             newShowEditColor[index] = false
                             this.setState({
-                                highlightColorSettingState: [
-                                    ...this.state.highlightColorSettingState,
-                                ],
                                 showColorEditorPanel: false,
                                 showEditColor: newShowEditColor,
                             })
@@ -465,6 +468,7 @@ export default class HighlightColorPicker extends React.Component<
                                         }}
                                         active={this.state.showEditColor[i]}
                                         selected={this.state.selectedRow === i}
+                                        key={colorId}
                                     >
                                         <ColorPickerCircle
                                             backgroundColor={RGBAobjectToString(