refactor(create-page): update designs and add files navigation

src/components/DrawPDFFields/index.tsx

@@ -535,12 +535,17 @@ export const DrawPDFFields = (props: Props) => {
     <div className={styles.view}>
       {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
         return (
-          <div key={pdfFile.file.name + pdfFileIndex}>
+          <>
-            <div className={styles.fileWrapper}>
+            <div
+              key={pdfFile.file.name}
+              className={`${styles.fileWrapper} ${styles.scrollTarget}`}
+              id={`file-${pdfFile.file.name}`}
+            >
               {getPdfPages(pdfFile, pdfFileIndex)}
             </div>
             {pdfFileIndex < pdfFiles.length - 1 && (
               <Divider
+                key={pdfFile.file.name + `-divider`}
                 sx={{
                   fontSize: '12px',
                   color: 'rgba(0,0,0,0.15)'
@@ -549,7 +554,7 @@ export const DrawPDFFields = (props: Props) => {
                 File Separator
               </Divider>
             )}
-          </div>
+          </>
         )
       })}
 

src/components/DrawPDFFields/style.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/sizes.scss';
+
 .pdfFieldItem {
   background: white;
   padding: 10px;
@@ -135,6 +137,8 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
+  position: relative;
+  scroll-margin-top: $header-height + $body-vertical-padding;
 }
 
 .view {

src/layouts/StickySideColumns.module.scss

@@ -10,6 +10,9 @@
 
 .sidesWrap {
   position: relative;
+
+  // HACK: Stop grid column from growing
+  min-width: 0;
 }
 
 .sides {

src/pages/create/index.tsx

@@ -1,26 +1,18 @@
-import { Clear, DragHandle } from '@mui/icons-material'
+import { DragHandle } from '@mui/icons-material'
 import {
-  Box,
   Button,
-  FormControl,
   IconButton,
-  InputLabel,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
   MenuItem,
   Select,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
   TextField,
-  Tooltip,
+  Tooltip
-  Typography
 } from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
-import { MuiFileInput } from 'mui-file-input'
 import { Event, kinds } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
 import { DndProvider, useDrag, useDrop } from 'react-dnd'
@@ -64,6 +56,14 @@ import { PdfFile } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
 import { Mark } from '../../types/mark.ts'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faEye,
+  faPen,
+  faPlus,
+  faTrash,
+  faUpload
+} from '@fortawesome/free-solid-svg-icons'
 
 export const CreatePage = () => {
   const navigate = useNavigate()
@@ -76,7 +76,14 @@ export const CreatePage = () => {
   const [authUrl, setAuthUrl] = useState<string>()
 
   const [title, setTitle] = useState(`sigit_${formatTimestamp(Date.now())}`)
+
   const [selectedFiles, setSelectedFiles] = useState<File[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const handleUploadButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click()
+    }
+  }
 
   const [userInput, setUserInput] = useState('')
   const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
@@ -268,19 +275,22 @@ export const CreatePage = () => {
     })
   }
 
-  const handleSelectFiles = (files: File[]) => {
+  const handleSelectFiles = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedFiles((prev) => {
+    if (event.target.files) {
-      const prevFileNames = prev.map((file) => file.name)
+      setSelectedFiles(Array.from(event.target.files))
-
+    }
-      const newFiles = files.filter(
-        (file) => !prevFileNames.includes(file.name)
-      )
-
-      return [...prev, ...newFiles]
-    })
   }
 
-  const handleRemoveFile = (fileToRemove: File) => {
+  const handleFileClick = (name: string) => {
+    document.getElementById(name)?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  const handleRemoveFile = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    fileToRemove: File
+  ) => {
+    event.stopPropagation()
+
     setSelectedFiles((prevFiles) =>
       prevFiles.filter((file) => file.name !== fileToRemove.name)
     )
@@ -705,71 +715,134 @@ export const CreatePage = () => {
         <StickySideColumns
           left={
             <div className={styles.flexWrap}>
+              <div className={styles.inputWrapper}>
                 <TextField
-                label="Title"
+                  placeholder="Title"
+                  size="small"
+                  type="text"
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
-                variant="outlined"
+                  sx={{
+                    width: '100%',
+                    fontSize: '16px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px'
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      display: 'none'
+                    }
+                  }}
                 />
-              <ul className={styles.paperGroup}>
+              </div>
+              <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
                 {selectedFiles.length > 0 &&
                   selectedFiles.map((file, index) => (
-                    <li key={index}>
+                    <Button
-                      <Typography component="label">{file.name}</Typography>
+                      key={index}
-                      <IconButton onClick={() => handleRemoveFile(file)}>
+                      className={styles.file}
-                        <Clear style={{ color: 'red' }} />{' '}
+                      onClick={() => handleFileClick('file-' + file.name)}
-                      </IconButton>
+                    >
-                    </li>
+                      <>
+                        <span>{file.name}</span>
+                        <Button
+                          variant="text"
+                          onClick={(event) => handleRemoveFile(event, file)}
+                          sx={{
+                            minWidth: '44px'
+                          }}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </Button>
+                      </>
+                    </Button>
                   ))}
-              </ul>
+              </ol>
-              <MuiFileInput
+              <Button variant="contained" onClick={handleUploadButtonClick}>
-                fullWidth
+                <FontAwesomeIcon icon={faUpload} />
-                multiple
+                Upload new files
-                placeholder="Choose Files"
+                <input
-                value={selectedFiles}
+                  ref={fileInputRef}
-                onChange={(value) => handleSelectFiles(value)}
+                  hidden={true}
+                  multiple={true}
+                  type="file"
+                  onChange={handleSelectFiles}
                 />
+              </Button>
             </div>
           }
           right={
             <div className={styles.flexWrap}>
-              <Typography component="label" variant="h6">
+              <div className={styles.inputWrapper}>
-                Add Counterparts
-              </Typography>
-              <Box className={styles.paperGroup}>
                 <TextField
-                  label="nip05 / npub"
+                  placeholder="User (nip05 / npub)"
                   value={userInput}
                   onChange={(e) => setUserInput(e.target.value)}
                   helperText={error}
                   error={!!error}
+                  fullWidth
+                  sx={{
+                    fontSize: '16px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px'
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      display: 'none'
+                    }
+                  }}
                 />
-                <FormControl fullWidth>
-                  <InputLabel id="select-role-label">Role</InputLabel>
                 <Select
-                    labelId="select-role-label"
+                  aria-label="role"
-                    id="demo-simple-select"
                   value={userRole}
-                    label="Role"
+                  variant="filled"
+                  // Hide arrow for dropdown
+                  IconComponent={() => null}
+                  renderValue={(value) => (
+                    <FontAwesomeIcon
+                      icon={value === UserRole.signer ? faPen : faEye}
+                    />
+                  )}
                   onChange={(e) => setUserRole(e.target.value as UserRole)}
+                  sx={{
+                    fontSize: '16px',
+                    minWidth: '44px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px!important',
+                      textOverflow: 'unset!important'
+                    }
+                  }}
                 >
                   <MenuItem value={UserRole.signer}>
-                      {UserRole.signer}
+                    <ListItem>
+                      <ListItemIcon>
+                        <FontAwesomeIcon icon={faPen} />
+                      </ListItemIcon>
+                      <ListItemText>{UserRole.signer}</ListItemText>
+                    </ListItem>
                   </MenuItem>
                   <MenuItem value={UserRole.viewer}>
-                      {UserRole.viewer}
+                    <ListItem>
+                      <ListItemIcon>
+                        <FontAwesomeIcon icon={faEye} />
+                      </ListItemIcon>
+                      <ListItemText>{UserRole.viewer}</ListItemText>
+                    </ListItem>
                   </MenuItem>
                 </Select>
-                </FormControl>
-
                 <Button
                   disabled={!userInput}
                   onClick={handleAddUser}
                   variant="contained"
+                  aria-label="Add"
+                  sx={{
+                    minWidth: '44px',
+                    padding: '11.5px 12px',
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0
+                  }}
                 >
-                  Add
+                  <FontAwesomeIcon icon={faPlus} />
                 </Button>
-              </Box>
+              </div>
 
               <div className={styles.paperGroup}>
                 <DisplayUser
@@ -779,12 +852,12 @@ export const CreatePage = () => {
                   handleRemoveUser={handleRemoveUser}
                   moveSigner={moveSigner}
                 />
+              </div>
 
               <Button onClick={handleCreate} variant="contained">
-                  Create
+                Publish
               </Button>
             </div>
-            </div>
           }
         >
           <DrawPDFFields
@@ -815,16 +888,7 @@ const DisplayUser = ({
   moveSigner
 }: DisplayUsersProps) => {
   return (
-    <TableContainer>
+    <>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell className={styles.tableHeaderCell}>User</TableCell>
-            <TableCell className={styles.tableHeaderCell}>Role</TableCell>
-            <TableCell>Action</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
       <DndProvider backend={HTML5Backend}>
         {users
           .filter((user) => user.role === UserRole.signer)
@@ -845,8 +909,8 @@ const DisplayUser = ({
         .map((user, index) => {
           const userMeta = metadata[user.pubkey]
           return (
-                <TableRow key={index}>
+            <div className={styles.user} key={index}>
-                  <TableCell className={styles.tableCell}>
+              <div className={styles.avatar}>
                 <UserAvatar
                   pubkey={user.pubkey}
                   name={
@@ -856,39 +920,44 @@ const DisplayUser = ({
                   }
                   image={userMeta?.picture}
                 />
-                  </TableCell>
+              </div>
-                  <TableCell className={styles.tableCell}>
               <Select
-                      fullWidth
+                aria-label="role"
                 value={user.role}
+                variant="outlined"
+                IconComponent={() => null}
+                renderValue={(value) => (
+                  <FontAwesomeIcon
+                    icon={value === UserRole.signer ? faPen : faEye}
+                  />
+                )}
                 onChange={(e) =>
-                        handleUserRoleChange(
+                  handleUserRoleChange(e.target.value as UserRole, user.pubkey)
-                          e.target.value as UserRole,
-                          user.pubkey
-                        )
                 }
+                sx={{
+                  fontSize: '16px',
+                  minWidth: '44px',
+                  '& .MuiInputBase-input': {
+                    padding: '7px 14px!important',
+                    textOverflow: 'unset!important'
+                  },
+                  '& .MuiOutlinedInput-notchedOutline': {
+                    display: 'none'
+                  }
+                }}
               >
-                      <MenuItem value={UserRole.signer}>
+                <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
-                        {UserRole.signer}
+                <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
-                      </MenuItem>
-                      <MenuItem value={UserRole.viewer}>
-                        {UserRole.viewer}
-                      </MenuItem>
               </Select>
-                  </TableCell>
-                  <TableCell>
               <Tooltip title="Remove User" arrow>
                 <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
-                        <Clear style={{ color: 'red' }} />
+                  <FontAwesomeIcon icon={faTrash} />
                 </IconButton>
               </Tooltip>
-                  </TableCell>
+            </div>
-                </TableRow>
           )
         })}
-        </TableBody>
+    </>
-      </Table>
-    </TableContainer>
   )
 }
 
@@ -992,16 +1061,14 @@ const SignerRow = ({
   drag(drop(ref))
 
   return (
-    <TableRow
+    <div
-      sx={{ cursor: 'move', opacity }}
+      className={styles.user}
+      style={{ cursor: 'move', opacity }}
       data-handler-id={handlerId}
       ref={ref}
-    >
-      <TableCell
-        className={styles.tableCell}
-        sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
     >
       <DragHandle />
+      <div className={styles.avatar}>
         <UserAvatar
           pubkey={user.pubkey}
           name={
@@ -1011,26 +1078,38 @@ const SignerRow = ({
           }
           image={userMeta?.picture}
         />
-      </TableCell>
+      </div>
-      <TableCell className={styles.tableCell}>
       <Select
-          fullWidth
+        aria-label="role"
         value={user.role}
+        variant="outlined"
+        IconComponent={() => null}
+        renderValue={(value) => (
+          <FontAwesomeIcon icon={value === UserRole.signer ? faPen : faEye} />
+        )}
         onChange={(e) =>
           handleUserRoleChange(e.target.value as UserRole, user.pubkey)
         }
+        sx={{
+          fontSize: '16px',
+          minWidth: '44px',
+          '& .MuiInputBase-input': {
+            padding: '7px 14px!important',
+            textOverflow: 'unset!important'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            display: 'none'
+          }
+        }}
       >
         <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
         <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
       </Select>
-      </TableCell>
-      <TableCell>
       <Tooltip title="Remove User" arrow>
         <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
-            <Clear style={{ color: 'red' }} />
+          <FontAwesomeIcon icon={faTrash} />
         </IconButton>
       </Tooltip>
-      </TableCell>
+    </div>
-    </TableRow>
   )
 }

src/pages/create/style.module.scss

@@ -6,6 +6,60 @@
   gap: 15px;
 }
 
+.orderedFilesList {
+  counter-reset: item;
+  list-style-type: none;
+  margin: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    transition: ease 0.4s;
+    border-radius: 4px;
+    background: #ffffff;
+    padding: 7px 10px;
+    color: rgba(0, 0, 0, 0.5);
+    min-height: 45px;
+    cursor: pointer;
+    gap: 10px;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &::before {
+      content: counter(item) ' ';
+      counter-increment: item;
+      font-size: 14px;
+    }
+    :nth-child(1) {
+      flex-grow: 1;
+
+      font-size: 16px;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    button {
+      color: $primary-main;
+    }
+
+    &:hover,
+    &.active,
+    &:focus-within {
+      background: $primary-main;
+      color: white;
+
+      button {
+        color: white;
+      }
+    }
+  }
+}
+
 .paperGroup {
   border-radius: 4px;
   background: white;
@@ -13,28 +67,49 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
+
+  // Automatic scrolling if paper-group gets large enough
+  // used for files on the left and users on the right
+  max-height: 350px;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.subHeader {
+.inputWrapper {
-  border-bottom: 0.5px solid;
+  display: flex;
-}
+  align-items: center;
 
-.tableHeaderCell {
+  height: 34px;
-  border-right: 1px solid rgba(224, 224, 224, 1);
+  overflow: hidden;
-}
+  border-radius: 4px;
+  outline: solid 1px #dddddd;
+  background: white;
 
-.tableCell {
+  width: 100%;
-  border-right: 1px solid rgba(224, 224, 224, 1);
+
-  height: 56px;
+  &:focus-within {
+    outline-color: $primary-main;
+  }
+}
 
 .user {
   display: flex;
-    align-items: center;
   gap: 10px;
 
-    .name {
+  font-size: 14px;
-      text-align: center;
+  text-align: start;
-      cursor: pointer;
+  justify-content: center;
+  align-items: center;
+
+  a:hover {
+    text-decoration: none;
   }
 }
+
+.avatar {
+  flex-grow: 1;
+
+  &:first-child {
+    margin-left: 34px;
+  }
 }