From 94445a673a27905f226db36a95d423824ce158a0 Mon Sep 17 00:00:00 2001
From: Anwesh Gangula <gangulaanwesh@gmail.com>
Date: Thu, 4 Apr 2024 21:52:10 +0530
Subject: [PATCH] group block results from same page together

---
 src/components/LogseqBlock.tsx    | 24 ++++++++++++++++------
 src/components/LogseqCopilot.tsx  | 15 ++++++++++++--
 src/components/logseq.module.scss | 33 ++++++++++++++++++++++++++++---
 3 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/components/LogseqBlock.tsx b/src/components/LogseqBlock.tsx
index af455f1..deabb57 100644
--- a/src/components/LogseqBlock.tsx
+++ b/src/components/LogseqBlock.tsx
@@ -6,14 +6,16 @@ import React, { useEffect } from 'react';
 
 type LogseqBlockProps = {
   graph: string;
-  block: LogseqBlockType;
+  blocks: LogseqBlockType[];
   isPopUp?: boolean;
 };
 
-export const LogseqBlock = ({ graph, block }: LogseqBlockProps) => {
+export const LogseqBlock = ({ graph, blocks }: LogseqBlockProps) => {
   const [checked, setChecked] = React.useState(false);
   const [status, setStatus] = React.useState('');
 
+  const block = blocks[0]; // TODO: randomyl picking first item - need to change later
+
   const statusUpdate = (marker: string) => {
     switch (marker) {
       case 'TODO':
@@ -87,7 +89,7 @@ export const LogseqBlock = ({ graph, block }: LogseqBlockProps) => {
     );
   };
 
-  const toBlock = () => {
+  const toBlock = (block) => {
     if (!block.uuid) {
       return <></>
     }
@@ -105,11 +107,21 @@ export const LogseqBlock = ({ graph, block }: LogseqBlockProps) => {
       <div className={styles.block}>
         <div className={styles.blockHeader}>
           <LogseqPageLink graph={graph} page={block.page}></LogseqPageLink>
-          {toBlock()}
         </div>
         <div className={styles.blockBody}>
-          {markerRender(block.marker)}{' '}
-          <div className={styles.blockContent} dangerouslySetInnerHTML={{ __html: block.html }} />
+          <ul className={styles.blockContentList}>
+            {blocks.map((block) => {
+              return(
+                <li className={styles.blockContentListItem}>
+                  <div className={styles.blockContentRoot} >
+                    {markerRender(block.marker)}{' '}
+                    <div className={styles.blockContent} dangerouslySetInnerHTML={{ __html: block.html }} />
+                    {toBlock(block)}
+                  </div>
+                </li>
+              )}
+            )}
+          </ul>
         </div>
       </div>
     );
diff --git a/src/components/LogseqCopilot.tsx b/src/components/LogseqCopilot.tsx
index e8cbffb..e613476 100644
--- a/src/components/LogseqCopilot.tsx
+++ b/src/components/LogseqCopilot.tsx
@@ -9,6 +9,15 @@ const LogseqCopilot = ({ graph, pages, blocks }) => {
     Browser.runtime.sendMessage({ type: 'open-options' });
   };
 
+  const groupedBlocks = blocks.reduce((groups, item) => {
+    const group = (groups[item.page.name] || []);
+    group.push(item);
+    groups[item.page.name] = group;
+    return groups;
+  }, {});
+
+  console.log({groupedBlocks, blocks})
+
   const count = () => {
     return pages.length + blocks.length;
   };
@@ -19,8 +28,10 @@ const LogseqCopilot = ({ graph, pages, blocks }) => {
     }
     return (
       <div className={styles.blocks}>
-        {blocks.map((block) => {
-          return <LogseqBlock key={block.uuid} block={block} graph={graph} />;
+        {Object.entries(groupedBlocks).map(([key, blocks], i) => {
+          // return blockGroup.map((block) => {
+            return <LogseqBlock key={key} blocks={blocks} graph={graph} />;
+          // });
         })}
       </div>
     );
diff --git a/src/components/logseq.module.scss b/src/components/logseq.module.scss
index cbaae6d..b63c41e 100644
--- a/src/components/logseq.module.scss
+++ b/src/components/logseq.module.scss
@@ -27,9 +27,16 @@
 }
 
 .pages {
-  @apply grid grid-cols-3 gap-3;
+  @apply grid grid-cols-3 gap-2 p-1 bg-[#8080801a] rounded-lg relative max-h-52 overflow-auto;
 }
 
+.pages::before{
+  content: 📝;
+  position: absolute;
+  // top: 0;
+}
+
+
 :root {
   --cardShadow: color-mix(in srgb, black 30%, transparent) 0 1px 2px 0,
     color-mix(in srgb, black 15%, transparent) 0 1px 3px 1px;
@@ -61,11 +68,31 @@
 }
 
 .blockBody {
-  @apply flex flex-row flex-wrap gap-2 items-start hover:no-underline;
+  @apply flex flex-row flex-wrap gap-2 items-start hover:no-underline ml-3 my-1;
 }
 
 .blockHeader {
-  @apply w-full justify-between flex flex-row gap-2;
+  @apply w-full justify-between flex flex-row gap-2 border-0 border-b-[1px] border-solid border-[#6666664d] pb-1;
+}
+
+.blockContentList{
+  width: 100%;
+}
+
+.blockContentListItem{
+  // @apply list-inside;
+  padding: 1px 3px;
+  border-radius: 3px;
+}
+
+.blockContentListItem:hover{
+  background-color: hsl(0deg 0% 40% / 30%);
+}
+
+.blockContentRoot{
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
 }
 
 .blockContent {