feat(dashboard): add notes section

client/components/forms/input/Textarea/Textarea.component.tsx

@@ -10,7 +10,7 @@ interface Props {
   helpText?: string
   customStyles?: string
   isDisabled?: boolean
-  handleCursorPositionUpdate: (_position: number) => void
+  handleCursorPositionUpdate?: (_position: number) => void
 }
 const DEFAULT_TEXTAREA_ROWS = 4
 
@@ -44,6 +44,7 @@ const Textarea = forwardRef(function Textarea(props: Props, ref: any) {
         autoComplete="off"
         rows={DEFAULT_TEXTAREA_ROWS}
         onBlur={(e) =>
+          props.handleCursorPositionUpdate &&
           props.handleCursorPositionUpdate(e.target.selectionStart)
         }
       />

client/components/overview/DescriptionField/DescriptionField.component.tsx

@@ -24,7 +24,7 @@ const DescriptionField = () => {
         label="Task Details"
         value={description}
         handleCursorPositionUpdate={(pos: number) => setCursorPosition(pos)}
-        helpText="A brief overview of what needs to be accomplished, in which you can
+        helpText="* A brief overview of what needs to be accomplished, in which you can
         use markdown for detailed formatting."
       />
     </section>

client/components/overview/NotesSection/NotesSections.tsx

@@ -0,0 +1,47 @@
+import { useAtom } from 'jotai'
+import { atom_notes } from 'jotai/atoms'
+
+import React, { useRef, useState } from 'react'
+import SectionHeading from '../common/SectionHeading.component'
+import Textarea from '@/components/forms/input/Textarea'
+
+type Props = {}
+
+export default function NotesSection({}: Props) {
+  const [notes, setNotes] = useAtom(atom_notes)
+  const [isExpanded, setisExpanded] = useState(true)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  return (
+    <section className="mt-8">
+      <SectionHeading
+        title="Notes"
+        description={
+          'Use this space for brainstorming, saving research links, or noting questions that pop up during your session.'
+        }
+        subHeading={
+          '* Jot down distracting but important thoughts to revisit later.'
+        }
+        isExpanded={isExpanded}
+        handleToggle={() => setisExpanded(!isExpanded)}
+      />
+      {isExpanded && renderTextarea()}
+    </section>
+  )
+
+  function renderTextarea() {
+    return (
+      <Textarea
+        handleChange={handleUpdateField}
+        ref={textareaRef}
+        id="taskNotes"
+        label="Write your notes"
+        value={notes}
+      />
+    )
+  }
+
+  function handleUpdateField(value: string) {
+    setNotes(value)
+  }
+}

client/components/overview/NotesSection/index.tsx

@@ -0,0 +1,3 @@
+import NotesSection from './NotesSections'
+
+export default NotesSection

client/components/overview/OverviewSection.tsx

@@ -16,6 +16,7 @@ import TaskDetails from './TaskDetails'
 import SubtasksSection from './SubtasksSection'
 import Greeting from '../common/Greeting'
 import TemplateSection from './TemplateSection'
+import NotesSection from './NotesSection'
 
 type Props = {
   handleReset: () => void
@@ -72,7 +73,10 @@ const OverviewSection = ({ handleReset }: Props) => {
           activeTab={activeTab}
           handleTabChange={(tab) => setActiveTab(tab)}
         />
-        <SubtasksSection />
+        <div className="grid md:grid-cols-2	md:gap-8">
+          <SubtasksSection />
+          <NotesSection />
+        </div>
         <SnippetsSection />
         <Timer />
       </div>

client/components/overview/SubtasksSection/SubtasksSection.component.tsx

@@ -18,7 +18,7 @@ const SubtasksSection = () => {
         handleToggle={() => setisExpanded(!isExpanded)}
       />
       {isExpanded && (
-        <div className={`sm:relative sm:z-0 min-h-full w-full md:w-1/2`}>
+        <div className={`sm:relative sm:z-0 min-h-full w-full`}>
           <SubtasksList />
         </div>
       )}

client/jotai/atoms.ts

@@ -12,13 +12,15 @@ const KEYS = {
   description: 'description',
   snippets: 'snippets',
   subTasks: 'subtasks',
+  notes: 'notes',
 }
 
 export const atom_snippets = atomWithStorage<Array<Snippet>>(KEYS.snippets, [])
 export const atom_title = atomWithStorage(
   KEYS.title,
   DEFAULT_TEMPLATES.blank.title,
 )
+export const atom_notes = atomWithStorage(KEYS.notes, '')
 export const atom_description = atomWithStorage(
   KEYS.description,
   DEFAULT_TEMPLATES.blank.description,