Bump/embed pdfv2.8.0 (#5921)

please merge #5919, alternatively, just push this and delete that PR
because this is a continuation of that.

This PR bumps the embed PDF version to 2.8.0 and also adds comments
functionaliy

---------

Co-authored-by: ConnorYoh <[email protected]>
Co-authored-by: Anthony Stirling <[email protected]>

frontend/src/core/components/annotation/shared/ColorControl.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Tooltip, Popover, Stack, ColorSwatch, ColorPicker as MantineColorPicker, Group } from '@mantine/core';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import ColorizeIcon from '@mui/icons-material/Colorize';
 
 // safari and firefox do not support the eye dropper API, only edge, chrome and opera do.
@@ -20,6 +20,11 @@ interface ColorControlProps {
 
 export function ColorControl({ value, onChange, label, disabled = false }: ColorControlProps) {
   const [opened, setOpened] = useState(false);
+  // Buffer the colour locally so the picker stays responsive during drag.
+  // Only propagate to the parent (which triggers expensive annotation updates)
+  // on onChangeEnd (mouse-up / swatch click), preventing infinite re-render loops.
+  const [localColor, setLocalColor] = useState(value);
+  useEffect(() => { setLocalColor(value); }, [value]);
 
   const handleEyeDropper = useCallback(async () => {
     if (!supportsEyeDropper) return;
@@ -56,7 +61,7 @@ export function ColorControl({ value, onChange, label, disabled = false }: Color
               },
             }}
           >
-            <ColorSwatch color={value} size={18} />
+            <ColorSwatch color={localColor} size={18} />
           </ActionIcon>
         </Tooltip>
       </Popover.Target>
@@ -64,8 +69,9 @@ export function ColorControl({ value, onChange, label, disabled = false }: Color
         <Stack gap="xs">
           <MantineColorPicker
             format="hex"
-            value={value}
-            onChange={onChange}
+            value={localColor}
+            onChange={setLocalColor}
+            onChangeEnd={onChange}
             swatches={[
               '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
               '#ffff00', '#ff00ff', '#00ffff', '#ffa500', 'transparent'
@@ -76,7 +82,7 @@ export function ColorControl({ value, onChange, label, disabled = false }: Color
           {supportsEyeDropper && (
             <Group justify="flex-end">
               <Tooltip label="Pick colour from screen">
-                <ActionIcon variant="subtle" color="gray" size="sm" onClick={handleEyeDropper}>
+                <ActionIcon variant="subtle" color="gray" size="sm" onClick={handleEyeDropper} style={{ color: 'var(--text-primary)' }}>
                   <ColorizeIcon style={{ fontSize: 16 }} />
                 </ActionIcon>
               </Tooltip>

frontend/src/core/components/annotation/shared/PropertiesPopover.tsx

@@ -1,17 +1,20 @@
 import { ActionIcon, Tooltip, Popover, Stack, Slider, Text, Group, Button } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
+import type { TrackedAnnotation } from '@embedpdf/plugin-annotation';
+import type { PdfAnnotationObject } from '@embedpdf/models';
+import type { AnnotationPatch } from '@app/components/viewer/viewerTypes';
 import TuneIcon from '@mui/icons-material/Tune';
 import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 
-type AnnotationType = 'text' | 'note' | 'shape';
+export type PropertiesAnnotationType = 'text' | 'note' | 'shape';
 
 interface PropertiesPopoverProps {
-  annotationType: AnnotationType;
-  annotation: any;
-  onUpdate: (patch: Record<string, any>) => void;
+  annotationType: PropertiesAnnotationType;
+  annotation: TrackedAnnotation<PdfAnnotationObject> | undefined;
+  onUpdate: (patch: AnnotationPatch) => void;
   disabled?: boolean;
 }
 
@@ -24,7 +27,15 @@ export function PropertiesPopover({
   const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
 
-  const obj = annotation?.object;
+  interface AnnotationObjectProps {
+    fontSize?: number;
+    textAlign?: number | string;
+    opacity?: number;
+    borderWidth?: number;
+    strokeWidth?: number;
+  }
+
+  const obj = annotation?.object as (PdfAnnotationObject & AnnotationObjectProps) | undefined;
 
   // Get current values
   const fontSize = obj?.fontSize ?? 14;