Merge pull request #15 from premieroctet/feat/3-insert-block-access

Insert a block displayed in DnD list

src/components/digests/AddTextBlockButton.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { PlusCircleIcon } from '@heroicons/react/24/solid';
+import AddTextBlockDialog from './dialog/AddTextBlockDialog';
+import { useParams } from 'next/navigation';
+import { useTeam } from '@/contexts/TeamContext';
+
+const AddTextBlockButton = ({ position }: { position: number }) => {
+  const params = useParams();
+  const [isAddTextDialogOpen, setIsAddTextDialogOpen] = useState(false);
+  const { id: teamId } = useTeam();
+
+  return (
+    <div>
+      <div className="group w-full cursor-pointer">
+        <div className="block group-hover:hidden h-6" />
+        <div className="hidden group-hover:block">
+          <div
+            className="flex items-center"
+            onClick={() => setIsAddTextDialogOpen(true)}
+          >
+            <div className="bg-violet-500 w-full h-0.5 flex-1"></div>
+            <PlusCircleIcon className="h-6 w-6 text-violet-500" />
+            <div className="bg-violet-500 w-full h-0.5 flex-1"></div>
+          </div>
+        </div>
+      </div>
+
+      <AddTextBlockDialog
+        isOpen={isAddTextDialogOpen}
+        setIsOpen={setIsAddTextDialogOpen}
+        digestId={params?.digestId as string}
+        teamId={teamId}
+        position={position + 1}
+      />
+    </div>
+  );
+};
+
+export default AddTextBlockButton;

src/components/digests/BlockListDnd.tsx

@@ -6,6 +6,7 @@ import NoContent from '../layout/NoContent';
 import { BsFillBookmarkFill } from '@react-icons/all-files/bs/BsFillBookmarkFill';
 import clsx from 'clsx';
 import BlockCard from './block-card/BlockCard';
+import AddTextBlockButton from './AddTextBlockButton';
 
 export type BlockListDndProps = {
   digest: Awaited<ReturnType<typeof getDigest>>;
@@ -40,6 +41,8 @@ export const BlockListDnd = ({ digest }: BlockListDndProps) => {
                       </li>
                     )}
                   </Draggable>
+
+                  <AddTextBlockButton position={block.order} />
                 </div>
               );
             })

src/components/digests/block-card/bookmark-card/BookmarkCard.tsx

@@ -23,7 +23,7 @@ export default function BlockBookmarkCard({
   isEditable = false,
 }: Props) {
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [isAddTextDialogOpen, setIsAddTextDialogOpen] = useState(false);
+
   const params = useParams();
   const { id: teamId } = useTeam();
   const {
@@ -55,9 +55,6 @@ export default function BlockBookmarkCard({
           onEditClick={() => {
             setIsEditDialogOpen(true);
           }}
-          onAddTextBlockClick={() => {
-            setIsAddTextDialogOpen(true);
-          }}
         />
         <EditBookmarkDialog
           isOpen={isEditDialogOpen}
@@ -68,13 +65,6 @@ export default function BlockBookmarkCard({
             ...(description && { description }),
           }}
         />
-        <AddTextBlockDialog
-          isOpen={isAddTextDialogOpen}
-          setIsOpen={setIsAddTextDialogOpen}
-          digestId={params?.digestId as string}
-          teamId={teamId}
-          position={block.order + 1}
-        />
       </>
     );
   }

src/components/digests/block-card/text-card/TextCard.tsx

@@ -8,15 +8,13 @@ import { useTeam } from '@/contexts/TeamContext';
 import { useParams } from 'next/navigation';
 import useAddAndRemoveBlockOnDigest from '@/hooks/useAddAndRemoveBlockOnDigest';
 import ActionsBlockPopover from '../../ActionsBlockPopover';
-import AddTextBlockDialog from '../../dialog/AddTextBlockDialog';
 
 export interface Props {
   block: PublicDigestListProps['digest']['digestBlocks'][number];
   isEditable?: boolean;
 }
 
 export default function BlockTextCard({ block, isEditable = false }: Props) {
-  const [isAddTextDialogOpen, setIsAddTextDialogOpen] = useState(false);
   const { id: teamId } = useTeam();
   const params = useParams();
   const { remove, isRefreshing } = useAddAndRemoveBlockOnDigest({
@@ -52,20 +50,10 @@ export default function BlockTextCard({ block, isEditable = false }: Props) {
         </div>
       </div>
       {isEditable && (
-        <>
-          <ActionsBlockPopover
-            isRemoving={remove.isLoading || isRefreshing}
-            onRemoveClick={() => remove.mutate(block.id)}
-            onAddTextBlockClick={() => setIsAddTextDialogOpen(true)}
-          />
-          <AddTextBlockDialog
-            isOpen={isAddTextDialogOpen}
-            setIsOpen={setIsAddTextDialogOpen}
-            digestId={params?.digestId as string}
-            teamId={teamId}
-            position={block.order + 1}
-          />
-        </>
+        <ActionsBlockPopover
+          isRemoving={remove.isLoading || isRefreshing}
+          onRemoveClick={() => remove.mutate(block.id)}
+        />
       )}
     </div>
   );