src/components/FileList/style.module.scss

@@ -48,17 +48,17 @@
   flex-grow: 1;
   font-size: 16px;
   font-weight: 500;
+
+  &.active {
+    background: #4c82a3;
+    color: white;
+  }
 }
 
 .fileItem:hover {
   transition: ease 0.2s;
   background: #4c82a3;
   color: white;
-
-  &.active {
-    background: #4c82a3;
-    color: white;
-  }
 }
 
 .fileName {

src/components/PDFView/PdfItem.tsx

@@ -1,6 +1,6 @@
 import { PdfFile } from '../../types/drawing.ts'
 import { CurrentUserMark } from '../../types/mark.ts'
-import PdfPageItem  from './PdfPageItem.tsx';
+import PdfPageItem from './PdfPageItem.tsx'
 
 interface PdfItemProps {
   pdfFile: PdfFile
@@ -13,12 +13,20 @@ interface PdfItemProps {
 /**
  * Responsible for displaying pages of a single Pdf File.
  */
-const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
-  const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
-    return marks.filter((m) => m.mark.location.page === page);
+const PdfItem = ({
+  pdfFile,
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark
+}: PdfItemProps) => {
+  const filterByPage = (
+    marks: CurrentUserMark[],
+    page: number
+  ): CurrentUserMark[] => {
+    return marks.filter((m) => m.mark.location.page === page)
   }
-  return (
-    pdfFile.pages.map((page, i) => {
+  return pdfFile.pages.map((page, i) => {
     return (
       <PdfPageItem
         page={page}
@@ -29,7 +37,7 @@ const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue
         selectedMark={selectedMark}
       />
     )
-  }))
+  })
 }
 
 export default PdfItem

src/components/PDFView/PdfMarking.tsx

@@ -126,6 +126,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
           {currentUserMarks?.length > 0 && (
             <div className={styles.pdfView}>
               <PdfView
+                currentFile={currentFile}
                 files={files}
                 handleMarkClick={handleMarkClick}
                 selectedMarkValue={selectedMarkValue}

src/components/PDFView/PdfPageItem.tsx

@@ -2,6 +2,7 @@ import styles from '../DrawPDFFields/style.module.scss'
 import { PdfPage } from '../../types/drawing.ts'
 import { CurrentUserMark } from '../../types/mark.ts'
 import PdfMarkItem from './PdfMarkItem.tsx'
+import { useEffect, useRef } from 'react'
 interface PdfPageProps {
   page: PdfPage
   currentUserMarks: CurrentUserMark[]
@@ -13,7 +14,22 @@ interface PdfPageProps {
 /**
  * Responsible for rendering a single Pdf Page and its Marks
  */
-const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
+const PdfPageItem = ({
+  page,
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark
+}: PdfPageProps) => {
+  useEffect(() => {
+    if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
+      markRefs.current[selectedMark.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  }, [selectedMark])
+  const markRefs = useRef<(HTMLDivElement | null)[]>([])
   return (
     <div
       className={styles.pdfImageWrapper}
@@ -23,14 +39,9 @@ const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValu
         marginTop: '10px'
       }}
     >
-      <img
-        draggable="false"
-        src={page.image}
-        style={{ width: '100%'}}
-
-      />
-      {
-        currentUserMarks.map((m, i) => (
+      <img draggable="false" src={page.image} style={{ width: '100%' }} />
+      {currentUserMarks.map((m, i) => (
+        <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
           <PdfMarkItem
             key={i}
             handleMarkClick={handleMarkClick}
@@ -38,6 +49,7 @@ const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValu
             userMark={m}
             selectedMark={selectedMark}
           />
+        </div>
       ))}
     </div>
   )

src/components/PDFView/index.tsx

@@ -1,7 +1,8 @@
-import { Box } from '@mui/material'
+import { Box, Divider } from '@mui/material'
 import PdfItem from './PdfItem.tsx'
 import { CurrentUserMark } from '../../types/mark.ts'
 import { CurrentUserFile } from '../../types/file.ts'
+import { useEffect, useRef } from 'react'
 
 interface PdfViewProps {
   files: CurrentUserFile[]
@@ -9,6 +10,7 @@ interface PdfViewProps {
   handleMarkClick: (id: number) => void
   selectedMarkValue: string
   selectedMark: CurrentUserMark | null
+  currentFile: CurrentUserFile | null
 }
 
 /**
@@ -19,29 +21,48 @@ const PdfView = ({
   currentUserMarks,
   handleMarkClick,
   selectedMarkValue,
-  selectedMark
+  selectedMark,
+  currentFile
 }: PdfViewProps) => {
+  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
+  useEffect(() => {
+    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
+      pdfRefs.current[currentFile.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  }, [currentFile])
   const filterByFile = (
     currentUserMarks: CurrentUserMark[],
-    hash: string
+    fileName: string
   ): CurrentUserMark[] => {
     return currentUserMarks.filter(
-      (currentUserMark) => currentUserMark.mark.pdfFileHash === hash
+      (currentUserMark) => currentUserMark.mark.fileName === fileName
     )
   }
+  const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
+    !(index !== files.length - 1)
   return (
     <Box sx={{ width: '100%' }}>
-      {files.map(({ pdfFile, hash }, i) => {
+      {files.map((currentUserFile, index, arr) => {
+        const { hash, pdfFile, filename, id } = currentUserFile
         if (!hash) return
         return (
+          <div
+            id={pdfFile.file.name}
+            ref={(el) => (pdfRefs.current[id] = el)}
+            key={index}
+          >
             <PdfItem
               pdfFile={pdfFile}
-            key={i}
-            currentUserMarks={filterByFile(currentUserMarks, hash)}
+              currentUserMarks={filterByFile(currentUserMarks, filename)}
               selectedMark={selectedMark}
               handleMarkClick={handleMarkClick}
               selectedMarkValue={selectedMarkValue}
             />
+            {isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
+          </div>
         )
       })}
     </Box>

src/pages/create/index.tsx

@@ -338,12 +338,15 @@ export const CreatePage = () => {
       fileHashes[file.name] = hash
     }
 
+    console.log('file hashes: ', fileHashes)
+
     return fileHashes
   }
 
   const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
-    return drawnPdfs.flatMap((drawnPdf) => {
-      const fileHash = fileHashes[drawnPdf.file.name];
+    return drawnPdfs
+      .flatMap((drawnPdf) => {
+        const fileHash = fileHashes[drawnPdf.file.name]
         return drawnPdf.pages.flatMap((page, index) => {
           return page.drawnFields.map((drawnField) => {
             return {
@@ -353,17 +356,18 @@ export const CreatePage = () => {
                 top: drawnField.top,
                 left: drawnField.left,
                 height: drawnField.height,
-              width: drawnField.width,
+                width: drawnField.width
               },
               npub: drawnField.counterpart,
-            pdfFileHash: fileHash
+              pdfFileHash: fileHash,
+              fileName: drawnPdf.file.name
             }
           })
         })
       })
       .map((mark, index) => {
         return { ...mark, id: index }
-      });
+      })
   }
 
   // Handle errors during zip file generation
@@ -431,13 +435,9 @@ export const CreatePage = () => {
 
     if (!arraybuffer) return null
 
-    return new File(
-      [new Blob([arraybuffer])],
-      `${unixNow}.sigit.zip`,
-      {
+    return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
       type: 'application/zip'
-      }
-    )
+    })
   }
 
   // Handle errors during file upload
@@ -545,9 +545,7 @@ export const CreatePage = () => {
         : viewers.map((viewer) => viewer.pubkey)
     ).filter((receiver) => receiver !== usersPubkey)
 
-    return receivers.map((receiver) =>
-      sendNotification(receiver, meta)
-    )
+    return receivers.map((receiver) => sendNotification(receiver, meta))
   }
 
   const handleCreate = async () => {

src/types/mark.ts

@@ -14,6 +14,7 @@ export interface Mark {
   pdfFileHash: string
   type: MarkType
   location: MarkLocation
+  fileName: string
   value?: string
 }