refactor: better variable names

src/pages/create/index.tsx

@@ -108,7 +108,6 @@ export const CreatePage = () => {
   const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
 
   const [selectedTool, setSelectedTool] = useState<DrawTool>()
-  const [toolbox] = useState<DrawTool[]>(DEFAULT_TOOLBOX)
 
   /**
    * Changes the drawing tool
@@ -833,28 +832,36 @@ export const CreatePage = () => {
               </div>
 
               <div className={`${styles.paperGroup} ${styles.toolbox}`}>
-                {toolbox.map((drawTool: DrawTool, index: number) => {
+                {DEFAULT_TOOLBOX.filter((drawTool) => !drawTool.isHidden).map(
-                  return (
+                  (drawTool: DrawTool, index: number) => {
-                    <div
+                    return (
-                      key={index}
+                      <div
-                      {...(drawTool.active && {
+                        key={index}
-                        onClick: () => handleToolSelect(drawTool)
+                        {...(!drawTool.isComingSoon && {
-                      })}
+                          onClick: () => handleToolSelect(drawTool)
-                      className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
+                        })}
+                        className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${drawTool.isComingSoon ? styles.comingSoon : ''}
                       `}
-                    >
+                      >
-                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
+                        <FontAwesomeIcon
-                      {drawTool.label}
+                          fontSize={'15px'}
-                      {drawTool.active ? (
+                          icon={drawTool.icon}
-                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
+                        />
-                      ) : (
+                        {drawTool.label}
-                        <span className={styles.comingSoonPlaceholder}>
+                        {!drawTool.isComingSoon ? (
-                          Coming soon
+                          <FontAwesomeIcon
-                        </span>
+                            fontSize={'15px'}
-                      )}
+                            icon={faEllipsis}
-                    </div>
+                          />
-                  )
+                        ) : (
-                })}
+                          <span className={styles.comingSoonPlaceholder}>
+                            Coming soon
+                          </span>
+                        )}
+                      </div>
+                    )
+                  }
+                )}
               </div>
 
               <Button onClick={handleCreate} variant="contained">

src/types/drawing.ts

@@ -31,7 +31,10 @@ export interface DrawTool {
   icon: IconDefinition
   defaultValue?: string
   selected?: boolean
-  active?: boolean
+  /** show or hide the toolbox item */
+  isHidden?: boolean
+  /** show or hide "coming soon" message on the toolbox item */
+  isComingSoon?: boolean
 }
 
 export enum MarkType {

src/utils/mark.ts

@@ -3,14 +3,26 @@ import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
 import { EMPTY } from './const.ts'
-import { MarkType } from '../types/drawing.ts'
+import { DrawTool, MarkType } from '../types/drawing.ts'
 import {
   faT,
   faSignature,
   faBriefcase,
   faIdCard,
   faClock,
-  fa1
+  fa1,
+  faCalendarDays,
+  faCheckDouble,
+  faCircleDot,
+  faCreditCard,
+  faHeading,
+  faImage,
+  faPaperclip,
+  faPhone,
+  faSquareCaretDown,
+  faSquareCheck,
+  faStamp,
+  faTableCellsLarge
 } from '@fortawesome/free-solid-svg-icons'
 
 /**
@@ -140,115 +152,114 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
   return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
 }
 
-export const DEFAULT_TOOLBOX = [
+export const DEFAULT_TOOLBOX: DrawTool[] = [
   {
     identifier: MarkType.FULLNAME,
     icon: faIdCard,
     label: 'Full Name',
-    active: false
+    isComingSoon: true
   },
   {
     identifier: MarkType.JOBTITLE,
     icon: faBriefcase,
     label: 'Job Title',
-    active: false
+    isComingSoon: true
   },
   {
     identifier: MarkType.SIGNATURE,
     icon: faSignature,
     label: 'Signature',
-    active: false
+    isComingSoon: true
   },
   {
     identifier: MarkType.DATETIME,
     icon: faClock,
     label: 'Date Time',
-    active: false
+    isComingSoon: true
   },
   {
     identifier: MarkType.TEXT,
     icon: faT,
-    label: 'Text',
+    label: 'Text'
-    active: true
   },
   {
     identifier: MarkType.NUMBER,
     icon: fa1,
     label: 'Number',
-    active: false
+    isComingSoon: true
+  },
+  {
+    identifier: MarkType.INITIALS,
+    icon: faHeading,
+    label: 'Initials',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.DATE,
+    icon: faCalendarDays,
+    label: 'Date',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.IMAGES,
+    icon: faImage,
+    label: 'Images',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.CHECKBOX,
+    icon: faSquareCheck,
+    label: 'Checkbox',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.MULTIPLE,
+    icon: faCheckDouble,
+    label: 'Multiple',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.FILE,
+    icon: faPaperclip,
+    label: 'File',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.RADIO,
+    icon: faCircleDot,
+    label: 'Radio',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.SELECT,
+    icon: faSquareCaretDown,
+    label: 'Select',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.CELLS,
+    icon: faTableCellsLarge,
+    label: 'Cells',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.STAMP,
+    icon: faStamp,
+    label: 'Stamp',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.PAYMENT,
+    icon: faCreditCard,
+    label: 'Payment',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.PHONE,
+    icon: faPhone,
+    label: 'Phone',
+    isHidden: true
   }
-  // {
-  //   identifier: MarkType.INITIALS,
-  //   icon: faHeading,
-  //   label: 'Initials',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.DATE,
-  //   icon: faCalendarDays,
-  //   label: 'Date',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.IMAGES,
-  //   icon: faImage,
-  //   label: 'Images',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.CHECKBOX,
-  //   icon: faSquareCheck,
-  //   label: 'Checkbox',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.MULTIPLE,
-  //   icon: faCheckDouble,
-  //   label: 'Multiple',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.FILE,
-  //   icon: faPaperclip,
-  //   label: 'File',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.RADIO,
-  //   icon: faCircleDot,
-  //   label: 'Radio',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.SELECT,
-  //   icon: faSquareCaretDown,
-  //   label: 'Select',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.CELLS,
-  //   icon: faTableCellsLarge,
-  //   label: 'Cells',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.STAMP,
-  //   icon: faStamp,
-  //   label: 'Stamp',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.PAYMENT,
-  //   icon: faCreditCard,
-  //   label: 'Payment',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.PHONE,
-  //   icon: faPhone,
-  //   label: 'Phone',
-  //   active: false
-  // }
 ]
 
 export const getToolboxLabelByMarkType = (markType: MarkType) => {