From fa7f0e2fc0d2550f5e0cec4579f71eb0d294c06b Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 3 Sep 2024 13:38:55 +0200
Subject: [PATCH 1/8] refactor(create): move add counterpart below, select role
 to toggle, remove duplicate code

---
 src/pages/create/index.tsx | 244 +++++++++++++------------------------
 1 file changed, 86 insertions(+), 158 deletions(-)

diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index f1cfbd0..d3ed57a 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -1,13 +1,4 @@
-import {
-  Button,
-  FormHelperText,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  Select,
-  TextField,
-  Tooltip
-} from '@mui/material'
+import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
@@ -932,9 +923,18 @@ export const CreatePage = () => {
           }
           right={
             <div className={styles.flexWrap}>
+              <div className={`${styles.paperGroup} ${styles.users}`}>
+                <DisplayUser
+                  metadata={metadata}
+                  users={users}
+                  handleUserRoleChange={handleUserRoleChange}
+                  handleRemoveUser={handleRemoveUser}
+                  moveSigner={moveSigner}
+                />
+              </div>
               <div className={styles.inputWrapper}>
                 <TextField
-                  placeholder="Add user"
+                  placeholder="Add counterpart"
                   value={userInput}
                   onChange={(e) => setUserInput(e.target.value)}
                   onKeyDown={handleInputKeyDown}
@@ -950,42 +950,26 @@ export const CreatePage = () => {
                     }
                   }}
                 />
-                <Select
-                  name="add-user-role"
-                  aria-label="role"
-                  value={userRole}
-                  variant="filled"
-                  // Hide arrow for dropdown
-                  IconComponent={() => null}
-                  renderValue={(value) => (
-                    <FontAwesomeIcon
-                      color="var(--primary-main)"
-                      icon={value === UserRole.signer ? faPen : faEye}
-                    />
-                  )}
-                  onChange={(e) => setUserRole(e.target.value as UserRole)}
+                <Button
+                  onClick={() =>
+                    setUserRole(
+                      userRole === UserRole.signer
+                        ? UserRole.viewer
+                        : UserRole.signer
+                    )
+                  }
+                  variant="contained"
+                  aria-label="Toggle User Role"
                   sx={{
-                    fontSize: '16px',
                     minWidth: '44px',
-                    '& .MuiInputBase-input': {
-                      padding: '7px 14px!important',
-                      textOverflow: 'unset!important'
-                    }
+                    padding: '11.5px 12px',
+                    borderRadius: 0
                   }}
                 >
-                  <MenuItem value={UserRole.signer}>
-                    <ListItemIcon>
-                      <FontAwesomeIcon icon={faPen} />
-                    </ListItemIcon>
-                    <ListItemText>{UserRole.signer}</ListItemText>
-                  </MenuItem>
-                  <MenuItem value={UserRole.viewer} sx={{}}>
-                    <ListItemIcon>
-                      <FontAwesomeIcon icon={faEye} />
-                    </ListItemIcon>
-                    <ListItemText>{UserRole.viewer}</ListItemText>
-                  </MenuItem>
-                </Select>
+                  <FontAwesomeIcon
+                    icon={userRole === UserRole.signer ? faPen : faEye}
+                  />
+                </Button>
                 <Button
                   disabled={!userInput}
                   onClick={handleAddUser}
@@ -1001,17 +985,6 @@ export const CreatePage = () => {
                   <FontAwesomeIcon icon={faPlus} />
                 </Button>
               </div>
-
-              <div className={`${styles.paperGroup} ${styles.users}`}>
-                <DisplayUser
-                  metadata={metadata}
-                  users={users}
-                  handleUserRoleChange={handleUserRoleChange}
-                  handleRemoveUser={handleRemoveUser}
-                  moveSigner={moveSigner}
-                />
-              </div>
-
               <Button onClick={handleCreate} variant="contained">
                 Publish
               </Button>
@@ -1088,8 +1061,8 @@ const DisplayUser = ({
         {users
           .filter((user) => user.role === UserRole.signer)
           .map((user, index) => (
-            <SignerRow
-              key={`signer-${index}`}
+            <SignerCounterpart
+              key={`signer-${user.pubkey}`}
               userMeta={metadata[user.pubkey]}
               user={user}
               index={index}
@@ -1101,71 +1074,15 @@ const DisplayUser = ({
       </DndProvider>
       {users
         .filter((user) => user.role === UserRole.viewer)
-        .map((user, index) => {
-          const userMeta = metadata[user.pubkey]
+        .map((user) => {
           return (
-            <div className={styles.user} key={index}>
-              <div className={styles.avatar}>
-                <UserAvatar
-                  pubkey={user.pubkey}
-                  name={
-                    userMeta?.display_name ||
-                    userMeta?.name ||
-                    shorten(hexToNpub(user.pubkey))
-                  }
-                  image={userMeta?.picture}
-                />
-              </div>
-              <Select
-                name={`change-user-role-${user.pubkey}`}
-                aria-label="role"
-                value={user.role}
-                variant="outlined"
-                IconComponent={() => null}
-                renderValue={(value) => (
-                  <FontAwesomeIcon
-                    fontSize={'14px'}
-                    color="var(--primary-main)"
-                    icon={value === UserRole.signer ? faPen : faEye}
-                  />
-                )}
-                onChange={(e) =>
-                  handleUserRoleChange(e.target.value as UserRole, user.pubkey)
-                }
-                sx={{
-                  fontSize: '16px',
-                  minWidth: '34px',
-                  maxWidth: '34px',
-                  minHeight: '34px',
-                  maxHeight: '34px',
-                  '& .MuiInputBase-input': {
-                    padding: '10px !important',
-                    textOverflow: 'unset!important'
-                  },
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    display: 'none'
-                  }
-                }}
-              >
-                <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
-                <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
-              </Select>
-              <Tooltip title="Remove User" arrow>
-                <Button
-                  onClick={() => handleRemoveUser(user.pubkey)}
-                  sx={{
-                    minWidth: '34px',
-                    height: '34px',
-                    padding: 0,
-                    color: 'rgba(0, 0, 0, 0.35)',
-                    '&:hover': {
-                      color: 'white'
-                    }
-                  }}
-                >
-                  <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
-                </Button>
-              </Tooltip>
+            <div className={styles.user} key={`viewer-${user.pubkey}`}>
+              <Counterpart
+                userMeta={metadata[user.pubkey]}
+                user={user}
+                handleUserRoleChange={handleUserRoleChange}
+                handleRemoveUser={handleRemoveUser}
+              />
             </div>
           )
         })}
@@ -1179,23 +1096,26 @@ interface DragItem {
   type: string
 }
 
-type SignerRowProps = {
+type CounterpartProps = {
   userMeta: ProfileMetadata
   user: User
-  index: number
-  moveSigner: (dragIndex: number, hoverIndex: number) => void
   handleUserRoleChange: (role: UserRole, pubkey: string) => void
   handleRemoveUser: (pubkey: string) => void
 }
 
-const SignerRow = ({
+type SignerCounterpartProps = CounterpartProps & {
+  index: number
+  moveSigner: (dragIndex: number, hoverIndex: number) => void
+}
+
+const SignerCounterpart = ({
   userMeta,
   user,
   index,
   moveSigner,
   handleUserRoleChange,
   handleRemoveUser
-}: SignerRowProps) => {
+}: SignerCounterpartProps) => {
   const ref = useRef<HTMLTableRowElement>(null)
 
   const [{ handlerId }, drop] = useDrop<
@@ -1280,6 +1200,24 @@ const SignerRow = ({
       ref={ref}
     >
       <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
+      <Counterpart
+        user={user}
+        userMeta={userMeta}
+        handleRemoveUser={handleRemoveUser}
+        handleUserRoleChange={handleUserRoleChange}
+      />
+    </div>
+  )
+}
+
+const Counterpart = ({
+  userMeta,
+  user,
+  handleUserRoleChange,
+  handleRemoveUser
+}: CounterpartProps) => {
+  return (
+    <>
       <div className={styles.avatar}>
         <UserAvatar
           pubkey={user.pubkey}
@@ -1291,41 +1229,31 @@ const SignerRow = ({
           image={userMeta?.picture}
         />
       </div>
-      <Select
-        name={`change-user-role-${user.pubkey}`}
-        aria-label="role"
-        value={user.role}
-        variant="outlined"
-        IconComponent={() => null}
-        renderValue={(value) => (
+      <Tooltip title="Toggle User Role" arrow disableInteractive>
+        <Button
+          onClick={() =>
+            handleUserRoleChange(
+              user.role === UserRole.signer ? UserRole.viewer : UserRole.signer,
+              user.pubkey
+            )
+          }
+          sx={{
+            minWidth: '34px',
+            height: '34px',
+            padding: 0,
+            color: 'var(--primary-main)',
+            '&:hover': {
+              color: 'white'
+            }
+          }}
+        >
           <FontAwesomeIcon
             fontSize={'14px'}
-            color="var(--primary-main)"
-            icon={value === UserRole.signer ? faPen : faEye}
+            icon={user.role === UserRole.signer ? faPen : faEye}
           />
-        )}
-        onChange={(e) =>
-          handleUserRoleChange(e.target.value as UserRole, user.pubkey)
-        }
-        sx={{
-          fontSize: '16px',
-          minWidth: '34px',
-          maxWidth: '34px',
-          minHeight: '34px',
-          maxHeight: '34px',
-          '& .MuiInputBase-input': {
-            padding: '10px !important',
-            textOverflow: 'unset!important'
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            display: 'none'
-          }
-        }}
-      >
-        <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
-        <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
-      </Select>
-      <Tooltip title="Remove User" arrow>
+        </Button>
+      </Tooltip>
+      <Tooltip title="Remove User" arrow disableInteractive>
         <Button
           onClick={() => handleRemoveUser(user.pubkey)}
           sx={{
@@ -1341,6 +1269,6 @@ const SignerRow = ({
           <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
         </Button>
       </Tooltip>
-    </div>
+    </>
   )
 }
-- 
2.34.1


From 5caa7f22823e7cdbdee262a88fd7fb4bf9f9da8a Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Wed, 4 Sep 2024 17:35:54 +0200
Subject: [PATCH 2/8] refactor: update add counterparty design

---
 src/pages/create/index.tsx         | 44 ++++++++++++++----------------
 src/pages/create/style.module.scss | 21 +++++++++++++-
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index d3ed57a..0a15f2c 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -932,24 +932,25 @@ export const CreatePage = () => {
                   moveSigner={moveSigner}
                 />
               </div>
-              <div className={styles.inputWrapper}>
-                <TextField
-                  placeholder="Add counterpart"
-                  value={userInput}
-                  onChange={(e) => setUserInput(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  error={!!error}
-                  fullWidth
-                  sx={{
-                    fontSize: '16px',
-                    '& .MuiInputBase-input': {
-                      padding: '7px 14px'
-                    },
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      display: 'none'
-                    }
-                  }}
-                />
+              <div className={styles.addCounterpart}>
+                <div className={styles.inputWrapper}>
+                  <TextField
+                    placeholder="Add counterpart"
+                    value={userInput}
+                    onChange={(e) => setUserInput(e.target.value)}
+                    onKeyDown={handleInputKeyDown}
+                    error={!!error}
+                    sx={{
+                      fontSize: '16px',
+                      '& .MuiInputBase-input': {
+                        padding: '7px 14px'
+                      },
+                      '& .MuiOutlinedInput-notchedOutline': {
+                        display: 'none'
+                      }
+                    }}
+                  />
+                </div>
                 <Button
                   onClick={() =>
                     setUserRole(
@@ -962,8 +963,7 @@ export const CreatePage = () => {
                   aria-label="Toggle User Role"
                   sx={{
                     minWidth: '44px',
-                    padding: '11.5px 12px',
-                    borderRadius: 0
+                    padding: '11px 12px'
                   }}
                 >
                   <FontAwesomeIcon
@@ -977,9 +977,7 @@ export const CreatePage = () => {
                   aria-label="Add"
                   sx={{
                     minWidth: '44px',
-                    padding: '11.5px 12px',
-                    borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0
+                    padding: '11px 12px'
                   }}
                 >
                   <FontAwesomeIcon icon={faPlus} />
diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index eddacfe..ca7da32 100644
--- a/src/pages/create/style.module.scss
+++ b/src/pages/create/style.module.scss
@@ -78,7 +78,7 @@
   align-items: center;
   flex-shrink: 0;
 
-  height: 34px;
+  height: 36px;
   overflow: hidden;
   border-radius: 4px;
   outline: solid 1px #dddddd;
@@ -91,9 +91,28 @@
   }
 }
 
+.addCounterpart {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 10px;
+  background: white;
+  border-radius: 0 0 4px 4px;
+  padding: 15px;
+
+  > .inputWrapper {
+    flex-shrink: 1;
+  }
+}
+
 .users {
   flex-shrink: 0;
   max-height: 33vh;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: '-15px';
 }
 
 .user {
-- 
2.34.1


From 734026b2eeba2c5109ebdf0d8b5ef77f7ca36249 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Wed, 4 Sep 2024 17:37:01 +0200
Subject: [PATCH 3/8] fix: bad margin value

---
 src/pages/create/style.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index ca7da32..27b0560 100644
--- a/src/pages/create/style.module.scss
+++ b/src/pages/create/style.module.scss
@@ -112,7 +112,7 @@
 
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  margin-bottom: '-15px';
+  margin-bottom: -15px;
 }
 
 .user {
-- 
2.34.1


From 81f40c345a16499f743360b5ce153028914d9419 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Wed, 4 Sep 2024 17:42:49 +0200
Subject: [PATCH 4/8] refactor: use ellipsis instead of 3 dots

---
 src/utils/string.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/utils/string.ts b/src/utils/string.ts
index 9ac0f05..14eee83 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -1,5 +1,5 @@
 /**
- * Function will replace the middle of the string with 3 dots if length greater then
+ * Function will replace the middle of the string with ellipsis if length greater then
  * offset value
  * @param str string to shorten
  * @param offset of how many chars to keep in the beginning and the end
@@ -9,10 +9,7 @@ export const shorten = (str: string, offset = 9) => {
   // return original string if it is not long enough
   if (str.length < offset * 2 + 4) return str
 
-  return `${str.slice(0, offset)}...${str.slice(
-    str.length - offset,
-    str.length
-  )}`
+  return `${str.slice(0, offset)}…${str.slice(str.length - offset, str.length)}`
 }
 
 export const stringToHex = (str: string) => {
-- 
2.34.1


From c6010a5bef1eb9c95e48de8884e259f179268c39 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 5 Sep 2024 09:05:25 +0200
Subject: [PATCH 5/8] refactor(create): add counterpart design update

---
 src/pages/create/style.module.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index 27b0560..4652a64 100644
--- a/src/pages/create/style.module.scss
+++ b/src/pages/create/style.module.scss
@@ -97,9 +97,6 @@
   align-items: center;
   justify-content: start;
   gap: 10px;
-  background: white;
-  border-radius: 0 0 4px 4px;
-  padding: 15px;
 
   > .inputWrapper {
     flex-shrink: 1;
@@ -109,10 +106,6 @@
 .users {
   flex-shrink: 0;
   max-height: 33vh;
-
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  margin-bottom: -15px;
 }
 
 .user {
-- 
2.34.1


From 3e075754e5ec8b858f2e5a658a6137d4be188380 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 5 Sep 2024 09:28:04 +0200
Subject: [PATCH 6/8] feat(create): touch support for dnd

---
 package-lock.json          | 79 +++++++++++++++++++++++++++++++++++++-
 package.json               |  5 ++-
 src/pages/create/index.tsx | 10 +++--
 3 files changed, 86 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 479088b..2bcd952 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,9 +34,10 @@
         "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-html5-backend": "16.0.1",
+        "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",
@@ -3267,6 +3268,19 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/dnd-multi-backend": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/dnd-multi-backend/-/dnd-multi-backend-8.0.3.tgz",
+      "integrity": "sha512-yFFARotr+OEJk787Fsj+V52pi6j7+Pt/CRp3IR2Ai3fnxA/z6J54T7+gxkXzXu4cvxTNE7NiBzzAaJ2f7JjFTw==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/LouisBrunner"
+      },
+      "peerDependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5687,6 +5701,21 @@
         }
       ]
     },
+    "node_modules/rdndmb-html5-to-touch": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/rdndmb-html5-to-touch/-/rdndmb-html5-to-touch-8.0.3.tgz",
+      "integrity": "sha512-VfIbLjlL9NAnZzc2M5fGPCNkDyK12+ahgILGO5RjS7jkgUlxwB0c/XvxVQNfY/2ocg7isTY/G7tqxJk5fSTZAA==",
+      "license": "MIT",
+      "dependencies": {
+        "dnd-multi-backend": "^8.0.3",
+        "react-dnd-html5-backend": "^16.0.1",
+        "react-dnd-touch-backend": "^16.0.1"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/LouisBrunner"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -5702,6 +5731,7 @@
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
       "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "license": "MIT",
       "dependencies": {
         "@react-dnd/invariant": "^4.0.1",
         "@react-dnd/shallowequal": "^4.0.1",
@@ -5731,10 +5761,55 @@
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
       "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "license": "MIT",
       "dependencies": {
         "dnd-core": "^16.0.1"
       }
     },
+    "node_modules/react-dnd-multi-backend": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/react-dnd-multi-backend/-/react-dnd-multi-backend-8.0.3.tgz",
+      "integrity": "sha512-IwH7Mf6R05KIFohX0hHMTluoAvuUD8SO15KCD+9fY0nJ4nc1FGCMCSyMZw8R1XNStKp+JnNg3ZMtiaf5DebSUg==",
+      "license": "MIT",
+      "dependencies": {
+        "dnd-multi-backend": "^8.0.3",
+        "react-dnd-preview": "^8.0.3"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/LouisBrunner"
+      },
+      "peerDependencies": {
+        "dnd-core": "^16.0.1",
+        "react": "^16.14.0 || ^17.0.2 || ^18.0.0",
+        "react-dnd": "^16.0.1",
+        "react-dom": "^16.14.0 || ^17.0.2 || ^18.0.0"
+      }
+    },
+    "node_modules/react-dnd-preview": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/react-dnd-preview/-/react-dnd-preview-8.0.3.tgz",
+      "integrity": "sha512-s69Ro47QYDthDhj73iQ0VioMCjtlZ1AytKBDkQaHKm5DTjA8D2bIaFKCBQd330QEW0SIzqLJrZGCSlIY2xraJg==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/LouisBrunner"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.2 || ^18.0.0",
+        "react-dnd": "^16.0.1"
+      }
+    },
+    "node_modules/react-dnd-touch-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz",
+      "integrity": "sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
diff --git a/package.json b/package.json
index a2f074d..cf7ae91 100644
--- a/package.json
+++ b/package.json
@@ -44,9 +44,10 @@
     "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-html5-backend": "16.0.1",
+    "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",
diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index 0a15f2c..19a58ae 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -4,8 +4,9 @@ import saveAs from 'file-saver'
 import JSZip from 'jszip'
 import { Event, kinds } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
-import { DndProvider, useDrag, useDrop } from 'react-dnd'
-import { HTML5Backend } from 'react-dnd-html5-backend'
+import { useDrag, useDrop } from 'react-dnd'
+import { DndProvider } from 'react-dnd-multi-backend'
+import { HTML5toTouch } from 'rdndmb-html5-to-touch'
 import { useSelector } from 'react-redux'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -935,6 +936,7 @@ export const CreatePage = () => {
               <div className={styles.addCounterpart}>
                 <div className={styles.inputWrapper}>
                   <TextField
+                    fullWidth
                     placeholder="Add counterpart"
                     value={userInput}
                     onChange={(e) => setUserInput(e.target.value)}
@@ -1055,7 +1057,7 @@ const DisplayUser = ({
 }: DisplayUsersProps) => {
   return (
     <>
-      <DndProvider backend={HTML5Backend}>
+      <DndProvider options={HTML5toTouch}>
         {users
           .filter((user) => user.role === UserRole.signer)
           .map((user, index) => (
@@ -1187,7 +1189,7 @@ const SignerCounterpart = ({
     })
   })
 
-  const opacity = isDragging ? 0 : 1
+  const opacity = isDragging ? 0.2 : 1
   drag(drop(ref))
 
   return (
-- 
2.34.1


From 82b7b9f7ce1e8e6edfc547e18b56090236b02bdf Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 3 Sep 2024 14:13:35 +0200
Subject: [PATCH 7/8] fix(mark): scroll into marks, add scroll margin and
 forwardRef

Closes #172
---
 src/App.scss                           |  2 +
 src/components/PDFView/PdfMarkItem.tsx | 68 ++++++++++++++------------
 src/components/PDFView/PdfPageItem.tsx | 19 ++++---
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d3bff8a..4d95be6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -141,6 +141,8 @@ li {
   color: black;
   letter-spacing: normal;
   border: 1px solid transparent;
+
+  scroll-margin-top: $header-height + $body-vertical-padding;
 }
 
 [data-dev='true'] {
diff --git a/src/components/PDFView/PdfMarkItem.tsx b/src/components/PDFView/PdfMarkItem.tsx
index d5a7c78..db57800 100644
--- a/src/components/PDFView/PdfMarkItem.tsx
+++ b/src/components/PDFView/PdfMarkItem.tsx
@@ -2,6 +2,8 @@ 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'
 
 interface PdfMarkItemProps {
   userMark: CurrentUserMark
@@ -14,35 +16,41 @@ interface PdfMarkItemProps {
 /**
  * Responsible for display an individual Pdf Mark.
  */
-const PdfMarkItem = ({
-  selectedMark,
-  handleMarkClick,
-  selectedMarkValue,
-  userMark,
-  pageWidth
-}: PdfMarkItemProps) => {
-  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
-      onClick={handleClick}
-      className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
-      style={{
-        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))
-      }}
-    >
-      {getMarkValue()}
-    </div>
-  )
-}
+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.drawingRectangle} ${isEdited() && styles.edited}`}
+        style={{
+          backgroundColor: selectedMark?.mark.npub
+            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
+            : undefined,
+          borderColor: 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))
+        }}
+      >
+        {getMarkValue()}
+      </div>
+    )
+  }
+)
 
 export default PdfMarkItem
diff --git a/src/components/PDFView/PdfPageItem.tsx b/src/components/PDFView/PdfPageItem.tsx
index ec9034a..bbf6e4e 100644
--- a/src/components/PDFView/PdfPageItem.tsx
+++ b/src/components/PDFView/PdfPageItem.tsx
@@ -48,16 +48,15 @@ const PdfPageItem = ({
         alt={`page ${pageIndex + 1} of ${fileName}`}
       />
       {currentUserMarks.map((m, i) => (
-        <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
-          <PdfMarkItem
-            key={i}
-            handleMarkClick={handleMarkClick}
-            selectedMarkValue={selectedMarkValue}
-            userMark={m}
-            selectedMark={selectedMark}
-            pageWidth={page.width}
-          />
-        </div>
+        <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 (
-- 
2.34.1


From b8811d730a781c285ee6fc83a5faa6230aa45c3a Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 5 Sep 2024 13:24:34 +0200
Subject: [PATCH 8/8] fix(review): remove inline styles

---
 src/pages/create/index.tsx         | 72 ++++++------------------------
 src/pages/create/style.module.scss | 41 +++++++++++++++++
 2 files changed, 54 insertions(+), 59 deletions(-)

diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index 19a58ae..f0bd6b9 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -1,11 +1,12 @@
+import styles from './style.module.scss'
 import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
 import { Event, kinds } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
-import { useDrag, useDrop } from 'react-dnd'
-import { DndProvider } from 'react-dnd-multi-backend'
+import { DndProvider, useDrag, useDrop } from 'react-dnd'
+import { MultiBackend } from 'react-dnd-multi-backend'
 import { HTML5toTouch } from 'rdndmb-html5-to-touch'
 import { useSelector } from 'react-redux'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -41,7 +42,6 @@ import {
   uploadToFileStorage
 } from '../../utils'
 import { Container } from '../../components/Container'
-import styles from './style.module.scss'
 import fileListStyles from '../../components/FileList/style.module.scss'
 import { DrawTool, MarkType } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
@@ -866,21 +866,12 @@ export const CreatePage = () => {
             <div className={styles.flexWrap}>
               <div className={styles.inputWrapper}>
                 <TextField
+                  fullWidth
                   placeholder="Title"
                   size="small"
                   type="text"
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
-                  sx={{
-                    width: '100%',
-                    fontSize: '16px',
-                    '& .MuiInputBase-input': {
-                      padding: '7px 14px'
-                    },
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      display: 'none'
-                    }
-                  }}
                 />
               </div>
               <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
@@ -899,9 +890,6 @@ export const CreatePage = () => {
                         aria-label={`delete ${file.name}`}
                         variant="text"
                         onClick={(event) => handleRemoveFile(event, file)}
-                        sx={{
-                          minWidth: '44px'
-                        }}
                       >
                         <FontAwesomeIcon icon={faTrash} />
                       </Button>
@@ -942,15 +930,6 @@ export const CreatePage = () => {
                     onChange={(e) => setUserInput(e.target.value)}
                     onKeyDown={handleInputKeyDown}
                     error={!!error}
-                    sx={{
-                      fontSize: '16px',
-                      '& .MuiInputBase-input': {
-                        padding: '7px 14px'
-                      },
-                      '& .MuiOutlinedInput-notchedOutline': {
-                        display: 'none'
-                      }
-                    }}
                   />
                 </div>
                 <Button
@@ -963,10 +942,7 @@ export const CreatePage = () => {
                   }
                   variant="contained"
                   aria-label="Toggle User Role"
-                  sx={{
-                    minWidth: '44px',
-                    padding: '11px 12px'
-                  }}
+                  className={styles.counterpartToggleButton}
                 >
                   <FontAwesomeIcon
                     icon={userRole === UserRole.signer ? faPen : faEye}
@@ -977,10 +953,7 @@ export const CreatePage = () => {
                   onClick={handleAddUser}
                   variant="contained"
                   aria-label="Add"
-                  sx={{
-                    minWidth: '44px',
-                    padding: '11px 12px'
-                  }}
+                  className={styles.counterpartToggleButton}
                 >
                   <FontAwesomeIcon icon={faPlus} />
                 </Button>
@@ -1005,11 +978,7 @@ export const CreatePage = () => {
                       {drawTool.active ? (
                         <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
                       ) : (
-                        <span
-                          style={{
-                            fontSize: '10px'
-                          }}
-                        >
+                        <span className={styles.comingSoonPlaceholder}>
                           Coming soon
                         </span>
                       )}
@@ -1057,7 +1026,7 @@ const DisplayUser = ({
 }: DisplayUsersProps) => {
   return (
     <>
-      <DndProvider options={HTML5toTouch}>
+      <DndProvider backend={MultiBackend} options={HTML5toTouch}>
         {users
           .filter((user) => user.role === UserRole.signer)
           .map((user, index) => (
@@ -1237,18 +1206,10 @@ const Counterpart = ({
               user.pubkey
             )
           }
-          sx={{
-            minWidth: '34px',
-            height: '34px',
-            padding: 0,
-            color: 'var(--primary-main)',
-            '&:hover': {
-              color: 'white'
-            }
-          }}
+          className={styles.counterpartRowToggleButton}
+          data-variant="primary"
         >
           <FontAwesomeIcon
-            fontSize={'14px'}
             icon={user.role === UserRole.signer ? faPen : faEye}
           />
         </Button>
@@ -1256,17 +1217,10 @@ const Counterpart = ({
       <Tooltip title="Remove User" arrow disableInteractive>
         <Button
           onClick={() => handleRemoveUser(user.pubkey)}
-          sx={{
-            minWidth: '34px',
-            height: '34px',
-            padding: 0,
-            color: 'rgba(0, 0, 0, 0.35)',
-            '&:hover': {
-              color: 'white'
-            }
-          }}
+          className={styles.counterpartRowToggleButton}
+          data-variant="secondary"
         >
-          <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
+          <FontAwesomeIcon icon={faTrash} />
         </Button>
       </Tooltip>
     </>
diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index 4652a64..a7dd7f2 100644
--- a/src/pages/create/style.module.scss
+++ b/src/pages/create/style.module.scss
@@ -42,6 +42,7 @@
     }
 
     button {
+      min-width: 44px;
       color: $primary-main;
     }
 
@@ -89,6 +90,16 @@
   &:focus-within {
     outline-color: $primary-main;
   }
+
+  // Override default MUI input styles only inside inputWrapepr
+  :global {
+    .MuiInputBase-input {
+      padding: 7px 14px;
+    }
+    .MuiOutlinedInput-notchedOutline {
+      display: none;
+    }
+  }
 }
 
 .addCounterpart {
@@ -101,11 +112,21 @@
   > .inputWrapper {
     flex-shrink: 1;
   }
+
+  button {
+    min-width: 44px;
+    padding: 11px 12px;
+  }
 }
 
 .users {
   flex-shrink: 0;
   max-height: 33vh;
+
+  .counterpartToggleButton {
+    min-width: 44px;
+    padding: 11px 12px;
+  }
 }
 
 .user {
@@ -120,6 +141,22 @@
   a:hover {
     text-decoration: none;
   }
+
+  // Higher specificify to override default button styles
+  .counterpartRowToggleButton {
+    min-width: 34px;
+    height: 34px;
+    padding: 0;
+  }
+}
+
+.counterpartRowToggleButton {
+  &[data-variant='primary'] {
+    color: $primary-main;
+  }
+  &[data-variant='secondary'] {
+    color: rgba(0, 0, 0, 0.35);
+  }
 }
 
 .avatar {
@@ -199,3 +236,7 @@
     cursor: not-allowed;
   }
 }
+
+.comingSoonPlaceholder {
+  font-size: 10px;
+}
-- 
2.34.1