From 03cd3db1c7db2fc92216d0bf4234ea5de905a3e3 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 25 Jul 2026 01:35:41 +0100
Subject: [PATCH] Enhance NoteItem component with new props for body and footer
 visibility

- Added showBody and showFooter props to the NoteItem component to control the rendering of the note's content and footer elements.
- Refactored the component structure to conditionally display the body and footer based on the new props, improving flexibility in note presentation.
---
 src/components/Dashboard/common/NoteItem.jsx | 176 ++++++++++---------
 1 file changed, 93 insertions(+), 83 deletions(-)

diff --git a/src/components/Dashboard/common/NoteItem.jsx b/src/components/Dashboard/common/NoteItem.jsx
index 45f7977..69f610b 100644
--- a/src/components/Dashboard/common/NoteItem.jsx
+++ b/src/components/Dashboard/common/NoteItem.jsx
@@ -36,6 +36,8 @@ const NoteItem = ({
   showChildNotes = true,
   showActions = true,
   showInfo = true,
+  showBody = true,
+  showFooter = true,
   largeSpacing = false
 }) => {
   const [childNotes, setChildNotes] = useState([])
@@ -162,90 +164,96 @@ const NoteItem = ({
   const noteItem = (
     <>
       <Flex vertical gap={'small'}>
-        <Flex gap={'middle'} align='start' style={{ marginBottom: '4px' }}>
-          <Space>
-            <PersonIcon />
-            <Text style={{ whiteSpace: 'nowrap' }}>{note.user.name}:</Text>
-          </Space>
-          <div style={{ marginTop: '1px' }}>
-            <MarkdownDisplay content={note.content} />
-          </div>
-        </Flex>
-        <Divider style={{ margin: largeSpacing ? '10px 0' : 0 }} />
-        <Flex wrap gap={'small'}>
-          {showActions && (
-            <>
-              <Dropdown
-                menu={{ items: dropdownItems }}
-                trigger={['hover']}
-                placement='bottomLeft'
-              >
-                <Button size='small'>Actions</Button>
-              </Dropdown>
-              <UserNotifierToggle
-                type='note'
-                size='small'
-                objectData={note}
-                disabled={false}
-              />
-            </>
-          )}
-          <Space size={'small'} style={{ marginRight: 8 }}>
-            <Text type='secondary'>Type:</Text>
-            <Tag color={note.noteType.color} style={{ margin: 0 }}>
-              {note.noteType.name}
-            </Tag>
-          </Space>
-          <Space size={'small'} style={{ marginRight: 8 }}>
-            <Text type='secondary'>User ID:</Text>
-            <IdDisplay
-              longId={false}
-              id={note.user._id}
-              type={'user'}
-              showHyperlink={true}
-            />
-          </Space>
-          {showCreatedAt && (
-            <Space size={'small'} style={{ marginRight: 8 }}>
-              <Text type='secondary'>Created At:</Text>
-              <TimeDisplay dateTime={note.createdAt} showSince={true} />
-            </Space>
-          )}
-          <Flex style={{ flexGrow: 1 }} justify='end'>
-            <Space size={'small'}>
-              {showInfo && (
-                <Button
-                  icon={<InfoIcon />}
-                  type='text'
-                  size='small'
-                  onClick={() => {
-                    navigate(infoAction.url(note._id))
-                  }}
-                />
-              )}
-              {showChildNotes && (
-                <Button
-                  icon={
-                    childNotesLoading ? (
-                      <LoadingOutlined />
-                    ) : (
-                      <CaretLeftFilled />
-                    )
-                  }
-                  size='small'
-                  type='text'
-                  loading={childNotesLoading}
-                  disabled={childNotesLoading}
-                  style={{
-                    transform: transformValue,
-                    transition: 'transform 0.2s ease'
-                  }}
-                  onClick={toggleExpand}
-                />
-              )}
+        {showBody && (
+          <Flex gap={'middle'} align='start' style={{ marginBottom: '4px' }}>
+            <Space>
+              <PersonIcon />
+              <Text style={{ whiteSpace: 'nowrap' }}>{note.user.name}:</Text>
             </Space>
+            <div style={{ marginTop: '4px' }}>
+              <MarkdownDisplay content={note.content} />
+            </div>
           </Flex>
-        </Flex>
+        )}
+        {showFooter && showBody && (
+          <Divider style={{ margin: largeSpacing ? '10px 0' : 0 }} />
+        )}
+        {showFooter && (
+          <Flex wrap gap={'small'}>
+            {showActions && (
+              <>
+                <Dropdown
+                  menu={{ items: dropdownItems }}
+                  trigger={['hover']}
+                  placement='bottomLeft'
+                >
+                  <Button size='small'>Actions</Button>
+                </Dropdown>
+                <UserNotifierToggle
+                  type='note'
+                  size='small'
+                  objectData={note}
+                  disabled={false}
+                />
+              </>
+            )}
+            <Space size={'small'} style={{ marginRight: 8 }}>
+              <Text type='secondary'>Type:</Text>
+              <Tag color={note.noteType.color} style={{ margin: 0 }}>
+                {note.noteType.name}
+              </Tag>
+            </Space>
+            <Space size={'small'} style={{ marginRight: 8 }}>
+              <Text type='secondary'>User ID:</Text>
+              <IdDisplay
+                longId={false}
+                id={note.user._id}
+                type={'user'}
+                showHyperlink={true}
+              />
+            </Space>
+            {showCreatedAt && (
+              <Space size={'small'} style={{ marginRight: 8 }}>
+                <Text type='secondary'>Created At:</Text>
+                <TimeDisplay dateTime={note.createdAt} showSince={true} />
+              </Space>
+            )}
+            <Flex style={{ flexGrow: 1 }} justify='end'>
+              <Space size={'small'}>
+                {showInfo && (
+                  <Button
+                    icon={<InfoIcon />}
+                    type='text'
+                    size='small'
+                    onClick={() => {
+                      navigate(infoAction.url(note._id))
+                    }}
+                  />
+                )}
+                {showChildNotes && (
+                  <Button
+                    icon={
+                      childNotesLoading ? (
+                        <LoadingOutlined />
+                      ) : (
+                        <CaretLeftFilled />
+                      )
+                    }
+                    size='small'
+                    type='text'
+                    loading={childNotesLoading}
+                    disabled={childNotesLoading}
+                    style={{
+                      transform: transformValue,
+                      transition: 'transform 0.2s ease'
+                    }}
+                    onClick={toggleExpand}
+                  />
+                )}
+              </Space>
+            </Flex>
+          </Flex>
+        )}
         {isExpanded && (
           <Flex vertical gap={'small'} style={{ flexGrow: 1 }}>
             {childNotes.length > 0 ? (
@@ -342,7 +350,9 @@ NoteItem.propTypes = {
   showChildNotes: PropTypes.bool,
   showActions: PropTypes.bool,
   largeSpacing: PropTypes.bool,
-  showInfo: PropTypes.bool
+  showInfo: PropTypes.bool,
+  showBody: PropTypes.bool,
+  showFooter: PropTypes.bool
 }
 
 export default NoteItem