src/pages/create/index.tsx

@@ -61,8 +61,8 @@ export const CreatePage = () => {
 
   const [authUrl, setAuthUrl] = useState<string>()
 
+  const [title, setTitle] = useState('')
   const [selectedFiles, setSelectedFiles] = useState<File[]>([])
-  const [displayUserInput, setDisplayUserInput] = useState(false)
 
   const [userInput, setUserInput] = useState('')
   const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
@@ -204,7 +204,6 @@ export const CreatePage = () => {
   }
 
   const handleSelectFiles = (files: File[]) => {
-    setDisplayUserInput(true)
     setSelectedFiles((prev) => {
       const prevFileNames = prev.map((file) => file.name)
 
@@ -223,6 +222,11 @@ export const CreatePage = () => {
   }
 
   const handleCreate = async () => {
+    if (!title.trim()) {
+      toast.error('Title can not be empty')
+      return
+    }
+
     if (users.length === 0) {
       toast.error(
         'No signer/viewer is provided.  At least add one signer or viewer.'
@@ -290,6 +294,7 @@ export const CreatePage = () => {
 
     // create content for meta file
     const meta: Meta = {
+      title,
       createSignature: JSON.stringify(createSignature, null, 2),
       docSignatures: {}
     }
@@ -422,78 +427,84 @@ export const CreatePage = () => {
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <Box className={styles.container}>
-        <Typography component="label" variant="h6">
-          Select files
-        </Typography>
-
-        <MuiFileInput
-          multiple
-          placeholder="Choose Files"
-          value={selectedFiles}
-          onChange={(value) => handleSelectFiles(value)}
+        <TextField
+          label="Title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          variant="outlined"
         />
 
-        <ul>
-          {selectedFiles.map((file, index) => (
-            <li key={index}>
-              <Typography component="label">{file.name}</Typography>
-              <IconButton onClick={() => handleRemoveFile(file)}>
-                <Clear style={{ color: 'red' }} />{' '}
-              </IconButton>
-            </li>
-          ))}
-        </ul>
+        <Box>
+          <MuiFileInput
+            fullWidth
+            multiple
+            placeholder="Choose Files"
+            value={selectedFiles}
+            onChange={(value) => handleSelectFiles(value)}
+          />
 
-        {displayUserInput && (
-          <>
-            <Typography component="label" variant="h6">
-              Add Counterparties
-            </Typography>
-            <Box className={styles.inputBlock}>
-              <TextField
-                label="nip05 / npub"
-                value={userInput}
-                onChange={(e) => setUserInput(e.target.value)}
-                helperText={error}
-                error={!!error}
-              />
-              <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>
+          {selectedFiles.length > 0 && (
+            <ul>
+              {selectedFiles.map((file, index) => (
+                <li key={index}>
+                  <Typography component="label">{file.name}</Typography>
+                  <IconButton onClick={() => handleRemoveFile(file)}>
+                    <Clear style={{ color: 'red' }} />{' '}
+                  </IconButton>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Box>
 
-              <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-                <Button
-                  disabled={!userInput}
-                  onClick={handleAddUser}
-                  variant="contained"
-                >
-                  Add
-                </Button>
-              </Box>
-            </Box>
-            <DisplayUser
-              users={users}
-              handleUserRoleChange={handleUserRoleChange}
-              handleRemoveUser={handleRemoveUser}
-              moveSigner={moveSigner}
+        <Typography component="label" variant="h6">
+          Add Counterparts
+        </Typography>
+        <Box className={styles.inputBlock}>
+          <Box className={styles.inputBlock}>
+            <TextField
+              label="nip05 / npub"
+              value={userInput}
+              onChange={(e) => setUserInput(e.target.value)}
+              helperText={error}
+              error={!!error}
             />
+            <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>
+
             <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-              <Button onClick={handleCreate} variant="contained">
-                Create
+              <Button
+                disabled={!userInput}
+                onClick={handleAddUser}
+                variant="contained"
+              >
+                Add
               </Button>
             </Box>
-          </>
-        )}
+          </Box>
+        </Box>
+        <DisplayUser
+          users={users}
+          handleUserRoleChange={handleUserRoleChange}
+          handleRemoveUser={handleRemoveUser}
+          moveSigner={moveSigner}
+        />
+        <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+          <Button onClick={handleCreate} variant="contained">
+            Create
+          </Button>
+        </Box>
       </Box>
       <CopyModal
         open={openCopyModal}

src/pages/create/style.module.scss

@@ -4,12 +4,13 @@
   display: flex;
   flex-direction: column;
   color: $text-color;
+  margin-top: 10px;
+  gap: 10px;
 
   .inputBlock {
     display: flex;
     flex-direction: column;
     gap: 25px;
-    margin-top: 10px;
   }
 }
 

src/types/core.ts

@@ -9,6 +9,7 @@ export interface User {
 }
 
 export interface Meta {
+  title: string
   createSignature: string
   docSignatures: { [key: `npub1${string}`]: string }
   exportSignature?: string