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,
-  Typography
+  Tooltip
 } 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[]) => {
-    setSelectedFiles((prev) => {
-      const prevFileNames = prev.map((file) => file.name)
-
-      const newFiles = files.filter(
-        (file) => !prevFileNames.includes(file.name)
-      )
-
-      return [...prev, ...newFiles]
-    })
+  const handleSelectFiles = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      setSelectedFiles(Array.from(event.target.files))
+    }
   }
 
-  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}>
-              <TextField
-                label="Title"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                variant="outlined"
-              />
-              <ul className={styles.paperGroup}>
+              <div className={styles.inputWrapper}>
+                <TextField
+                  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}`}>
                 {selectedFiles.length > 0 &&
                   selectedFiles.map((file, index) => (
-                    <li key={index}>
-                      <Typography component="label">{file.name}</Typography>
-                      <IconButton onClick={() => handleRemoveFile(file)}>
-                        <Clear style={{ color: 'red' }} />{' '}
-                      </IconButton>
-                    </li>
+                    <Button
+                      key={index}
+                      className={styles.file}
+                      onClick={() => handleFileClick('file-' + file.name)}
+                    >
+                      <>
+                        <span>{file.name}</span>
+                        <Button
+                          variant="text"
+                          onClick={(event) => handleRemoveFile(event, file)}
+                          sx={{
+                            minWidth: '44px'
+                          }}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </Button>
+                      </>
+                    </Button>
                   ))}
-              </ul>
-              <MuiFileInput
-                fullWidth
-                multiple
-                placeholder="Choose Files"
-                value={selectedFiles}
-                onChange={(value) => handleSelectFiles(value)}
-              />
+              </ol>
+              <Button variant="contained" onClick={handleUploadButtonClick}>
+                <FontAwesomeIcon icon={faUpload} />
+                Upload new files
+                <input
+                  ref={fileInputRef}
+                  hidden={true}
+                  multiple={true}
+                  type="file"
+                  onChange={handleSelectFiles}
+                />
+              </Button>
             </div>
           }
           right={
             <div className={styles.flexWrap}>
-              <Typography component="label" variant="h6">
-                Add Counterparts
-              </Typography>
-              <Box className={styles.paperGroup}>
+              <div className={styles.inputWrapper}>
                 <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"
-                    id="demo-simple-select"
-                    value={userRole}
-                    label="Role"
-                    onChange={(e) => setUserRole(e.target.value as UserRole)}
-                  >
-                    <MenuItem value={UserRole.signer}>
-                      {UserRole.signer}
-                    </MenuItem>
-                    <MenuItem value={UserRole.viewer}>
-                      {UserRole.viewer}
-                    </MenuItem>
-                  </Select>
-                </FormControl>
-
+                <Select
+                  aria-label="role"
+                  value={userRole}
+                  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}>
+                    <ListItem>
+                      <ListItemIcon>
+                        <FontAwesomeIcon icon={faPen} />
+                      </ListItemIcon>
+                      <ListItemText>{UserRole.signer}</ListItemText>
+                    </ListItem>
+                  </MenuItem>
+                  <MenuItem value={UserRole.viewer}>
+                    <ListItem>
+                      <ListItemIcon>
+                        <FontAwesomeIcon icon={faEye} />
+                      </ListItemIcon>
+                      <ListItemText>{UserRole.viewer}</ListItemText>
+                    </ListItem>
+                  </MenuItem>
+                </Select>
                 <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,11 +852,11 @@ export const CreatePage = () => {
                   handleRemoveUser={handleRemoveUser}
                   moveSigner={moveSigner}
                 />
-
-                <Button onClick={handleCreate} variant="contained">
-                  Create
-                </Button>
               </div>
+
+              <Button onClick={handleCreate} variant="contained">
+                Publish
+              </Button>
             </div>
           }
         >
@@ -815,80 +888,76 @@ 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)
-              .map((user, index) => (
-                <SignerRow
-                  key={`signer-${index}`}
-                  userMeta={metadata[user.pubkey]}
-                  user={user}
-                  index={index}
-                  moveSigner={moveSigner}
-                  handleUserRoleChange={handleUserRoleChange}
-                  handleRemoveUser={handleRemoveUser}
+    <>
+      <DndProvider backend={HTML5Backend}>
+        {users
+          .filter((user) => user.role === UserRole.signer)
+          .map((user, index) => (
+            <SignerRow
+              key={`signer-${index}`}
+              userMeta={metadata[user.pubkey]}
+              user={user}
+              index={index}
+              moveSigner={moveSigner}
+              handleUserRoleChange={handleUserRoleChange}
+              handleRemoveUser={handleRemoveUser}
+            />
+          ))}
+      </DndProvider>
+      {users
+        .filter((user) => user.role === UserRole.viewer)
+        .map((user, index) => {
+          const userMeta = metadata[user.pubkey]
+          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}
                 />
-              ))}
-          </DndProvider>
-          {users
-            .filter((user) => user.role === UserRole.viewer)
-            .map((user, index) => {
-              const userMeta = metadata[user.pubkey]
-              return (
-                <TableRow key={index}>
-                  <TableCell className={styles.tableCell}>
-                    <UserAvatar
-                      pubkey={user.pubkey}
-                      name={
-                        userMeta?.display_name ||
-                        userMeta?.name ||
-                        shorten(hexToNpub(user.pubkey))
-                      }
-                      image={userMeta?.picture}
-                    />
-                  </TableCell>
-                  <TableCell className={styles.tableCell}>
-                    <Select
-                      fullWidth
-                      value={user.role}
-                      onChange={(e) =>
-                        handleUserRoleChange(
-                          e.target.value as UserRole,
-                          user.pubkey
-                        )
-                      }
-                    >
-                      <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' }} />
-                      </IconButton>
-                    </Tooltip>
-                  </TableCell>
-                </TableRow>
-              )
-            })}
-        </TableBody>
-      </Table>
-    </TableContainer>
+              </div>
+              <Select
+                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>
+              <Tooltip title="Remove User" arrow>
+                <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          )
+        })}
+    </>
   )
 }
 
@@ -992,16 +1061,14 @@ const SignerRow = ({
   drag(drop(ref))
 
   return (
-    <TableRow
-      sx={{ cursor: 'move', opacity }}
+    <div
+      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 />
+      <DragHandle />
+      <div className={styles.avatar}>
         <UserAvatar
           pubkey={user.pubkey}
           name={
@@ -1011,26 +1078,38 @@ const SignerRow = ({
           }
           image={userMeta?.picture}
         />
-      </TableCell>
-      <TableCell className={styles.tableCell}>
-        <Select
-          fullWidth
-          value={user.role}
-          onChange={(e) =>
-            handleUserRoleChange(e.target.value as UserRole, user.pubkey)
+      </div>
+      <Select
+        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' }} />
-          </IconButton>
-        </Tooltip>
-      </TableCell>
-    </TableRow>
+        }}
+      >
+        <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
+        <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
+      </Select>
+      <Tooltip title="Remove User" arrow>
+        <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
+          <FontAwesomeIcon icon={faTrash} />
+        </IconButton>
+      </Tooltip>
+    </div>
   )
 }

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 {
-  border-bottom: 0.5px solid;
-}
+.inputWrapper {
+  display: flex;
+  align-items: center;
 
-.tableHeaderCell {
-  border-right: 1px solid rgba(224, 224, 224, 1);
-}
+  height: 34px;
+  overflow: hidden;
+  border-radius: 4px;
+  outline: solid 1px #dddddd;
+  background: white;
 
-.tableCell {
-  border-right: 1px solid rgba(224, 224, 224, 1);
-  height: 56px;
+  width: 100%;
 
-  .user {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-
-    .name {
-      text-align: center;
-      cursor: pointer;
-    }
+  &:focus-within {
+    outline-color: $primary-main;
+  }
+}
+
+.user {
+  display: flex;
+  gap: 10px;
+
+  font-size: 14px;
+  text-align: start;
+  justify-content: center;
+  align-items: center;
+
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.avatar {
+  flex-grow: 1;
+
+  &:first-child {
+    margin-left: 34px;
   }
 }