fix(mark): scroll into marks, add scroll margin and forwardRef

Closes #172

src/App.scss

@@ -141,6 +141,8 @@ li {
   color: black;
   letter-spacing: normal;
   border: 1px solid transparent;
+
+  scroll-margin-top: $header-height + $body-vertical-padding;
 }
 
 [data-dev='true'] {

src/components/PDFView/PdfMarkItem.tsx

@@ -2,6 +2,8 @@ import { CurrentUserMark } from '../../types/mark.ts'
 import styles from '../DrawPDFFields/style.module.scss'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
 import { useScale } from '../../hooks/useScale.tsx'
+import { forwardRef } from 'react'
+import { npubToHex } from '../../utils/nostr.ts'
 
 interface PdfMarkItemProps {
   userMark: CurrentUserMark
@@ -14,13 +16,11 @@ interface PdfMarkItemProps {
 /**
  * Responsible for display an individual Pdf Mark.
  */
-const PdfMarkItem = ({
+const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
-  selectedMark,
+  (
-  handleMarkClick,
+    { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
-  selectedMarkValue,
+    ref
-  userMark,
+  ) => {
-  pageWidth
-}: PdfMarkItemProps) => {
     const { location } = userMark.mark
     const handleClick = () => handleMarkClick(userMark.mark.id)
     const isEdited = () => selectedMark?.mark.id === userMark.mark.id
@@ -29,9 +29,16 @@ const PdfMarkItem = ({
     const { from } = useScale()
     return (
       <div
+        ref={ref}
         onClick={handleClick}
         className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
         style={{
+          backgroundColor: selectedMark?.mark.npub
+            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
+            : undefined,
+          borderColor: selectedMark?.mark.npub
+            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
+            : undefined,
           left: inPx(from(pageWidth, location.left)),
           top: inPx(from(pageWidth, location.top)),
           width: inPx(from(pageWidth, location.width)),
@@ -44,5 +51,6 @@ const PdfMarkItem = ({
       </div>
     )
   }
+)
 
 export default PdfMarkItem

src/components/PDFView/PdfPageItem.tsx

@@ -48,16 +48,15 @@ const PdfPageItem = ({
         alt={`page ${pageIndex + 1} of ${fileName}`}
       />
       {currentUserMarks.map((m, i) => (
-        <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
         <PdfMarkItem
           key={i}
+          ref={(el) => (markRefs.current[m.id] = el)}
           handleMarkClick={handleMarkClick}
           selectedMarkValue={selectedMarkValue}
           userMark={m}
           selectedMark={selectedMark}
           pageWidth={page.width}
         />
-        </div>
       ))}
       {otherUserMarks.map((m, i) => {
         return (