16 changed files with 340 additions and 505 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -100,10 +100,10 @@ li {
  // - first-child Header height, default body padding, and center content border (10px) and padding (10px)
  // - others We don't include border and padding and scroll to the top of the image
  &:first-child {
-    scroll-margin-top: $body-vertical-padding + 20px;
+    scroll-margin-top: $header-height + $body-vertical-padding + 20px;
  }
  &:not(:first-child) {
-    scroll-margin-top: $body-vertical-padding;
+    scroll-margin-top: $header-height + $body-vertical-padding;
  }
 }

@ -148,7 +148,7 @@ li {
  justify-content: start;
  align-items: start;

-  scroll-margin-top: $body-vertical-padding;
+  scroll-margin-top: $header-height + $body-vertical-padding;
 }

 [data-dev='true'] {
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@ -28,17 +28,14 @@ import {
 } from '../../routes'
 import {
  clearAuthToken,
-  getProfileUsername,
  hexToNpub,
-  saveNsecBunkerDelegatedKey
+  saveNsecBunkerDelegatedKey,
+  shorten
 } from '../../utils'
 import styles from './style.module.scss'
 import { setUserRobotImage } from '../../store/userRobotImage/action'
 import { Container } from '../Container'
 import { ButtonIcon } from '../ButtonIcon'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClose } from '@fortawesome/free-solid-svg-icons'
-import useMediaQuery from '@mui/material/useMediaQuery'

 const metadataController = MetadataController.getInstance()

@ -58,8 +55,9 @@ export const AppBar = () => {
  useEffect(() => {
    if (metadataState) {
      if (metadataState.content) {
-        const profileMetadata = JSON.parse(metadataState.content)
-        const { picture } = profileMetadata
+        const { picture, display_name, name } = JSON.parse(
+          metadataState.content
+        )

        if (picture || userRobotImage) {
          setUserAvatar(picture || userRobotImage)
@ -69,7 +67,7 @@ export const AppBar = () => {
          ? hexToNpub(authState.usersPubkey)
          : ''

-        setUsername(getProfileUsername(npub, profileMetadata))
+        setUsername(shorten(display_name || name || npub, 7))
      } else {
        setUserAvatar(userRobotImage || '')
        setUsername('')
@ -120,152 +118,125 @@ export const AppBar = () => {
  }
  const isAuthenticated = authState?.loggedIn === true

-  const matches = useMediaQuery('(max-width:767px)')
-  const [isBannerVisible, setIsBannerVisible] = useState(true)
-  const handleBannerHide = () => {
-    setIsBannerVisible(false)
-  }
-
  return (
-    <>
-      {isAuthenticated && isBannerVisible && (
-        <div className={styles.banner}>
-          <Container>
-            <div className={styles.bannerInner}>
-              <p className={styles.bannerText}>
-                SIGit is currently Alpha software (available for internal
-                testing), use at your own risk!
-              </p>
+    <AppBarMui
+      position="fixed"
+      className={styles.AppBar}
+      sx={{
+        boxShadow: 'none'
+      }}
+    >
+      <Container>
+        <Toolbar className={styles.toolbar} disableGutters={true}>
+          <Box className={styles.logoWrapper}>
+            <img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
+          </Box>
+
+          <Box className={styles.rightSideBox}>
+            {!isAuthenticated && (
              <Button
-                aria-label={`close banner`}
-                variant="text"
-                onClick={handleBannerHide}
+                startIcon={<ButtonIcon />}
+                onClick={() => {
+                  navigate(appPublicRoutes.nostr)
+                }}
+                variant="contained"
              >
-                <FontAwesomeIcon icon={faClose} />
+                LOGIN
              </Button>
-            </div>
-          </Container>
-        </div>
-      )}
-      <AppBarMui
-        position={matches ? 'sticky' : 'static'}
-        className={styles.AppBar}
-        sx={{
-          boxShadow: 'none'
-        }}
-      >
-        <Container>
-          <Toolbar className={styles.toolbar} disableGutters={true}>
-            <Box className={styles.logoWrapper}>
-              <img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
-            </Box>
+            )}

-            <Box className={styles.rightSideBox}>
-              {!isAuthenticated && (
-                <Button
-                  startIcon={<ButtonIcon />}
-                  onClick={() => {
-                    navigate(appPublicRoutes.nostr)
+            {isAuthenticated && (
+              <>
+                <Username
+                  username={username}
+                  avatarContent={userAvatar}
+                  handleClick={handleOpenUserMenu}
+                />
+                <Menu
+                  id="menu-appbar"
+                  anchorEl={anchorElUser}
+                  anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center'
                  }}
-                  variant="contained"
+                  keepMounted
+                  transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center'
+                  }}
+                  open={!!anchorElUser}
+                  onClose={handleCloseUserMenu}
                >
-                  LOGIN
-                </Button>
-              )}
+                  <MenuItem
+                    sx={{
+                      justifyContent: 'center',
+                      display: { md: 'none' },
+                      fontWeight: 500,
+                      fontSize: '14px',
+                      color: 'var(--text-color)'
+                    }}
+                  >
+                    <Typography variant="h6">{username}</Typography>
+                  </MenuItem>
+                  <MenuItem
+                    onClick={handleProfile}
+                    sx={{
+                      justifyContent: 'center'
+                    }}
+                  >
+                    Profile
+                  </MenuItem>
+                  <MenuItem
+                    onClick={() => {
+                      setAnchorElUser(null)

-              {isAuthenticated && (
-                <>
-                  <Username
-                    username={username}
-                    avatarContent={userAvatar}
-                    handleClick={handleOpenUserMenu}
-                  />
-                  <Menu
-                    id="menu-appbar"
-                    anchorEl={anchorElUser}
-                    anchorOrigin={{
-                      vertical: 'bottom',
-                      horizontal: 'center'
+                      navigate(appPrivateRoutes.settings)
                    }}
-                    keepMounted
-                    transformOrigin={{
-                      vertical: 'top',
-                      horizontal: 'center'
+                    sx={{
+                      justifyContent: 'center'
                    }}
-                    open={!!anchorElUser}
-                    onClose={handleCloseUserMenu}
+                  >
+                    Settings
+                  </MenuItem>
+                  <MenuItem
+                    onClick={() => {
+                      setAnchorElUser(null)
+
+                      navigate(appPublicRoutes.verify)
+                    }}
+                    sx={{
+                      justifyContent: 'center'
+                    }}
+                  >
+                    Verify
+                  </MenuItem>
+                  <Link
+                    to={appPublicRoutes.source}
+                    target="_blank"
+                    style={{ color: 'inherit', textDecoration: 'inherit' }}
                  >
                    <MenuItem
-                      sx={{
-                        justifyContent: 'center',
-                        display: { md: 'none' },
-                        fontWeight: 500,
-                        fontSize: '14px',
-                        color: 'var(--text-color)'
-                      }}
-                    >
-                      <Typography variant="h6">{username}</Typography>
-                    </MenuItem>
-                    <MenuItem
-                      onClick={handleProfile}
                      sx={{
                        justifyContent: 'center'
                      }}
                    >
-                      Profile
+                      Source
                    </MenuItem>
-                    <MenuItem
-                      onClick={() => {
-                        setAnchorElUser(null)
-
-                        navigate(appPrivateRoutes.settings)
-                      }}
-                      sx={{
-                        justifyContent: 'center'
-                      }}
-                    >
-                      Settings
-                    </MenuItem>
-                    <MenuItem
-                      onClick={() => {
-                        setAnchorElUser(null)
-
-                        navigate(appPublicRoutes.verify)
-                      }}
-                      sx={{
-                        justifyContent: 'center'
-                      }}
-                    >
-                      Verify
-                    </MenuItem>
-                    <Link
-                      to={appPublicRoutes.source}
-                      target="_blank"
-                      style={{ color: 'inherit', textDecoration: 'inherit' }}
-                    >
-                      <MenuItem
-                        sx={{
-                          justifyContent: 'center'
-                        }}
-                      >
-                        Source
-                      </MenuItem>
-                    </Link>
-                    <MenuItem
-                      onClick={handleLogout}
-                      sx={{
-                        justifyContent: 'center'
-                      }}
-                    >
-                      Logout
-                    </MenuItem>
-                  </Menu>
-                </>
-              )}
-            </Box>
-          </Toolbar>
-        </Container>
-      </AppBarMui>
-    </>
+                  </Link>
+                  <MenuItem
+                    onClick={handleLogout}
+                    sx={{
+                      justifyContent: 'center'
+                    }}
+                  >
+                    Logout
+                  </MenuItem>
+                </Menu>
+              </>
+            )}
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBarMui>
  )
 }
--- a/src/components/AppBar/style.module.scss
+++ b/src/components/AppBar/style.module.scss
@ -34,42 +34,3 @@
    justify-content: flex-end;
  }
 }
-
-.banner {
-  color: #ffffff;
-  background-color: $primary-main;
-}
-
-.bannerInner {
-  display: flex;
-  gap: 10px;
-  padding-block: 10px;
-  z-index: 1;
-
-  width: 100%;
-
-  justify-content: space-between;
-  flex-direction: row;
-
-  button {
-    min-width: 44px;
-    color: inherit;
-  }
-
-  &:hover,
-  &.active,
-  &:focus-within {
-    background: $primary-main;
-    color: inherit;
-
-    button {
-      color: inherit;
-    }
-  }
-}
-
-.bannerText {
-  margin-left: 54px;
-  flex-grow: 1;
-  text-align: center;
-}
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@ -11,16 +11,16 @@ import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
 import { ProfileMetadata, User, UserRole } from '../../types'
 import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
-import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
-import { SigitFile } from '../../utils/file'
+import { truncate } from 'lodash'
+import { settleAllFullfilfedPromises, hexToNpub, npubToHex } from '../../utils'
+import { getSigitFile, SigitFile } from '../../utils/file'
 import { getToolboxLabelByMarkType } from '../../utils/mark'
 import { FileDivider } from '../FileDivider'
 import { ExtensionFileBox } from '../ExtensionFileBox'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
 import { useScale } from '../../hooks/useScale'
 import { AvatarIconButton } from '../UserAvatarIconButton'
-import { UserAvatar } from '../UserAvatar'
-import _ from 'lodash'
+import { LoadingSpinner } from '../LoadingSpinner'

 const DEFAULT_START_SIZE = {
  width: 140,
@ -28,50 +28,52 @@ const DEFAULT_START_SIZE = {
 } as const

 interface Props {
+  selectedFiles: File[]
  users: User[]
  metadata: { [key: string]: ProfileMetadata }
-  sigitFiles: SigitFile[]
-  setSigitFiles: React.Dispatch<React.SetStateAction<SigitFile[]>>
+  onDrawFieldsChange: (sigitFiles: SigitFile[]) => void
  selectedTool?: DrawTool
 }

 export const DrawPDFFields = (props: Props) => {
-  const { selectedTool, sigitFiles, setSigitFiles, users } = props
-
-  const signers = users.filter((u) => u.role === UserRole.signer)
-  const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
-  const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
-  /**
-   * Return first pubkey that is present in the signers list
-   * @param pubkeys
-   * @returns available pubkey or empty string
-   */
-  const getAvailableSigner = (...pubkeys: string[]) => {
-    const availableSigner: string | undefined = pubkeys.find((pubkey) =>
-      signers.some((s) => s.pubkey === npubToHex(pubkey))
-    )
-    return availableSigner || ''
-  }
-
+  const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
  const { to, from } = useScale()

+  const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
+  const [parsingPdf, setIsParsing] = useState<boolean>(false)
+
  const [mouseState, setMouseState] = useState<MouseState>({
    clicked: false
  })

-  const [activeDrawnField, setActiveDrawnField] = useState<{
-    fileIndex: number
-    pageIndex: number
-    drawnFieldIndex: number
-  }>()
-  const isActiveDrawnField = (
-    fileIndex: number,
-    pageIndex: number,
-    drawnFieldIndex: number
-  ) =>
-    activeDrawnField?.fileIndex === fileIndex &&
-    activeDrawnField?.pageIndex === pageIndex &&
-    activeDrawnField?.drawnFieldIndex === drawnFieldIndex
+  const [activeDrawField, setActiveDrawField] = useState<number>()
+
+  useEffect(() => {
+    if (selectedFiles) {
+      /**
+       * Reads the binary files and converts to internal file type
+       * and sets to a state (adds images if it's a PDF)
+       */
+      const parsePages = async () => {
+        const files = await settleAllFullfilfedPromises(
+          selectedFiles,
+          getSigitFile
+        )
+
+        setSigitFiles(files)
+      }
+
+      setIsParsing(true)
+
+      parsePages().finally(() => {
+        setIsParsing(false)
+      })
+    }
+  }, [selectedFiles])
+
+  useEffect(() => {
+    if (sigitFiles) onDrawFieldsChange(sigitFiles)
+  }, [onDrawFieldsChange, sigitFiles])

  /**
   * Drawing events
@ -98,12 +100,7 @@ export const DrawPDFFields = (props: Props) => {
   * @param event Pointer event
   * @param page PdfPage where press happened
   */
-  const handlePointerDown = (
-    event: React.PointerEvent,
-    page: PdfPage,
-    fileIndex: number,
-    pageIndex: number
-  ) => {
+  const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
    // Proceed only if left click
    if (event.button !== 0) return

@ -118,17 +115,12 @@ export const DrawPDFFields = (props: Props) => {
      top: to(page.width, y),
      width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
      height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
-      counterpart: getAvailableSigner(lastSigner, defaultSignerNpub),
+      counterpart: '',
      type: selectedTool.identifier
    }

    page.drawnFields.push(newField)

-    setActiveDrawnField({
-      fileIndex,
-      pageIndex,
-      drawnFieldIndex: page.drawnFields.length - 1
-    })
    setMouseState((prev) => {
      return {
        ...prev,
@ -197,8 +189,6 @@ export const DrawPDFFields = (props: Props) => {
   */
  const handleDrawnFieldPointerDown = (
    event: React.PointerEvent,
-    fileIndex: number,
-    pageIndex: number,
    drawnFieldIndex: number
  ) => {
    event.stopPropagation()
@ -208,7 +198,7 @@ export const DrawPDFFields = (props: Props) => {

    const drawingRectangleCoords = getPointerCoordinates(event)

-    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
+    setActiveDrawField(drawnFieldIndex)
    setMouseState({
      dragging: true,
      clicked: false,
@ -264,15 +254,13 @@ export const DrawPDFFields = (props: Props) => {
   */
  const handleResizePointerDown = (
    event: React.PointerEvent,
-    fileIndex: number,
-    pageIndex: number,
    drawnFieldIndex: number
  ) => {
    // Proceed only if left click
    if (event.button !== 0) return
    event.stopPropagation()

-    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
+    setActiveDrawField(drawnFieldIndex)
    setMouseState({
      resizing: true
    })
@ -381,7 +369,7 @@ export const DrawPDFFields = (props: Props) => {
                  handlePointerMove(event, page)
                }}
                onPointerDown={(event) => {
-                  handlePointerDown(event, page, fileIndex, pageIndex)
+                  handlePointerDown(event, page)
                }}
                draggable="false"
                src={page.image}
@ -393,12 +381,7 @@ export const DrawPDFFields = (props: Props) => {
                  <div
                    key={drawnFieldIndex}
                    onPointerDown={(event) =>
-                      handleDrawnFieldPointerDown(
-                        event,
-                        fileIndex,
-                        pageIndex,
-                        drawnFieldIndex
-                      )
+                      handleDrawnFieldPointerDown(event, drawnFieldIndex)
                    }
                    onPointerMove={(event) => {
                      handleDrawnFieldPointerMove(event, drawnField, page.width)
@ -419,11 +402,7 @@ export const DrawPDFFields = (props: Props) => {
                      touchAction: 'none',
                      opacity:
                        mouseState.dragging &&
-                        isActiveDrawnField(
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        )
+                        activeDrawField === drawnFieldIndex
                          ? 0.8
                          : undefined
                    }}
@ -440,12 +419,7 @@ export const DrawPDFFields = (props: Props) => {
                    </div>
                    <span
                      onPointerDown={(event) =>
-                        handleResizePointerDown(
-                          event,
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        )
+                        handleResizePointerDown(event, drawnFieldIndex)
                      }
                      onPointerMove={(event) => {
                        handleResizePointerMove(event, drawnField, page.width)
@ -454,11 +428,7 @@ export const DrawPDFFields = (props: Props) => {
                      style={{
                        background:
                          mouseState.resizing &&
-                          isActiveDrawnField(
-                            fileIndex,
-                            pageIndex,
-                            drawnFieldIndex
-                          )
+                          activeDrawField === drawnFieldIndex
                            ? 'var(--primary-main)'
                            : undefined
                      }}
@ -476,59 +446,56 @@ export const DrawPDFFields = (props: Props) => {
                    >
                      <Close fontSize="small" />
                    </span>
-                    {!isActiveDrawnField(
-                      fileIndex,
-                      pageIndex,
-                      drawnFieldIndex
-                    ) &&
-                      !!drawnField.counterpart && (
-                        <div className={styles.counterpartAvatar}>
-                          <UserAvatar
-                            pubkey={npubToHex(drawnField.counterpart)!}
-                          />
-                        </div>
-                      )}
-                    {isActiveDrawnField(
-                      fileIndex,
-                      pageIndex,
-                      drawnFieldIndex
-                    ) && (
-                      <div
-                        onPointerDown={handleUserSelectPointerDown}
-                        className={styles.userSelect}
-                      >
-                        <FormControl fullWidth size="small">
-                          <InputLabel id="counterparts">Counterpart</InputLabel>
-                          <Select
-                            value={getAvailableSigner(drawnField.counterpart)}
-                            onChange={(event) => {
-                              drawnField.counterpart = event.target.value
-                              setLastSigner(event.target.value)
-                              refreshPdfFiles()
-                            }}
-                            labelId="counterparts"
-                            label="Counterparts"
-                            sx={{
-                              background: 'white'
-                            }}
-                            renderValue={(value) =>
-                              renderCounterpartValue(value)
-                            }
-                          >
-                            {signers.map((signer, index) => {
-                              const npub = hexToNpub(signer.pubkey)
-                              const metadata = props.metadata[signer.pubkey]
-                              const displayValue = getProfileUsername(
-                                npub,
-                                metadata
-                              )
+                    <div
+                      onPointerDown={handleUserSelectPointerDown}
+                      className={styles.userSelect}
+                    >
+                      <FormControl fullWidth size="small">
+                        <InputLabel id="counterparts">Counterpart</InputLabel>
+                        <Select
+                          value={drawnField.counterpart}
+                          onChange={(event) => {
+                            drawnField.counterpart = event.target.value
+                            refreshPdfFiles()
+                          }}
+                          labelId="counterparts"
+                          label="Counterparts"
+                          sx={{
+                            background: 'white'
+                          }}
+                          renderValue={(value) => renderCounterpartValue(value)}
+                        >
+                          {users
+                            .filter((u) => u.role === UserRole.signer)
+                            .map((user, index) => {
+                              const npub = hexToNpub(user.pubkey)
+                              let displayValue = truncate(npub, {
+                                length: 16
+                              })
+
+                              const metadata = props.metadata[user.pubkey]
+
+                              if (metadata) {
+                                displayValue = truncate(
+                                  metadata.name ||
+                                    metadata.display_name ||
+                                    metadata.username ||
+                                    npub,
+                                  {
+                                    length: 16
+                                  }
+                                )
+                              }

                              return (
-                                <MenuItem key={index} value={npub}>
+                                <MenuItem
+                                  key={index}
+                                  value={hexToNpub(user.pubkey)}
+                                >
                                  <ListItemIcon>
                                    <AvatarIconButton
                                      src={metadata?.picture}
-                                      hexKey={signer.pubkey}
+                                      hexKey={user.pubkey}
                                      aria-label={`account of user ${displayValue}`}
                                      color="inherit"
                                      sx={{
@ -544,10 +511,9 @@ export const DrawPDFFields = (props: Props) => {
                                </MenuItem>
                              )
                            })}
-                          </Select>
-                        </FormControl>
-                      </div>
-                    )}
+                        </Select>
+                      </FormControl>
+                    </div>
                  </div>
                )
              })}
@ -558,19 +524,28 @@ export const DrawPDFFields = (props: Props) => {
    )
  }

-  const renderCounterpartValue = (npub: string) => {
-    let displayValue = _.truncate(npub, { length: 16 })
+  const renderCounterpartValue = (value: string) => {
+    const user = users.find((u) => u.pubkey === npubToHex(value))
+    if (user) {
+      let displayValue = truncate(value, {
+        length: 16
+      })

-    const signer = signers.find((u) => u.pubkey === npubToHex(npub))
-    if (signer) {
-      const metadata = props.metadata[signer.pubkey]
-      displayValue = getProfileUsername(npub, metadata)
+      const metadata = props.metadata[user.pubkey]

+      if (metadata) {
+        displayValue = truncate(
+          metadata.name || metadata.display_name || metadata.username || value,
+          {
+            length: 16
+          }
+        )
+      }
      return (
-        <div className={styles.counterpartSelectValue}>
+        <>
          <AvatarIconButton
-            src={props.metadata[signer.pubkey]?.picture}
-            hexKey={signer.pubkey || undefined}
+            src={props.metadata[user.pubkey]?.picture}
+            hexKey={npubToHex(user.pubkey) || undefined}
            sx={{
              padding: 0,
              marginRight: '6px',
@ -581,11 +556,19 @@ export const DrawPDFFields = (props: Props) => {
            }}
          />
          {displayValue}
-        </div>
+        </>
      )
    }

-    return displayValue
+    return value
+  }
+
+  if (parsingPdf) {
+    return <LoadingSpinner variant="small" />
+  }
+
+  if (!sigitFiles.length) {
+    return ''
  }

  return (
@ -606,7 +589,7 @@ export const DrawPDFFields = (props: Props) => {
                <ExtensionFileBox extension={file.extension} />
              )}
            </div>
-            {i < sigitFiles.length - 1 && <FileDivider />}
+            {i < selectedFiles.length - 1 && <FileDivider />}
          </React.Fragment>
        )
      })}
--- a/src/components/DrawPDFFields/style.module.scss
+++ b/src/components/DrawPDFFields/style.module.scss
@ -84,14 +84,3 @@
    padding: 5px 0;
  }
 }
-
-.counterpartSelectValue {
-  display: flex;
-}
-
-.counterpartAvatar {
-  img {
-    width: 21px;
-    height: 21px;
-  }
-}
--- a/src/components/PDFView/PdfPageItem.tsx
+++ b/src/components/PDFView/PdfPageItem.tsx
@ -33,8 +33,7 @@ const PdfPageItem = ({
  useEffect(() => {
    if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
      markRefs.current[selectedMark.id]?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
+        behavior: 'smooth'
      })
    }
  }, [selectedMark])
--- a/src/components/UserAvatar/index.tsx
+++ b/src/components/UserAvatar/index.tsx
@ -5,7 +5,7 @@ import { AvatarIconButton } from '../UserAvatarIconButton'
 import { Link } from 'react-router-dom'
 import { useProfileMetadata } from '../../hooks/useProfileMetadata'
 import { Tooltip } from '@mui/material'
-import { getProfileUsername } from '../../utils'
+import { shorten } from '../../utils'
 import { TooltipChild } from '../TooltipChild'

 interface UserAvatarProps {
@ -22,7 +22,7 @@ export const UserAvatar = ({
  isNameVisible = false
 }: UserAvatarProps) => {
  const profile = useProfileMetadata(pubkey)
-  const name = getProfileUsername(pubkey, profile)
+  const name = profile?.display_name || profile?.name || shorten(pubkey)
  const image = profile?.picture

  return (
--- a/src/layouts/StickySideColumns.module.scss
+++ b/src/layouts/StickySideColumns.module.scss
@ -42,22 +42,15 @@
 .sides {
  @media only screen and (min-width: 768px) {
    position: sticky;
-    top: $body-vertical-padding;
+    top: $header-height + $body-vertical-padding;
  }
  > :first-child {
-    // We want to keep header on smaller devices at all times
    max-height: calc(
      100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
    );
-
-    @media only screen and (min-width: 768px) {
-      max-height: calc(100dvh - $body-vertical-padding * 2);
-    }
  }
 }

-// Adjust the content scroll on smaller screens
-// Make sure only the inner tab is scrolling
 .scrollAdjust {
  @media only screen and (max-width: 767px) {
    max-height: calc(
--- a/src/layouts/style.module.scss
+++ b/src/layouts/style.module.scss
@ -3,5 +3,5 @@

 .main {
  flex-grow: 1;
-  padding: $body-vertical-padding 0 $body-vertical-padding 0;
+  padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
 }
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@ -39,8 +39,7 @@ import {
  signEventForMetaFile,
  updateUsersAppData,
  uploadToFileStorage,
-  DEFAULT_TOOLBOX,
-  settleAllFullfilfedPromises
+  DEFAULT_TOOLBOX
 } from '../../utils'
 import { Container } from '../../components/Container'
 import fileListStyles from '../../components/FileList/style.module.scss'
@ -61,8 +60,7 @@ import {
  faTrash,
  faUpload
 } from '@fortawesome/free-solid-svg-icons'
-import { getSigitFile, SigitFile } from '../../utils/file.ts'
-import _ from 'lodash'
+import { SigitFile } from '../../utils/file.ts'

 export const CreatePage = () => {
  const navigate = useNavigate()
@ -108,31 +106,9 @@ export const CreatePage = () => {
    {}
  )
  const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
-  const [parsingPdf, setIsParsing] = useState<boolean>(false)
-  useEffect(() => {
-    if (selectedFiles) {
-      /**
-       * Reads the binary files and converts to internal file type
-       * and sets to a state (adds images if it's a PDF)
-       */
-      const parsePages = async () => {
-        const files = await settleAllFullfilfedPromises(
-          selectedFiles,
-          getSigitFile
-        )
-
-        setDrawnFiles(files)
-      }
-
-      setIsParsing(true)
-
-      parsePages().finally(() => {
-        setIsParsing(false)
-      })
-    }
-  }, [selectedFiles])

  const [selectedTool, setSelectedTool] = useState<DrawTool>()
+  const [toolbox] = useState<DrawTool[]>(DEFAULT_TOOLBOX)

  /**
   * Changes the drawing tool
@ -306,19 +282,6 @@ export const CreatePage = () => {

  const handleRemoveUser = (pubkey: string) => {
    setUsers((prev) => prev.filter((user) => user.pubkey !== pubkey))
-
-    // Set counterpart to ''
-    const drawnFilesCopy = _.cloneDeep(drawnFiles)
-    drawnFilesCopy.forEach((s) => {
-      s.pages?.forEach((p) => {
-        p.drawnFields.forEach((d) => {
-          if (d.counterpart === hexToNpub(pubkey)) {
-            d.counterpart = ''
-          }
-        })
-      })
-    })
-    setDrawnFiles(drawnFilesCopy)
  }

  /**
@ -338,15 +301,7 @@ export const CreatePage = () => {

  const handleSelectFiles = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
-      // Get the uploaded files
-      const files = Array.from(event.target.files)
-
-      // Remove duplicates based on the file.name
-      setSelectedFiles((p) =>
-        [...p, ...files].filter(
-          (file, i, array) => i === array.findIndex((t) => t.name === file.name)
-        )
-      )
+      setSelectedFiles(Array.from(event.target.files))
    }
  }

@ -761,6 +716,10 @@ export const CreatePage = () => {
    }
  }

+  const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
+    setDrawnFiles(sigitFiles)
+  }
+
  if (authUrl) {
    return (
      <iframe
@ -874,36 +833,28 @@ export const CreatePage = () => {
              </div>

              <div className={`${styles.paperGroup} ${styles.toolbox}`}>
-                {DEFAULT_TOOLBOX.filter((drawTool) => !drawTool.isHidden).map(
-                  (drawTool: DrawTool, index: number) => {
-                    return (
-                      <div
-                        key={index}
-                        {...(!drawTool.isComingSoon && {
-                          onClick: () => handleToolSelect(drawTool)
-                        })}
-                        className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${drawTool.isComingSoon ? styles.comingSoon : ''}
+                {toolbox.map((drawTool: DrawTool, index: number) => {
+                  return (
+                    <div
+                      key={index}
+                      {...(drawTool.active && {
+                        onClick: () => handleToolSelect(drawTool)
+                      })}
+                      className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
                      `}
-                      >
-                        <FontAwesomeIcon
-                          fontSize={'15px'}
-                          icon={drawTool.icon}
-                        />
-                        {drawTool.label}
-                        {!drawTool.isComingSoon ? (
-                          <FontAwesomeIcon
-                            fontSize={'15px'}
-                            icon={faEllipsis}
-                          />
-                        ) : (
-                          <span className={styles.comingSoonPlaceholder}>
-                            Coming soon
-                          </span>
-                        )}
-                      </div>
-                    )
-                  }
-                )}
+                    >
+                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
+                      {drawTool.label}
+                      {drawTool.active ? (
+                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
+                      ) : (
+                        <span className={styles.comingSoonPlaceholder}>
+                          Coming soon
+                        </span>
+                      )}
+                    </div>
+                  )
+                })}
              </div>

              <Button onClick={handleCreate} variant="contained">
@ -919,17 +870,13 @@ export const CreatePage = () => {
          centerIcon={faFile}
          rightIcon={faToolbox}
        >
-          {parsingPdf ? (
-            <LoadingSpinner variant="small" />
-          ) : (
-            <DrawPDFFields
-              users={users}
-              metadata={metadata}
-              selectedTool={selectedTool}
-              sigitFiles={drawnFiles}
-              setSigitFiles={setDrawnFiles}
-            />
-          )}
+          <DrawPDFFields
+            metadata={metadata}
+            users={users}
+            selectedFiles={selectedFiles}
+            onDrawFieldsChange={onDrawFieldsChange}
+            selectedTool={selectedTool}
+          />
        </StickySideColumns>
      </Container>
    </>
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@ -1,6 +1,7 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import EditIcon from '@mui/icons-material/Edit'
 import { Box, IconButton, SxProps, Theme, Typography } from '@mui/material'
+import { truncate } from 'lodash'
 import { Event, VerifiedEvent, kinds, nip19 } from 'nostr-tools'
 import { useEffect, useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
@ -13,7 +14,6 @@ import { State } from '../../store/rootReducer'
 import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import {
  getNostrJoiningBlockNumber,
-  getProfileUsername,
  getRoboHashPicture,
  hexToNpub,
  shorten
@ -42,7 +42,15 @@ export const ProfilePage = () => {
  const [isLoading, setIsLoading] = useState(true)
  const [loadingSpinnerDesc] = useState('Fetching metadata')

-  const profileName = pubkey && getProfileUsername(pubkey, profileMetadata)
+  const profileName =
+    pubkey &&
+    profileMetadata &&
+    truncate(
+      profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
+      {
+        length: 16
+      }
+    )

  useEffect(() => {
    if (npub) {
--- a/src/pages/settings/relays/index.tsx
+++ b/src/pages/settings/relays/index.tsx
@ -233,7 +233,6 @@ export const RelaysPage = () => {
          ))}
        </Box>
      )}
-      <Footer />
    </Container>
  )
 }
@ -429,6 +428,7 @@ const RelayItem = ({
          )}
        </List>
      </Box>
+      <Footer />
    </>
  )
 }
--- a/src/types/drawing.ts
+++ b/src/types/drawing.ts
@ -31,10 +31,7 @@ export interface DrawTool {
  icon: IconDefinition
  defaultValue?: string
  selected?: boolean
-  /** show or hide the toolbox item */
-  isHidden?: boolean
-  /** show or hide "coming soon" message on the toolbox item */
-  isComingSoon?: boolean
+  active?: boolean
 }

 export enum MarkType {
--- a/src/types/profile.ts
+++ b/src/types/profile.ts
@ -1,7 +1,6 @@
 export interface ProfileMetadata {
  name?: string
  display_name?: string
-  /** @deprecated use name instead */
  username?: string
  picture?: string
  banner?: string
--- a/src/utils/mark.ts
+++ b/src/utils/mark.ts
@ -3,26 +3,26 @@ 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 { MarkType } from '../types/drawing.ts'
 import {
  faT,
  faSignature,
  faBriefcase,
  faIdCard,
-  faClock,
-  fa1,
-  faCalendarDays,
-  faCheckDouble,
-  faCircleDot,
-  faCreditCard,
  faHeading,
+  faClock,
+  faCalendarDays,
+  fa1,
  faImage,
-  faPaperclip,
-  faPhone,
-  faSquareCaretDown,
  faSquareCheck,
+  faCheckDouble,
+  faPaperclip,
+  faCircleDot,
+  faSquareCaretDown,
+  faTableCellsLarge,
  faStamp,
-  faTableCellsLarge
+  faCreditCard,
+  faPhone
 } from '@fortawesome/free-solid-svg-icons'

 /**
@ -152,113 +152,114 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
  return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
 }

-export const DEFAULT_TOOLBOX: DrawTool[] = [
+export const DEFAULT_TOOLBOX = [
  {
-    identifier: MarkType.FULLNAME,
-    icon: faIdCard,
-    label: 'Full Name',
-    isComingSoon: true
-  },
-  {
-    identifier: MarkType.JOBTITLE,
-    icon: faBriefcase,
-    label: 'Job Title',
-    isComingSoon: true
+    identifier: MarkType.TEXT,
+    icon: faT,
+    label: 'Text',
+    active: true
  },
  {
    identifier: MarkType.SIGNATURE,
    icon: faSignature,
    label: 'Signature',
-    isComingSoon: true
+    active: false
  },
  {
-    identifier: MarkType.DATETIME,
-    icon: faClock,
-    label: 'Date Time',
-    isComingSoon: true
+    identifier: MarkType.JOBTITLE,
+    icon: faBriefcase,
+    label: 'Job Title',
+    active: false
  },
  {
-    identifier: MarkType.TEXT,
-    icon: faT,
-    label: 'Text'
-  },
-  {
-    identifier: MarkType.NUMBER,
-    icon: fa1,
-    label: 'Number',
-    isComingSoon: true
+    identifier: MarkType.FULLNAME,
+    icon: faIdCard,
+    label: 'Full Name',
+    active: false
  },
  {
    identifier: MarkType.INITIALS,
    icon: faHeading,
    label: 'Initials',
-    isHidden: true
+    active: false
+  },
+  {
+    identifier: MarkType.DATETIME,
+    icon: faClock,
+    label: 'Date Time',
+    active: false
  },
  {
    identifier: MarkType.DATE,
    icon: faCalendarDays,
    label: 'Date',
-    isHidden: true
+    active: false
+  },
+  {
+    identifier: MarkType.NUMBER,
+    icon: fa1,
+    label: 'Number',
+    active: false
  },
  {
    identifier: MarkType.IMAGES,
    icon: faImage,
    label: 'Images',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.CHECKBOX,
    icon: faSquareCheck,
    label: 'Checkbox',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.MULTIPLE,
    icon: faCheckDouble,
    label: 'Multiple',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.FILE,
    icon: faPaperclip,
    label: 'File',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.RADIO,
    icon: faCircleDot,
    label: 'Radio',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.SELECT,
    icon: faSquareCaretDown,
    label: 'Select',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.CELLS,
    icon: faTableCellsLarge,
    label: 'Cells',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.STAMP,
    icon: faStamp,
    label: 'Stamp',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.PAYMENT,
    icon: faCreditCard,
    label: 'Payment',
-    isHidden: true
+    active: false
  },
  {
    identifier: MarkType.PHONE,
    icon: faPhone,
    label: 'Phone',
-    isHidden: true
+    active: false
  }
 ]

--- a/src/utils/nostr.ts
+++ b/src/utils/nostr.ts
@ -1,6 +1,6 @@
 import { bytesToHex, hexToBytes } from '@noble/hashes/utils'
 import axios from 'axios'
-import _, { truncate } from 'lodash'
+import _ from 'lodash'
 import {
  Event,
  EventTemplate,
@ -30,7 +30,7 @@ import {
 import { AuthState, Keys } from '../store/auth/types'
 import { RelaysState } from '../store/relays/types'
 import store from '../store/store'
-import { Meta, ProfileMetadata, SignedEvent, UserAppData } from '../types'
+import { Meta, SignedEvent, UserAppData } from '../types'
 import { getDefaultRelayMap } from './relays'
 import { parseJson, removeLeadingSlash } from './string'
 import { timeout } from './utils'
@ -974,16 +974,3 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
    throw err
  })
 }
-
-/**
- * Show user's name, first available in order: display_name, name, or npub as fallback
- * @param npub User identifier, it can be either pubkey or npub1 (we only show npub)
- * @param profile User profile
- */
-export const getProfileUsername = (
-  npub: `npub1${string}` | string,
-  profile?: ProfileMetadata
-) =>
-  truncate(profile?.display_name || profile?.name || hexToNpub(npub), {
-    length: 16
-  })