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,17 +427,23 @@ export const CreatePage = () => {
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <Box className={styles.container}>
-        <Typography component="label" variant="h6">
-          Select files
-        </Typography>
+        <TextField
+          label="Title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          variant="outlined"
+        />
 
+        <Box>
           <MuiFileInput
+            fullWidth
             multiple
             placeholder="Choose Files"
             value={selectedFiles}
             onChange={(value) => handleSelectFiles(value)}
           />
 
+          {selectedFiles.length > 0 && (
             <ul>
               {selectedFiles.map((file, index) => (
                 <li key={index}>
@@ -443,12 +454,13 @@ export const CreatePage = () => {
                 </li>
               ))}
             </ul>
+          )}
+        </Box>
 
-        {displayUserInput && (
-          <>
         <Typography component="label" variant="h6">
-              Add Counterparties
+          Add Counterparts
         </Typography>
+        <Box className={styles.inputBlock}>
           <Box className={styles.inputBlock}>
             <TextField
               label="nip05 / npub"
@@ -481,6 +493,7 @@ export const CreatePage = () => {
               </Button>
             </Box>
           </Box>
+        </Box>
         <DisplayUser
           users={users}
           handleUserRoleChange={handleUserRoleChange}
@@ -492,8 +505,6 @@ export const CreatePage = () => {
             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