From a31b5891c2bec7fc4603e3d74e293d413a9288da Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Thu, 7 Nov 2024 17:26:49 +0100
Subject: [PATCH] Fix anotation style not changed according to existing
 annotation

---
 apps/readest-app/src-tauri/tauri.conf.json        |  2 +-
 .../app/reader/components/annotator/Annotator.tsx | 15 +++++++++++++--
 .../components/annotator/HighlightOptions.tsx     | 11 ++++++++---
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/readest-app/src-tauri/tauri.conf.json b/apps/readest-app/src-tauri/tauri.conf.json
index 330d8f82..fd56b373 100644
--- a/apps/readest-app/src-tauri/tauri.conf.json
+++ b/apps/readest-app/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Readest",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "identifier": "com.bilingify.digest",
   "build": {
     "frontendDist": "../out",
diff --git a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
index fc9f7e97..85ec6488 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -7,7 +7,7 @@ import { BsPencilSquare } from 'react-icons/bs';
 import { RiDeleteBinFill } from 'react-icons/ri';
 
 import { useEnv } from '@/context/EnvContext';
-import { BookNote } from '@/types/book';
+import { BookNote, HighlightColor, HighlightStyle } from '@/types/book';
 import { useReaderStore } from '@/store/readerStore';
 import { useFoliateEvents } from '../../hooks/useFoliateEvents';
 import { getPosition, Position } from '@/utils/sel';
@@ -40,6 +40,13 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [toastMessage, setToastMessage] = useState('');
   const [highlightOptionsVisible, setHighlightOptionsVisible] = useState(false);
 
+  const [selectedStyle, setSelectedStyle] = useState<HighlightStyle>(
+    globalReadSettings.highlightStyle,
+  );
+  const [selectedColor, setSelectedColor] = useState<HighlightColor>(
+    globalReadSettings.highlightStyles[selectedStyle],
+  );
+
   const popupWidthPx = 240;
   const popupHeightPx = 44;
   const popupPaddingPx = 10;
@@ -89,6 +96,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       range,
       index,
     };
+    setSelectedStyle(annotation.style!);
+    setSelectedColor(annotation.color!);
     setSelection(selection as TextSelection);
   };
 
@@ -262,7 +271,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
           </div>
           {highlightOptionsVisible && (
             <HighlightOptions
-              onHandleHighlight={handleHighlight}
               style={{
                 width: `${popupWidthPx}px`,
                 height: `${popupHeightPx}px`,
@@ -272,6 +280,9 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                   (highlightOptionsHeightPx + highlightOptionsPaddingPx) * (isPopupAbove ? -1 : 1)
                 }px`,
               }}
+              selectedStyle={selectedStyle}
+              selectedColor={selectedColor}
+              onHandleHighlight={handleHighlight}
             />
           )}
         </div>
diff --git a/apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx b/apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx
index 2565df9a..7f2a5f26 100644
--- a/apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx
@@ -10,10 +10,17 @@ const colors = ['red', 'violet', 'blue', 'green', 'yellow'] as HighlightColor[];
 
 interface HighlightOptionsProps {
   style: React.CSSProperties;
+  selectedStyle: HighlightStyle;
+  selectedColor: HighlightColor;
   onHandleHighlight: (update: boolean) => void;
 }
 
-const HighlightOptions: React.FC<HighlightOptionsProps> = ({ style, onHandleHighlight }) => {
+const HighlightOptions: React.FC<HighlightOptionsProps> = ({
+  style,
+  selectedStyle,
+  selectedColor,
+  onHandleHighlight,
+}) => {
   const { settings, setSettings } = useReaderStore();
   const globalReadSettings = settings.globalReadSettings;
 
@@ -28,8 +35,6 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({ style, onHandleHigh
     setSettings(settings);
     onHandleHighlight(true);
   };
-  const selectedStyle = globalReadSettings.highlightStyle;
-  const selectedColor = globalReadSettings.highlightStyles[selectedStyle];
   return (
     <div className='highlight-options absolute flex h-7 items-center justify-between' style={style}>
       <div className='flex h-7 gap-2'>