src/components/DrawPDFFields/index.tsx

@@ -9,8 +9,16 @@ import {
 } from '@mui/material'
 import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
-import { ProfileMetadata, User, UserRole } from '../../types'
+import {
-import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
+  ProfileMetadata,
+  User,
+  UserRole,
+  KeyboardCode,
+  MouseState,
+  PdfPage,
+  DrawnField,
+  DrawTool
+} from '../../types'
 import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
 import { SigitFile } from '../../utils/file'
 import { getToolboxLabelByMarkType } from '../../utils/mark'
@@ -41,6 +49,10 @@ export const DrawPDFFields = (props: Props) => {
   const signers = users.filter((u) => u.role === UserRole.signer)
   const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
   const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
+  const [hideSignersForDrawnField, setHideSignersForDrawnField] = useState<{
+    [key: number]: boolean
+  } | null>()
+
   /**
    * Return first pubkey that is present in the signers list
    * @param pubkeys
@@ -361,6 +373,7 @@ export const DrawPDFFields = (props: Props) => {
       rect
     }
   }
+
   /**
    * Renders the pdf pages and drawing elements
    */
@@ -492,62 +505,90 @@ export const DrawPDFFields = (props: Props) => {
                       fileIndex,
                       pageIndex,
                       drawnFieldIndex
-                    ) && (
+                    ) &&
-                      <div
+                      (!hideSignersForDrawnField ||
-                        onPointerDown={handleUserSelectPointerDown}
+                        !hideSignersForDrawnField[drawnFieldIndex]) && (
-                        className={styles.userSelect}
+                        <div
-                      >
+                          onPointerDown={handleUserSelectPointerDown}
-                        <FormControl fullWidth size="small">
+                          className={styles.userSelect}
-                          <InputLabel id="counterparts">Counterpart</InputLabel>
+                        >
-                          <Select
+                          <FormControl fullWidth size="small">
-                            value={getAvailableSigner(drawnField.counterpart)}
+                            <InputLabel id="counterparts">
-                            onChange={(event) => {
+                              Counterpart
-                              drawnField.counterpart = event.target.value
+                            </InputLabel>
-                              setLastSigner(event.target.value)
+                            <Select
-                              refreshPdfFiles()
+                              value={getAvailableSigner(drawnField.counterpart)}
-                            }}
+                              onChange={(event) => {
-                            labelId="counterparts"
+                                drawnField.counterpart = event.target.value
-                            label="Counterparts"
+                                setLastSigner(event.target.value)
-                            sx={{
+                                refreshPdfFiles()
-                              background: 'white'
+                              }}
-                            }}
+                              labelId="counterparts"
-                            renderValue={(value) =>
+                              label="Counterparts"
-                              renderCounterpartValue(value)
+                              sx={{
-                            }
+                                background: 'white'
-                          >
+                              }}
-                            {signers.map((signer, index) => {
+                              renderValue={(value) =>
-                              const npub = hexToNpub(signer.pubkey)
+                                renderCounterpartValue(value)
-                              const metadata = props.metadata[signer.pubkey]
+                              }
-                              const displayValue = getProfileUsername(
+                              onClose={(event: React.SyntheticEvent) => {
-                                npub,
+                                // get native event
-                                metadata
+                                const { nativeEvent } = event
-                              )
 
-                              return (
+                                // check if event is a keyboard event
-                                <MenuItem key={index} value={npub}>
+                                if (nativeEvent instanceof KeyboardEvent) {
-                                  <ListItemIcon>
+                                  // check if event code is Escape
-                                    <AvatarIconButton
+                                  if (
-                                      src={metadata?.picture}
+                                    nativeEvent.code === KeyboardCode.Escape
-                                      hexKey={signer.pubkey}
+                                  ) {
-                                      aria-label={`account of user ${displayValue}`}
+                                    // set hide signers for this DrawnField
-                                      color="inherit"
+                                    if (hideSignersForDrawnField) {
-                                      sx={{
+                                      setHideSignersForDrawnField((prev) => ({
-                                        padding: 0,
+                                        ...prev,
-                                        '> img': {
+                                        [drawnFieldIndex]: true
-                                          width: '30px',
+                                      }))
-                                          height: '30px'
+                                    } else {
-                                        }
+                                      setHideSignersForDrawnField({
-                                      }}
+                                        [drawnFieldIndex]: true
-                                    />
+                                      })
-                                  </ListItemIcon>
+                                    }
-                                  <ListItemText>{displayValue}</ListItemText>
+                                  }
-                                </MenuItem>
+                                }
-                              )
+                              }}
-                            })}
+                            >
-                          </Select>
+                              {signers.map((signer, index) => {
-                        </FormControl>
+                                const npub = hexToNpub(signer.pubkey)
-                      </div>
+                                const metadata = props.metadata[signer.pubkey]
-                    )}
+                                const displayValue = getProfileUsername(
+                                  npub,
+                                  metadata
+                                )
+
+                                return (
+                                  <MenuItem key={index} value={npub}>
+                                    <ListItemIcon>
+                                      <AvatarIconButton
+                                        src={metadata?.picture}
+                                        hexKey={signer.pubkey}
+                                        aria-label={`account of user ${displayValue}`}
+                                        color="inherit"
+                                        sx={{
+                                          padding: 0,
+                                          '> img': {
+                                            width: '30px',
+                                            height: '30px'
+                                          }
+                                        }}
+                                      />
+                                    </ListItemIcon>
+                                    <ListItemText>{displayValue}</ListItemText>
+                                  </MenuItem>
+                                )
+                              })}
+                            </Select>
+                          </FormControl>
+                        </div>
+                      )}
                   </div>
                 )
               })}

src/components/MarkFormField/index.tsx

@@ -1,4 +1,4 @@
-import { CurrentUserMark } from '../../types/mark.ts'
+import { CurrentUserMark } from '../../types'
 import styles from './style.module.scss'
 import {
   findNextIncompleteCurrentUserMark,

src/components/PDFView/PdfItem.tsx

@@ -1,4 +1,4 @@
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { CurrentUserMark, Mark } from '../../types'
 import { SigitFile } from '../../utils/file.ts'
 import { ExtensionFileBox } from '../ExtensionFileBox.tsx'
 import PdfPageItem from './PdfPageItem.tsx'

src/components/PDFView/PdfMarkItem.tsx

@@ -1,4 +1,4 @@
-import { CurrentUserMark } from '../../types/mark.ts'
+import { CurrentUserMark } from '../../types'
 import styles from '../DrawPDFFields/style.module.scss'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
 import { useScale } from '../../hooks/useScale.tsx'

src/components/PDFView/PdfMarking.tsx

@@ -1,6 +1,6 @@
 import PdfView from './index.tsx'
 import MarkFormField from '../MarkFormField'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { CurrentUserMark, Mark, CurrentUserFile, Meta } from '../../types'
 import React, { useState, useEffect } from 'react'
 import {
   findNextIncompleteCurrentUserMark,
@@ -10,11 +10,9 @@ import {
 import { EMPTY } from '../../utils/const.ts'
 import { Container } from '../Container'
 import signPageStyles from '../../pages/sign/style.module.scss'
-import { CurrentUserFile } from '../../types/file.ts'
 import FileList from '../FileList'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 import { UsersDetails } from '../UsersDetails.tsx'
-import { Meta } from '../../types'
 import {
   faCircleInfo,
   faFileDownload,

src/components/PDFView/PdfPageItem.tsx

@@ -1,6 +1,5 @@
 import styles from '../DrawPDFFields/style.module.scss'
-import { PdfPage } from '../../types/drawing.ts'
+import { PdfPage, CurrentUserMark, Mark } from '../../types'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
 import PdfMarkItem from './PdfMarkItem.tsx'
 import { useEffect, useRef } from 'react'
 import pdfViewStyles from './style.module.scss'

src/components/PDFView/index.tsx

@@ -1,6 +1,5 @@
 import PdfItem from './PdfItem.tsx'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { CurrentUserMark, Mark, CurrentUserFile } from '../../types'
-import { CurrentUserFile } from '../../types/file.ts'
 import { useEffect, useRef } from 'react'
 import { FileDivider } from '../FileDivider.tsx'
 import React from 'react'

src/hooks/useProfileMetadata.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { ProfileMetadata } from '../types/profile'
+import { ProfileMetadata } from '../types'
 import { MetadataController } from '../controllers/MetadataController'
 import { Event, kinds } from 'nostr-tools'
 

src/hooks/useSigitMeta.tsx

@@ -3,9 +3,10 @@ import {
   CreateSignatureEventContent,
   DocSignatureEvent,
   Meta,
-  SignedEventContent
+  SignedEventContent,
+  Mark,
+  MetaParseError
 } from '../types'
-import { Mark } from '../types/mark'
 import {
   fromUnixTimestamp,
   hexToNpub,
@@ -19,7 +20,6 @@ import { verifyEvent } from 'nostr-tools'
 import { Event } from 'nostr-tools'
 import store from '../store/store'
 import { NostrController } from '../controllers'
-import { MetaParseError } from '../types/errors/MetaParseError'
 
 /**
  * Flattened interface that combines properties `Meta`, `CreateSignatureEventContent`,

src/pages/create/index.tsx

@@ -20,7 +20,9 @@ import {
   Meta,
   ProfileMetadata,
   User,
-  UserRole
+  UserRole,
+  DrawTool,
+  Mark
 } from '../../types'
 import {
   encryptArrayBuffer,
@@ -43,9 +45,7 @@ import {
 } from '../../utils'
 import { Container } from '../../components/Container'
 import fileListStyles from '../../components/FileList/style.module.scss'
-import { DrawTool } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
-import { Mark } from '../../types/mark.ts'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {

src/pages/sign/index.tsx

@@ -12,7 +12,13 @@ import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
 import { appPublicRoutes } from '../../routes'
-import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types'
+import {
+  CreateSignatureEventContent,
+  Meta,
+  SignedEvent,
+  CurrentUserMark,
+  Mark
+} from '../../types'
 import {
   decryptArrayBuffer,
   encryptArrayBuffer,
@@ -38,7 +44,6 @@ import {
 import { Container } from '../../components/Container'
 import { DisplayMeta } from './internal/displayMeta'
 import styles from './style.module.scss'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
 import { getLastSignersSig, isFullySigned } from '../../utils/sign.ts'
 import {
   filterMarksByPubkey,

src/pages/verify/index.tsx

@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
-import { DocSignatureEvent, Meta } from '../../types'
+import { DocSignatureEvent, Meta, CurrentUserFile, Mark } from '../../types'
 import {
   decryptArrayBuffer,
   getHash,
@@ -28,8 +28,6 @@ import { useSigitMeta } from '../../hooks/useSigitMeta.tsx'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 import { UsersDetails } from '../../components/UsersDetails.tsx/index.tsx'
 import FileList from '../../components/FileList'
-import { CurrentUserFile } from '../../types/file.ts'
-import { Mark } from '../../types/mark.ts'
 import React from 'react'
 import {
   convertToSigitFile,

src/services/LoginMethodStrategy/loginMethodStrategy.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { EventTemplate, UnsignedEvent } from 'nostr-tools'
-import { SignedEvent } from '../../types/nostr'
+import { SignedEvent } from '../../types'
 
 /**
  * This interface holds all operations that are dependant on the login method and is used as the basis for the login strategies.

src/types/errors/index.ts

@@ -27,3 +27,7 @@ export function handleError(error: unknown): Error {
 
   return new Error(`Wrapped Error: ${stringified}`)
 }
+
+export * from './DecryptionError'
+export * from './MetaParseError'
+export * from './TimeoutError'

src/types/event.ts

@@ -0,0 +1,4 @@
+export enum KeyboardCode {
+  Escape = 'Escape',
+  Enter = 'Enter'
+}

src/types/index.ts

@@ -4,3 +4,8 @@ export * from './nostr'
 export * from './profile'
 export * from './relay'
 export * from './zip'
+export * from './event'
+export * from './drawing'
+export * from './file'
+export * from './mark'
+export * from './errors'

src/utils/crypto.ts

@@ -4,7 +4,7 @@ import {
   stringToHex,
   uint8ArrayToHexString
 } from '.'
-import { DecryptionError } from '../types/errors/DecryptionError'
+import { DecryptionError } from '../types'
 
 const ENCRYPTION_ALGO_NAME = 'AES-GCM'
 

src/utils/file.ts

@@ -1,5 +1,5 @@
 import { Meta } from '../types'
-import { PdfPage } from '../types/drawing.ts'
+import { PdfPage } from '../types'
 import { MOST_COMMON_MEDIA_TYPES } from './const.ts'
 import { extractMarksFromSignedMeta } from './mark.ts'
 import {

src/utils/mark.ts

@@ -1,9 +1,14 @@
-import { CurrentUserMark, Mark } from '../types/mark.ts'
+import {
+  CurrentUserMark,
+  Mark,
+  Meta,
+  SignedEventContent,
+  DrawTool,
+  MarkType
+} from '../types'
 import { hexToNpub } from './nostr.ts'
-import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
 import { EMPTY } from './const.ts'
-import { DrawTool, MarkType } from '../types/drawing.ts'
 import {
   faT,
   faSignature,

src/utils/meta.ts

@@ -1,13 +1,14 @@
-import { CreateSignatureEventContent, Meta } from '../types'
+import {
+  CreateSignatureEventContent,
+  Meta,
+  MetaParseError,
+  MetaParseErrorType,
+  handleError
+} from '../types'
 import { fromUnixTimestamp, parseJson } from '.'
 import { Event, verifyEvent } from 'nostr-tools'
 import { toast } from 'react-toastify'
 import { extractFileExtensions } from './file'
-import { handleError } from '../types/errors'
-import {
-  MetaParseError,
-  MetaParseErrorType
-} from '../types/errors/MetaParseError'
 
 export enum SignStatus {
   Signed = 'Signed',

src/utils/pdf.ts

@@ -1,6 +1,5 @@
-import { PdfPage } from '../types/drawing.ts'
+import { PdfPage, Mark } from '../types'
 import { PDFDocument, PDFFont, PDFPage, rgb } from 'pdf-lib'
-import { Mark } from '../types/mark.ts'
 import * as PDFJS from 'pdfjs-dist'
 import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
 if (!PDFJS.GlobalWorkerOptions.workerPort) {

src/utils/utils.ts

@@ -1,5 +1,4 @@
-import { TimeoutError } from '../types/errors/TimeoutError.ts'
+import { TimeoutError, CurrentUserFile } from '../types'
-import { CurrentUserFile } from '../types/file.ts'
 import { SigitFile } from './file.ts'
 
 export const compareObjects = (