Merge branch 'main' into staging

## [1.0.3](https://git.nostrdev.com/sigit/sigit.io/compare/v1.0.2...v1.0.3) (2025-01-31)

### Bug Fixes

* bundling frontend with release ([889bc0e](889bc0e4fc))

.env.example

@@ -1 +1 @@
-VITE_MOST_POPULAR_RELAYS=wss://relay.damus.io wss://eden.nostr.land wss://nos.lol wss://relay.snort.social wss://relay.current.fyi wss://brb.io wss://nostr.orangepill.dev wss://nostr-pub.wellorder.net wss://nostr.bitcoiner.social wss://nostr.wine wss://nostr.oxtr.dev wss://relay.nostr.bg wss://nostr.mom wss://nostr.fmt.wiz.biz wss://relay.nostr.band wss://nostr-pub.semisol.dev wss://nostr.milou.lol wss://puravida.nostr.land wss://nostr.onsats.org wss://relay.nostr.info wss://offchain.pub wss://relay.orangepill.dev wss://no.str.cr wss://atlas.nostr.land wss://nostr.zebedee.cloud wss://nostr-relay.wlvs.space wss://relay.nostrati.com wss://relay.nostr.com.au wss://nostr.inosta.cc wss://nostr.rocks
+VITE_MOST_POPULAR_RELAYS=wss://relay.damus.io wss://eden.nostr.land wss://nos.lol wss://relay.snort.social wss://relay.current.fyi wss://brb.io wss://nostr.orangepill.dev wss://nostr-pub.wellorder.net wss://nostr.wine wss://nostr.oxtr.dev wss://relay.nostr.bg wss://nostr.mom wss://nostr.fmt.wiz.biz wss://relay.nostr.band wss://nostr-pub.semisol.dev wss://nostr.milou.lol wss://puravida.nostr.land wss://nostr.onsats.org wss://relay.nostr.info wss://offchain.pub wss://relay.orangepill.dev wss://no.str.cr wss://atlas.nostr.land wss://nostr.zebedee.cloud wss://nostr-relay.wlvs.space wss://relay.nostrati.com wss://relay.nostr.com.au wss://nostr.inosta.cc wss://nostr.rocks

.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended'
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'licenseChecker.cjs', "*.min.js"],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {

.git-hooks/commit-msg

@@ -0,0 +1,19 @@
+#!/bin/sh
+# Get the commit message (the parameter we're given is just the path to the
+# temporary file which holds the message).
+commit_message=$(cat "$1")
+
+if (echo "$commit_message" | grep -Eq "^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\([a-z0-9 \-]+\))?!?: .+$") then
+   tput setaf 2;
+   echo "✔ Commit message meets Conventional Commit standards"
+   tput sgr0;
+   exit 0
+fi
+
+tput setaf 1;
+echo "❌ Commit message does not meet the Conventional Commit standard!"
+tput sgr0;
+echo "An example of a valid message is:"
+echo "  feat(login): add the 'remember me' button"
+echo "📝 More details at: https://www.conventionalcommits.org/en/v1.0.0/#summary"
+exit 1

.git-hooks/pre-commit

@@ -0,0 +1,13 @@
+#!/bin/sh
+
+# Avoid commits to the master branch
+BRANCH=`git rev-parse --abbrev-ref HEAD`
+REGEX="^(master|main|staging|development)$"
+
+if [[ "$BRANCH" =~ $REGEX ]]; then
+  echo "You are on branch $BRANCH. Are you sure you want to commit to this branch?"
+  echo "If so, commit with -n to bypass the pre-commit hook."
+  exit 1
+fi
+
+npm run lint-staged

.gitea/workflows/release-production.yaml

@@ -0,0 +1,61 @@
+name: Release to Production
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build_and_release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 20
+
+      - name: Install Dependencies
+        run: |
+          npm ci
+          apt-get update
+          apt-get install zip -y
+          apt-get install jq
+
+      - name: Create .env File
+        run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env
+
+      - name: Create Build
+        run: |
+          npm run build
+          zip -r frontend.zip dist/*
+
+      - name: Deploy Build
+        run: |
+          npm -g install cloudron-surfer
+          surfer config --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io
+          surfer put dist/* / --all -d
+          surfer put dist/.well-known / --all
+
+      - name: Create Empty Release (assets are posted later)
+        run: |
+          npm i
+          npm i -g semantic-release
+          echo "do a semantic-release DRY RUN to make the job fail if there are no changes to release"
+          GITEA_TOKEN=${{ secrets.RELEASE_TOKEN }} GITEA_URL=https://git.nostrdev.com/sigit/sigit.io semantic-release --dry-run | grep -q "There are no relevant changes, so no new version is released." && exit 1
+          echo "now do the actual release"
+          GITEA_TOKEN=${{ secrets.RELEASE_TOKEN }} GITEA_URL=https://git.nostrdev.com/sigit/sigit.io semantic-release
+
+      - name: Upload assets to release
+        run: |
+          echo "fetching release id"
+          RELEASE_ID=`curl -k 'https://git.nostrdev.com/api/v1/repos/sigit/sigit.io/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.id'`
+          echo "fetching release body"
+          RELEASE_BODY=`curl -k 'https://git.nostrdev.com/api/v1/repos/sigit/sigit.io/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.body'`
+          echo "Updating release body"
+          curl --data '{"draft": false,"body":"'"$RELEASE_BODY\n\nFor installation instructions, please visit https://docs.sigit.io/#/"'"}' -X PATCH --header 'Content-Type: application/json' -k https://git.nostrdev.com/sigit/sigit.io/releases/$RELEASE_ID?access_token=${{ secrets.RELEASE_TOKEN }}
+          echo "Uploading assets"
+          URL="https://git.nostrdev.com/api/v1/repos/sigit/sigit.io/releases/$RELEASE_ID/assets?access_token=${{ secrets.RELEASE_TOKEN }}"
+          curl -k $URL -F attachment=@frontend.zip

.gitea/workflows/release-staging.yaml

@@ -1,8 +1,8 @@
-name: Release
+name: Release to Staging
 on:
   push:
     branches:
-      - main
+      - staging
 
 jobs:
   build_and_release:
@@ -15,11 +15,23 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
+
+      - name: Audit
+        run: npm audit --omit=dev
 
       - name: Install Dependencies
         run: npm ci
 
+      - name: License check
+        run: npm run license-checker
+
+      - name: Lint check
+        run: npm run lint
+
+      - name: Formatter check
+        run: npm run formatter:check
+
       - name: Create .env File
         run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env
 
@@ -29,4 +41,6 @@ jobs:
       - name: Release Build
         run: |
           npm -g install cloudron-surfer
-          surfer put --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io dist/* /
+          surfer config --token ${{ secrets.STAGING_CLOUDRON_SURFER_TOKEN }} --server staging.sigit.io
+          surfer put dist/* / --all -d
+          surfer put dist/.well-known / --all

.gitea/workflows/staging-pull-request.yaml

@@ -0,0 +1,34 @@
+name: Open PR on Staging
+on:
+  pull_request:
+    types: [opened, edited, synchronize]
+    branches:
+      - staging
+
+jobs:
+  audit_and_check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Audit
+        run: npm audit --omit=dev
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: License check
+        run: npm run license-checker
+
+      - name: Lint check
+        run: npm run lint
+
+      - name: Formatter check
+        run: npm run formatter:check

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-zip
 dist-ssr
 *.local
 

.releaserc

@@ -0,0 +1,31 @@
+{
+  "branches": [
+    "main"
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json"
+        ]
+      }
+    ],
+    [
+      "@saithodev/semantic-release-gitea",
+      {
+        "giteaUrl": "https://git.nostrdev.com/",
+        "assets": [
+          {
+            "path": "dist-zip/dist.zip"
+          }
+        ]
+      }
+    ]
+  ]
+}

CHANGELOG.md

@@ -0,0 +1,429 @@
+## [1.0.3](https://git.nostrdev.com/sigit/sigit.io/compare/v1.0.2...v1.0.3) (2025-01-31)
+
+### Bug Fixes
+
+- bundling frontend with release ([889bc0e](https://git.nostrdev.com/sigit/sigit.io/commit/889bc0e4fcc21b79d6fc643317ae3423497e265e))
+
+## [1.0.2](https://git.nostrdev.com/sigit/sigit.io/compare/v1.0.1...v1.0.2) (2025-01-31)
+
+### Bug Fixes
+
+- adding api to release url ([aa32dae](https://git.nostrdev.com/sigit/sigit.io/commit/aa32dae62282be9c07ea6e4af514925585d97a2b))
+
+## [1.0.1](https://git.nostrdev.com/sigit/sigit.io/compare/v1.0.0...v1.0.1) (2025-01-31)
+
+### Bug Fixes
+
+- test to see if the automated release works ([031deef](https://git.nostrdev.com/sigit/sigit.io/commit/031deef6ca3b9794d3fadf67b67884137e6af9f2))
+
+# 1.0.0 (2025-01-31)
+
+### Bug Fixes
+
+- add default title for sigit ([ef5376e](https://git.nostrdev.com/sigit/sigit.io/commit/ef5376e2d1ec08a3327850a7035c03af2e16693d))
+- add default typography styles ([2cd851a](https://git.nostrdev.com/sigit/sigit.io/commit/2cd851a7c153c051b55365481a4e9ea6938e8be3))
+- add file and page index, hide select if not active ([5f92906](https://git.nostrdev.com/sigit/sigit.io/commit/5f92906032ab0ea6a09ae9d104a64f81fd10c095))
+- add files and marked to sign page exports ([9dd190d](https://git.nostrdev.com/sigit/sigit.io/commit/9dd190d65b18429ded79213bdfdf91a88aac0062))
+- add keys and show name for counterparts ([8267eb6](https://git.nostrdev.com/sigit/sigit.io/commit/8267eb624b76b0efc62a917da962a9865affad38))
+- add mark label ([c3dacbe](https://git.nostrdev.com/sigit/sigit.io/commit/c3dacbe1114cdcc408a4dde3019a31c1570afa3e))
+- add missing null and reduce warning limit ([bec3c92](https://git.nostrdev.com/sigit/sigit.io/commit/bec3c92b03c4127c9f768770640f6c41d0c329be))
+- add parantheses, invoke unixNow ([07d25eb](https://git.nostrdev.com/sigit/sigit.io/commit/07d25ebbd2e125e5a51ddcb27696a3de3d58f0f9))
+- add Roboto font ([6a1f04e](https://git.nostrdev.com/sigit/sigit.io/commit/6a1f04ec6b11f7a054ef9ce43283961ff40c6e78))
+- add show username ([62c1f1b](https://git.nostrdev.com/sigit/sigit.io/commit/62c1f1b37ba9dc78a29d3f73617177a90c9b6eba))
+- add small avatar when select is not showing ([d8d51be](https://git.nostrdev.com/sigit/sigit.io/commit/d8d51be603a9817ffc449eb2ffd81382cba47ec8))
+- add timeout in publishing updated app data and sending notifications ([6b135ac](https://git.nostrdev.com/sigit/sigit.io/commit/6b135ac54dd9d8e4c9948be92edcfa907d419940))
+- add types to rootReducer, rename userRobotImage types ([70f6464](https://git.nostrdev.com/sigit/sigit.io/commit/70f646444b9ed39798737851edc9b401c759a3d2))
+- adding link to source and updating home page wording ([c3d5a10](https://git.nostrdev.com/sigit/sigit.io/commit/c3d5a1042c3d66e75b8cb537d5bfff8a99909a02))
+- addressing comments ([8d8c38e](https://git.nostrdev.com/sigit/sigit.io/commit/8d8c38e90bce13c3a0b833a5598a790c2086a267))
+- adds notifications ([f38344b](https://git.nostrdev.com/sigit/sigit.io/commit/f38344b9acbb538f617d76796f75139db626164f))
+- AGPL Licence, closes [#197](https://git.nostrdev.com/sigit/sigit.io/issues/197) ([55abe81](https://git.nostrdev.com/sigit/sigit.io/commit/55abe814c967e3e126d40408239f62ac111ba9e7))
+- amends RelayMap to return a default sigit relay when no other relays are found ([2355da0](https://git.nostrdev.com/sigit/sigit.io/commit/2355da02d2c760f94509bcb4e375e75b61a2ce9f))
+- amends the relay look up method to return default relay set ([52fe523](https://git.nostrdev.com/sigit/sigit.io/commit/52fe523196986d651c7fa14224e2b4324683a6f4))
+- app bar z-index ([87c6807](https://git.nostrdev.com/sigit/sigit.io/commit/87c6807ba08ef0217bed4744e6241d479bf74967))
+- arrayBuffer access ([b3fc3c6](https://git.nostrdev.com/sigit/sigit.io/commit/b3fc3c6715739b92e63e3a14013fb97dc81360f7))
+- background overlap ([202c98c](https://git.nostrdev.com/sigit/sigit.io/commit/202c98c94c3b0ae99d28055b002c6120e9845451))
+- bad margin value ([734026b](https://git.nostrdev.com/sigit/sigit.io/commit/734026b2eeba2c5109ebdf0d8b5ef77f7ca36249))
+- better UX when clicking on logo when on home screen or `home` button in footer ([834d70d](https://git.nostrdev.com/sigit/sigit.io/commit/834d70d7747148d08b3c19720aca8d56b3d0de68))
+- bug, when valid npub, clicking + was saying npub was invalid ([99fa3ad](https://git.nostrdev.com/sigit/sigit.io/commit/99fa3add562c4efa013954c0e0df95723b9aea3d))
+- build failing due to type issue ([652ea06](https://git.nostrdev.com/sigit/sigit.io/commit/652ea06c0de77af453f1c4aeee4d473fe265d93a))
+- button colour ([4c04c12](https://git.nostrdev.com/sigit/sigit.io/commit/4c04c1240344c0f07a503bb0a5f56e7bfc791c8f))
+- card icons ([0d49c49](https://git.nostrdev.com/sigit/sigit.io/commit/0d49c4945977826cf90f2002ca1e06880f646003))
+- center block scrolling on mark items ([aec0d0b](https://git.nostrdev.com/sigit/sigit.io/commit/aec0d0bdd8bf435003e96fa90d1e9966e1b0b3e0))
+- change sign to create ([f35f469](https://git.nostrdev.com/sigit/sigit.io/commit/f35f469547737aea8b50e29fb7813a69a482d85b))
+- **ci:** add license check in staging workflow ([4af5781](https://git.nostrdev.com/sigit/sigit.io/commit/4af578133c17bbb5f3c4f60873dd1ae37e679e18))
+- **ci:** fix hook colors ([ea7fde4](https://git.nostrdev.com/sigit/sigit.io/commit/ea7fde4b38234128920de116609ad05e367bf9dd))
+- **CI:** fixed secret ([3e360aa](https://git.nostrdev.com/sigit/sigit.io/commit/3e360aab1510dc07c8c67b712ea666a72bb28469))
+- **ci:** run lint-staged always, fix lint-stage commands ([d43067f](https://git.nostrdev.com/sigit/sigit.io/commit/d43067f70ebb5d52c08452402540406ca9ff4cfa))
+- clear hasSubscribed after the logout ([1d1986f](https://git.nostrdev.com/sigit/sigit.io/commit/1d1986f0829f4c1ca183b017150ecfdbaa96a86c))
+- clicking logo not redirecting to home ([69efd9e](https://git.nostrdev.com/sigit/sigit.io/commit/69efd9e09d043403c987a5ab7fddd68158a1d22a))
+- clicking on marked fileds is losing input text/squiggle, squiggle field is mobile friendly ([602e23c](https://git.nostrdev.com/sigit/sigit.io/commit/602e23c719a0d583b194d627761efff14fb9b074))
+- color scheme ([d7f9807](https://git.nostrdev.com/sigit/sigit.io/commit/d7f9807e20d0bb4d85ab8794173e3bd71adb4ca4))
+- **column-layout:** wrap content column to prevent expanding ([a8020e6](https://git.nostrdev.com/sigit/sigit.io/commit/a8020e6db2ad88f29e6cf2bb35cca1cace56cb07))
+- composition for links and buttons ([804bb6c](https://git.nostrdev.com/sigit/sigit.io/commit/804bb6c9acb7f4eedd547eba7516e91e4a218d86))
+- convert npub/nip05 to lowercase on adding as signer/viewer ([fff0fd7](https://git.nostrdev.com/sigit/sigit.io/commit/fff0fd762dc0b3ddde04657207d09c795cdaa341))
+- counterpart search NIP05 glitching ([0fd0f26](https://git.nostrdev.com/sigit/sigit.io/commit/0fd0f26fc7ef87aea7c48ccddae822d23d2b8853))
+- create page, improving message "preparing document for signing" ([98fbe80](https://git.nostrdev.com/sigit/sigit.io/commit/98fbe80648e6b8e80af1e6c15de8bb963d27c070))
+- **create-page:** file list ([1caeb48](https://git.nostrdev.com/sigit/sigit.io/commit/1caeb48e6c91e0c8fd052caa8df0a5299f3e5f03))
+- **create-page:** only show signers in counterpart select ([29e6c85](https://git.nostrdev.com/sigit/sigit.io/commit/29e6c851504f884cdeae738bb70323a7703f2f74))
+- **create-page:** show other file types in content ([b12ce25](https://git.nostrdev.com/sigit/sigit.io/commit/b12ce258eb83620aa0dae546f146d381b9d61093))
+- **create:** block if no signers ([15aaef9](https://git.nostrdev.com/sigit/sigit.io/commit/15aaef948d264ad76b27dfa80ff22051e0eb1021))
+- **create:** remove small drawn fields ([902ad73](https://git.nostrdev.com/sigit/sigit.io/commit/902ad73fafa184d8f36b03d3e4b839afa724bded)), closes [#234](https://git.nostrdev.com/sigit/sigit.io/issues/234)
+- **create:** throw on mark with no counterpart ([624afae](https://git.nostrdev.com/sigit/sigit.io/commit/624afae8514420a36034ef29814920579da308f6))
+- **create:** uploading file adds to the existing file list, dedupe file list ([6d78d9e](https://git.nostrdev.com/sigit/sigit.io/commit/6d78d9ed643296b6dfa6ab3ffd0ae5295a46243a)), closes [#184](https://git.nostrdev.com/sigit/sigit.io/issues/184)
+- **deps:** update axios ([115a397](https://git.nostrdev.com/sigit/sigit.io/commit/115a3974e278c137aa2d490327bcc92e4ed0c492))
+- disable login, register fields, add coming soon ([0a74ad9](https://git.nostrdev.com/sigit/sigit.io/commit/0a74ad97b2a54f36acb39f8f57bf646f595b7e37))
+- disables redundant metaInNavState updates ([7463384](https://git.nostrdev.com/sigit/sigit.io/commit/746338465d1c370b503be257a9d57e132e0d7192))
+- display `no results` when no submissions are found ([bbe34b6](https://git.nostrdev.com/sigit/sigit.io/commit/bbe34b60116af3081a45ec55dde6e6e7620818a3))
+- displays complete marks from other users ([4d4a5b6](https://git.nostrdev.com/sigit/sigit.io/commit/4d4a5b63cf466af15d2b2414a52adeda8bd7cb8a))
+- **DM:** removed direct download link ([0fab6b5](https://git.nostrdev.com/sigit/sigit.io/commit/0fab6b5cdc1420854abc81493b0a83e6993336c7))
+- **draw:** add resize cursor to resize handle ([0d1a7ba](https://git.nostrdev.com/sigit/sigit.io/commit/0d1a7ba17118996d91c57737cfac4b036d796e31))
+- **drawfield:** match label and select ([923a47b](https://git.nostrdev.com/sigit/sigit.io/commit/923a47b4d086563fc1f514b962cfdecb281d6b87))
+- **drawing:** clamp DrawField within img ([2f54184](https://git.nostrdev.com/sigit/sigit.io/commit/2f5418462584ac5426c717680590d9156801ec57)), closes [#154](https://git.nostrdev.com/sigit/sigit.io/issues/154)
+- enable verify button ([f4a837a](https://git.nostrdev.com/sigit/sigit.io/commit/f4a837ae098bf5b660499f0c005089d8f9f6b37a))
+- entering decryption key manually does not work because of encoded URI ([e498ecb](https://git.nostrdev.com/sigit/sigit.io/commit/e498ecb082ebc5c2022b225f7824a12932282d6e))
+- **errors:** add custom timeout error ([9c545a4](https://git.nostrdev.com/sigit/sigit.io/commit/9c545a477cf5e6e9ecf8f171af3857fd64b5a78d))
+- failed DM error handling ([608400d](https://git.nostrdev.com/sigit/sigit.io/commit/608400d010262d3e2dc59cd03508a608560b521b))
+- false positive case of navigator.online ([307f32b](https://git.nostrdev.com/sigit/sigit.io/commit/307f32bb7b15bf796a80ab464d4d6d844815c180))
+- fetch app data from after login ([fa7a6e8](https://git.nostrdev.com/sigit/sigit.io/commit/fa7a6e85f4f7df3adac8cfe884f0592dd6c11aca))
+- file path ([79f37a8](https://git.nostrdev.com/sigit/sigit.io/commit/79f37a842f919f052b08ca2afe341a296e55a18c))
+- **files:** show other file types in content for create, fix sign and verify error ([86095cb](https://git.nostrdev.com/sigit/sigit.io/commit/86095cba5c624943c837b6b997f9485411444b01))
+- first find metadata on purplepag relay and then try other relays ([6981bef](https://git.nostrdev.com/sigit/sigit.io/commit/6981bef65ad458db69874cfc782b4f85109f284b))
+- font url typo ([fcd00d9](https://git.nostrdev.com/sigit/sigit.io/commit/fcd00d9e9ce42ab7e3f8c4a9836db3d76adadb34))
+- fonts ([aa5aa60](https://git.nostrdev.com/sigit/sigit.io/commit/aa5aa60c6a749c8c4b37a9c2a7e0b15794653a73))
+- footer 'Home' button scroll to top when on home page, fixed logic ([afbe05b](https://git.nostrdev.com/sigit/sigit.io/commit/afbe05b4c88d5042c17f4a59c0739dc8942642a9))
+- footer buttons ([e280e87](https://git.nostrdev.com/sigit/sigit.io/commit/e280e873424d6e92839e64d274997e51c1c135ed))
+- footer padding and responsiveness ([45f0764](https://git.nostrdev.com/sigit/sigit.io/commit/45f0764fa802bccc75b320527f7a18708b7302f4))
+- footer portal on relays ([ebd5947](https://git.nostrdev.com/sigit/sigit.io/commit/ebd59471c79335555ddf43748b3dd3457b65eb42))
+- format fixed for iv in encryption key ([c4ef090](https://git.nostrdev.com/sigit/sigit.io/commit/c4ef090f3c7e1da126fb5f09d4918d1c25867c0c))
+- gap, spacing ([99856fd](https://git.nostrdev.com/sigit/sigit.io/commit/99856fd8f2255ae8d1a667c67b86cd48373a0fd5))
+- getRobohash function will do the conversion of pubkey ([9aa1066](https://git.nostrdev.com/sigit/sigit.io/commit/9aa10664a7e5b9af4bde3cb6f5cc55d0334eaa54))
+- **git-hooks:** add executable flag ([7b5a122](https://git.nostrdev.com/sigit/sigit.io/commit/7b5a12246d792672734747ca33ff77cfc05c0537))
+- handle navigation after create ([00db735](https://git.nostrdev.com/sigit/sigit.io/commit/00db735106767ccd3a934c9d4f9124b40ef2b7b3))
+- handle the case when zip entry is undefined ([e4675af](https://git.nostrdev.com/sigit/sigit.io/commit/e4675af4dd8267a88bed50bf3d3f1aa323d17987))
+- hanlde error in decryption of zip file ([660efb3](https://git.nostrdev.com/sigit/sigit.io/commit/660efb3b677130ecfe1248405acb40f16f5c4572))
+- home screen style fixed for mobile view ([6f8830a](https://git.nostrdev.com/sigit/sigit.io/commit/6f8830a77ccf40eed0c11ccc65ae5d736dfb981d))
+- **home-page:** sigit file type display now correctly shows multiple file types ([acc8c84](https://git.nostrdev.com/sigit/sigit.io/commit/acc8c84617a38443d301804f540f5d40b4a0d461))
+- **home:** focus outlines and decorations ([72d0e06](https://git.nostrdev.com/sigit/sigit.io/commit/72d0e065eae580611c5a9252c8521086495dd2c5))
+- homepage alpha warning ([867e1b8](https://git.nostrdev.com/sigit/sigit.io/commit/867e1b88c2bd60b1f7e3f566d940e4e48f9043c0))
+- IconButton conflict, username layout ([9dae3a4](https://git.nostrdev.com/sigit/sigit.io/commit/9dae3a48bef7f4d0d0ce273f6cf9ec78f47b1017))
+- icons, use FontAwesome package ([6f4737d](https://git.nostrdev.com/sigit/sigit.io/commit/6f4737d75cc15b0d72608775153c119d10265f0f))
+- If creator is not the first signer we should not redirect to /sign page ([ee3e0e1](https://git.nostrdev.com/sigit/sigit.io/commit/ee3e0e1bb1f338b912f0352acb61fdc7c1749e6e))
+- improve font support ([a63ea91](https://git.nostrdev.com/sigit/sigit.io/commit/a63ea913d9c87028e78b49d8ef0886173fea877a))
+- in pdf marking if counterpart does not have any of name, displayname, username then show pubkey ([42d74c6](https://git.nostrdev.com/sigit/sigit.io/commit/42d74c656a495a7600aa5e5232ea8ed1c231f524))
+- In sign page, when doc is fully signed, update search params with update file url and key ([05c3f49](https://git.nostrdev.com/sigit/sigit.io/commit/05c3f49a17bc78b6b57a59a9a6dc475ab57d5034))
+- include hidden folders in surfer upload ([970c5f5](https://git.nostrdev.com/sigit/sigit.io/commit/970c5f5e8bfc0129283fe14c7e6fa3c9a8a35ea4))
+- include purplepage and userkindpages relays when searching for user in create page ([8a9910d](https://git.nostrdev.com/sigit/sigit.io/commit/8a9910db87dcd27488ef1588a18e4480b16adde8))
+- including signatures in both export and encrypted export ([6716c3d](https://git.nostrdev.com/sigit/sigit.io/commit/6716c3da636f9c0a1b168cb2cb0a98da97a6c5c3))
+- increased timeout for extension user prompt ([2c2eeba](https://git.nostrdev.com/sigit/sigit.io/commit/2c2eeba83f2fb6cdf73228733448228151f1de0f))
+- inform user then search term provided no results ([24463a5](https://git.nostrdev.com/sigit/sigit.io/commit/24463a53c50f00313e3502438ae5f47254635253))
+- inlined svg background images ([c22b1e4](https://git.nostrdev.com/sigit/sigit.io/commit/c22b1e4b5a04943e61ae162911c28496da2b51fd))
+- input font-family inherit ([f21d158](https://git.nostrdev.com/sigit/sigit.io/commit/f21d158a8ec5fd204fd513f140cfa33b97cb5383))
+- label ([0163d51](https://git.nostrdev.com/sigit/sigit.io/commit/0163d51155ffff17b41d9e60871143b6be68e7d6))
+- landing page ([cc9fb50](https://git.nostrdev.com/sigit/sigit.io/commit/cc9fb50b079ff4f0d67ade1f30973f437f9e4ef6))
+- landing page wording ([4dd6b6d](https://git.nostrdev.com/sigit/sigit.io/commit/4dd6b6d7a449a0f41db995fb577c42124b234137))
+- last signer as default next ([39934f5](https://git.nostrdev.com/sigit/sigit.io/commit/39934f59c375d774f1fb4f7a97676304f5e9fd41))
+- leaky styling and warnings ([6f88f22](https://git.nostrdev.com/sigit/sigit.io/commit/6f88f22933ddd6bf787c69d0dcaf12032d5ea4f9)), closes [#147](https://git.nostrdev.com/sigit/sigit.io/issues/147)
+- **lint:** add deps, remove any, update warning limit ([61f39d1](https://git.nostrdev.com/sigit/sigit.io/commit/61f39d17ff4619c2b6beedf7d3189c03278aeede))
+- **lint:** update warning limit ([404f4aa](https://git.nostrdev.com/sigit/sigit.io/commit/404f4aa3a1e8db7ff90300b107496f59a28a539e))
+- list item key ([c7dfb28](https://git.nostrdev.com/sigit/sigit.io/commit/c7dfb2864acea7e20237b2f8da16f915f9544d43))
+- loading spinner states, timestamp the file, and lint fixes ([748cb16](https://git.nostrdev.com/sigit/sigit.io/commit/748cb16f9fe44f8fc06ac6142cdd01c348bc7c1c))
+- loading spinner, improve desc readability, use favicon instead of circle ([5a4da18](https://git.nostrdev.com/sigit/sigit.io/commit/5a4da1834b8628199d8577afda957fa359040b63))
+- **loading:** make sure the default spinner is absolute relative to root always ([4bc5882](https://git.nostrdev.com/sigit/sigit.io/commit/4bc5882ab60cd4b31f532d506433d24c67548082))
+- login with hex key does not work, missing proper error when nsec or private key is wrong ([213ae79](https://git.nostrdev.com/sigit/sigit.io/commit/213ae79bf52da893dccc4576dd690cddbb0e4bd8))
+- **login:** extension login infinite loading ([7c80643](https://git.nostrdev.com/sigit/sigit.io/commit/7c80643aba266fc0279c593f1951931f3fbb9ce2)), closes [#196](https://git.nostrdev.com/sigit/sigit.io/issues/196)
+- **Login:** fixed loginWithExtension func ([be4e7ab](https://git.nostrdev.com/sigit/sigit.io/commit/be4e7ab2bda98927be90c0150afc37e575fb1a8e))
+- **login:** redirect to landing instead of login popup page ([84062f2](https://git.nostrdev.com/sigit/sigit.io/commit/84062f2ed0e9953c5c3830d792a60577ddb3ebe4))
+- **login:** update login method before using nostrController instance ([1f98020](https://git.nostrdev.com/sigit/sigit.io/commit/1f980201dde2cf9b4e4ec8a0470e49944f797c5d))
+- **login:** use const and make sure to clear timeout always ([17c1700](https://git.nostrdev.com/sigit/sigit.io/commit/17c170055488ba793658a32745c10bf8f2c32981))
+- logout user if decryption fails due to diff pubkeys ([c96a7fa](https://git.nostrdev.com/sigit/sigit.io/commit/c96a7fac4fcf59eacf097be9c39fcc13cd6f04b9))
+- logout user if signEvent's and auth's pubkeys are diff ([8153ef0](https://git.nostrdev.com/sigit/sigit.io/commit/8153ef03fbf693f6ec1ecd1425dc03d76d29416f))
+- **LogOut:** used log out action instead of clearState utility ([803e242](https://git.nostrdev.com/sigit/sigit.io/commit/803e242b01fb3aa68c0d305b340f8515a58b1717))
+- looping trough robo sets, image not shown when visiting profile while not logged in ([6604ea2](https://git.nostrdev.com/sigit/sigit.io/commit/6604ea2046afea40fc3deeb0548016b3ec1fe53d))
+- main css background, avoid overscroll showing white edge ([7570123](https://git.nostrdev.com/sigit/sigit.io/commit/757012399ac2236b9643b5812f28b1477bc54738))
+- manage pending relay connection requests ([f9fcfb1](https://git.nostrdev.com/sigit/sigit.io/commit/f9fcfb1c9e70a73acfda90ce4d1c1215623972df))
+- **mark:** css position ([413da78](https://git.nostrdev.com/sigit/sigit.io/commit/413da78c5c06b5b35740692f6b7c00125a7c8969))
+- marking ([b22f577](https://git.nostrdev.com/sigit/sigit.io/commit/b22f577cc2de21bb1f8370c84a1d263f09fd7eb6))
+- **marks:** add default signer ([dfdcb84](https://git.nostrdev.com/sigit/sigit.io/commit/dfdcb8419d5b3c8ca34c6f9590107ce120a53174))
+- **marks:** add file grouping for marks, fix read pdf types ([b6479db](https://git.nostrdev.com/sigit/sigit.io/commit/b6479db2665ef500d20831dcd941d5ce728b79d3))
+- **marks:** assign selectedMarkValue to currentValue and mark.value ([78060fa](https://git.nostrdev.com/sigit/sigit.io/commit/78060fa15fb55c597918042559d544ff4528dc24))
+- **mark:** scroll into marks, add scroll margin and forwardRef ([82b7b9f](https://git.nostrdev.com/sigit/sigit.io/commit/82b7b9f7ce1e8e6edfc547e18b56090236b02bdf)), closes [#172](https://git.nostrdev.com/sigit/sigit.io/issues/172)
+- **MetadataController:** fixed getting popular relays ([026537c](https://git.nostrdev.com/sigit/sigit.io/commit/026537c75b26a74fb067c210d9aedd6105d7a23c))
+- missing id/name on custom select input ([d0e3704](https://git.nostrdev.com/sigit/sigit.io/commit/d0e3704ed6a2c08eede388e353bcf76880873411))
+- **mobile:** active tab default state and styling ([6f7d4c9](https://git.nostrdev.com/sigit/sigit.io/commit/6f7d4c9dcfb696264f67db11a3a83a3c52ac0103))
+- **mobile:** use dynamic vh and one-by-one horizontal scroll ([3628137](https://git.nostrdev.com/sigit/sigit.io/commit/36281376bc2be5592193d01c483916b6c8859912))
+- modal override removed ([64b6f83](https://git.nostrdev.com/sigit/sigit.io/commit/64b6f8309f361a6db6c6e91005b50969cdbfa549))
+- move nostr login to nostr route ([3c22429](https://git.nostrdev.com/sigit/sigit.io/commit/3c22429941f476b4c55f4f862580fe1520a665a8))
+- moves sample data to a separate json file ([1de8e89](https://git.nostrdev.com/sigit/sigit.io/commit/1de8e89beb555e881b822ed0f37e9a44b03f321c))
+- moves styling to SVG ([38cd88f](https://git.nostrdev.com/sigit/sigit.io/commit/38cd88fd866e19168b91745d5cf98543eebbc0f7))
+- navigation to profile page from username component ([d502474](https://git.nostrdev.com/sigit/sigit.io/commit/d5024745f163ef38a833c3253177ebc67f2e8642))
+- nested a links in card ([e4a7fa4](https://git.nostrdev.com/sigit/sigit.io/commit/e4a7fa4892b05f648dfb988b898fb0658d2f22d4))
+- next signer and spinner anim duration ([d8adb2c](https://git.nostrdev.com/sigit/sigit.io/commit/d8adb2c74471bf55351b3649c699f8b6d4360a47))
+- no need to listen for authUrl in createNsecBunkerSigner method of NostrController ([3626368](https://git.nostrdev.com/sigit/sigit.io/commit/3626368e95b228f30dc6855f10d190f92d833aa3))
+- node version bump from 18 to 20 ([354312b](https://git.nostrdev.com/sigit/sigit.io/commit/354312bd96d6092502812d591d41947182aa335b))
+- nostr-login custom outbox relays ([555504f](https://git.nostrdev.com/sigit/sigit.io/commit/555504f42f030028af6b280d664e1024d63e1e12))
+- nsec login, metadata overlapping, robohash image in metadata state ([e3e15b7](https://git.nostrdev.com/sigit/sigit.io/commit/e3e15b7af139028ec4a3f27d6f037f1465eb2a56))
+- **Offline:** fixed 0.0.0.0 host ([7be9897](https://git.nostrdev.com/sigit/sigit.io/commit/7be98978dd2b492b4aad4b38f9289e1b45939132))
+- **online-detection:** use relative url ([8b4f1a8](https://git.nostrdev.com/sigit/sigit.io/commit/8b4f1a8973abe0a395cacf9617aab80bb606bf61))
+- Opening a sigit asks you to sign when you are not the next signer ([ae3d461](https://git.nostrdev.com/sigit/sigit.io/commit/ae3d461661f41f7243828015d26c2431ebb91fda))
+- opening link to sign a file while not logged in is not redirecting correctly ([eff8827](https://git.nostrdev.com/sigit/sigit.io/commit/eff8827a86d97c88386798fe4e5449bad42b3539))
+- optional label for download button in filelist ([3c230e6](https://git.nostrdev.com/sigit/sigit.io/commit/3c230e6fb4b5971669a6df8e4eeb1f9f78339873))
+- outdated cache checks ([f0ba9da](https://git.nostrdev.com/sigit/sigit.io/commit/f0ba9da8af9abc24fdae0b6fe65b83326d904e44))
+- page scrolling ([97c8271](https://git.nostrdev.com/sigit/sigit.io/commit/97c82718cb2991309894d2fd823f25035504b9be))
+- pdf to png scaling is 1, bottom position is now included ([4556bd0](https://git.nostrdev.com/sigit/sigit.io/commit/4556bd0c66f275956fe850b77f1b5c2a392c7760))
+- **pdf:** add border to style ([ecc1707](https://git.nostrdev.com/sigit/sigit.io/commit/ecc1707212fdee75775d38154ffbddc22619fb88))
+- **pdf:** add proper default width value ([a442e71](https://git.nostrdev.com/sigit/sigit.io/commit/a442e71087c75f9e224794e4160b9f8d6dfc71d9))
+- **pdf:** dynamic mark scaling ([ea09daa](https://git.nostrdev.com/sigit/sigit.io/commit/ea09daa6692e905c703d3800b8a8adbdb391f6b5))
+- **pdf:** font style consistency ([31f3675](https://git.nostrdev.com/sigit/sigit.io/commit/31f36750cd5479fc05e2a86ade5153e6a65955f6))
+- pdfjs import ([d5e0769](https://git.nostrdev.com/sigit/sigit.io/commit/d5e07696926f554894bb316df2e6a49e00983229))
+- **pdf:** keep upscaling to match viewport ([43beac4](https://git.nostrdev.com/sigit/sigit.io/commit/43beac48e85c32b09e10dd611c259ce2c3783a4a))
+- **pdf:** mark embedding, position, multiline, & placeholder ([f35e271](https://git.nostrdev.com/sigit/sigit.io/commit/f35e2718abcdae0d5c9624444d5ad33c5e368f33)), closes [#176](https://git.nostrdev.com/sigit/sigit.io/issues/176) [#178](https://git.nostrdev.com/sigit/sigit.io/issues/178)
+- **pdf:** reuse content width function ([59c3fc6](https://git.nostrdev.com/sigit/sigit.io/commit/59c3fc69a255c54475daa6a2efad3ae8a4b3efd8))
+- **pdf:** scaling and font styles consistency ([ac3186a](https://git.nostrdev.com/sigit/sigit.io/commit/ac3186a02ed441c6efc31aaf462a5b8b229f5fa1)), closes [#146](https://git.nostrdev.com/sigit/sigit.io/issues/146)
+- **pdf:** scaling on resize, add avatars to counterpart select ([4712031](https://git.nostrdev.com/sigit/sigit.io/commit/47120316152a7a3157f7cd089cb2184053ae25ec))
+- **pdf:** use minified version of pdf ([a3effd8](https://git.nostrdev.com/sigit/sigit.io/commit/a3effd878b25da50f0575f10dd094efae0b03ec7))
+- placeholder avatar is incosistent across components ([d15943f](https://git.nostrdev.com/sigit/sigit.io/commit/d15943f61bdac9573d528795ff43903459c0da3b))
+- popup forms designs ([e3ca3ab](https://git.nostrdev.com/sigit/sigit.io/commit/e3ca3ab9088e9a45d6d01c35811450c8c3f762dc))
+- processing events ([25764c7](https://git.nostrdev.com/sigit/sigit.io/commit/25764c7ab41708f03e4c671857be519020bee46f))
+- processing gift wraps and notifications ([#193](https://git.nostrdev.com/sigit/sigit.io/issues/193)) ([235e76b](https://git.nostrdev.com/sigit/sigit.io/commit/235e76be4e3eada7668bf802ff063394d958ff17))
+- profile image scale ([58c457b](https://git.nostrdev.com/sigit/sigit.io/commit/58c457b62c67201fb83c845f9fa5a81b87dfdc65))
+- profile page styling ([67e5c19](https://git.nostrdev.com/sigit/sigit.io/commit/67e5c19870bdd66ac1fc2b4dd3231a2fb77831a7))
+- profile picture inconsistencies, login with enter ([5f8e8fd](https://git.nostrdev.com/sigit/sigit.io/commit/5f8e8fd6f4eb6bf74c04abb51c2af545eda2be45))
+- push all files take 2 ([24916c5](https://git.nostrdev.com/sigit/sigit.io/commit/24916c58068bbe9e5dfc76cbf00c955add6744e4))
+- reduce mui usage, implement design updates ([9189ff3](https://git.nostrdev.com/sigit/sigit.io/commit/9189ff33bc714c795f8acedd85995c0152882a35))
+- redundant updates ([2d0212f](https://git.nostrdev.com/sigit/sigit.io/commit/2d0212fd6c683fb984eee55e1f815c2c6bbecae2))
+- **relay-controller:** sigit relay immutability and relay list ([e0d6c03](https://git.nostrdev.com/sigit/sigit.io/commit/e0d6c0363951c66bdede17759ae712626a4a07a5))
+- **relays:** allow adding ws:// ([04f1d69](https://git.nostrdev.com/sigit/sigit.io/commit/04f1d692a44123331129ee92443c92f9254403f4)), closes [#297](https://git.nostrdev.com/sigit/sigit.io/issues/297)
+- **relays:** relay add button size height ([5f3d92d](https://git.nostrdev.com/sigit/sigit.io/commit/5f3d92d62f1f958f3e93ed4c9cd879c88a5c5d6c)), closes [#244](https://git.nostrdev.com/sigit/sigit.io/issues/244)
+- removal of create nostr auth token ([60a7140](https://git.nostrdev.com/sigit/sigit.io/commit/60a7140c6a662c225c63108707ac9dd67990f88a))
+- remove both from UserRole enum ([b527339](https://git.nostrdev.com/sigit/sigit.io/commit/b5273393e6edd56fa2e9c6b9a305e56e4555020c))
+- remove duplicate states and fix default signer ([e05d3e5](https://git.nostrdev.com/sigit/sigit.io/commit/e05d3e53a2b663973adf2e02296b3a5bbfa8ee78))
+- remove nostr image for placeholder avatar, use robohash instead ([4f4f7fb](https://git.nostrdev.com/sigit/sigit.io/commit/4f4f7fb5c1ed21747b4b3bea5771674cf8d159a5))
+- remove placeholder used for text ([d0a6297](https://git.nostrdev.com/sigit/sigit.io/commit/d0a6297ccec0b61066cc2ca80e44dc6017581116))
+- remove screen on nostr-login launch ([8689c7f](https://git.nostrdev.com/sigit/sigit.io/commit/8689c7f753fc0d5ab5e88bdf3d376da2c60148c0))
+- remove unstable fetch events loop ([5f0234a](https://git.nostrdev.com/sigit/sigit.io/commit/5f0234a358788226b6bb0e71f95de8c70ef4bc3f))
+- removed redundant variable ([2455856](https://git.nostrdev.com/sigit/sigit.io/commit/245585662a094da385702438bcdd72387cd5267f))
+- removed viewer/signer button ([2f9017b](https://git.nostrdev.com/sigit/sigit.io/commit/2f9017b8403f2d42e773e27928b259830d123ecf))
+- removes retrier and updates notification ([3d5006a](https://git.nostrdev.com/sigit/sigit.io/commit/3d5006a7154ee9be6bb165f8cafc1bcd59c20e26))
+- removes unneeded notification ([b7bd922](https://git.nostrdev.com/sigit/sigit.io/commit/b7bd922af35d95a2d78a1b168ab1ec4c4d66a9ee))
+- removing file upload, avatar by robohash ([8e76202](https://git.nostrdev.com/sigit/sigit.io/commit/8e7620201ea4252bc9b025f4d0b24930795c016a))
+- replace sign with upload in homepage ([021db56](https://git.nostrdev.com/sigit/sigit.io/commit/021db5679a54ec4b6f44fbe86bb00cfa3125be82))
+- return immediately from publish event when published to at least one relay and keep publishing to other in background ([7df6ab8](https://git.nostrdev.com/sigit/sigit.io/commit/7df6ab8c8495443ccc83dca937ee26cefb158441))
+- reverting signing of nostr auth token ([38913e7](https://git.nostrdev.com/sigit/sigit.io/commit/38913e770de8b1900a58d21354963dadf6180d57))
+- review suggestion ([15d4d0a](https://git.nostrdev.com/sigit/sigit.io/commit/15d4d0a75276ec20394d2ef5e68e737c8f412cee))
+- **review:** remove inline styles ([b8811d7](https://git.nostrdev.com/sigit/sigit.io/commit/b8811d730a781c285ee6fc83a5faa6230aa45c3a))
+- robohash image missing with NIP05 login ([9baf0ec](https://git.nostrdev.com/sigit/sigit.io/commit/9baf0ecabae1b32a74b29c7dd65bf6ffd67525e4))
+- routing, removed useEffect ([8e71592](https://git.nostrdev.com/sigit/sigit.io/commit/8e71592d8815471bde6fb74230ba9742308daad8))
+- search bar scaling ([272fcf9](https://git.nostrdev.com/sigit/sigit.io/commit/272fcf93c64005b06249690815bb320ad66b9798))
+- search counterparts nip05 does not need to include '@' ([7b29d70](https://git.nostrdev.com/sigit/sigit.io/commit/7b29d7055eeb6bf7f9bbcc06fb2ecf0962157046))
+- selected mark selection ([0d52cd7](https://git.nostrdev.com/sigit/sigit.io/commit/0d52cd71134c9b3eee41e1ea853dba65afc7c79b))
+- show error if decrypt fails ([cc382f0](https://git.nostrdev.com/sigit/sigit.io/commit/cc382f072643918e83c399374bfe5ff77af794e4))
+- show extension box for non-mark files, de-dupe css and code ([05a2dba](https://git.nostrdev.com/sigit/sigit.io/commit/05a2dba164f015098cafb29d143b308d8db7dc8a)), closes [#138](https://git.nostrdev.com/sigit/sigit.io/issues/138)
+- show import/export only for local ([67d545d](https://git.nostrdev.com/sigit/sigit.io/commit/67d545de2fec2898ec12a4433ec9d722248a4b83))
+- sigit links and outline ([21caaa7](https://git.nostrdev.com/sigit/sigit.io/commit/21caaa7009e49cd7cedc54104ab9438c330ed708))
+- sigit's wrapper zip should contain keys.json file ([ded8304](https://git.nostrdev.com/sigit/sigit.io/commit/ded8304c669c257b5b782829ffb37be101af9cdd))
+- **sigit:** add to submittedBy avatar badge for verified sigit creation ([b2c3cf2](https://git.nostrdev.com/sigit/sigit.io/commit/b2c3cf2aca05a8e232a53ac087929f3eb797e23d))
+- **sigit:** excel extension typo, more excel types ([6b5a8a7](https://git.nostrdev.com/sigit/sigit.io/commit/6b5a8a7375d528ce4f8e53dd595e1bbde27ea433))
+- sign buttons styles ([8c97476](https://git.nostrdev.com/sigit/sigit.io/commit/8c974768a81db75a0bd94e20db6a495126207f5b))
+- **sign:** allow signing without marks, hide loading and show toast for prevSig error ([20d1170](https://git.nostrdev.com/sigit/sigit.io/commit/20d1170f7dd41832b83b34656a9f95e239f074cf))
+- **sign:** allow signing without selectedMark - no currentUserMarks ([92f23ba](https://git.nostrdev.com/sigit/sigit.io/commit/92f23bab91225d888c101c3670868eae132114e9))
+- **sign:** allow sumit without selectedMark ([cb0d2dd](https://git.nostrdev.com/sigit/sigit.io/commit/cb0d2dd7bc98a7e16c3d2e53fba4bd86a0c8a89d))
+- **sign:** always show PdfView ([8df5084](https://git.nostrdev.com/sigit/sigit.io/commit/8df5084703baf2b7ae416af8d8d5064cec13ee19))
+- **signature:** force re-render on value change ([a1c3087](https://git.nostrdev.com/sigit/sigit.io/commit/a1c308727f2786b48cb083bf0544a358ab211c2c))
+- signing order ([ec305c4](https://git.nostrdev.com/sigit/sigit.io/commit/ec305c417bcca6d70a24cdae14c1b99be40b0064))
+- simplify events, more ts and clean up ([6641cf2](https://git.nostrdev.com/sigit/sigit.io/commit/6641cf2ee703c4c973c69ecde864030fb2e91596))
+- some linter warnings and an error ([f51afe3](https://git.nostrdev.com/sigit/sigit.io/commit/f51afe3b677d418cdf4c4d29132f63f9ff1bd56b))
+- **spinner:** remove dummy desc and use variants ([d1b9eb5](https://git.nostrdev.com/sigit/sigit.io/commit/d1b9eb55d8b41c43b600b1e0f3432a7030dbec91))
+- styles fixed in homepage ([6553ed8](https://git.nostrdev.com/sigit/sigit.io/commit/6553ed89e08b7d9279935b63db99d9571e5391d5))
+- styling ([2f29ea9](https://git.nostrdev.com/sigit/sigit.io/commit/2f29ea9f35ad1c3285a9c01e7e51dfc37942c02f))
+- styling ([d41d577](https://git.nostrdev.com/sigit/sigit.io/commit/d41d577c29af2135e4352186af1b4b434d22cc95))
+- styling ([e681513](https://git.nostrdev.com/sigit/sigit.io/commit/e681513785bd0df6d16c0b34405ed834ca39740c))
+- styling ([551a3f8](https://git.nostrdev.com/sigit/sigit.io/commit/551a3f8509ae78f921d66370bcd653dd3f6dc226))
+- styling ([12fe476](https://git.nostrdev.com/sigit/sigit.io/commit/12fe476e97e2d907fcb41baa87bd8e1ca74f1b80))
+- svg attributes ([3a93622](https://git.nostrdev.com/sigit/sigit.io/commit/3a9362296674374b6c4b79e1260b0c043a5ea52b))
+- **tabs:** add tab icons ([2be7f3d](https://git.nostrdev.com/sigit/sigit.io/commit/2be7f3d51bfac0d58984229b04f97b5df8dbebc6))
+- take 3 all files ([02f250c](https://git.nostrdev.com/sigit/sigit.io/commit/02f250c76eb6d1b7fb410394c88397e37dd527e4))
+- take 4 (all files) ([abf9c3e](https://git.nostrdev.com/sigit/sigit.io/commit/abf9c3e4fd7b61d5f8794714484cb8a0c542d6e7))
+- take 5 files ([ea3f618](https://git.nostrdev.com/sigit/sigit.io/commit/ea3f61897c7ab8601547e3b61a6bdd833a19ad12))
+- take 6 ([400d192](https://git.nostrdev.com/sigit/sigit.io/commit/400d192fb0441bbe772d44a457f4e96a4d42d11f))
+- take 7 ([3f944bd](https://git.nostrdev.com/sigit/sigit.io/commit/3f944bdf73103e6a0152c32bc788d363c323f42b))
+- title text align ([c5b1a9b](https://git.nostrdev.com/sigit/sigit.io/commit/c5b1a9b3804c1a6003ba3d22afdb1b76b3d9db48))
+- toggle ([3549b6e](https://git.nostrdev.com/sigit/sigit.io/commit/3549b6e54292b3d6fe456025cefc397ba0aa070d))
+- top level container wrapper for other pages ([53b7b05](https://git.nostrdev.com/sigit/sigit.io/commit/53b7b05ac5ed75be25d84e5bb0a0a851ac04112d))
+- typo ([6c5ed3a](https://git.nostrdev.com/sigit/sigit.io/commit/6c5ed3a69c7c025a507cf87f77bd408a3eee3de1))
+- unzip and use timeout util ([8b00ef5](https://git.nostrdev.com/sigit/sigit.io/commit/8b00ef538b164b1116095fd5ffee95a5791667e5))
+- update buttons and button icon design ([28184ab](https://git.nostrdev.com/sigit/sigit.io/commit/28184ab03864627138852b720e638ba56de5e1b5))
+- update design buttons ([5d59ffc](https://git.nostrdev.com/sigit/sigit.io/commit/5d59ffce28e1248c15d04730794606fbf4b2e1dd))
+- update DM wording ([de00b9b](https://git.nostrdev.com/sigit/sigit.io/commit/de00b9b5a70bdafa2c10c35ba8956fffef1802d3))
+- update footer design ([af689a0](https://git.nostrdev.com/sigit/sigit.io/commit/af689a00f7848ce1a61c6a19eaa0e76a8e417d5c))
+- update logo and favicon ([017d1ab](https://git.nostrdev.com/sigit/sigit.io/commit/017d1ab88b3aa8b99c96641a9f5b04745fa31259))
+- update nsecBunker delegated key after logout ([962b2bc](https://git.nostrdev.com/sigit/sigit.io/commit/962b2bcea676ff247218196e7649ed17141b64b5))
+- update online and offline flows ([e8da0dc](https://git.nostrdev.com/sigit/sigit.io/commit/e8da0dc76f37f9b8cc8033ce6480b9d806cec718))
+- update popup design ([55158fc](https://git.nostrdev.com/sigit/sigit.io/commit/55158fc313e9a31055210e061ca136c106cdf03a))
+- update the logic for login with nsecbunker ([7c3c061](https://git.nostrdev.com/sigit/sigit.io/commit/7c3c061b88029f7643f471f2cf2279cc115e0719))
+- update the url in DM to contain fileUrl and encryption key ([9fa3df3](https://git.nostrdev.com/sigit/sigit.io/commit/9fa3df3850935b4798489e9980de4520f00c2b20))
+- update user placeholder for create ([e7b0bbe](https://git.nostrdev.com/sigit/sigit.io/commit/e7b0bbe23c71421d9725b242cb62ed11e40ffdad))
+- update verify to use file signature check ([18637bb](https://git.nostrdev.com/sigit/sigit.io/commit/18637bbbc193f970c03c9b19d522fff29390273f))
+- updated latest version of nostr-login which includes outboxRelays option ([6f6ed3c](https://git.nostrdev.com/sigit/sigit.io/commit/6f6ed3c39f959d287f93ed1bd111d296b3e3fdf5))
+- updates blossom authorisation event ([dd53ded](https://git.nostrdev.com/sigit/sigit.io/commit/dd53ded5186abf692a4b554a39a21f445672a5d4))
+- updating title on homepage ([481ef6c](https://git.nostrdev.com/sigit/sigit.io/commit/481ef6cdc21ed89280e4ec748fbd0d8866180324))
+- url ([79ef9eb](https://git.nostrdev.com/sigit/sigit.io/commit/79ef9eb8d6ced4cbb0517def4b7864176c78b1f4))
+- url encode the DM link payload ([38def3b](https://git.nostrdev.com/sigit/sigit.io/commit/38def3bda5381259047f57065cad10b84a395d53))
+- use correct key for signer status, update signer badge icons ([3743a30](https://git.nostrdev.com/sigit/sigit.io/commit/3743a30ef62084c6c3a8cfdfcb63d1f08f0162ed))
+- use dedicated key from nip78 in auth event for uploading files.zip ([8eaf9cb](https://git.nostrdev.com/sigit/sigit.io/commit/8eaf9cb61cc6de9d60f40c110565f3d560f51229))
+- use default relayMap if its undefined in redux store ([d7b5ea9](https://git.nostrdev.com/sigit/sigit.io/commit/d7b5ea9b9ead53193204af99374ced2465a83e4e))
+- use hash router instead of browser router ([3d980ca](https://git.nostrdev.com/sigit/sigit.io/commit/3d980ca2e7a4afb2c37fce8f1ccef9e192af980d))
+- use iframe for nsecbunker auth ([c99a2a8](https://git.nostrdev.com/sigit/sigit.io/commit/c99a2a81c265f601e2af00890132818d905d6133))
+- use kind 0 event for nostr joining block ([9bb62cf](https://git.nostrdev.com/sigit/sigit.io/commit/9bb62cf96676aa5bca5882260f037ce00c5ee74f))
+- use kind 27235 in place of kind 1 wherever possible ([9073419](https://git.nostrdev.com/sigit/sigit.io/commit/90734196e5f14b4c988b3ab36c1ab2a968e2842a))
+- use old approach of using sha256 for generating d tag ([49c1714](https://git.nostrdev.com/sigit/sigit.io/commit/49c17149621670b7d44184762ded530fd66efbc1))
+- use relays from nip65 for broadcasting DMs ([349e26b](https://git.nostrdev.com/sigit/sigit.io/commit/349e26b62888e72d7987ee6c1baab761b998ed22))
+- userRobotImage reducer type fix ([ccc31c5](https://git.nostrdev.com/sigit/sigit.io/commit/ccc31c51c99945b5f0634bbe2ce11851d86ae367))
+- useSigitProfile dep ([329fd3d](https://git.nostrdev.com/sigit/sigit.io/commit/329fd3d27beeb4ae08558887b731b9657de90237))
+- verify page robohash ([5e114f7](https://git.nostrdev.com/sigit/sigit.io/commit/5e114f7fb86b4205aefd6125fe5fc2348d3cfb0b))
+- **verify-page:** add mark styling ([423b6b6](https://git.nostrdev.com/sigit/sigit.io/commit/423b6b6792feca3ff5891bfc1d9f2181d8a00195))
+- **verify-page:** export (download) files now includes files ([7278485](https://git.nostrdev.com/sigit/sigit.io/commit/7278485b76c6e4a6319d1f3a7941d4985dc93cad))
+- **verify-page:** map item keys ([58f70db](https://git.nostrdev.com/sigit/sigit.io/commit/58f70db7f61a8a963289831d25b7ea877798a593))
+- **verify-page:** parse and show mark values ([f88e2ad](https://git.nostrdev.com/sigit/sigit.io/commit/f88e2ad6804424755dacfc8c89da4fb8c2b90fcc))
+- **verify-page:** remove mark border in production, enable dev flag for css classes ([c3a3915](https://git.nostrdev.com/sigit/sigit.io/commit/c3a39157ffdb217dc9e7fa16ff600386a1f95307))
+- verify/sign link ([e48a396](https://git.nostrdev.com/sigit/sigit.io/commit/e48a3969904c1ec9759a60e9b21f998569ce6b13))
+- **verify:** offline flow ([759a40a](https://git.nostrdev.com/sigit/sigit.io/commit/759a40a4f910d81fa95bc4b7304bc6a1eb6b8eda))
+- when decrypting file, have better error messages ([5d6a358](https://git.nostrdev.com/sigit/sigit.io/commit/5d6a3580a6b3c97afc7a1f015458fb0a51101f52))
+- when opening a sigit after user signed it, asks user to sign again instead of redirecting to /verify ([ccb4036](https://git.nostrdev.com/sigit/sigit.io/commit/ccb40360292af4bf10f24fc935c9ca869729ec8f))
+- wording of adding counterparties ([33d58a2](https://git.nostrdev.com/sigit/sigit.io/commit/33d58a2166479f49e2596313a3359cd0204fadf5))
+- works offline card icon ([baa1a7b](https://git.nostrdev.com/sigit/sigit.io/commit/baa1a7b040c7bdd2af6c01f2b45178868095e5d3))
+
+### Code Refactoring
+
+- use signature pad, smoother signature line ([7c7a222](https://git.nostrdev.com/sigit/sigit.io/commit/7c7a222d4fac7d119270f3d6b79b75f6d60032ff))
+
+### Features
+
+- ability to change the order of signers in create screen ([8deaae8](https://git.nostrdev.com/sigit/sigit.io/commit/8deaae80de8afe62e65248e91a94ffb378cc3952))
+- add background images ([e9a1b98](https://git.nostrdev.com/sigit/sigit.io/commit/e9a1b9894c8c609289554ddb937ef0522a12bde3))
+- add banner and styling ([5f39b55](https://git.nostrdev.com/sigit/sigit.io/commit/5f39b55f6860f2ee73c1d72e384915fb85ed4336))
+- add cache setting page ([278d965](https://git.nostrdev.com/sigit/sigit.io/commit/278d9655f6ca587071451bdedc013fd1d2648395))
+- add children support to routes arrays ([0b35f11](https://git.nostrdev.com/sigit/sigit.io/commit/0b35f11abf251b5f45bc7f7926275692cde69048))
+- add color border to user's profile picture based on first 6 character of user's hexkey ([89850f8](https://git.nostrdev.com/sigit/sigit.io/commit/89850f881d6afbe9f67e1a07510f6978acfca0ac))
+- add custom Container component for layouts ([e54eced](https://git.nostrdev.com/sigit/sigit.io/commit/e54eced800305c1e724b846c9fbff4cf97f77414))
+- add dropzone and multiple files support ([83ddc1b](https://git.nostrdev.com/sigit/sigit.io/commit/83ddc1bbc810a9f0d20dbf381cca5404cb7eb4c5))
+- add exportedBy to useSigitMeta ([13254fb](https://git.nostrdev.com/sigit/sigit.io/commit/13254fbe0641796eb40425d0910db2d9fc43645d))
+- add MarkConfig and components ([dfa2832](https://git.nostrdev.com/sigit/sigit.io/commit/dfa2832e8d757842b848101323a4de03cc74f0a1))
+- add minimal styling secondary button ([9a1d3d9](https://git.nostrdev.com/sigit/sigit.io/commit/9a1d3d98bf866b97e9d9748cdad9e9159b4ef7d9))
+- add modal with login, register, nostr routes ([868ae6f](https://git.nostrdev.com/sigit/sigit.io/commit/868ae6f23e68bf3e0b4503caa74b822b68219438))
+- add nostrLoginAuthMethod to state ([110621a](https://git.nostrdev.com/sigit/sigit.io/commit/110621a125230f56e13e430b732dd67730b45fff))
+- add prev signer's signature in the content of next signer's signed event ([7947abf](https://git.nostrdev.com/sigit/sigit.io/commit/7947abf0f963fe2a1b926852527acc52e28eaacb))
+- Add Sigit ID as a path param ([75a715d](https://git.nostrdev.com/sigit/sigit.io/commit/75a715d002f005e327442015dc322b278f59bc8e))
+- Add Sigit ID as a Path Param to /verify ([0008e98](https://git.nostrdev.com/sigit/sigit.io/commit/0008e9814681de43068235f61c7bd88e7a1f3510))
+- add simple spinner wrapper ([01ca81b](https://git.nostrdev.com/sigit/sigit.io/commit/01ca81be2a431e8242cbae50f2e58115fc17a335))
+- add squiggle support ([de44370](https://git.nostrdev.com/sigit/sigit.io/commit/de44370a96e94846a2e0b47ca79599cdb127226a))
+- add sticky layout with slots ([dfe67b9](https://git.nostrdev.com/sigit/sigit.io/commit/dfe67b99ad7d80b1ab7c3d41bd5f5281d1fc1f5e))
+- add sticky layout with slots ([e16b8cf](https://git.nostrdev.com/sigit/sigit.io/commit/e16b8cfe3fe297983a3fd122ac25b89ca1568835))
+- add SVGO, enable signature ([9286e43](https://git.nostrdev.com/sigit/sigit.io/commit/9286e4304f52a3eaf2a87b6d2b9ebecc32d398ba))
+- add the ability to create and sign while user is offline ([c3c9bf7](https://git.nostrdev.com/sigit/sigit.io/commit/c3c9bf772d5e10ba6bf55d39e8f21ba261828b60))
+- add uploaded image file as preview ([ae08b07](https://git.nostrdev.com/sigit/sigit.io/commit/ae08b07d7404bb8a9988a700ebce72d777e2d725))
+- add UserAvatar, UserIconButton ([20bb05d](https://git.nostrdev.com/sigit/sigit.io/commit/20bb05ddc61e5126e46a1e4943619d67d7f4cc27)), closes [#68](https://git.nostrdev.com/sigit/sigit.io/issues/68)
+- add verify link in landing page ([8884389](https://git.nostrdev.com/sigit/sigit.io/commit/8884389c6ad59cf695d7f03e67cc37095abaee55))
+- add verify page ([5c14402](https://git.nostrdev.com/sigit/sigit.io/commit/5c1440244cbd3e6d9b80e557dc1a511c1a067871))
+- added a local cache based on browsers built in indexDB ([5b1147d](https://git.nostrdev.com/sigit/sigit.io/commit/5b1147da5db4f04eb622633ad5397d6a6c8056b0))
+- added a setting page ([e82023f](https://git.nostrdev.com/sigit/sigit.io/commit/e82023f105117ead6ab623cb4915c96edc7cbac7))
+- added hashes.json in zip ([d879c7d](https://git.nostrdev.com/sigit/sigit.io/commit/d879c7d45a0d4c6356008a6572277c3e443ce806))
+- added ndkContext and used it in relays page ([3c061d5](https://git.nostrdev.com/sigit/sigit.io/commit/3c061d5920e2d518b6a837a61e151cc1586b88b7))
+- added nsecbunker setting page ([b2a8cff](https://git.nostrdev.com/sigit/sigit.io/commit/b2a8cff907161511f944a02d829b4230007360fa))
+- added profile banner ([6eedfb8](https://git.nostrdev.com/sigit/sigit.io/commit/6eedfb8f3fe0785a98ed36408061c9ed7ab9645a))
+- added profile view ([5d0076d](https://git.nostrdev.com/sigit/sigit.io/commit/5d0076dd62f0055d0280186182fdb0d3a409b6af))
+- added the ability to login with nsecbunker connection string ([4973721](https://git.nostrdev.com/sigit/sigit.io/commit/497372160843f11d0b206fa490992d257004d773))
+- added the ability to re-broadcast sigit ([5db4d1b](https://git.nostrdev.com/sigit/sigit.io/commit/5db4d1b4291f37986d517f22b021cf80fffb10c7))
+- allow the user to login via nsecbunker using only domain part ([3efa557](https://git.nostrdev.com/sigit/sigit.io/commit/3efa557976f72e6b898876ce0c1c3736f620f71b))
+- **auth:** nsec login with url params ([995c7ce](https://git.nostrdev.com/sigit/sigit.io/commit/995c7ce293474ce098900a057d6ae442c90df71c))
+- changed MIME type of the uploaded file to sigit ([4e7f9d6](https://git.nostrdev.com/sigit/sigit.io/commit/4e7f9d650ed77db5c2ff7388a140fed790e2d784))
+- **ci:** add git hooks ([70f625f](https://git.nostrdev.com/sigit/sigit.io/commit/70f625ffd128f132cc3f92a4465b7e4d73a9ed97))
+- **ci:** add lint-staged in pre-commit ([84d1379](https://git.nostrdev.com/sigit/sigit.io/commit/84d13793ffd5fab5c2f0148fb7825c21f23431a0))
+- **ci:** add open pr workflow ([5290dda](https://git.nostrdev.com/sigit/sigit.io/commit/5290dda52a76093b0e99ecbfc340fa6fae99f728))
+- configured semantic releases ([c0b9039](https://git.nostrdev.com/sigit/sigit.io/commit/c0b903929d478ce3eb2c7636bf9ad0da5b32534d))
+- **content:** show other file types as gray box ([c9d7d0a](https://git.nostrdev.com/sigit/sigit.io/commit/c9d7d0a6f58708db866b9099c49800ce48930c65))
+- convert hexkeys to npub in meta.json ([ee2f0cb](https://git.nostrdev.com/sigit/sigit.io/commit/ee2f0cbc970cdcb6d491f0689735b59a31c825ec))
+- create page search users ([4af28ab](https://git.nostrdev.com/sigit/sigit.io/commit/4af28abcb666351a348f3375f4eb1d21d18fbf65))
+- create signing request and send a DM to first signer with zip file url and encryption key ([bd1e841](https://git.nostrdev.com/sigit/sigit.io/commit/bd1e8417c17ea559d1a3f09e85e5f0e96b5dd1f4))
+- **create-page:** intial layout and page styling ([86c8cc0](https://git.nostrdev.com/sigit/sigit.io/commit/86c8cc00fd9a019690c9f700c2496459ea1d3a54))
+- **create:** add counterpart component for drawing field ([4131eb5](https://git.nostrdev.com/sigit/sigit.io/commit/4131eb5de1e139a5c0db35fb0128c2562279dc50))
+- **create:** add Image and File items ([889d6a0](https://git.nostrdev.com/sigit/sigit.io/commit/889d6a0f440bbec8d9ad6362324693dbb4c5511e))
+- **create:** touch support for dnd ([3e07575](https://git.nostrdev.com/sigit/sigit.io/commit/3e075754e5ec8b858f2e5a658a6137d4be188380))
+- custom select component ([8d16831](https://git.nostrdev.com/sigit/sigit.io/commit/8d168314de807bfb7b5d96ddc0cf82109afdf343))
+- **dashboard:** add sigits filtering, sorting, searching ([becd021](https://git.nostrdev.com/sigit/sigit.io/commit/becd02153c9cecb45041ab7e0b05b8a8cfbcb08a))
+- **export:** add icons and make encrypted be first/top option ([99d562a](https://git.nostrdev.com/sigit/sigit.io/commit/99d562a3edb62b09664091946a59e88020460d39))
+- extension icon label util component ([c3f60b1](https://git.nostrdev.com/sigit/sigit.io/commit/c3f60b1e643ff2e9ccf8f483a971b1970cf7d786))
+- handle root \_@ users on add counterpart ([897daaa](https://git.nostrdev.com/sigit/sigit.io/commit/897daaa1fa57a587b5562fd9c94526dd22485b65))
+- **home:** add search param to address bar and sync the state with navigation ([93b2477](https://git.nostrdev.com/sigit/sigit.io/commit/93b2477839900598195bbb6ab28c82493a8abc98))
+- implemented profile page ([c0547b2](https://git.nostrdev.com/sigit/sigit.io/commit/c0547b2a1f05e02dea247822672700a5d15f79e7))
+- implemented relay controller and use that for fetching and publishing events ([a775d7b](https://git.nostrdev.com/sigit/sigit.io/commit/a775d7b265594d575f106898585b8f1dcebbce6f))
+- implemented the UI and logic for signing document ([a32abaf](https://git.nostrdev.com/sigit/sigit.io/commit/a32abaf9e703d481b3b8fc45739b312e907979a9))
+- improve design for homepage ([de4d927](https://git.nostrdev.com/sigit/sigit.io/commit/de4d927c73dc50d2b2ce85af232c9bcd7b98d091))
+- improve verification process ([6611a85](https://git.nostrdev.com/sigit/sigit.io/commit/6611a855d9342a028cbe5e4a88cac058ca18a62a))
+- in offline mode navigate creator to sign screen after creation when creator is first signer ([1f7980e](https://git.nostrdev.com/sigit/sigit.io/commit/1f7980e2ca285117a8971a4d5d94ea5b56d15ff7))
+- In sign page navigate to verify after export ([8f463b3](https://git.nostrdev.com/sigit/sigit.io/commit/8f463b36c08761a4a8e4ff9b67068be90eef8ea6))
+- include the original files always ([db9cf9d](https://git.nostrdev.com/sigit/sigit.io/commit/db9cf9d20cf78cae85ba431eafea2365337f1b1e))
+- landing page - larger cta button ([3149ba9](https://git.nostrdev.com/sigit/sigit.io/commit/3149ba975777c557bae46b86e77f20392b9ebaec))
+- landing page - responsive cards ([87e4536](https://git.nostrdev.com/sigit/sigit.io/commit/87e4536713795765e9300e72b3262395b07e76b3))
+- landing page implementation and styling ([0a61ae5](https://git.nostrdev.com/sigit/sigit.io/commit/0a61ae5f6455d76c1f7f925abce9dfeb94fbc1fa))
+- **loading-spinner:** add children support for default variant ([4d1e672](https://git.nostrdev.com/sigit/sigit.io/commit/4d1e6722681849c72d8ad5cfaebc543ab61dd907))
+- logo and favicon ([a36ed8e](https://git.nostrdev.com/sigit/sigit.io/commit/a36ed8eab0059876c15c10b7e60bd6103a3ddd4b))
+- maintain logged in sesssion ([2ed092b](https://git.nostrdev.com/sigit/sigit.io/commit/2ed092bcbd7ecffe38d1fa9704ed847b53a99b41))
+- make block number link that will refernce to the event ([37bc205](https://git.nostrdev.com/sigit/sigit.io/commit/37bc205ce4e8ea8eb1cbcd5f1a57703501bd7c52))
+- make verify page public and add verify option in user menu list ([12ca854](https://git.nostrdev.com/sigit/sigit.io/commit/12ca854c4852f28367a51cb35f9dec6e2e5ff025))
+- **meta:** add error handling for meta.json blossom operations ([7007492](https://git.nostrdev.com/sigit/sigit.io/commit/7007492a0d1e9d21f505a300aa6b2ca24cf0b585))
+- **meta:** send notifications with blossom instead of meta.json ([3d1bdec](https://git.nostrdev.com/sigit/sigit.io/commit/3d1bdece4d881f347e974506af9d01d9be01f4f7))
+- **mobile:** tabs and scrolling ([d9be051](https://git.nostrdev.com/sigit/sigit.io/commit/d9be05165fad1fe07f51dbccc47b0fe2e675ee86))
+- navigate to different pages based on uploaded file ([92b62a3](https://git.nostrdev.com/sigit/sigit.io/commit/92b62a3cbed8461cbbb25cb841bec9063f11e90d))
+- nostr.json ([bb37a27](https://git.nostrdev.com/sigit/sigit.io/commit/bb37a27321cd9b26537b8fbbe2b39902b6c85fc4))
+- **offline:** add decrypt as zip util ([8b5abe0](https://git.nostrdev.com/sigit/sigit.io/commit/8b5abe02e2b9d3f3101afa014c4fa4655ed4b099))
+- **offline:** add signer service util class ([bcd5713](https://git.nostrdev.com/sigit/sigit.io/commit/bcd57138caeb03b03f5b9a4df403534d076a4a15))
+- **offline:** split online and offline flow with dedicated buttons, remove export in sign, all counterparties can decrypt ([3f01ab8](https://git.nostrdev.com/sigit/sigit.io/commit/3f01ab8fcaf7aa94460215418315f56190e4f4b0))
+- **opentimestamps:** adds OTS library and retrier function ([edfe9a2](https://git.nostrdev.com/sigit/sigit.io/commit/edfe9a2954b1222716f9cd43516b6a041de8bb1b))
+- **opentimestamps:** adds timestamps to create flow ([85bcfac](https://git.nostrdev.com/sigit/sigit.io/commit/85bcfac2e0aa8bffaf258c89b5c73b35f108f38b))
+- **opentimestamps:** amends to flow to only upgrade users timestamps ([f12aaf1](https://git.nostrdev.com/sigit/sigit.io/commit/f12aaf1c2bfa4c8d3ee26e9c4c14ae5759551381))
+- **opentimestamps:** refactors to timestamp the nostr event id ([07f1a15](https://git.nostrdev.com/sigit/sigit.io/commit/07f1a15aa1775a857b526a8d343b8f1708535ed0))
+- **opentimestamps:** update the full flow ([21aa25a](https://git.nostrdev.com/sigit/sigit.io/commit/21aa25a42a2797d84f20be576d016f2075c09fa0))
+- **opentimestamps:** updates data model ([85bf907](https://git.nostrdev.com/sigit/sigit.io/commit/85bf907f54a9e81758e66e30bfd72f3aa79fd06a))
+- **opentimestamps:** updates data model and useSigitMeta hook ([edbe708](https://git.nostrdev.com/sigit/sigit.io/commit/edbe708b65e342033c2e66bce21ac3d1622088c3))
+- **opentimestamps:** updates opentimestamps type ([b92790c](https://git.nostrdev.com/sigit/sigit.io/commit/b92790ceede513f6aaa6c0d04bf31ab70550d507))
+- **opentimestamps:** updates signing flow ([7f00f9e](https://git.nostrdev.com/sigit/sigit.io/commit/7f00f9e8bf8b15e811361aad2a2d75941ba056eb))
+- **opentimestamps:** updates the flow and adds notifications ([2b630c9](https://git.nostrdev.com/sigit/sigit.io/commit/2b630c94b639368d5d4789f38c747c190dfec547))
+- **opentimestamps:** updates tooltip ([19b815e](https://git.nostrdev.com/sigit/sigit.io/commit/19b815e52819b3e79c41e6f8d5c076bb6d7fd6b6))
+- **opentimestamps:** updates utils and adds comments ([a2138f1](https://git.nostrdev.com/sigit/sigit.io/commit/a2138f1de18f7085349699a885576e00100989df))
+- **PDF Management:** added pdf pages preview with fields list ([e715f6a](https://git.nostrdev.com/sigit/sigit.io/commit/e715f6ae6f8da06027edad85eb806ab7b806d33a))
+- **pdf markings:** added drawing component, parsing pdfs and displaying in the UI ([8576034](https://git.nostrdev.com/sigit/sigit.io/commit/8576034829563d1116f14ca7f0928c55adbabf3c))
+- **pdf-fields:** add logic to hide signers on ESC ([e37f90d](https://git.nostrdev.com/sigit/sigit.io/commit/e37f90d6db713434912530988a80af3390ed8a92))
+- **pdf-marking:** add pdf-view components ([b58ba62](https://git.nostrdev.com/sigit/sigit.io/commit/b58ba625f9087c74e81217f3418201673654524f))
+- **pdf-marking:** adds file downloading functionality ([6d881cc](https://git.nostrdev.com/sigit/sigit.io/commit/6d881ccb45e440c343b768c6d26d6933b2a4b813))
+- **pdf-marking:** adds file validity check ([eca31ce](https://git.nostrdev.com/sigit/sigit.io/commit/eca31cea4f68730ab5d70428902a04514d268764))
+- **pdf-marking:** adds file validity check ([ed7acd6](https://git.nostrdev.com/sigit/sigit.io/commit/ed7acd6cb4c73ee2907fb5062a10dbb8d369f7c9))
+- **pdf-marking:** binds text to marks and saves with signatures ([4a932ff](https://git.nostrdev.com/sigit/sigit.io/commit/4a932ffe03cd4adad33abfdc7355335e4501038f))
+- **pdf-marking:** implements png to pdf conversion and ability to download full sigits after signing ([cb9a443](https://git.nostrdev.com/sigit/sigit.io/commit/cb9a443fb18d5c562fe73400bb7aeedb4abf3f7e))
+- **pdf-marking:** integrates layouts ([64dbd7d](https://git.nostrdev.com/sigit/sigit.io/commit/64dbd7d479bb4baebc43d72f04dbedf7a18d02a7))
+- **pdf-marking:** integrates UserDetails ([2becab9](https://git.nostrdev.com/sigit/sigit.io/commit/2becab9f79e1cb3aaf91178d67c70f9e98c4f98b))
+- **pdf-marking:** updates design and functionality of the pdf marking form ([ed0158e](https://git.nostrdev.com/sigit/sigit.io/commit/ed0158e8177b79a56124c57569f5cba81d57b40b))
+- **pdf-marking:** updates mark type and adds pdf-view components ([296b135](https://git.nostrdev.com/sigit/sigit.io/commit/296b135c064ef877faa951bce06e4d3b6928b4cb))
+- **profile:** picture upload, robohash, website, npub cash ([041bd0d](https://git.nostrdev.com/sigit/sigit.io/commit/041bd0daff4ad06b5ef54798f4c43642c05a2d25))
+- **Relay:** added methods to get info, most popular, connect and disconnect from relays ([ffb2379](https://git.nostrdev.com/sigit/sigit.io/commit/ffb237991cb669285ff9add7a3c610a1218dabcd))
+- **Relays:** added logic to manage relays ([64f8227](https://git.nostrdev.com/sigit/sigit.io/commit/64f822743f8fc323ee47f715555c9f9fc579bf5c))
+- **Relays:** improved relays page ([c37e8f3](https://git.nostrdev.com/sigit/sigit.io/commit/c37e8f36c26701a4743d38282f94801104becea7))
+- search users by nip05, npub and filter: serach, improved UX ([6c7cac2](https://git.nostrdev.com/sigit/sigit.io/commit/6c7cac23361103665e318f52097677f4d95887b1))
+- show block number on user profile ([1eed099](https://git.nostrdev.com/sigit/sigit.io/commit/1eed099059fe169e166c979e5900ceeb6da557b7))
+- Sign Directly From the Marking Screen fix: Marking inputs glitches, losing values ([0a0a9be](https://git.nostrdev.com/sigit/sigit.io/commit/0a0a9bef348e798d37d892b602e19e82e41d0fba))
+- **signature:** export signature files ([cdf26b6](https://git.nostrdev.com/sigit/sigit.io/commit/cdf26b6614fc33f840a20596a064b20cc503275a))
+- **signature:** signature pad encrypt, upload, fetch, decrypt, render, add to pdf ([9551750](https://git.nostrdev.com/sigit/sigit.io/commit/9551750cbe0d84abc983e8746dcf67aedf99c525))
+- **signature:** verify hash ([a371e98](https://git.nostrdev.com/sigit/sigit.io/commit/a371e98e9e402ba0ee4b674687f6dc71352eb78c))
+- **signers-dropdown:** improved hiding/displaying logic ([76b1fa7](https://git.nostrdev.com/sigit/sigit.io/commit/76b1fa792c8cd27f36b30eecd829e75d810d5e00))
+- **Store:** configured relays state ([106827b](https://git.nostrdev.com/sigit/sigit.io/commit/106827b6da2553acf7db27dfe0fe1b292837b654))
+- update findMetadata method of metadata controller ([2b96172](https://git.nostrdev.com/sigit/sigit.io/commit/2b9617232ed3cd283249a43a6eb78db1297500ca))
+- update signing flow ([1f9954b](https://git.nostrdev.com/sigit/sigit.io/commit/1f9954befd01c4e9f90330f3db89aa75f0039bbe))
+- use nip04 for encryption and decryption of userData to store on blossom server ([18270c5](https://git.nostrdev.com/sigit/sigit.io/commit/18270c5d8afc376a6cef3b7cc3ea66a272797637))
+- **verify-page:** add files view and content images ([2c586f3](https://git.nostrdev.com/sigit/sigit.io/commit/2c586f3c13f15010b08324557bbd89ba35fd00cb))
+
+### Reverts
+
+- "feat(pdf-marking): adds file validity check" ([268a4db](https://git.nostrdev.com/sigit/sigit.io/commit/268a4db3ff211566af3e8cf77838c54d3e9c861e))
+
+### BREAKING CHANGES
+
+- mark.value type changed

LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

README.md

@@ -14,5 +14,9 @@ SIGit is a signing technology that is more *secure* and *private* than any off-t
 
 Of course, being built on the Nostr relay network, you can sign documents and build business relationships even in the most adversarial of regulatory environments.
 
+The source for this repo is: https://git.sigit.io/sig/it
+
+If you'd like to submit PRs or issues (which are very welcome) please reach out by DM for an invite to the source repo:  https://njump.me/npub1d0csynrrxcynkcedktdzrdj6gnras2psg48mf46kxjazs8skrjgq9uzhlq
+
 We expect to have an MVP by the summer, if you are interested in being an early tester, do reach out on https://chat.sigit.io
 

contributing.md

@@ -6,19 +6,19 @@ Welcome to Sigit! We are thrilled that you are interested in contributing to thi
 
 ### Reporting Bugs
 
-If you encounter a bug while using Sigit, please [open an issue](https://git.sigit.io/g/web/issues/new) on this repository. Provide as much detail as possible, including steps to reproduce the bug.
+If you encounter a bug while using Sigit, please [open an issue](https://git.nostrdev.com/sigit/sigit.io/issues/new) on this repository. Provide as much detail as possible, including steps to reproduce the bug.
 
 ### Suggesting Enhancements
 
-If you have an idea for how to improve Sigit, we would love to hear from you! [Open an issue](https://git.sigit.io/g/web/issues/new) to suggest an enhancement.
+If you have an idea for how to improve Sigit, we would love to hear from you! [Open an issue](https://git.nostrdev.com/sigit/sigit.io/issues/new) to suggest an enhancement.
 
 ### Pull Requests
 
 We welcome pull requests from contributors! To contribute code changes:
 
-1. Fork the repository and create your branch from `main`.
+1. Fork the repository and create your branch from `staging`.
 2. Make your changes and ensure they pass any existing tests.
-3. Write meaningful commit messages.
+3. Write meaningful commit messages (conventional commit standard)
 4. Submit a pull request, describing your changes in detail and referencing any related issues.
 
 ## Development Setup
@@ -35,4 +35,14 @@ All contributions, including pull requests, undergo code review. Code review ens
 
 ## Contact
 
-If you have questions or need further assistance, you can reach out to [maintainer's email].
+If you have questions or need further assistance, you can reach out to `npub1d0csynrrxcynkcedktdzrdj6gnras2psg48mf46kxjazs8skrjgq9uzhlq`
+
+## Testing
+
+The following items should be tested with each release:
+
+- Create a SIGit with at least 3 signers
+- Create a SIGit where the creator is not the first signer
+- Create a SIGit where one co-signer has no marks
+- Create a SIGit using a file other than a PDF
+- Use several login mechanisms, browsers, operating systems whilst testing

index.html

@@ -2,12 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/FAVICON.png" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SIGit</title>
   </head>
   <body>
     <div id="root"></div>
+    <script src="/opentimestamps.min.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

licenseChecker.cjs

@@ -0,0 +1,28 @@
+const process = require('node:process')
+const licenseChecker = require('license-checker')
+
+const check = (cwd) => {
+  return new Promise((resolve, reject) => {
+    licenseChecker.init(
+      {
+        production: true,
+        start: cwd,
+        excludePrivatePackages: true,
+        onlyAllow:
+          'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;BSD 3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
+        excludePackages: ''
+      },
+      (error, json) => {
+        if (error) {
+          reject(error)
+        } else {
+          resolve(json)
+        }
+      }
+    )
+  })
+}
+
+check(process.cwd(), true)
+  .then(() => console.log('All packages are licensed properly'))
+  .catch((err) => console.log('license checker err', err))

package.json

@@ -1,56 +1,105 @@
 {
-  "name": "web",
+  "name": "sigit",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.3",
   "type": "module",
   "homepage": "https://sigit.io/",
+  "license": "AGPL-3.0-or-later ",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "formatter:check": "npx prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
-    "formatter:fix": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
-    "preview": "vite preview"
+    "lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
+    "formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
+    "formatter:staged": "prettier --write --ignore-unknown",
+    "preview": "vite preview",
+    "preinstall": "git config core.hooksPath .git-hooks",
+    "license-checker": "node licenseChecker.cjs",
+    "lint-staged": "lint-staged",
+    "release": "commit-and-tag-version"
   },
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",
-    "@nostr-dev-kit/ndk": "2.5.0",
+    "@noble/hashes": "^1.4.0",
+    "@nostr-dev-kit/ndk": "2.10.0",
+    "@nostr-dev-kit/ndk-cache-dexie": "2.5.1",
+    "@pdf-lib/fontkit": "^1.1.1",
     "@reduxjs/toolkit": "2.2.1",
-    "axios": "1.6.7",
+    "axios": "^1.7.4",
     "crypto-hash": "3.0.0",
     "crypto-js": "^4.2.0",
+    "dexie": "4.0.8",
+    "dnd-core": "16.0.1",
     "file-saver": "2.0.5",
+    "idb": "8.0.0",
     "jszip": "3.10.1",
     "lodash": "4.17.21",
+    "material-ui-popup-state": "^5.3.1",
     "mui-file-input": "4.0.4",
-    "nostr-tools": "2.3.1",
+    "nostr-login": "1.6.14",
+    "nostr-tools": "2.7.0",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^4.4.168",
+    "rdndmb-html5-to-touch": "^8.0.3",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.3",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-redux": "9.1.0",
     "react-router-dom": "6.22.1",
+    "react-singleton-hook": "^4.0.1",
     "react-toastify": "10.0.4",
     "redux": "5.0.1",
-    "tseep": "1.2.1"
+    "signature_pad": "^5.0.4",
+    "tseep": "1.2.1",
+    "use-immer": "^0.11.0"
   },
   "devDependencies": {
+    "@saithodev/semantic-release-gitea": "^2.1.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^10.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "11.0.0",
+    "@semantic-release/release-notes-generator": "^11.0.4",
     "@types/crypto-js": "^4.2.2",
     "@types/file-saver": "2.0.7",
     "@types/lodash": "4.14.202",
+    "@types/pdfjs-dist": "^2.10.378",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
+    "@types/svgo": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
+    "commit-and-tag-version": "^11.2.2",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "license-checker": "^25.0.1",
+    "lint-staged": "^15.2.8",
+    "prettier": "3.2.5",
     "ts-css-modules-vite-plugin": "1.0.20",
     "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "vite": "^5.1.4",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-zip-pack": "^1.2.4",
+    "vite-tsconfig-paths": "4.3.2"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "npm run lint:staged"
+    ],
+    "*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}": "npm run formatter:staged"
   }
 }

public/.well-known/nostr.json

@@ -0,0 +1,15 @@
+{
+  "names": {
+    "_": "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90"
+  },
+  "relays": {
+    "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90": [
+      "wss://brb.io",
+      "wss://nostr.v0l.io",
+      "wss://nostr.coinos.io",
+      "wss://rsslay.nostr.net",
+      "wss://relay.current.fyi",
+      "wss://nos.io"
+    ]
+  }
+}

public/logo.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 734.95 255.06">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #47b17d;
+      }
+
+      .cls-2 {
+        fill: #4c82a3;
+      }
+
+      .cls-3 {
+        fill: #7d54a3;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g>
+        <path class="cls-3" d="M335.64,100.98c0-4.9,.94-9.5,2.81-13.79,1.87-4.29,4.42-8.05,7.64-11.27,3.22-3.22,6.98-5.77,11.27-7.64,4.29-1.87,8.89-2.81,13.79-2.81h54.34v23.7h-54.34c-1.65,0-3.19,.3-4.62,.91-1.43,.61-2.68,1.45-3.76,2.52s-1.91,2.33-2.52,3.76c-.61,1.43-.91,2.97-.91,4.62s.3,3.21,.91,4.67c.61,1.46,1.45,2.73,2.52,3.8,1.07,1.07,2.33,1.91,3.76,2.52,1.43,.61,2.97,.91,4.62,.91h23.7c4.9,0,9.51,.92,13.83,2.77,4.32,1.85,8.09,4.38,11.31,7.6s5.75,6.99,7.6,11.31c1.84,4.32,2.77,8.93,2.77,13.83s-.92,9.5-2.77,13.79c-1.85,4.29-4.38,8.05-7.6,11.27s-6.99,5.77-11.31,7.64c-4.32,1.87-8.93,2.81-13.83,2.81h-52.61v-23.7h52.61c1.65,0,3.19-.3,4.62-.91,1.43-.61,2.68-1.45,3.76-2.52s1.91-2.33,2.52-3.76c.61-1.43,.91-2.97,.91-4.62s-.3-3.19-.91-4.62c-.61-1.43-1.45-2.68-2.52-3.76-1.07-1.07-2.33-1.91-3.76-2.52-1.43-.6-2.97-.91-4.62-.91h-23.7c-4.9,0-9.5-.94-13.79-2.81-4.29-1.87-8.05-4.42-11.27-7.64-3.22-3.22-5.77-6.99-7.64-11.31-1.87-4.32-2.81-8.93-2.81-13.83Z"/>
+        <path class="cls-3" d="M469.59,183.9h-23.7V65.47h23.7v118.43Z"/>
+        <path class="cls-3" d="M585.8,171.92c-5.51,4.68-11.64,8.27-18.42,10.78-6.77,2.5-13.82,3.76-21.14,3.76-5.62,0-11.03-.73-16.23-2.19-5.2-1.46-10.06-3.52-14.58-6.19-4.52-2.67-8.65-5.86-12.39-9.58-3.75-3.72-6.94-7.85-9.58-12.39s-4.7-9.43-6.15-14.66c-1.46-5.23-2.19-10.65-2.19-16.27s.73-11.01,2.19-16.19c1.46-5.17,3.51-10.03,6.15-14.58,2.64-4.54,5.83-8.67,9.58-12.39,3.74-3.72,7.87-6.9,12.39-9.54,4.51-2.64,9.37-4.69,14.58-6.15s10.61-2.19,16.23-2.19c7.32,0,14.37,1.25,21.14,3.76,6.77,2.51,12.91,6.1,18.42,10.78l-12.39,20.65c-3.58-3.63-7.71-6.48-12.39-8.55-4.68-2.06-9.61-3.1-14.78-3.1s-10.03,.99-14.58,2.97c-4.54,1.98-8.52,4.67-11.93,8.05-3.41,3.39-6.11,7.35-8.09,11.89-1.98,4.54-2.97,9.4-2.97,14.58s.99,10.13,2.97,14.7c1.98,4.57,4.68,8.56,8.09,11.98,3.41,3.41,7.39,6.11,11.93,8.09,4.54,1.98,9.4,2.97,14.58,2.97,2.97,0,5.86-.36,8.67-1.07,2.81-.71,5.48-1.71,8.01-2.97v-33.7h22.88v46.75Z"/>
+        <path class="cls-3" d="M627.75,183.9h-23.7V65.47h23.7v118.43Z"/>
+        <path class="cls-3" d="M699.44,183.9h-23.62V89.17h-35.6v-23.7h94.73v23.7h-35.51v94.73Z"/>
+      </g>
+      <g>
+        <path class="cls-2" d="M181.53,115.06h0c-9.4-36.67-56.77-24.79-121.09-12.57C-3.54,114.64-25.35,19.85,37.72,3.62,46.91,1.26,56.55,0,66.47,0c63.55,0,115.06,51.51,115.06,115.06Z"/>
+        <path class="cls-1" d="M100,140h0c9.4,36.67,56.77,24.79,121.09,12.57,63.98-12.16,85.79,82.64,22.72,98.86-9.19,2.36-18.83,3.62-28.76,3.62-63.55,0-115.06-51.51-115.06-115.06Z"/>
+        <circle class="cls-3" cx="140.77" cy="127.53" r="24.88"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.scss

@@ -0,0 +1,171 @@
+@import './styles/colors.scss';
+@import './styles/sizes.scss';
+@import './styles/typography.scss';
+
+:root {
+  // Import colors once as variables
+  --primary-main: #{$primary-main};
+  --primary-light: #{$primary-light};
+  --primary-dark: #{$primary-dark};
+
+  --secondary-main: #{$secondary-main};
+
+  --box-shadow-color: #{$box-shadow-color};
+  --border-color: #{$border-color};
+
+  --body-background-color: #{$body-background-color};
+  --overlay-background-color: #{$overlay-background-color};
+
+  --text-color: #{$text-color};
+  --input-text-color: #{$input-text-color};
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+
+body {
+  color: $text-color;
+  background: $body-background-color;
+  font-family: $font-familiy;
+  letter-spacing: $letter-spacing;
+  font-size: $body-font-size;
+  font-weight: $body-font-weight;
+  line-height: $body-line-height;
+
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
+}
+
+a {
+  font-weight: 500;
+  color: $primary-main;
+  text-decoration: none;
+  text-decoration-color: inherit;
+  transition: ease 0.4s;
+  outline: none;
+
+  &:focus,
+  &:hover {
+    color: $primary-light;
+    text-decoration: underline;
+    text-decoration-color: inherit;
+  }
+}
+
+input {
+  font-family: inherit;
+}
+
+ul {
+  list-style-type: none; /* Removes bullet points */
+  margin: 0; /* Removes default margin */
+  padding: 0; /* Removes default padding */
+}
+
+li {
+  list-style-type: none; /* Removes the bullets */
+  margin: 0; /* Removes any default margin */
+  padding: 0; /* Removes any default padding */
+}
+
+// Shared styles for center content (Create, Sign, Verify)
+.files-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.file-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  position: relative;
+
+  // CSS, scroll position when scrolling to the files is adjusted by
+  // - 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;
+  }
+  &:not(:first-child) {
+    scroll-margin-top: $body-vertical-padding;
+  }
+}
+
+// For pdf marks
+.image-wrapper {
+  position: relative;
+  -webkit-user-select: none;
+  user-select: none;
+
+  > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: contain; /* Ensure the image fits within the container */
+  }
+}
+
+// For image rendering (uploaded image as a file)
+.file-image {
+  -webkit-user-select: none;
+  user-select: none;
+
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: contain; /* Ensure the image fits within the container */
+}
+
+// Consistent styling for every file mark
+// Reverts some of the design defaults for font
+.file-mark {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1;
+
+  font-size: 16px;
+  color: black;
+  outline: 1px solid transparent;
+
+  justify-content: start;
+  align-items: start;
+
+  scroll-margin-top: $body-vertical-padding;
+}
+
+[data-dev='true'] {
+  .image-wrapper {
+    // outline: 1px solid #ccc; /* Optional: for visual debugging */
+    background-color: #e0f7fa; /* Optional: for visual debugging */
+  }
+}
+
+.extension-file-box {
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 14px;
+}

src/App.tsx

@@ -1,83 +1,57 @@
 import { useEffect } from 'react'
-import { useSelector } from 'react-redux'
 import { Navigate, Route, Routes } from 'react-router-dom'
-import { AuthController, NostrController } from './controllers'
+
+import { useAppSelector, useAuth } from './hooks'
+
 import { MainLayout } from './layouts/Main'
+
+import { appPrivateRoutes, appPublicRoutes } from './routes'
 import {
-  appPrivateRoutes,
-  appPublicRoutes,
   privateRoutes,
-  publicRoutes
-} from './routes'
-import { State } from './store/rootReducer'
-import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
+  publicRoutes,
+  recursiveRouteRenderer
+} from './routes/util'
+
+import './App.scss'
 
 const App = () => {
-  const authState = useSelector((state: State) => state.auth)
+  const { checkSession } = useAuth()
+  const authState = useAppSelector((state) => state.auth)
 
   useEffect(() => {
-    generateBunkerDelegatedKey()
-
-    const authController = new AuthController()
-    authController.checkSession()
-  }, [])
-
-  const generateBunkerDelegatedKey = () => {
-    const existingKey = getNsecBunkerDelegatedKey()
-
-    if (!existingKey) {
-      const nostrController = NostrController.getInstance()
-      const newDelegatedKey = nostrController.generateDelegatedKey()
-
-      saveNsecBunkerDelegatedKey(newDelegatedKey)
+    if (window.location.hostname === '0.0.0.0') {
+      // A change of the host is needed to make  library available in windows object
+      // the app can't encrypt files without the crypto library
+      // which is only available on https or localhost
+      window.location.hostname = 'localhost'
     }
+
+    checkSession()
+  }, [checkSession])
+
+  const handleRootRedirect = () => {
+    if (authState.loggedIn) return appPrivateRoutes.homePage
+
+    const callbackPathEncoded = btoa(
+      window.location.href.split(`${window.location.origin}/#`)[1]
+    )
+
+    return `${appPublicRoutes.landingPage}?callbackPath=${callbackPathEncoded}`
   }
 
+  // Hide route only if loggedIn and r.hiddenWhenLoggedIn are both true
+  const publicRoutesList = recursiveRouteRenderer(publicRoutes, (r) => {
+    return !authState.loggedIn || !r.hiddenWhenLoggedIn
+  })
+
+  const privateRouteList = recursiveRouteRenderer(privateRoutes)
+
   return (
     <Routes>
       <Route element={<MainLayout />}>
-        {authState?.loggedIn &&
-          privateRoutes.map((route, index) => (
-            <Route
-              key={route.path + index}
-              path={route.path}
-              element={route.element}
-            />
-          ))}
-        {publicRoutes.map((route, index) => {
-          if (authState?.loggedIn) {
-            if (!route.hiddenWhenLoggedIn) {
-              return (
-                <Route
-                  key={route.path + index}
-                  path={route.path}
-                  element={route.element}
-                />
-              )
-            }
-          } else {
-            return (
-              <Route
-                key={route.path + index}
-                path={route.path}
-                element={route.element}
-              />
-            )
-          }
-        })}
-
-        <Route
-          path="*"
-          element={
-            <Navigate
-              to={
-                authState.loggedIn
-                  ? appPrivateRoutes.homePage
-                  : appPublicRoutes.login
-              }
-            />
-          }
-        />
+        {authState?.loggedIn && privateRouteList}
+        {publicRoutesList}
+        <Route path="*" element={<Navigate to={handleRootRedirect()} />} />
       </Route>
     </Routes>
   )

src/assets/images/bg_l.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
+  <g id="Layer_1-2" data-name="Layer 1">
+    <path d="M113.31,3.31C73.23,10.93,35.28,18.5,0,24.8V307.11c30.14,8.31,61.89,12.76,94.68,12.76,30.67,0,60.43-3.88,88.82-11.19C378.31,258.56,310.93-34.23,113.31,3.31Z"/>
+  </g>
+</svg>

src/assets/images/bg_r.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
+  <g id="Layer_1-2" data-name="Layer 1">
+    <path d="M205.32,0c-30.67,0-60.43,3.88-88.82,11.19C-78.31,61.31-10.93,354.1,186.69,316.56c40.08-7.61,78.02-15.18,113.31-21.49V12.76C269.86,4.45,238.11,0,205.32,0Z"/>
+  </g>
+</svg>

src/colors.scss

@@ -1,50 +0,0 @@
-$primary-main: var(--mui-palette-primary-main);
-$primary-light: var(--mui-palette-primary-light);
-$primary-dark: var(--mui-palette-primary-dark);
-
-$box-shadow-color: rgba(0, 0, 0, 0.1);
-$border-color: #27323c;
-
-$page-background-color: #f4f4fb;
-$modal-input-background: #f4f4fb;
-$background-color: #fff;
-
-$text-color: #3e3e3e;
-$input-text-color: #717171;
-$info-text-color: #4169e1;
-
-$icon-color: #c1c1c1;
-$zap-icon-color: #ffd700;
-
-$btn-background-color: $primary-main;
-$btn-color: #fff;
-
-$progress-box-background-color: $primary-main;
-$progress-box-inner-background-color: $primary-dark;
-$rank-progress-background-color: #445c76;
-
-$correct-answer-background-color: $primary-light;
-$incorrect-answer-background-color: #e84d67;
-$incorrect-answer-label-color: #fff;
-
-$checkbox-border-color: #ccc;
-$checkbox-hover-border-color: #888;
-$checkbox-checked-background-color: $primary-main;
-$checkbox-checked-color: #fff;
-
-$comment-notice-background-color: #0d6efd;
-$comment-notice-color: #fff;
-$comment-divider-color: #eee;
-
-$activated-topic-background-color: var(--mui-palette-info-dark);
-
-$error-msg-color: red;
-$suggestion-box-heading-color: #dfe0e0;
-
-$callOut-success-background: $primary-light;
-$callOut-success-color: $primary-dark;
-
-$review-feedback-correct: #178b13;
-$review-feedback-incorrect: #d82222;
-$review-feedback-neutral: #f39220;
-$review-feedback-selected-color: #fff;

src/components/AppBar/AppBar.tsx

@@ -9,44 +9,47 @@ import {
 } from '@mui/material'
 
 import { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { setAuthState } from '../../store/actions'
-import { State } from '../../store/rootReducer'
-import { Dispatch } from '../../store/store'
+import { useAppSelector } from '../../hooks/store'
 import Username from '../username'
 
 import { Link, useNavigate } from 'react-router-dom'
-import nostrichAvatar from '../../assets/images/avatar.png'
-import { NostrController } from '../../controllers'
-import { appPublicRoutes, getProfileRoute } from '../../routes'
 import {
-  clearAuthToken,
-  saveNsecBunkerDelegatedKey,
-  shorten
-} from '../../utils'
+  appPublicRoutes,
+  appPrivateRoutes,
+  getProfileRoute
+} from '../../routes'
+import { getProfileUsername, hexToNpub } from '../../utils'
 import styles from './style.module.scss'
+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'
+import { useLogout } from '../../hooks/useLogout'
+
+import { launch as launchNostrLoginDialog } from 'nostr-login'
 
 export const AppBar = () => {
   const navigate = useNavigate()
-
-  const dispatch: Dispatch = useDispatch()
-
+  const logout = useLogout()
   const [username, setUsername] = useState('')
-  const [userAvatar, setUserAvatar] = useState(nostrichAvatar)
+  const [userAvatar, setUserAvatar] = useState('')
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
 
-  const authState = useSelector((state: State) => state.auth)
-  const metadataState = useSelector((state: State) => state.metadata)
+  const authState = useAppSelector((state) => state.auth)
+  const userProfile = useAppSelector((state) => state.user.profile)
+  const userRobotImage = useAppSelector((state) => state.user.robotImage)
 
   useEffect(() => {
-    if (metadataState && metadataState.content) {
-      const { picture, display_name, name } = JSON.parse(metadataState.content)
-
-      if (picture) setUserAvatar(picture)
-
-      setUsername(shorten(display_name || name || '', 7))
+    const npub = authState.usersPubkey ? hexToNpub(authState.usersPubkey) : ''
+    if (userProfile) {
+      setUserAvatar(userProfile.image || userRobotImage || '')
+      setUsername(getProfileUsername(npub, userProfile))
+    } else {
+      setUserAvatar('')
+      setUsername(getProfileUsername(npub))
     }
-  }, [metadataState])
+  }, [userRobotImage, authState.usersPubkey, userProfile])
 
   const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElUser(event.currentTarget)
@@ -65,110 +68,167 @@ export const AppBar = () => {
 
   const handleLogout = () => {
     handleCloseUserMenu()
-    dispatch(
-      setAuthState({
-        loggedIn: false,
-        usersPubkey: undefined,
-        loginMethod: undefined,
-        nsecBunkerPubkey: undefined
-      })
-    )
-
-    // clear authToken saved in local storage
-    clearAuthToken()
-
-    // update nsecBunker delegated key after logout
-    const nostrController = NostrController.getInstance()
-    const newDelegatedKey = nostrController.generateDelegatedKey()
-    saveNsecBunkerDelegatedKey(newDelegatedKey)
-
+    logout()
     navigate('/')
   }
   const isAuthenticated = authState?.loggedIn === true
 
+  const matches = useMediaQuery('(max-width:767px)')
+  const [isBannerVisible, setIsBannerVisible] = useState(true)
+  const handleBannerHide = () => {
+    setIsBannerVisible(false)
+  }
+
   return (
-    <AppBarMui position="fixed" className={styles.AppBar}>
-      <Toolbar className={styles.toolbar}>
-        <Box className={styles.logoWrapper}>
-          <img src="/logo.png" alt="Logo" onClick={() => navigate('/')} />
-        </Box>
-
-        <Box className={styles.rightSideBox}>
-          {!isAuthenticated && (
-            <Button
-              onClick={() => {
-                navigate(appPublicRoutes.login)
-              }}
-              variant="contained"
-            >
-              Sign in
-            </Button>
-          )}
-
-          {isAuthenticated && (
-            <>
-              <Username
-                username={username}
-                avatarContent={userAvatar}
-                handleClick={handleOpenUserMenu}
-              />
-              <Menu
-                id="menu-appbar"
-                anchorEl={anchorElUser}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'center'
-                }}
-                keepMounted
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'center'
-                }}
-                open={!!anchorElUser}
-                onClose={handleCloseUserMenu}
+    <>
+      {isAuthenticated && isBannerVisible && (
+        <div className={styles.banner}>
+          <Container>
+            <div className={styles.bannerInner}>
+              <p className={styles.bannerText}>
+                SIGit is currently Beta software (available for user experience
+                testing), use at your own risk!
+              </p>
+              <Button
+                aria-label={`close banner`}
+                variant="text"
+                onClick={handleBannerHide}
               >
-                <MenuItem
-                  sx={{
-                    justifyContent: 'center',
-                    display: { md: 'none' }
+                <FontAwesomeIcon icon={faClose} />
+              </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={() => {
+                  if (['', '#/'].includes(window.location.hash)) {
+                    location.reload()
+                  } else {
+                    navigate('/')
+                  }
+                }}
+              />
+            </Box>
+
+            <Box className={styles.rightSideBox}>
+              {!isAuthenticated && (
+                <Button
+                  startIcon={<ButtonIcon />}
+                  onClick={() => {
+                    launchNostrLoginDialog()
                   }}
+                  variant="contained"
                 >
-                  <Typography variant="h6">{username}</Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={handleProfile}
-                  sx={{
-                    justifyContent: 'center'
-                  }}
-                >
-                  Profile
-                </MenuItem>
-                <Link
-                  to={appPublicRoutes.help}
-                  target="_blank"
-                  style={{ color: 'inherit', textDecoration: 'inherit' }}
-                >
-                  <MenuItem
-                    sx={{
-                      justifyContent: 'center'
+                  LOGIN
+                </Button>
+              )}
+
+              {isAuthenticated && (
+                <>
+                  <Username
+                    username={username}
+                    avatarContent={userAvatar}
+                    handleClick={handleOpenUserMenu}
+                  />
+                  <Menu
+                    id="menu-appbar"
+                    anchorEl={anchorElUser}
+                    anchorOrigin={{
+                      vertical: 'bottom',
+                      horizontal: 'center'
                     }}
+                    keepMounted
+                    transformOrigin={{
+                      vertical: 'top',
+                      horizontal: 'center'
+                    }}
+                    open={!!anchorElUser}
+                    onClose={handleCloseUserMenu}
                   >
-                    Help
-                  </MenuItem>
-                </Link>
-                <MenuItem
-                  onClick={handleLogout}
-                  sx={{
-                    justifyContent: 'center'
-                  }}
-                >
-                  Logout
-                </MenuItem>
-              </Menu>
-            </>
-          )}
-        </Box>
-      </Toolbar>
-    </AppBarMui>
+                    <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)
+
+                        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>
+    </>
   )
 }

src/components/AppBar/style.module.scss

@@ -1,12 +1,14 @@
-@import '../../colors.scss';
+@import '../../styles/colors.scss';
+@import '../../styles/sizes.scss';
 
 .AppBar {
-  background-color: $background-color !important;
-  z-index: 1400 !important;
-  height: 60px;
+  background-color: $overlay-background-color !important;
+  height: $header-height;
   flex-direction: row !important;
   align-items: center;
 
+  border-bottom: solid 1px rgba(0, 0, 0, 0.075);
+
   .toolbar {
     flex-grow: 1;
     display: flex;
@@ -32,3 +34,42 @@
     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;
+}

src/components/ButtonIcon/index.tsx

@@ -0,0 +1,14 @@
+import styles from './style.module.scss'
+import placeholder from '../../assets/images/placeholder.png'
+
+interface ButtonIconProps {
+  src?: string
+  alt?: string
+}
+
+export const ButtonIcon = ({
+  src = placeholder,
+  alt = ''
+}: ButtonIconProps) => {
+  return <img src={src} alt={alt} className={styles.icon}></img>
+}

src/components/ButtonIcon/style.module.scss

@@ -0,0 +1,5 @@
+.icon {
+  border-radius: 100px;
+  width: 20px;
+  height: 20px;
+}

src/components/ButtonUnderline/index.tsx

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react'
+import styles from './style.module.scss'
+
+interface ButtonUnderlineProps {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
+  disabled?: boolean | undefined
+}
+
+export const ButtonUnderline = ({
+  onClick,
+  disabled = false,
+  children
+}: PropsWithChildren<ButtonUnderlineProps>) => {
+  return (
+    <button
+      type="button"
+      className={styles.button}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}

src/components/ButtonUnderline/style.module.scss

@@ -0,0 +1,25 @@
+@import '../../styles/colors.scss';
+
+.button {
+  color: $primary-main !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+
+  width: max-content;
+  margin: 0 auto;
+
+  // Override default styling
+  border: none !important;
+  outline: none !important;
+
+  // Override leaky css in sign page
+  background: transparent !important;
+
+  &:focus,
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: inherit;
+  }
+}

src/components/Container/index.tsx

@@ -0,0 +1,36 @@
+import { CSSProperties, PropsWithChildren } from 'react'
+import defaultStyle from './style.module.scss'
+
+interface ContainerProps {
+  style?: CSSProperties
+  className?: string
+}
+
+/**
+ * Container component with pre-defined width, padding and margins for top level layout.
+ *
+ * **Important:** To avoid conflicts with `defaultStyle` (changing the `width`, `max-width`, `padding-inline`, and/or `margin-inline`) make sure to either:
+ * - When using *className* override, that styles are imported after the actual `Container` component
+ * ```
+ * import { Container } from './components/Container'
+ * import styles from './style.module.scss'
+ * ```
+ * - or add *!important* to imported styles
+ * - or override styles with *CSSProperties* object
+ */
+export const Container = ({
+  style = {},
+  className = '',
+  children
+}: PropsWithChildren<ContainerProps>) => {
+  return (
+    <div
+      style={{
+        ...style
+      }}
+      className={`${defaultStyle.container} ${className}`}
+    >
+      {children}
+    </div>
+  )
+}

src/components/Container/style.module.scss

@@ -0,0 +1,8 @@
+@import '../../styles/sizes.scss';
+
+.container {
+  width: 100%;
+  max-width: 1400px;
+  padding-inline: $default-container-padding-inline;
+  margin-inline: auto;
+}

src/components/DisplaySigit/index.tsx

@@ -0,0 +1,143 @@
+import { Meta } from '../../types'
+import {
+  hexToNpub,
+  SigitCardDisplayInfo,
+  SigitStatus,
+  SignStatus
+} from '../../utils'
+import { Link } from 'react-router-dom'
+import { formatTimestamp, npubToHex } from '../../utils'
+import { appPublicRoutes, appPrivateRoutes } from '../../routes'
+import { Button, Divider, Tooltip } from '@mui/material'
+import { DisplaySigner } from '../DisplaySigner'
+import {
+  faArchive,
+  faCalendar,
+  faCopy,
+  faEye,
+  faFile,
+  faFileCircleExclamation
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { UserAvatarGroup } from '../UserAvatarGroup'
+
+import styles from './style.module.scss'
+import { getExtensionIconLabel } from '../getExtensionIconLabel'
+import { useSigitMeta } from '../../hooks/useSigitMeta'
+import { extractFileExtensions } from '../../utils/file'
+import { useAppSelector } from '../../hooks'
+
+type SigitProps = {
+  sigitCreateId: string
+  meta: Meta
+  parsedMeta: SigitCardDisplayInfo
+}
+
+export const DisplaySigit = ({
+  meta,
+  parsedMeta,
+  sigitCreateId: sigitCreateId
+}: SigitProps) => {
+  const { usersPubkey } = useAppSelector((state) => state.auth)
+
+  const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
+    parsedMeta
+
+  const { signersStatus, fileHashes } = useSigitMeta(meta)
+  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
+
+  const currentUserNpub: string = usersPubkey ? hexToNpub(usersPubkey) : ''
+  const currentUserNextSigner =
+    signersStatus[currentUserNpub as `npub1${string}`] === SignStatus.Awaiting
+
+  return (
+    <div className={styles.itemWrapper}>
+      {signedStatus === SigitStatus.Complete || !currentUserNextSigner ? (
+        <Link
+          to={`${appPublicRoutes.verify}/${sigitCreateId}`}
+          className={styles.insetLink}
+        ></Link>
+      ) : (
+        <Link
+          to={`${appPrivateRoutes.sign}/${sigitCreateId}`}
+          className={styles.insetLink}
+        ></Link>
+      )}
+
+      <p className={`line-clamp-2 ${styles.title}`}>{title}</p>
+      <div className={styles.users}>
+        {submittedBy && (
+          <DisplaySigner
+            status={isValid ? SignStatus.Signed : SignStatus.Invalid}
+            pubkey={submittedBy}
+          />
+        )}
+        {submittedBy && signers.length ? (
+          <Divider orientation="vertical" flexItem />
+        ) : null}
+        <UserAvatarGroup max={7}>
+          {signers.map((signer) => {
+            const pubkey = npubToHex(signer)!
+            return (
+              <DisplaySigner
+                key={pubkey}
+                status={signersStatus[signer]}
+                pubkey={pubkey}
+              />
+            )
+          })}
+        </UserAvatarGroup>
+      </div>
+      <div className={`${styles.details} ${styles.iconLabel}`}>
+        <FontAwesomeIcon icon={faCalendar} />
+        {createdAt ? formatTimestamp(createdAt) : null}
+      </div>
+      <div className={`${styles.details} ${styles.status}`}>
+        <span className={styles.iconLabel}>
+          <FontAwesomeIcon icon={faEye} /> {signedStatus}
+        </span>
+        {extensions.length > 0 ? (
+          <span className={styles.iconLabel}>
+            {!isSame ? (
+              <>
+                <FontAwesomeIcon icon={faFile} /> Multiple File Types
+              </>
+            ) : (
+              getExtensionIconLabel(extensions[0])
+            )}
+          </span>
+        ) : (
+          <>
+            <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
+          </>
+        )}
+      </div>
+      <div className={styles.itemActions}>
+        <Tooltip title="Duplicate" arrow placement="top" disableInteractive>
+          <Button
+            sx={{
+              color: 'var(--primary-main)',
+              minWidth: '34px',
+              padding: '10px'
+            }}
+            variant={'text'}
+          >
+            <FontAwesomeIcon icon={faCopy} />
+          </Button>
+        </Tooltip>
+        <Tooltip title="Archive" arrow placement="top" disableInteractive>
+          <Button
+            sx={{
+              color: 'var(--primary-main)',
+              minWidth: '34px',
+              padding: '10px'
+            }}
+            variant={'text'}
+          >
+            <FontAwesomeIcon icon={faArchive} />
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}

src/components/DisplaySigit/style.module.scss

@@ -0,0 +1,114 @@
+@import '../../styles/colors.scss';
+
+.itemWrapper {
+  position: relative;
+  overflow: hidden;
+  background-color: $overlay-background-color;
+  border-radius: 4px;
+
+  display: flex;
+  padding: 15px;
+  gap: 15px;
+  flex-direction: column;
+
+  &:only-child {
+    max-width: 600px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    transition: opacity ease 0.2s;
+    opacity: 0;
+    width: 4px;
+    background-color: $primary-main;
+    pointer-events: none;
+  }
+
+  &:hover,
+  &:focus-within {
+    &::before {
+      opacity: 1;
+    }
+
+    .itemActions {
+      transform: translateX(0);
+    }
+  }
+}
+
+.insetLink {
+  position: absolute;
+  inset: 0;
+  outline: none;
+}
+
+.itemActions {
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+
+  > * {
+    flex-grow: 1;
+  }
+
+  @media (hover: hover) {
+    transition: ease 0.2s;
+    transform: translateX(100%);
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    flex-direction: column;
+    background: $overlay-background-color;
+    border-left: solid 1px rgba(0, 0, 0, 0.1);
+
+    &:hover,
+    &:focus-within {
+      transform: translateX(0);
+    }
+  }
+
+  @media (hover: none) {
+    border-top: solid 1px rgba(0, 0, 0, 0.1);
+    padding-top: 10px;
+    margin-inline: -15px;
+    margin-bottom: -15px;
+  }
+}
+
+.title {
+  font-size: 20px;
+  color: $text-color;
+}
+
+.users {
+  margin-top: auto;
+
+  display: flex;
+  grid-gap: 10px;
+}
+
+.details {
+  color: rgba(0, 0, 0, 0.3);
+  font-size: 14px;
+}
+
+.iconLabel {
+  display: flex;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.status {
+  display: flex;
+  grid-gap: 25px;
+}
+
+a.itemWrapper:hover {
+  text-decoration: none;
+}

src/components/DisplaySigner/index.tsx

@@ -0,0 +1,56 @@
+import { Badge } from '@mui/material'
+import styles from './style.module.scss'
+import { UserAvatar } from '../UserAvatar'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faCheck,
+  faEllipsis,
+  faExclamation,
+  faEye,
+  faHourglass,
+  faQuestion
+} from '@fortawesome/free-solid-svg-icons'
+import { SignStatus } from '../../utils'
+import { Spinner } from '../Spinner'
+
+type DisplaySignerProps = {
+  pubkey: string
+  status: SignStatus
+}
+
+const getStatusIcon = (status: SignStatus) => {
+  switch (status) {
+    case SignStatus.Signed:
+      return <FontAwesomeIcon icon={faCheck} />
+    case SignStatus.Awaiting:
+      return (
+        <Spinner>
+          <FontAwesomeIcon icon={faHourglass} />
+        </Spinner>
+      )
+    case SignStatus.Pending:
+      return <FontAwesomeIcon icon={faEllipsis} />
+    case SignStatus.Invalid:
+      return <FontAwesomeIcon icon={faExclamation} />
+    case SignStatus.Viewer:
+      return <FontAwesomeIcon icon={faEye} />
+
+    default:
+      return <FontAwesomeIcon icon={faQuestion} />
+  }
+}
+
+export const DisplaySigner = ({ status, pubkey }: DisplaySignerProps) => {
+  return (
+    <Badge
+      className={styles.signer}
+      overlap="circular"
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      badgeContent={
+        <div className={styles.statusBadge}>{getStatusIcon(status)}</div>
+      }
+    >
+      <UserAvatar pubkey={pubkey} />
+    </Badge>
+  )
+}

src/components/DisplaySigner/style.module.scss

@@ -0,0 +1,23 @@
+@import '../../styles/colors.scss';
+
+.statusBadge {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 10px;
+
+  background-color: $primary-main;
+}
+
+.signer {
+  background-color: white;
+  border-radius: 50%;
+  z-index: 1;
+}

src/components/DrawPDFFields/index.tsx

@@ -0,0 +1,762 @@
+import { Close } from '@mui/icons-material'
+import {
+  FormControl,
+  InputLabel,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select
+} from '@mui/material'
+import styles from './style.module.scss'
+import React, { useCallback, useEffect, useState } from 'react'
+import { User, UserRole, KeyboardCode } from '../../types'
+import { MouseState, DrawnField, DrawTool } from '../../types/drawing'
+import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
+import { SigitFile } from '../../utils/file'
+import { getToolboxLabelByMarkType } from '../../utils/mark'
+import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
+import { useScale } from '../../hooks/useScale'
+import { AvatarIconButton } from '../UserAvatarIconButton'
+import { UserAvatar } from '../UserAvatar'
+import { Updater } from 'use-immer'
+import { FileItem } from './internal/FileItem'
+import { FileDivider } from '../FileDivider'
+import { Counterpart } from './internal/Counterpart'
+
+const MINIMUM_RECT_SIZE = {
+  width: 10,
+  height: 10
+} as const
+import { NDKUserProfile } from '@nostr-dev-kit/ndk'
+
+const DEFAULT_START_SIZE = {
+  width: 140,
+  height: 40
+} as const
+
+interface HideSignersForDrawnField {
+  [key: number]: boolean
+}
+
+type PageIndexer = [file: number, page: number]
+type FieldIndexer = [...PageIndexer, field: number]
+
+interface DrawPdfFieldsProps {
+  users: User[]
+  userProfiles: { [key: string]: NDKUserProfile }
+  sigitFiles: SigitFile[]
+  updateSigitFiles: Updater<SigitFile[]>
+  selectedTool?: DrawTool
+}
+
+export const DrawPDFFields = ({
+  selectedTool,
+  userProfiles,
+  sigitFiles,
+  updateSigitFiles,
+  users
+}: DrawPdfFieldsProps) => {
+  const { to, from } = useScale()
+
+  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<HideSignersForDrawnField>({})
+
+  /**
+   * Return first pubkey that is present in the signers list
+   * @param pubkeys
+   * @returns available pubkey or empty string
+   */
+  const getAvailableSigner = useCallback(
+    (...pubkeys: string[]) => {
+      const availableSigner: string | undefined = pubkeys.find((pubkey) =>
+        signers.some((s) => s.pubkey === npubToHex(pubkey))
+      )
+      return availableSigner || ''
+    },
+    [signers]
+  )
+
+  const [mouseState, setMouseState] = useState<MouseState>({})
+  const [indexer, setIndexer] = useState<PageIndexer | FieldIndexer>()
+  const [field, setField] = useState<
+    DrawnField & {
+      x: number
+      y: number
+    }
+  >()
+  const [lastIndexer, setLastIndexer] = useState<FieldIndexer>()
+  const isActiveDrawnField = (
+    fileIndex: number,
+    pageIndex: number,
+    drawnFieldIndex: number
+  ) =>
+    lastIndexer &&
+    lastIndexer[0] === fileIndex &&
+    lastIndexer[1] === pageIndex &&
+    lastIndexer[2] === drawnFieldIndex
+
+  /**
+   * Gets the pointer coordinates relative to a element in the `event` param
+   * @param event PointerEvent
+   * @param customTarget coordinates relative to this element, if not provided
+   * event.target will be used
+   */
+  const getPointerCoordinates = (
+    event: React.PointerEvent,
+    customTarget?: HTMLElement | null
+  ) => {
+    const target = customTarget ? customTarget : event.currentTarget
+    const rect = target.getBoundingClientRect()
+
+    // Clamp X Y within the target
+    const x = Math.max(0, Math.min(event.clientX, rect.right) - rect.left) //x position within the element.
+    const y = Math.max(0, Math.min(event.clientY, rect.bottom) - rect.top) //y position within the element.
+
+    return {
+      x,
+      y,
+      rect
+    }
+  }
+
+  /**
+   * Fired only on when left (primary pointer interaction) clicking page image
+   * Creates new drawnElement
+   *
+   * @param event Pointer event
+   * @param pageIndexer File and page index
+   * @param pageWidth pdf value used to scale pointer coordinates
+   */
+  const handlePointerDown = useCallback(
+    (
+      event: React.PointerEvent,
+      pageIndexer: PageIndexer,
+      pageWidth: number
+    ) => {
+      // Proceed only if left click
+      if (event.button !== 0) return
+      if (!selectedTool) return
+      event.currentTarget.setPointerCapture(event.pointerId)
+      const counterpart = getAvailableSigner(lastSigner, defaultSignerNpub)
+      const { x, y } = getPointerCoordinates(event)
+
+      setIndexer(pageIndexer)
+      setField({
+        x: to(pageWidth, x),
+        y: to(pageWidth, y),
+        left: to(pageWidth, x),
+        top: to(pageWidth, y),
+        width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
+        height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
+        type: selectedTool.identifier,
+        counterpart
+      })
+      setMouseState({
+        clicked: true
+      })
+    },
+    [defaultSignerNpub, getAvailableSigner, lastSigner, selectedTool, to]
+  )
+
+  /**
+   * After {@link handlePointerDown} creates an drawing element, this function
+   * alters the newly created drawing element, resizing it while pointer moves
+   * @param event Pointer event
+   * @param pageWidth pdf value used to scale pointer coordinates
+   */
+  const handlePointerMove = useCallback(
+    (event: React.PointerEvent, pageWidth: number) => {
+      if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
+        const { x, y } = getPointerCoordinates(event)
+        const pageX = to(pageWidth, x)
+        const pageY = to(pageWidth, y)
+
+        // Calculate left, top, width, and height based on direction
+        setField((prev) => {
+          const left = pageX < prev!.x ? pageX : prev!.x
+          const top = pageY < prev!.y ? pageY : prev!.y
+
+          const width = Math.abs(pageX - prev!.x)
+          const height = Math.abs(pageY - prev!.y)
+          return { ...prev!, left, top, width, height }
+        })
+      }
+    },
+    [mouseState.clicked, selectedTool, to]
+  )
+
+  /**
+   * Fired when event happens on the drawn element which will be moved
+   * pointer coordinates relative to drawn element will be stored
+   * so when we start moving, offset can be calculated
+   * x - offsetX
+   * y - offsetY
+   *
+   * @param event Pointer event
+   * @param fieldIndexer Which field we are moving
+   */
+  const handleDrawnFieldPointerDown = (
+    event: React.PointerEvent,
+    fieldIndexer: FieldIndexer
+  ) => {
+    event.stopPropagation()
+
+    // Proceed only if left click
+    if (event.button !== 0) return
+
+    event.currentTarget.setPointerCapture(event.pointerId)
+    const drawingRectangleCoords = getPointerCoordinates(event)
+    const [fileIndex, pageIndex, drawnFieldIndex] = fieldIndexer
+    const page = sigitFiles[fileIndex].pages![pageIndex]
+    const drawnField = page.drawnFields[drawnFieldIndex]
+
+    setIndexer(fieldIndexer)
+    setField({
+      ...drawnField,
+      x: to(page.width, drawingRectangleCoords.x),
+      y: to(page.width, drawingRectangleCoords.y)
+    })
+    setLastIndexer(fieldIndexer)
+    setMouseState({
+      dragging: true,
+      clicked: false,
+      coordsInWrapper: {
+        x: drawingRectangleCoords.x,
+        y: drawingRectangleCoords.y
+      }
+    })
+
+    // Make signers dropdown visible
+    setHideSignersForDrawnField((prev) => ({
+      ...prev,
+      [drawnFieldIndex]: false
+    }))
+  }
+
+  /**
+   * Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
+   * @param event Pointer event
+   * @param pageWidth pdf value used to scale pointer coordinates
+   */
+  const handleDrawnFieldPointerMove = (
+    event: React.PointerEvent,
+    pageWidth: number
+  ) => {
+    if (mouseState.dragging) {
+      const { x, y, rect } = getPointerCoordinates(
+        event,
+        event.currentTarget.parentElement
+      )
+      const coordsOffset = mouseState.coordsInWrapper
+
+      if (coordsOffset) {
+        let left = to(pageWidth, x - coordsOffset.x)
+        let top = to(pageWidth, y - coordsOffset.y)
+
+        setField((prev) => {
+          const rightLimit = to(pageWidth, rect.width) - prev!.width
+          const bottomLimit = to(pageWidth, rect.height) - prev!.height
+
+          if (left < 0) left = 0
+          if (top < 0) top = 0
+          if (left > rightLimit) left = rightLimit
+          if (top > bottomLimit) top = bottomLimit
+
+          return {
+            ...prev!,
+            left,
+            top
+          }
+        })
+      }
+    }
+  }
+
+  /**
+   * Fired when clicked on the resize handle, sets the state for a resize action
+   * @param event Pointer event
+   * @param fieldIndexer which field we are resizing
+   */
+  const handleResizePointerDown = useCallback(
+    (event: React.PointerEvent, fieldIndexer: FieldIndexer) => {
+      // Proceed only if left click
+      if (event.button !== 0) return
+      event.stopPropagation()
+
+      event.currentTarget.setPointerCapture(event.pointerId)
+      const [fileIndex, pageIndex, drawnFieldIndex] = fieldIndexer
+      const page = sigitFiles[fileIndex].pages![pageIndex]
+      const drawnField = page.drawnFields[drawnFieldIndex]
+      setIndexer(fieldIndexer)
+      setField({
+        ...drawnField,
+        x: drawnField.left,
+        y: drawnField.top
+      })
+      setLastIndexer(fieldIndexer)
+      setMouseState({
+        resizing: true
+      })
+    },
+    [sigitFiles]
+  )
+
+  /**
+   * Resizes the drawn element by the mouse position
+   * @param event Pointer event
+   * @param pageWidth pdf value used to scale pointer coordinates
+   */
+  const handleResizePointerMove = useCallback(
+    (event: React.PointerEvent, pageWidth: number) => {
+      if (mouseState.resizing) {
+        // currentTarget = span handle
+        // 1st parent = drawnField
+        // 2nd parent = img
+        const { x, y } = getPointerCoordinates(
+          event,
+          event.currentTarget.parentElement?.parentElement
+        )
+
+        const pageX = to(pageWidth, x)
+        const pageY = to(pageWidth, y)
+
+        setField((prev) => {
+          const left = pageX < prev!.x ? pageX : prev!.x
+          const top = pageY < prev!.y ? pageY : prev!.y
+
+          const width = Math.abs(pageX - prev!.x)
+          const height = Math.abs(pageY - prev!.y)
+          return { ...prev!, left, top, width, height }
+        })
+      }
+    },
+    [mouseState.resizing, to]
+  )
+
+  const handlePointerUpReleaseCapture = useCallback(
+    (event: React.PointerEvent) => {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    },
+    []
+  )
+
+  /**
+   * Removes the drawn element using the indexes in the params
+   * @param event Pointer event
+   * @param fieldIIndexer [file index, page index, field index]
+   */
+  const handleRemovePointerDown = (
+    event: React.PointerEvent,
+    [fileIndex, pageIndex, fieldIndex]: FieldIndexer
+  ) => {
+    event.stopPropagation()
+
+    updateSigitFiles((draft) => {
+      draft[fileIndex]?.pages![pageIndex]?.drawnFields?.splice(fieldIndex, 1)
+    })
+  }
+
+  /**
+   * Used to stop pointer click propagating to the parent elements
+   * so select can work properly
+   * @param event Pointer event
+   */
+  const handleUserSelectPointerDown = (event: React.PointerEvent) => {
+    event.stopPropagation()
+  }
+
+  /**
+   * Handles Escape button-down event and hides all signers dropdowns
+   * @param event SyntheticEvent event
+   */
+  const handleEscapeButtonDown = (event: React.SyntheticEvent) => {
+    // get native event
+    const { nativeEvent } = event
+
+    //check if event is a keyboard event
+    if (nativeEvent instanceof KeyboardEvent) {
+      // check if event code is Escape
+      if (nativeEvent.code === KeyboardCode.Escape) {
+        // hide all signers dropdowns
+        const newHideSignersForDrawnField: HideSignersForDrawnField = {}
+
+        Object.keys(hideSignersForDrawnField).forEach((key) => {
+          // Object.keys always returns an array of strings,
+          // that is why unknown type is used below
+          newHideSignersForDrawnField[key as unknown as number] = true
+        })
+
+        setHideSignersForDrawnField(newHideSignersForDrawnField)
+      }
+    }
+  }
+
+  /**
+   * Drawing is finished, resets all the variables used to draw
+   */
+  const handlePointerUp = useCallback(() => {
+    // Proceed if we have selected something
+    if (indexer) {
+      // Check if we have the "preview" field state
+      if (field) {
+        // Cancel update if preview field is below the MINIMUM_RECT_SIZE threshhold
+        if (
+          field.width < MINIMUM_RECT_SIZE.width ||
+          field.height < MINIMUM_RECT_SIZE.height
+        ) {
+          setIndexer(undefined)
+          setMouseState({})
+          return
+        }
+
+        const [fileIndex, pageIndex, fieldIndex] = indexer
+
+        // Add new drawn field to the files
+        if (mouseState.clicked) {
+          updateSigitFiles((draft) => {
+            draft[fileIndex].pages![pageIndex].drawnFields.push(field)
+          })
+        }
+
+        // Move
+        if (mouseState.dragging) {
+          updateSigitFiles((draft) => {
+            draft[fileIndex].pages![pageIndex].drawnFields[fieldIndex!] = field
+          })
+        }
+
+        // Resize
+        if (mouseState.resizing) {
+          updateSigitFiles((draft) => {
+            draft[fileIndex].pages![pageIndex].drawnFields[fieldIndex!] = field
+          })
+        }
+
+        // Clear indexer after applying the update
+        setIndexer(undefined)
+      }
+    }
+    setMouseState({})
+  }, [
+    field,
+    indexer,
+    mouseState.clicked,
+    mouseState.dragging,
+    mouseState.resizing,
+    updateSigitFiles
+  ])
+
+  /**
+   * Drawing events
+   */
+  useEffect(() => {
+    window.addEventListener('pointerup', handlePointerUp)
+    window.addEventListener('pointercancel', handlePointerUp)
+
+    return () => {
+      window.removeEventListener('pointerup', handlePointerUp)
+      window.removeEventListener('pointercancel', handlePointerUp)
+    }
+  }, [handlePointerUp])
+
+  /**
+   * Renders the pdf pages and drawing elements
+   */
+  const getPdfPages = (file: SigitFile, fileIndex: number) => {
+    // Early return if this is not a pdf
+    if (!file.isPdf) return null
+
+    return (
+      <>
+        {file.pages?.map((page, pageIndex: number) => {
+          let isPageIndexerActive = false
+          if (indexer) {
+            const [fi, pi, di] = indexer
+            isPageIndexerActive =
+              fi === fileIndex && pi === pageIndex && typeof di === 'undefined'
+          }
+
+          return (
+            <div
+              key={pageIndex}
+              className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
+              tabIndex={-1}
+              onKeyDown={(event) => handleEscapeButtonDown(event)}
+            >
+              <img
+                onPointerDown={(event) => {
+                  handlePointerDown(event, [fileIndex, pageIndex], page.width)
+                }}
+                onPointerMove={(event) => {
+                  handlePointerMove(event, page.width)
+                }}
+                onPointerUp={handlePointerUpReleaseCapture}
+                draggable="false"
+                src={page.image}
+                alt={`page ${pageIndex + 1} of ${file.name}`}
+              />
+              {isPageIndexerActive && field && (
+                <div
+                  className={styles.drawingRectanglePreview}
+                  style={{
+                    backgroundColor: field.counterpart
+                      ? `#${npubToHex(field.counterpart)?.substring(0, 6)}4b`
+                      : undefined,
+                    outlineColor: field.counterpart
+                      ? `#${npubToHex(field.counterpart)?.substring(0, 6)}`
+                      : undefined,
+                    left: inPx(from(page.width, field.left)),
+                    top: inPx(from(page.width, field.top)),
+                    width: inPx(from(page.width, field.width)),
+                    height: inPx(from(page.width, field.height))
+                  }}
+                >
+                  <div
+                    className={`file-mark ${styles.placeholder}`}
+                    style={{
+                      fontFamily: FONT_TYPE,
+                      fontSize: inPx(from(page.width, FONT_SIZE))
+                    }}
+                  >
+                    {getToolboxLabelByMarkType(field.type) || 'placeholder'}
+                  </div>
+                </div>
+              )}
+              {page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
+                let isFieldIndexerActive = false
+                if (indexer) {
+                  const [fi, pi, di] = indexer
+                  isFieldIndexerActive =
+                    fi === fileIndex &&
+                    pi === pageIndex &&
+                    di === drawnFieldIndex
+                }
+
+                return (
+                  <div
+                    key={drawnFieldIndex}
+                    onPointerDown={(event) =>
+                      handleDrawnFieldPointerDown(event, [
+                        fileIndex,
+                        pageIndex,
+                        drawnFieldIndex
+                      ])
+                    }
+                    onPointerMove={(event) => {
+                      handleDrawnFieldPointerMove(event, page.width)
+                    }}
+                    onPointerUp={handlePointerUpReleaseCapture}
+                    className={styles.drawingRectangle}
+                    style={{
+                      backgroundColor: drawnField.counterpart
+                        ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
+                        : undefined,
+                      outlineColor: drawnField.counterpart
+                        ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
+                        : undefined,
+                      ...(isFieldIndexerActive && field
+                        ? {
+                            left: inPx(from(page.width, field.left)),
+                            top: inPx(from(page.width, field.top)),
+                            width: inPx(from(page.width, field.width)),
+                            height: inPx(from(page.width, field.height))
+                          }
+                        : {
+                            left: inPx(from(page.width, drawnField.left)),
+                            top: inPx(from(page.width, drawnField.top)),
+                            width: inPx(from(page.width, drawnField.width)),
+                            height: inPx(from(page.width, drawnField.height))
+                          }),
+
+                      pointerEvents: mouseState.clicked ? 'none' : 'all',
+                      touchAction: 'none',
+                      zIndex: isActiveDrawnField(
+                        fileIndex,
+                        pageIndex,
+                        drawnFieldIndex
+                      )
+                        ? 60
+                        : undefined,
+                      opacity:
+                        mouseState.dragging &&
+                        isActiveDrawnField(
+                          fileIndex,
+                          pageIndex,
+                          drawnFieldIndex
+                        )
+                          ? 0.8
+                          : undefined
+                    }}
+                  >
+                    <div
+                      className={`file-mark ${styles.placeholder}`}
+                      style={{
+                        fontFamily: FONT_TYPE,
+                        fontSize: inPx(from(page.width, FONT_SIZE))
+                      }}
+                    >
+                      {getToolboxLabelByMarkType(drawnField.type) ||
+                        'placeholder'}
+                    </div>
+                    <span
+                      onPointerDown={(event) =>
+                        handleResizePointerDown(event, [
+                          fileIndex,
+                          pageIndex,
+                          drawnFieldIndex
+                        ])
+                      }
+                      onPointerMove={(event) => {
+                        handleResizePointerMove(event, page.width)
+                      }}
+                      onPointerUp={handlePointerUpReleaseCapture}
+                      className={styles.resizeHandle}
+                      style={{
+                        ...(mouseState.resizing &&
+                          isActiveDrawnField(
+                            fileIndex,
+                            pageIndex,
+                            drawnFieldIndex
+                          ) && {
+                            cursor: 'grabbing',
+                            opacity: 0.1
+                          })
+                      }}
+                    ></span>
+                    <span
+                      onPointerDown={(event) => {
+                        handleRemovePointerDown(event, [
+                          fileIndex,
+                          pageIndex,
+                          drawnFieldIndex
+                        ])
+                      }}
+                      className={styles.removeHandle}
+                    >
+                      <Close fontSize="small" />
+                    </span>
+                    {!isActiveDrawnField(
+                      fileIndex,
+                      pageIndex,
+                      drawnFieldIndex
+                    ) &&
+                      !!drawnField.counterpart && (
+                        <div className={styles.counterpartAvatar}>
+                          <UserAvatar
+                            pubkey={npubToHex(drawnField.counterpart)!}
+                          />
+                        </div>
+                      )}
+                    {isActiveDrawnField(
+                      fileIndex,
+                      pageIndex,
+                      drawnFieldIndex
+                    ) &&
+                      (!hideSignersForDrawnField ||
+                        !hideSignersForDrawnField[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)
+                              }}
+                              labelId="counterparts"
+                              label="Counterparts"
+                              sx={{
+                                background: 'white'
+                              }}
+                              renderValue={(value) => (
+                                <Counterpart
+                                  npub={value}
+                                  userProfiles={userProfiles}
+                                  signers={signers}
+                                />
+                              )}
+                            >
+                              {signers.map((signer, index) => {
+                                const npub = hexToNpub(signer.pubkey)
+                                const profile = userProfiles[signer.pubkey]
+                                const displayValue = getProfileUsername(
+                                  npub,
+                                  profile
+                                )
+                                // make current signers dropdown visible
+                                if (
+                                  hideSignersForDrawnField[drawnFieldIndex] ===
+                                    undefined ||
+                                  hideSignersForDrawnField[drawnFieldIndex] ===
+                                    true
+                                ) {
+                                  setHideSignersForDrawnField((prev) => ({
+                                    ...prev,
+                                    [drawnFieldIndex]: false
+                                  }))
+                                }
+
+                                return (
+                                  <MenuItem key={index} value={npub}>
+                                    <ListItemIcon>
+                                      <AvatarIconButton
+                                        src={profile?.image}
+                                        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>
+                )
+              })}
+            </div>
+          )
+        })}
+      </>
+    )
+  }
+
+  return (
+    <div className="files-wrapper">
+      {sigitFiles.length > 0 &&
+        sigitFiles
+          .map<React.ReactNode>((file, i) =>
+            file.isPdf ? (
+              <React.Fragment key={file.name}>
+                {getPdfPages(file, i)}
+              </React.Fragment>
+            ) : (
+              <FileItem key={file.name} file={file} />
+            )
+          )
+          .reduce((prev, curr, i) => [
+            prev,
+            <FileDivider key={`separator-${i}`} />,
+            curr
+          ])}
+    </div>
+  )
+}

src/components/DrawPDFFields/internal/Counterpart.module.scss

@@ -0,0 +1,3 @@
+.counterpartSelectValue {
+  display: flex;
+}

src/components/DrawPDFFields/internal/Counterpart.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { User } from '../../../types'
+import _ from 'lodash'
+import { npubToHex, getProfileUsername } from '../../../utils'
+import { AvatarIconButton } from '../../UserAvatarIconButton'
+import styles from './Counterpart.module.scss'
+import { NDKUserProfile } from '@nostr-dev-kit/ndk'
+
+interface CounterpartProps {
+  npub: string
+  userProfiles: {
+    [key: string]: NDKUserProfile
+  }
+  signers: User[]
+}
+
+export const Counterpart = React.memo(
+  ({ npub, userProfiles, signers }: CounterpartProps) => {
+    let displayValue = _.truncate(npub, { length: 16 })
+
+    const signer = signers.find((u) => u.pubkey === npubToHex(npub))
+    if (signer) {
+      const profile = userProfiles[signer.pubkey]
+      displayValue = getProfileUsername(npub, profile)
+
+      return (
+        <div className={styles.counterpartSelectValue}>
+          <AvatarIconButton
+            src={profile?.image}
+            hexKey={signer.pubkey || undefined}
+            sx={{
+              padding: 0,
+              marginRight: '6px',
+              '> img': {
+                width: '21px',
+                height: '21px'
+              }
+            }}
+          />
+          {displayValue}
+        </div>
+      )
+    }
+
+    return displayValue
+  }
+)

src/components/DrawPDFFields/internal/FileItem.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { SigitFile } from '../../../utils/file'
+import { ExtensionFileBox } from '../../ExtensionFileBox'
+import { ImageItem } from './ImageItem'
+
+interface FileItemProps {
+  file: SigitFile
+}
+
+export const FileItem = React.memo(({ file }: FileItemProps) => {
+  const content = <ExtensionFileBox extension={file.extension} />
+  if (file.isImage) return <ImageItem file={file} />
+
+  return (
+    <div key={file.name} className="file-wrapper" id={`file-${file.name}`}>
+      {content}
+    </div>
+  )
+})

src/components/DrawPDFFields/internal/ImageItem.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { SigitFile } from '../../../utils/file'
+
+interface ImageItemProps {
+  file: SigitFile
+}
+
+export const ImageItem = React.memo(({ file }: ImageItemProps) => {
+  return <img className="file-image" src={file.objectUrl} alt={file.name} />
+})

src/components/DrawPDFFields/style.module.scss

@@ -0,0 +1,118 @@
+@import '../../styles/sizes.scss';
+
+.pdfFieldItem {
+  background: white;
+  padding: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.pdfImageWrapper {
+  &.drawing {
+    cursor: crosshair;
+  }
+}
+
+.pdfImageWrapper:focus {
+  outline: none;
+}
+
+.placeholder {
+  position: absolute;
+  opacity: 0.5;
+  inset: 0;
+}
+
+.drawingRectangle {
+  position: absolute;
+  outline: 1px solid #01aaad;
+  z-index: 40;
+  background-color: #01aaad4b;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.nonEditable {
+    cursor: default;
+    visibility: hidden;
+  }
+
+  .resizeHandle {
+    position: absolute;
+    right: -5px;
+    bottom: -5px;
+    width: 10px;
+    height: 10px;
+    background-color: #fff;
+    border: 1px solid rgb(160, 160, 160);
+    border-radius: 50%;
+    cursor: grab;
+
+    // Increase the area a bit so it's easier to click
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -14px;
+    }
+  }
+
+  .removeHandle {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: -30px;
+    width: 20px;
+    height: 20px;
+    background-color: #fff;
+    border: 1px solid rgb(160, 160, 160);
+    border-radius: 50%;
+    color: #e74c3c;
+    font-size: 10px;
+    cursor: pointer;
+  }
+
+  .userSelect {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: -60px;
+    min-width: 193px;
+    min-height: 30px;
+    padding: 5px 0;
+  }
+}
+
+.counterpartAvatar {
+  img {
+    width: 21px;
+    height: 21px;
+  }
+}
+
+.signingRectangle {
+  position: absolute;
+  outline: 1px solid #01aaad;
+  z-index: 40;
+  background-color: #01aaad4b;
+  cursor: pointer;
+
+  &.edited {
+    outline: 1px dotted #01aaad;
+  }
+}
+
+.drawingRectanglePreview {
+  position: absolute;
+  outline: 1px solid;
+  z-index: 50;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  touch-action: none;
+  opacity: 0.8;
+}

src/components/ExtensionFileBox.tsx

@@ -0,0 +1,6 @@
+interface ExtensionFileBoxProps {
+  extension: string
+}
+export const ExtensionFileBox = ({ extension }: ExtensionFileBoxProps) => (
+  <div className="extension-file-box">This is a {extension} file</div>
+)

src/components/FileDivider.tsx

@@ -0,0 +1,12 @@
+import Divider from '@mui/material/Divider/Divider'
+
+export const FileDivider = () => (
+  <Divider
+    sx={{
+      fontSize: '12px',
+      color: 'rgba(0,0,0,0.15)'
+    }}
+  >
+    File Separator
+  </Divider>
+)

src/components/FileList/index.tsx

@@ -0,0 +1,106 @@
+import React from 'react'
+import { Button, Menu, MenuItem } from '@mui/material'
+import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faCheck,
+  faLock,
+  faTriangleExclamation
+} from '@fortawesome/free-solid-svg-icons'
+import { CurrentUserFile } from '../../types/file.ts'
+import styles from './style.module.scss'
+
+interface FileListProps {
+  files: CurrentUserFile[]
+  currentFile: CurrentUserFile
+  setCurrentFile: (file: CurrentUserFile) => void
+  handleExport?: () => void
+  handleEncryptedExport?: () => void
+  reBroadcastSigit?: () => void
+}
+
+const FileList = ({
+  files,
+  currentFile,
+  setCurrentFile,
+  handleExport,
+  handleEncryptedExport,
+  reBroadcastSigit
+}: FileListProps) => {
+  const isActive = (file: CurrentUserFile) => file.id === currentFile.id
+  return (
+    <div className={styles.wrap}>
+      <ul className={styles.files}>
+        {files.map((currentUserFile: CurrentUserFile) => (
+          <li
+            key={currentUserFile.id}
+            className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
+            onClick={() => setCurrentFile(currentUserFile)}
+          >
+            <div className={styles.fileNumber}>{currentUserFile.id}</div>
+            <div className={styles.fileInfo}>
+              <div className={styles.fileName}>{currentUserFile.file.name}</div>
+            </div>
+
+            <div className={styles.fileVisual}>
+              {currentUserFile.isHashValid && (
+                <FontAwesomeIcon icon={faCheck} />
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      {(typeof handleExport === 'function' ||
+        typeof handleEncryptedExport === 'function') && (
+        <PopupState variant="popover" popupId="download-popup-menu">
+          {(popupState) => (
+            <React.Fragment>
+              <Button variant="contained" {...bindTrigger(popupState)}>
+                Export files
+              </Button>
+              <Menu {...bindMenu(popupState)}>
+                {typeof handleEncryptedExport === 'function' && (
+                  <MenuItem
+                    onClick={() => {
+                      popupState.close
+                      handleEncryptedExport()
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      color={'var(--mui-palette-primary-main)'}
+                      icon={faLock}
+                    />
+                    &nbsp; ENCRYPTED
+                  </MenuItem>
+                )}
+                {typeof handleExport === 'function' && (
+                  <MenuItem
+                    onClick={() => {
+                      popupState.close
+                      handleExport()
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      color={'var(--mui-palette-primary-main)'}
+                      icon={faTriangleExclamation}
+                    />
+                    &nbsp; UNENCRYPTED
+                  </MenuItem>
+                )}
+              </Menu>
+            </React.Fragment>
+          )}
+        </PopupState>
+      )}
+
+      {typeof reBroadcastSigit === 'function' && (
+        <Button variant="contained" onClick={reBroadcastSigit}>
+          Re-Broadcast
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default FileList

src/components/FileList/style.module.scss

@@ -0,0 +1,103 @@
+.filesPageContainer {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 30px;
+  flex-grow: 1;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.files {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  grid-gap: 15px;
+  overflow-y: auto;
+  overflow-x: none;
+}
+
+.files::-webkit-scrollbar {
+  width: 10px;
+}
+
+.files::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.files::-webkit-scrollbar-thumb {
+  max-width: 10px;
+  border-radius: 2px;
+  background-color: #4c82a3;
+  cursor: grab;
+}
+
+.fileItem {
+  transition: ease 0.2s;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #ffffff;
+  padding: 5px 10px;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  flex-grow: 1;
+  font-size: 16px;
+  font-weight: 500;
+  min-height: 45px;
+
+  &.active {
+    background: #4c82a3;
+    color: white;
+  }
+}
+
+.fileItem:hover {
+  background: #4c82a3;
+  color: white;
+}
+
+.fileInfo {
+  flex-grow: 1;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.fileName {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+}
+
+.fileNumber {
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 10px;
+}
+
+.fileVisual {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 25px;
+  width: 25px;
+}

src/components/FontAwesomeIconStack/index.tsx

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react'
+
+import styles from './styles.module.scss'
+
+/**
+ * This Component overlays FontAwesomeIcon icons on top of each other
+ */
+export const FontAwesomeIconStack = ({ children }: PropsWithChildren) => {
+  return <div className={styles.iconStackContainer}>{children}</div>
+}

src/components/FontAwesomeIconStack/styles.module.scss

@@ -0,0 +1,7 @@
+.iconStackContainer {
+  position: relative;
+
+  > * {
+    position: absolute;
+  }
+}

src/components/Footer/Footer.tsx

@@ -0,0 +1,137 @@
+import { Box, Button, Link as LinkMui } from '@mui/material'
+import { Link } from 'react-router-dom'
+import styles from './style.module.scss'
+import { Container } from '../Container'
+import nostrImage from '../../assets/images/nostr.gif'
+import { appPublicRoutes } from '../../routes'
+import { createPortal } from 'react-dom'
+
+export const Footer = () =>
+  createPortal(
+    <footer className={`${styles.borderTop} ${styles.footer}`}>
+      <Container
+        style={{
+          paddingBlock: '50px'
+        }}
+      >
+        <Box
+          display={'grid'}
+          sx={{
+            gridTemplateColumns: {
+              xs: '1fr',
+              md: '0.5fr 2fr 0.5fr'
+            },
+            alignItems: {
+              xs: 'center',
+              md: 'start'
+            }
+          }}
+          gap={'50px'}
+        >
+          <LinkMui
+            sx={{
+              justifySelf: {
+                xs: 'center',
+                md: 'start'
+              }
+            }}
+            component={Link}
+            to={'/'}
+            className={styles.logo}
+          >
+            <img src="/logo.svg" alt="Logo" />
+          </LinkMui>
+          <Box
+            display={'grid'}
+            sx={{
+              gap: '15px',
+              gridTemplateColumns: {
+                xs: '1fr',
+                sm: 'repeat(2, 1fr)',
+                xl: 'repeat(3, 1fr)'
+              },
+              borderBlock: {
+                xs: 'solid 1px rgba(0, 0, 0, 0.1)',
+                md: 'unset'
+              },
+              paddingY: {
+                xs: '10px',
+                md: 'unset'
+              }
+            }}
+            component={'nav'}
+            className={styles.nav}
+          >
+            <Button
+              sx={{
+                justifyContent: 'center'
+              }}
+              component={Link}
+              to={'/'}
+              onClick={(event) => {
+                if (['', '#/'].includes(window.location.hash)) {
+                  event.preventDefault()
+                  window.scrollTo(0, 0)
+                }
+              }}
+              variant={'text'}
+            >
+              Home
+            </Button>
+            <Button
+              sx={{
+                justifyContent: 'center'
+              }}
+              component={LinkMui}
+              href={appPublicRoutes.docs}
+              target="_blank"
+              variant={'text'}
+            >
+              Documentation
+            </Button>
+            <Button
+              sx={{
+                justifyContent: 'center'
+              }}
+              component={LinkMui}
+              href={appPublicRoutes.source}
+              target="_blank"
+              variant={'text'}
+            >
+              Source
+            </Button>
+          </Box>
+          <Box
+            className={styles.links}
+            sx={{
+              justifySelf: {
+                xs: 'center',
+                md: 'end'
+              }
+            }}
+          >
+            <Button
+              component={LinkMui}
+              href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
+              target="_blank"
+              sx={{
+                minWidth: '45px',
+                padding: '10px'
+              }}
+              variant={'contained'}
+            >
+              <img src={nostrImage} width="25" alt="nostr logo" height="25" />
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+      <div className={`${styles.borderTop} ${styles.credits}`}>
+        Built by&nbsp;
+        <a rel="noopener" href="https://nostrdev.com/" target="_blank">
+          Nostr Dev
+        </a>{' '}
+        2024.
+      </div>
+    </footer>,
+    document.getElementById('root')!
+  )

src/components/Footer/style.module.scss

@@ -0,0 +1,49 @@
+@import '../../styles/colors.scss';
+
+.borderTop {
+  border-top: solid 1px rgba(0, 0, 0, 0.075);
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  font-size: 14px;
+}
+
+.links {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.5);
+
+  > a + a {
+    margin-left: 25px;
+  }
+}
+
+.nav {
+  color: rgba(0, 0, 0, 0.5);
+
+  a {
+    width: 100%;
+  }
+}
+
+.credits {
+  width: 100%;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: 500;
+}
+
+.logo {
+  width: 100%;
+  max-width: 300px;
+
+  > img {
+    width: 100%;
+    height: auto;
+  }
+}

src/components/Landing/CardComponent/CardComponent.tsx

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react'
+
+import styles from './style.module.scss'
+
+interface CardComponentProps {
+  icon: ReactElement
+  title: ReactElement
+  description: ReactElement
+  actions?: ReactElement
+}
+
+export const CardComponent = ({
+  icon,
+  title,
+  description,
+  actions
+}: CardComponentProps) => {
+  return (
+    <div className={styles.card}>
+      <h3 className={styles.title}>
+        <div className={styles.icon}>{icon}</div>
+        {title}
+      </h3>
+      <p className={styles.description}>{description}</p>
+      {actions ? <div className={styles.actions}>{actions}</div> : null}
+    </div>
+  )
+}

src/components/Landing/CardComponent/style.module.scss

@@ -0,0 +1,64 @@
+@import '../../../styles/colors.scss';
+
+.card {
+  border-radius: 4px;
+  padding: 25px;
+
+  position: relative;
+  background: $overlay-background-color;
+
+  transition: ease 0.2s;
+
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  &:hover {
+    color: white;
+    background: $primary-main;
+
+    .icon,
+    a {
+      color: inherit;
+    }
+  }
+
+  button {
+    transition:
+      color 0s,
+      background-color 0.2s;
+  }
+
+  a {
+    transition: none;
+  }
+}
+
+.icon {
+  color: $primary-main;
+  font-size: 25px;
+  line-height: 1;
+
+  height: 25px;
+  width: 25px;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.description {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.actions {
+  margin-top: auto;
+  text-align: right;
+}

src/components/LoadingSpinner/index.tsx

@@ -1,18 +1,43 @@
+import { createPortal } from 'react-dom'
 import styles from './style.module.scss'
+import { PropsWithChildren } from 'react'
 
 interface Props {
-  desc: string
+  desc?: string
+  variant?: 'small' | 'default'
 }
 
-export const LoadingSpinner = (props: Props) => {
-  const { desc } = props
+export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
+  const { desc, children, variant = 'default' } = props
 
-  return (
-    <div className={styles.loadingSpinnerOverlay}>
-      <div className={styles.loadingSpinnerContainer}>
-        <div className={styles.loadingSpinner}></div>
-        {desc && <span>{desc}</span>}
-      </div>
-    </div>
-  )
+  switch (variant) {
+    case 'small':
+      return (
+        <div
+          className={`${styles.loadingSpinnerContainer}`}
+          data-variant={variant}
+        >
+          <div className={styles.loadingSpinner}></div>
+        </div>
+      )
+
+    default:
+      return createPortal(
+        <div className={styles.loadingSpinnerOverlay}>
+          <div
+            className={styles.loadingSpinnerContainer}
+            data-variant={variant}
+          >
+            <div className={styles.loadingSpinner}></div>
+            {desc && (
+              <div className={styles.loadingSpinnerDesc}>
+                {desc}
+                {children}
+              </div>
+            )}
+          </div>
+        </div>,
+        document.getElementById('root')!
+      )
+  }
 }

src/components/LoadingSpinner/style.module.scss

@@ -1,30 +1,57 @@
+@import '../../styles/colors.scss';
+
 .loadingSpinnerOverlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
+  z-index: 70;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
 
-  .loadingSpinnerContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
+.loadingSpinnerContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
-  .loadingSpinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #3498db;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
+  &[data-variant='default'] {
+    width: 100%;
+    max-width: 500px;
+    margin: 25px 20px;
+    background: $overlay-background-color;
+    border-radius: 4px;
+    box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
   }
+  &[data-variant='small'] {
+    min-height: 250px;
+  }
+}
+
+.loadingSpinner {
+  background: url('/favicon.png') no-repeat center / cover;
+  margin: 40px 25px;
+  width: 65px;
+  height: 65px;
+  animation: spin 1s linear infinite;
+}
+
+.loadingSpinnerDesc {
+  width: 100%;
+  padding: 15px;
+  border-top: solid 1px rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.5);
+
+  font-size: 16px;
+  font-weight: 400;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
 }
 
 @keyframes spin {

src/components/MarkFormField/index.tsx

@@ -0,0 +1,203 @@
+import { CurrentUserMark } from '../../types/mark.ts'
+import {
+  findNextIncompleteCurrentUserMark,
+  getToolboxLabelByMarkType,
+  isCurrentUserMarksComplete,
+  isCurrentValueLast
+} from '../../utils'
+import React, { useState } from 'react'
+import { MarkInput } from '../MarkTypeStrategy/MarkInput.tsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck, faDownload } from '@fortawesome/free-solid-svg-icons'
+import { Button } from '@mui/material'
+import styles from './style.module.scss'
+import { ButtonUnderline } from '../ButtonUnderline/index.tsx'
+
+interface MarkFormFieldProps {
+  currentUserMarks: CurrentUserMark[]
+  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
+  handleSelectedMarkValueChange: (value: string) => void
+  handleSubmit: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    type: 'online' | 'offline'
+  ) => void
+  selectedMark: CurrentUserMark | null
+  selectedMarkValue: string
+}
+
+/**
+ * Responsible for rendering a form field connected to a mark and keeping track of its value.
+ */
+const MarkFormField = ({
+  handleSubmit,
+  handleSelectedMarkValueChange,
+  selectedMark,
+  selectedMarkValue,
+  currentUserMarks,
+  handleCurrentUserMarkChange
+}: MarkFormFieldProps) => {
+  const [displayActions, setDisplayActions] = useState(true)
+  const [complete, setComplete] = useState(false)
+  const isReadyToSign = () =>
+    isCurrentUserMarksComplete(currentUserMarks) ||
+    isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
+  const isCurrent = (currentMark: CurrentUserMark) =>
+    currentMark.id === selectedMark?.id && !complete
+  const isDone = (currentMark: CurrentUserMark) =>
+    isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
+  const findNext = () => {
+    return (
+      currentUserMarks[selectedMark!.id] ||
+      findNextIncompleteCurrentUserMark(currentUserMarks)
+    )
+  }
+  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    // Without this line, we lose mark values when switching
+    handleCurrentUserMarkChange(selectedMark!)
+
+    if (!complete) {
+      isReadyToSign()
+        ? setComplete(true)
+        : handleCurrentUserMarkChange(findNext()!)
+    }
+  }
+
+  const toggleActions = () => setDisplayActions(!displayActions)
+  const markLabel = selectedMark
+    ? getToolboxLabelByMarkType(selectedMark.mark.type)
+    : ''
+  const handleCurrentUserMarkClick = (mark: CurrentUserMark) => {
+    setComplete(false)
+    handleCurrentUserMarkChange(mark)
+  }
+
+  const handleSelectCompleteMark = () => {
+    if (currentUserMarks.length) handleCurrentUserMarkChange(selectedMark!)
+    setComplete(true)
+  }
+
+  const handleSignAndComplete =
+    (type: 'online' | 'offline') =>
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      handleSubmit(event, type)
+    }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.trigger}>
+        <button
+          onClick={toggleActions}
+          className={styles.triggerBtn}
+          type="button"
+          title="Toggle"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="-64 0 512 512"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            transform={displayActions ? 'rotate(180)' : 'rotate(0)'}
+          >
+            <path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"></path>
+          </svg>
+        </button>
+      </div>
+      <div className={`${styles.actions} ${displayActions && styles.expanded}`}>
+        <div className={styles.actionsWrapper}>
+          <div className={styles.actionsTop}>
+            <div className={styles.actionsTopInfo}>
+              {!complete && selectedMark ? (
+                <p className={styles.actionsTopInfoText}>Add {markLabel}</p>
+              ) : (
+                <p className={styles.actionsTopInfoText}>Finish</p>
+              )}
+            </div>
+          </div>
+          <div className={styles.inputWrapper}>
+            {!complete && selectedMark ? (
+              <form onSubmit={(e) => handleFormSubmit(e)}>
+                <MarkInput
+                  markType={selectedMark.mark.type}
+                  key={selectedMark.id}
+                  value={selectedMarkValue}
+                  placeholder={markLabel}
+                  handler={handleSelectedMarkValueChange}
+                  userMark={selectedMark}
+                />
+                <div className={styles.actionsBottom}>
+                  <Button type="submit" className={styles.submitButton}>
+                    NEXT
+                  </Button>
+                </div>
+              </form>
+            ) : (
+              <>
+                <div className={styles.actionsBottom}>
+                  <Button
+                    onClick={handleSignAndComplete('online')}
+                    className={[
+                      styles.submitButton,
+                      styles.completeButton
+                    ].join(' ')}
+                    disabled={!isReadyToSign()}
+                    autoFocus
+                  >
+                    SIGN AND BROADCAST
+                  </Button>
+                </div>
+                <ButtonUnderline
+                  onClick={handleSignAndComplete('offline')}
+                  disabled={!isReadyToSign()}
+                >
+                  <FontAwesomeIcon icon={faDownload} />
+                  Sign and export locally instead
+                </ButtonUnderline>
+              </>
+            )}
+
+            <div className={styles.footerContainer}>
+              <div className={styles.footer}>
+                {currentUserMarks.map((mark, index) => {
+                  return (
+                    <div className={styles.pagination} key={index}>
+                      <button
+                        type="button"
+                        className={`${styles.paginationButton} ${isDone(mark) ? styles.paginationButtonDone : ''}`}
+                        onClick={() => handleCurrentUserMarkClick(mark)}
+                      >
+                        {mark.id}
+                      </button>
+                      {isCurrent(mark) && (
+                        <div className={styles.paginationButtonCurrent}></div>
+                      )}
+                    </div>
+                  )
+                })}
+                <div className={styles.pagination}>
+                  <button
+                    type="button"
+                    className={`${styles.paginationButton} ${isReadyToSign() ? styles.paginationButtonDone : ''}`}
+                    onClick={handleSelectCompleteMark}
+                    title="Complete"
+                  >
+                    <FontAwesomeIcon
+                      className={styles.finishPage}
+                      icon={faCheck}
+                    />
+                  </button>
+                  {complete && (
+                    <div className={styles.paginationButtonCurrent}></div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MarkFormField

src/components/MarkFormField/style.module.scss

@@ -0,0 +1,228 @@
+@import '../../styles/sizes.scss';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+
+  @media only screen and (min-width: 768px) {
+    bottom: 0;
+    right: 0;
+    left: 0;
+  }
+  bottom: $tabs-height + 5px;
+  right: 5px;
+  left: 5px;
+
+  align-items: center;
+  z-index: 40;
+
+  button {
+    transition: ease 0.2s;
+    width: auto;
+    border-radius: 4px;
+    outline: unset;
+    border: unset;
+    background: unset;
+    color: #ffffff;
+    background: #4c82a3;
+    font-weight: 500;
+    font-size: 14px;
+    padding: 8px 15px;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    grid-gap: 12px;
+    justify-content: center;
+    align-items: center;
+    text-decoration: unset;
+    position: relative;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: #5e8eab;
+    color: white;
+  }
+
+  button:active {
+    background: #447592;
+    color: white;
+  }
+
+  .actionButtons {
+    display: flex;
+    flex-direction: row;
+    grid-gap: 5px;
+  }
+
+  .actionsBottom {
+    display: flex;
+    flex-direction: row;
+    grid-gap: 5px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .submitButton {
+    width: 100%;
+    max-width: 300px;
+    margin-top: 10px;
+  }
+
+  .completeButton {
+    font-size: 18px;
+    padding: 10px 20px;
+  }
+
+  .paginationButton {
+    font-size: 12px;
+    padding: 5px 10px;
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .paginationButton:hover,
+  .paginationButton:focus {
+    background: #447592;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .paginationButtonDone {
+    background: #5e8eab;
+    color: rgb(255, 255, 255);
+  }
+
+  .paginationButtonCurrent {
+    height: 2px;
+    width: 100%;
+    background: #4c82a3;
+  }
+
+  .trigger {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+
+  .triggerBtn {
+    background: white;
+    color: #434343;
+    padding: 5px 30px;
+    box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
+    position: absolute;
+    top: -25px;
+  }
+}
+
+.actions {
+  background: white;
+  width: 100%;
+  border-radius: 5px;
+  padding: 10px 20px;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  grid-gap: 15px;
+  box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
+  max-width: 450px;
+
+  &.expanded {
+    display: flex;
+  }
+}
+
+.actionsWrapper {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 20px;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.actionsTop {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.actionsTopInfo {
+  flex-grow: 1;
+}
+
+.actionsTopInfoText {
+  font-size: 16px;
+  color: #434343;
+}
+
+.actionsTrigger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.inputWrapper {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.textInput {
+  height: 100px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  border: solid 2px #4c82a3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.input {
+  border-radius: 4px;
+  border: solid 1px rgba(0, 0, 0, 0.15);
+  padding: 5px 10px;
+  font-size: 16px;
+  width: 100%;
+  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100%),
+    linear-gradient(white, white);
+}
+
+.input:focus {
+  border: solid 1px rgba(0, 0, 0, 0.15);
+  outline: none;
+  background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 100%),
+    linear-gradient(white, white);
+}
+
+.footerContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  align-items: start;
+  justify-content: center;
+  width: 100%;
+}
+
+.pagination {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+}
+
+.finishPage {
+  padding: 1px 0;
+}

src/components/MarkTypeStrategy/MarkInput.tsx

@@ -0,0 +1,16 @@
+import { MarkType } from '../../types/drawing'
+import { MARK_TYPE_CONFIG, MarkInputProps } from './MarkStrategy'
+
+interface MarkInputComponentProps extends MarkInputProps {
+  markType: MarkType
+}
+
+export const MarkInput = ({ markType, ...rest }: MarkInputComponentProps) => {
+  const { input: InputComponent } = MARK_TYPE_CONFIG[markType] || {}
+
+  if (typeof InputComponent !== 'undefined') {
+    return <InputComponent {...rest} />
+  }
+
+  return null
+}

src/components/MarkTypeStrategy/MarkRender.tsx

@@ -0,0 +1,20 @@
+import { MarkType } from '../../types/drawing'
+import { MARK_TYPE_CONFIG, MarkRenderProps } from './MarkStrategy'
+
+interface MarkRenderComponentProps extends MarkRenderProps {
+  markType: MarkType
+}
+
+export const MarkRender = ({ markType, ...rest }: MarkRenderComponentProps) => {
+  const { render: RenderComponent } = MARK_TYPE_CONFIG[markType] || {}
+
+  if (typeof RenderComponent !== 'undefined') {
+    return <RenderComponent {...rest} />
+  }
+
+  return <DefaultRenderComponent {...rest} />
+}
+
+const DefaultRenderComponent = ({ value }: MarkRenderProps) => (
+  <span>{value}</span>
+)

src/components/MarkTypeStrategy/MarkStrategy.tsx

@@ -0,0 +1,32 @@
+import { MarkType } from '../../types/drawing'
+import { CurrentUserMark, Mark } from '../../types/mark'
+import { TextStrategy } from './Text'
+import { SignatureStrategy } from './Signature'
+
+export interface MarkInputProps {
+  value: string
+  handler: (value: string) => void
+  placeholder?: string
+  userMark?: CurrentUserMark
+}
+
+export interface MarkRenderProps {
+  value?: string
+  mark: Mark
+}
+
+export interface MarkStrategy {
+  input: React.FC<MarkInputProps>
+  render: React.FC<MarkRenderProps>
+  encryptAndUpload?: (value: string, key?: string) => Promise<string>
+  fetchAndDecrypt?: (value: string, key?: string) => Promise<string>
+}
+
+export type MarkStrategies = {
+  [key in MarkType]?: MarkStrategy
+}
+
+export const MARK_TYPE_CONFIG: MarkStrategies = {
+  [MarkType.TEXT]: TextStrategy,
+  [MarkType.SIGNATURE]: SignatureStrategy
+}

src/components/MarkTypeStrategy/Signature/Input.module.scss

@@ -0,0 +1,44 @@
+@import '../../../styles/colors.scss';
+
+$padding: 5px;
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $padding;
+}
+
+.relative {
+  position: relative;
+  outline: 1px solid black;
+}
+
+.canvas {
+  background-color: $body-background-color;
+  cursor: crosshair;
+
+  // Disable panning/zooming when touching canvas element
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.absolute {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.reset {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: $padding;
+  color: $primary-main;
+
+  &:hover {
+    color: $primary-dark;
+  }
+}

src/components/MarkTypeStrategy/Signature/Input.tsx

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { faEraser } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { MarkRenderSignature } from './Render'
+import SignaturePad from 'signature_pad'
+import { SIGNATURE_PAD_OPTIONS, SIGNATURE_PAD_SIZE } from '../../../utils/const'
+import { BasicPoint } from 'signature_pad/dist/types/point'
+import { MarkInputProps } from '../MarkStrategy'
+import styles from './Input.module.scss'
+
+export const MarkInputSignature = ({
+  value,
+  handler,
+  userMark
+}: MarkInputProps) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const signaturePad = useRef<SignaturePad | null>(null)
+
+  const update = useCallback(() => {
+    const data = signaturePad.current?.toData()
+    const reduced = data?.map((pg) => pg.points)
+    const json = JSON.stringify(reduced)
+
+    if (signaturePad.current && !signaturePad.current?.isEmpty()) {
+      handler(json)
+    } else {
+      handler('')
+    }
+  }, [handler])
+
+  useEffect(() => {
+    const handleEndStroke = () => {
+      update()
+    }
+    if (canvasRef.current) {
+      if (signaturePad.current === null) {
+        signaturePad.current = new SignaturePad(
+          canvasRef.current,
+          SIGNATURE_PAD_OPTIONS
+        )
+      }
+
+      signaturePad.current.addEventListener('endStroke', handleEndStroke)
+    }
+
+    return () => {
+      window.removeEventListener('endStroke', handleEndStroke)
+    }
+  }, [update])
+
+  useEffect(() => {
+    if (signaturePad.current) {
+      if (value) {
+        signaturePad.current.fromData(
+          JSON.parse(value).map((p: BasicPoint[]) => ({
+            points: p
+          }))
+        )
+      } else {
+        signaturePad.current?.clear()
+      }
+    }
+    update()
+  }, [update, value])
+
+  const handleReset = () => {
+    signaturePad.current?.clear()
+    update()
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <div
+        className={styles.relative}
+        style={{
+          width: SIGNATURE_PAD_SIZE.width,
+          height: SIGNATURE_PAD_SIZE.height
+        }}
+      >
+        <canvas
+          width={SIGNATURE_PAD_SIZE.width}
+          height={SIGNATURE_PAD_SIZE.height}
+          ref={canvasRef}
+          className={styles.canvas}
+        ></canvas>
+        {typeof userMark?.mark !== 'undefined' && (
+          <div className={styles.absolute}>
+            <MarkRenderSignature
+              key={userMark.mark.value}
+              value={userMark.mark.value}
+              mark={userMark.mark}
+            />
+          </div>
+        )}
+        <div className={styles.reset}>
+          <FontAwesomeIcon size="sm" icon={faEraser} onClick={handleReset} />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/MarkTypeStrategy/Signature/Render.module.scss

@@ -0,0 +1,9 @@
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  overflow: hidden;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+}

src/components/MarkTypeStrategy/Signature/Render.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+import SignaturePad from 'signature_pad'
+import { SIGNATURE_PAD_OPTIONS, SIGNATURE_PAD_SIZE } from '../../../utils'
+import { BasicPoint } from 'signature_pad/dist/types/point'
+import { MarkRenderProps } from '../MarkStrategy'
+import styles from './Render.module.scss'
+
+export const MarkRenderSignature = ({ value }: MarkRenderProps) => {
+  const [dataUrl, setDataUrl] = useState<string | undefined>()
+
+  useEffect(() => {
+    if (value) {
+      const canvas = document.createElement('canvas')
+      canvas.width = SIGNATURE_PAD_SIZE.width
+      canvas.height = SIGNATURE_PAD_SIZE.height
+      const pad = new SignaturePad(canvas, SIGNATURE_PAD_OPTIONS)
+      pad.fromData(
+        JSON.parse(value).map((p: BasicPoint[]) => ({
+          points: p
+        }))
+      )
+      setDataUrl(canvas.toDataURL('image/webp'))
+    }
+  }, [value])
+
+  return dataUrl ? <img src={dataUrl} className={styles.img} alt="" /> : null
+}

src/components/MarkTypeStrategy/Signature/index.tsx

@@ -0,0 +1,89 @@
+import axios from 'axios'
+import {
+  decryptArrayBuffer,
+  encryptArrayBuffer,
+  getHash,
+  uploadToFileStorage
+} from '../../../utils'
+import { MarkStrategy } from '../MarkStrategy'
+import { MarkInputSignature } from './Input'
+import { MarkRenderSignature } from './Render'
+
+export const SignatureStrategy: MarkStrategy = {
+  input: MarkInputSignature,
+  render: MarkRenderSignature,
+  encryptAndUpload: async (value, encryptionKey) => {
+    // Value is the stringified signature object
+    // Encode it to the arrayBuffer
+    const encoder = new TextEncoder()
+    const uint8Array = encoder.encode(value)
+
+    if (!encryptionKey) {
+      throw new Error('Signature requires an encryption key')
+    }
+
+    // Encrypt the file contents with the same encryption key from the create signature
+    const encryptedArrayBuffer = await encryptArrayBuffer(
+      uint8Array,
+      encryptionKey
+    )
+
+    const hash = await getHash(encryptedArrayBuffer)
+    if (!hash) {
+      throw new Error("Can't get encrypted file hash.")
+    }
+
+    // Create the encrypted json file from array buffer and hash
+    const file = new File([encryptedArrayBuffer], `${hash}.json`)
+
+    try {
+      const url = await uploadToFileStorage(file)
+      console.info(`${file.name} uploaded to file storage`)
+      return url
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error(
+          `Error occurred in uploading file ${file.name}`,
+          error.message
+        )
+      }
+    }
+
+    return value
+  },
+  fetchAndDecrypt: async (value, encryptionKey) => {
+    if (!encryptionKey) {
+      throw new Error('Signature requires an encryption key')
+    }
+
+    const encryptedArrayBuffer = await axios.get(value, {
+      responseType: 'arraybuffer'
+    })
+
+    // Verify hash
+    const parts = value.split('/')
+    const urlHash = parts[parts.length - 1]
+    const hash = await getHash(encryptedArrayBuffer.data)
+    if (hash !== urlHash) {
+      // TODO: handle hash verification failing
+      throw new Error('Unable to verify signature')
+    }
+
+    const arrayBuffer = await decryptArrayBuffer(
+      encryptedArrayBuffer.data,
+      encryptionKey
+    ).catch((err) => {
+      console.log('err in decryption:>> ', err)
+      return null
+    })
+
+    if (arrayBuffer) {
+      // decode json
+      const decoder = new TextDecoder()
+      const json = decoder.decode(arrayBuffer)
+      return json
+    }
+
+    return value
+  }
+}

src/components/MarkTypeStrategy/Text/Input.tsx

@@ -0,0 +1,19 @@
+import { MarkInputProps } from '../MarkStrategy'
+import styles from '../../MarkFormField/style.module.scss'
+
+export const MarkInputText = ({
+  value,
+  handler,
+  placeholder
+}: MarkInputProps) => {
+  return (
+    <input
+      className={styles.input}
+      placeholder={placeholder}
+      onChange={(e) => {
+        handler(e.currentTarget.value)
+      }}
+      value={value}
+    />
+  )
+}

src/components/MarkTypeStrategy/Text/index.tsx

@@ -0,0 +1,7 @@
+import { MarkStrategy } from '../MarkStrategy'
+import { MarkInputText } from './Input'
+
+export const TextStrategy: MarkStrategy = {
+  input: MarkInputText,
+  render: ({ value }) => <>{value}</>
+}

src/components/PDFView/PdfItem.tsx

@@ -0,0 +1,58 @@
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { SigitFile } from '../../utils/file.ts'
+import { ExtensionFileBox } from '../ExtensionFileBox.tsx'
+import PdfPageItem from './PdfPageItem.tsx'
+
+interface PdfItemProps {
+  currentUserMarks: CurrentUserMark[]
+  handleMarkClick: (id: number) => void
+  otherUserMarks: Mark[]
+  file: SigitFile
+  selectedMark: CurrentUserMark | null
+  selectedMarkValue: string
+}
+
+/**
+ * Responsible for displaying pages of a single Pdf File.
+ */
+const PdfItem = ({
+  file,
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark,
+  otherUserMarks
+}: PdfItemProps) => {
+  const filterByPage = (
+    marks: CurrentUserMark[],
+    page: number
+  ): CurrentUserMark[] => {
+    return marks.filter((m) => m.mark.location.page === page)
+  }
+  const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
+    return marks.filter((mark) => mark.location.page === page)
+  }
+  if (file.isPdf) {
+    return file.pages?.map((page, i) => {
+      return (
+        <PdfPageItem
+          fileName={file.name}
+          pageIndex={i}
+          page={page}
+          key={i}
+          currentUserMarks={filterByPage(currentUserMarks, i)}
+          handleMarkClick={handleMarkClick}
+          selectedMarkValue={selectedMarkValue}
+          selectedMark={selectedMark}
+          otherUserMarks={filterMarksByPage(otherUserMarks, i)}
+        />
+      )
+    })
+  } else if (file.isImage) {
+    return <img className="file-image" src={file.objectUrl} alt={file.name} />
+  } else {
+    return <ExtensionFileBox extension={file.extension} />
+  }
+}
+
+export default PdfItem

src/components/PDFView/PdfMarkItem.tsx

@@ -0,0 +1,62 @@
+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'
+import { MarkRender } from '../MarkTypeStrategy/MarkRender.tsx'
+
+interface PdfMarkItemProps {
+  userMark: CurrentUserMark
+  handleMarkClick: (id: number) => void
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
+  pageWidth: number
+}
+
+/**
+ * Responsible for display an individual Pdf Mark.
+ */
+const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
+  (
+    { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
+    ref
+  ) => {
+    const { location } = userMark.mark
+    const handleClick = () => handleMarkClick(userMark.mark.id)
+    const isEdited = () => selectedMark?.mark.id === userMark.mark.id
+    const getMarkValue = () =>
+      isEdited() ? selectedMarkValue : userMark.currentValue
+    const { from } = useScale()
+    return (
+      <div
+        ref={ref}
+        onClick={handleClick}
+        className={`file-mark ${styles.signingRectangle} ${isEdited() && styles.edited}`}
+        style={{
+          backgroundColor: selectedMark?.mark.npub
+            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
+            : undefined,
+          outlineColor: 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)),
+          height: inPx(from(pageWidth, location.height)),
+          fontFamily: FONT_TYPE,
+          fontSize: inPx(from(pageWidth, FONT_SIZE))
+        }}
+      >
+        <MarkRender
+          key={getMarkValue()}
+          markType={userMark.mark.type}
+          value={getMarkValue()}
+          mark={userMark.mark}
+        />
+      </div>
+    )
+  }
+)
+
+export default PdfMarkItem

src/components/PDFView/PdfMarking.tsx

@@ -0,0 +1,171 @@
+import PdfView from './index.tsx'
+import MarkFormField from '../MarkFormField'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import React, { useState, useEffect } from 'react'
+import {
+  findNextIncompleteCurrentUserMark,
+  getUpdatedMark,
+  updateCurrentUserMarks
+} from '../../utils'
+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,
+  faPen
+} from '@fortawesome/free-solid-svg-icons'
+
+interface PdfMarkingProps {
+  currentUserMarks: CurrentUserMark[]
+  files: CurrentUserFile[]
+  handleSign: () => void
+  handleSignOffline: () => void
+  meta: Meta | null
+  otherUserMarks: Mark[]
+  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
+  setUpdatedMarks: (markToUpdate: Mark) => void
+}
+
+/**
+ * Top-level component responsible for displaying Pdfs, Pages, and Marks,
+ * as well as tracking if the document is ready to be signed.
+ * @param props
+ * @constructor
+ */
+const PdfMarking = ({
+  files,
+  currentUserMarks,
+  setCurrentUserMarks,
+  setUpdatedMarks,
+  handleSign,
+  handleSignOffline,
+  meta,
+  otherUserMarks
+}: PdfMarkingProps) => {
+  const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
+  const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
+  const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
+
+  useEffect(() => {
+    if (selectedMark === null && currentUserMarks.length > 0) {
+      setSelectedMark(
+        findNextIncompleteCurrentUserMark(currentUserMarks) ||
+          currentUserMarks[0]
+      )
+    }
+  }, [currentUserMarks, selectedMark])
+
+  useEffect(() => {
+    if (currentFile === null && files.length > 0) {
+      setCurrentFile(files[0])
+    }
+  }, [files, currentFile])
+
+  const handleMarkClick = (id: number) => {
+    const nextMark = currentUserMarks.find((mark) => mark.mark.id === id)
+
+    if (nextMark) handleCurrentUserMarkChange(nextMark)
+  }
+
+  const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {
+    if (!selectedMark) return
+    const updatedSelectedMark: CurrentUserMark = getUpdatedMark(
+      selectedMark,
+      selectedMarkValue
+    )
+
+    const updatedCurrentUserMarks = updateCurrentUserMarks(
+      currentUserMarks,
+      updatedSelectedMark
+    )
+    setCurrentUserMarks(updatedCurrentUserMarks)
+
+    // If clicking on the same mark, don't update the value, otherwise do update
+    if (mark.id !== selectedMark.id) {
+      setSelectedMarkValue(mark.currentValue ?? EMPTY)
+      setSelectedMark(mark)
+    }
+  }
+
+  /**
+   * Sign and Complete
+   */
+  const handleSubmit = (
+    event: React.MouseEvent<HTMLButtonElement>,
+    type: 'online' | 'offline'
+  ) => {
+    event.preventDefault()
+    if (selectedMarkValue && selectedMark) {
+      const updatedMark: CurrentUserMark = getUpdatedMark(
+        selectedMark,
+        selectedMarkValue
+      )
+
+      setSelectedMarkValue(EMPTY)
+      const updatedCurrentUserMarks = updateCurrentUserMarks(
+        currentUserMarks,
+        updatedMark
+      )
+      setCurrentUserMarks(updatedCurrentUserMarks)
+      setSelectedMark(null)
+      setUpdatedMarks(updatedMark.mark)
+    }
+
+    if (type === 'online') handleSign()
+    else if (type === 'offline') handleSignOffline()
+  }
+
+  const handleChange = (value: string) => {
+    setSelectedMarkValue(value)
+  }
+
+  return (
+    <>
+      <Container className={signPageStyles.container}>
+        <StickySideColumns
+          left={
+            <div>
+              {currentFile !== null && (
+                <FileList
+                  files={files}
+                  currentFile={currentFile}
+                  setCurrentFile={setCurrentFile}
+                />
+              )}
+            </div>
+          }
+          right={meta !== null && <UsersDetails meta={meta} />}
+          leftIcon={faFileDownload}
+          centerIcon={faPen}
+          rightIcon={faCircleInfo}
+        >
+          <PdfView
+            currentFile={currentFile}
+            files={files}
+            handleMarkClick={handleMarkClick}
+            selectedMarkValue={selectedMarkValue}
+            selectedMark={selectedMark}
+            currentUserMarks={currentUserMarks}
+            otherUserMarks={otherUserMarks}
+          />
+        </StickySideColumns>
+        <MarkFormField
+          handleSubmit={handleSubmit}
+          handleSelectedMarkValueChange={handleChange}
+          selectedMark={selectedMark}
+          selectedMarkValue={selectedMarkValue}
+          currentUserMarks={currentUserMarks}
+          handleCurrentUserMarkChange={handleCurrentUserMarkChange}
+        />
+      </Container>
+    </>
+  )
+}
+
+export default PdfMarking

src/components/PDFView/PdfPageItem.tsx

@@ -0,0 +1,85 @@
+import styles from '../DrawPDFFields/style.module.scss'
+import { PdfPage } from '../../types/drawing.ts'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import PdfMarkItem from './PdfMarkItem.tsx'
+import { useEffect, useRef } from 'react'
+import pdfViewStyles from './style.module.scss'
+import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
+import { useScale } from '../../hooks/useScale.tsx'
+import { MarkRender } from '../MarkTypeStrategy/MarkRender.tsx'
+interface PdfPageProps {
+  fileName: string
+  pageIndex: number
+  currentUserMarks: CurrentUserMark[]
+  handleMarkClick: (id: number) => void
+  otherUserMarks: Mark[]
+  page: PdfPage
+  selectedMark: CurrentUserMark | null
+  selectedMarkValue: string
+}
+
+/**
+ * Responsible for rendering a single Pdf Page and its Marks
+ */
+const PdfPageItem = ({
+  fileName,
+  pageIndex,
+  page,
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark,
+  otherUserMarks
+}: PdfPageProps) => {
+  useEffect(() => {
+    if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
+      markRefs.current[selectedMark.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      })
+    }
+  }, [selectedMark])
+  const markRefs = useRef<(HTMLDivElement | null)[]>([])
+  const { from } = useScale()
+
+  return (
+    <div className={`image-wrapper ${styles.pdfImageWrapper}`}>
+      <img
+        draggable="false"
+        src={page.image}
+        alt={`page ${pageIndex + 1} of ${fileName}`}
+      />
+      {currentUserMarks.map((m, i) => (
+        <PdfMarkItem
+          key={i}
+          ref={(el) => (markRefs.current[m.id] = el)}
+          handleMarkClick={handleMarkClick}
+          selectedMarkValue={selectedMarkValue}
+          userMark={m}
+          selectedMark={selectedMark}
+          pageWidth={page.width}
+        />
+      ))}
+      {otherUserMarks.map((m, i) => {
+        return (
+          <div
+            key={i}
+            className={pdfViewStyles.otherUserMarksDisplay}
+            style={{
+              left: inPx(from(page.width, m.location.left)),
+              top: inPx(from(page.width, m.location.top)),
+              width: inPx(from(page.width, m.location.width)),
+              height: inPx(from(page.width, m.location.height)),
+              fontFamily: FONT_TYPE,
+              fontSize: inPx(from(page.width, FONT_SIZE))
+            }}
+          >
+            <MarkRender value={m.value} mark={m} markType={m.type} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default PdfPageItem

src/components/PDFView/index.tsx

@@ -0,0 +1,90 @@
+import PdfItem from './PdfItem.tsx'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { CurrentUserFile } from '../../types/file.ts'
+import { useEffect, useRef } from 'react'
+import { FileDivider } from '../FileDivider.tsx'
+import React from 'react'
+import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
+
+interface PdfViewProps {
+  currentFile: CurrentUserFile | null
+  currentUserMarks: CurrentUserMark[]
+  files: CurrentUserFile[]
+  handleMarkClick: (id: number) => void
+  otherUserMarks: Mark[]
+  selectedMark: CurrentUserMark | null
+  selectedMarkValue: string
+}
+
+/**
+ * Responsible for rendering Pdf files.
+ */
+const PdfView = ({
+  files,
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark,
+  currentFile,
+  otherUserMarks
+}: PdfViewProps) => {
+  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
+  useEffect(() => {
+    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
+      pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [currentFile])
+  const filterByFile = (
+    currentUserMarks: CurrentUserMark[],
+    hash: string
+  ): CurrentUserMark[] => {
+    return currentUserMarks.filter((currentUserMark) =>
+      currentUserMark.mark.pdfFileHash
+        ? currentUserMark.mark.pdfFileHash === hash
+        : currentUserMark.mark.fileHash === hash
+    )
+  }
+  const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
+    return marks.filter((mark) =>
+      mark.pdfFileHash ? mark.pdfFileHash === hash : mark.fileHash === hash
+    )
+  }
+  return (
+    <div className="files-wrapper">
+      {files.length > 0 ? (
+        files
+          .map<React.ReactNode>((currentUserFile) => {
+            const { hash, file, id } = currentUserFile
+
+            if (!hash) return
+            return (
+              <div
+                key={`file-${file.name}`}
+                id={file.name}
+                className="file-wrapper"
+                ref={(el) => (pdfRefs.current[id] = el)}
+              >
+                <PdfItem
+                  file={file}
+                  currentUserMarks={filterByFile(currentUserMarks, hash)}
+                  selectedMark={selectedMark}
+                  handleMarkClick={handleMarkClick}
+                  selectedMarkValue={selectedMarkValue}
+                  otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
+                />
+              </div>
+            )
+          })
+          .reduce((prev, curr, i) => [
+            prev,
+            <FileDivider key={`separator-${i}`} />,
+            curr
+          ])
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
+    </div>
+  )
+}
+
+export default PdfView

src/components/PDFView/style.module.scss

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.otherUserMarksDisplay {
+  position: absolute;
+  z-index: 40;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Select/index.tsx

@@ -0,0 +1,113 @@
+import {
+  FormControl,
+  MenuItem,
+  Select as SelectMui,
+  SelectChangeEvent,
+  styled,
+  SelectProps as SelectMuiProps,
+  MenuItemProps
+} from '@mui/material'
+
+const SelectCustomized = styled(SelectMui)<SelectMuiProps>(() => ({
+  backgroundColor: 'var(--primary-main)',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: 'white',
+  ':hover': {
+    backgroundColor: 'var(--primary-light)'
+  },
+  '& .MuiSelect-select:focus': {
+    backgroundColor: 'var(--primary-light)'
+  },
+  '& .MuiSvgIcon-root': {
+    color: 'white'
+  },
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none'
+  }
+}))
+
+const MenuItemCustomized = styled(MenuItem)<MenuItemProps>(() => ({
+  marginInline: '5px',
+  borderRadius: '4px',
+  '&:hover': {
+    background: 'var(--primary-light)',
+    color: 'white'
+  },
+  '&.Mui-selected': {
+    background: 'var(--primary-dark)',
+    color: 'white'
+  },
+  '&.Mui-selected:hover': {
+    background: 'var(--primary-light)'
+  },
+  '&.Mui-selected.Mui-focusVisible': {
+    background: 'var(--primary-light)',
+    color: 'white'
+  },
+  '&.Mui-focusVisible': {
+    background: 'var(--primary-light)',
+    color: 'white'
+  },
+  '& + *': {
+    marginTop: '5px'
+  }
+}))
+
+interface SelectItemProps<T extends string> {
+  value: T
+  label: string
+}
+
+interface SelectProps<T extends string> {
+  value: T
+  setValue: React.Dispatch<React.SetStateAction<T>>
+  options: SelectItemProps<T>[]
+  name?: string
+  id?: string
+}
+
+export function Select<T extends string>({
+  value,
+  setValue,
+  options,
+  name,
+  id
+}: SelectProps<T>) {
+  const handleChange = (event: SelectChangeEvent<unknown>) => {
+    setValue(event.target.value as T)
+  }
+
+  return (
+    <FormControl>
+      <SelectCustomized
+        id={id}
+        name={name}
+        size="small"
+        variant="outlined"
+        value={value}
+        onChange={handleChange}
+        MenuProps={{
+          MenuListProps: {
+            sx: {
+              paddingBlock: '5px'
+            }
+          },
+          PaperProps: {
+            sx: {
+              boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
+            }
+          }
+        }}
+      >
+        {options.map((o) => {
+          return (
+            <MenuItemCustomized key={o.label} value={o.value as string}>
+              {o.label}
+            </MenuItemCustomized>
+          )
+        })}
+      </SelectCustomized>
+    </FormControl>
+  )
+}

src/components/Spinner/index.tsx

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react'
+import styles from './style.module.scss'
+
+export const Spinner = ({ children }: PropsWithChildren) => (
+  <div className={styles.spin}>{children}</div>
+)

src/components/Spinner/style.module.scss

@@ -0,0 +1,12 @@
+.spin {
+  animation: spin 5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/TooltipChild.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, PropsWithChildren } from 'react'
+
+/**
+ * Helper wrapper for custom child components when using `@mui/material/tooltips`.
+ * Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
+ * @source https://mui.com/material-ui/react-tooltip/#custom-child-element
+ */
+export const TooltipChild = forwardRef<HTMLSpanElement, PropsWithChildren>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <span ref={ref} {...rest}>
+        {children}
+      </span>
+    )
+  }
+)

src/components/UserAvatar/index.tsx

@@ -0,0 +1,58 @@
+import { getProfileRoute } from '../../routes'
+
+import styles from './styles.module.scss'
+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 { TooltipChild } from '../TooltipChild'
+
+interface UserAvatarProps {
+  pubkey: string
+  isNameVisible?: boolean
+}
+
+/**
+ *  This component will be used for the displaying username and profile picture.
+ *  Clicking will navigate to the user's profile.
+ */
+export const UserAvatar = ({
+  pubkey,
+  isNameVisible = false
+}: UserAvatarProps) => {
+  const profile = useProfileMetadata(pubkey)
+  const name = getProfileUsername(pubkey, profile)
+  const image = profile?.image
+
+  return (
+    <Link
+      to={getProfileRoute(pubkey)}
+      className={styles.container}
+      tabIndex={-1}
+    >
+      <Tooltip
+        key={pubkey}
+        title={name}
+        placement="top"
+        arrow
+        disableInteractive
+      >
+        <TooltipChild>
+          <AvatarIconButton
+            src={image}
+            hexKey={pubkey}
+            aria-label={`account of user ${name}`}
+            color="inherit"
+            sx={{
+              padding: 0
+            }}
+          />
+        </TooltipChild>
+      </Tooltip>
+      {isNameVisible && name ? (
+        <span className={styles.username}>{name}</span>
+      ) : null}
+    </Link>
+  )
+}

src/components/UserAvatar/styles.module.scss

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  // flex-grow: 1;
+}
+
+.username {
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--text-color);
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}