Fix anotation style not changed according to existing annotation

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",

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>

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'>