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,23 +13,31 @@ interface PdfItemProps {
 /**
  * Responsible for displaying pages of a single Pdf File.
  */
-const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
+const PdfItem = ({
-  const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
+  pdfFile,
-    return marks.filter((m) => m.mark.location.page === page);
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark
+}: PdfItemProps) => {
+  const filterByPage = (
+    marks: CurrentUserMark[],
+    page: number
+  ): CurrentUserMark[] => {
+    return marks.filter((m) => m.mark.location.page === page)
   }
-  return (
+  return pdfFile.pages.map((page, i) => {
-    pdfFile.pages.map((page, i) => {
+    return (
-      return (
+      <PdfPageItem
-        <PdfPageItem
+        page={page}
-          page={page}
+        key={i}
-          key={i}
+        currentUserMarks={filterByPage(currentUserMarks, i)}
-          currentUserMarks={filterByPage(currentUserMarks, i)}
+        handleMarkClick={handleMarkClick}
-          handleMarkClick={handleMarkClick}
+        selectedMarkValue={selectedMarkValue}
-          selectedMarkValue={selectedMarkValue}
+        selectedMark={selectedMark}
-          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,21 +39,17 @@ const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValu
         marginTop: '10px'
       }}
     >
-      <img
+      <img draggable="false" src={page.image} style={{ width: '100%' }} />
-        draggable="false"
+      {currentUserMarks.map((m, i) => (
-        src={page.image}
+        <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
-        style={{ width: '100%'}}
-
-      />
-      {
-        currentUserMarks.map((m, i) => (
           <PdfMarkItem
             key={i}
             handleMarkClick={handleMarkClick}
             selectedMarkValue={selectedMarkValue}
             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 (
-          <PdfItem
+          <div
-            pdfFile={pdfFile}
+            id={pdfFile.file.name}
-            key={i}
+            ref={(el) => (pdfRefs.current[id] = el)}
-            currentUserMarks={filterByFile(currentUserMarks, hash)}
+            key={index}
-            selectedMark={selectedMark}
+          >
-            handleMarkClick={handleMarkClick}
+            <PdfItem
-            selectedMarkValue={selectedMarkValue}
+              pdfFile={pdfFile}
-          />
+              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,32 +338,36 @@ export const CreatePage = () => {
       fileHashes[file.name] = hash
     }
 
+    console.log('file hashes: ', fileHashes)
+
     return fileHashes
   }
 
-  const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => {
+  const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
-    return drawnPdfs.flatMap((drawnPdf) => {
+    return drawnPdfs
-      const fileHash = fileHashes[drawnPdf.file.name];
+      .flatMap((drawnPdf) => {
-      return drawnPdf.pages.flatMap((page, index) => {
+        const fileHash = fileHashes[drawnPdf.file.name]
-        return page.drawnFields.map((drawnField) => {
+        return drawnPdf.pages.flatMap((page, index) => {
-          return {
+          return page.drawnFields.map((drawnField) => {
-            type: drawnField.type,
+            return {
-            location: {
+              type: drawnField.type,
-              page: index,
+              location: {
-              top: drawnField.top,
+                page: index,
-              left: drawnField.left,
+                top: drawnField.top,
-              height: drawnField.height,
+                left: drawnField.left,
-              width: drawnField.width,
+                height: drawnField.height,
-            },
+                width: drawnField.width
-            npub: drawnField.counterpart,
+              },
-            pdfFileHash: fileHash
+              npub: drawnField.counterpart,
-          }
+              pdfFileHash: fileHash,
+              fileName: drawnPdf.file.name
+            }
+          })
         })
       })
-    })
       .map((mark, index) => {
-        return {...mark, id: 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(
+    return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
-      [new Blob([arraybuffer])],
+      type: 'application/zip'
-      `${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) =>
+    return receivers.map((receiver) => sendNotification(receiver, meta))
-      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
 }