feat: support editer task marker

style: upgrade to new styles system
refact: add service layer and split tools

src/components/LogseqBlock.tsx

@@ -1,38 +1,116 @@
 import { LogseqBlockType } from '@/types/logseqBlock';
 import LogseqPageLink from './LogseqPage';
-
+import Browser from 'webextension-polyfill';
 import styles from './logseq.module.scss';
+import React, { useEffect } from 'react';
 
 type LogseqBlockProps = {
   graph: string;
   block: LogseqBlockType;
   isPopUp?: boolean;
 };
 
-export const LogseqBlock = ({
-  graph,
-  block,
-}: LogseqBlockProps) => {
+export const LogseqBlock = ({ graph, block }: LogseqBlockProps) => {
+  const [checked, setChecked] = React.useState(false);
+  const [status, setStatus] = React.useState('');
+
+  const statusUpdate = (marker: string) => {
+    switch (marker) {
+      case 'TODO':
+      case 'LATER':
+      case 'DOING':
+      case 'NOW':
+        setChecked(false);
+        setStatus(marker);
+        break;
+      case 'DONE':
+        setChecked(true);
+        setStatus(marker);
+        break;
+      case 'CANCELED':
+        setChecked(true);
+        setStatus(marker);
+    }
+  }
+
+  const processEvent = (message: { type: string, uuid: string, status: string, marker: string, msg?: string }) => {
+    if (message.type === 'change-block-marker-result' && message.uuid === block.uuid && message.status === "success") {
+      statusUpdate(message.marker);
+    }
+
+  }
+
+  useEffect(() => {
+    Browser.runtime.onMessage.addListener(processEvent)
+    statusUpdate(block.marker)
+  }, []);
+
+  const updateBlock = (marker: string) => {
+    Browser.runtime.sendMessage({ type: 'change-block-marker', marker: marker, uuid: block.uuid })
+  };
+
+  const markerStatusChange = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    let marker = '';
+    if (status === 'TODO') {
+      marker = 'DOING'
+    } else if (status === 'DOING') {
+      marker = 'TODO'
+    } else if (status === 'NOW') {
+      marker = 'LATER'
+    } else if (status === 'LATER') {
+      marker = 'NOW'
+    }
+    updateBlock(marker)
+  };
+
+  const markerCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let marker = 'TODO';
+    if (checked) {
+      marker = 'TODO'
+    } else {
+      marker = 'DONE';
+    }
+    updateBlock(marker)
+  };
+
+  const markerRender = (marker: string) => {
+    if (!marker) {
+      return <></>;
+    }
+    return (
+      <div className={styles.blockMarker}>
+        <input className={styles.blockMarkerCheckbox} type="checkbox" checked={checked} onChange={markerCheck} />
+        <button className={styles.blockMarkerStatus} onClick={markerStatusChange}>{status}</button>
+      </div>
+    );
+  };
+
+  const toBlock = () => {
+    if (!block.uuid) {
+      return <></>
+    }
+    return <a
+      className={styles.toBlock}
+      href={`logseq://graph/${graph}?block-id=${block.uuid}`}
+    >
+      <span className={'tie tie-block'}></span>
+      To Block
+    </a>
+  }
+
   if (block.html) {
     return (
-      <div className={`${styles.block}`}>
-        <div
-          className={styles.blockContent}
-          dangerouslySetInnerHTML={{ __html: block.html }}
-        ></div>
-        <span className={styles.blockFooter}>
-          {block.uuid && <a
-            className={styles.toBlock}
-            href={`logseq://graph/${graph}?block-id=${block.uuid}`}
-          >
-            <span className={'tie tie-block'}></span>
-            To block
-          </a>}
-          <LogseqPageLink
-            graph={graph}
-            page={block.page}
-          ></LogseqPageLink>
-        </span>
+      <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 }} />
+        </div>
       </div>
     );
   }

src/components/LogseqCopilot.tsx

@@ -14,39 +14,37 @@ const LogseqCopilot = ({ graph, pages, blocks }) => {
   };
 
   const blocksRender = () => {
+    if (blocks.length === 0) {
+      return <></>;
+    }
     return (
-      <>
+      <div className={styles.blocks}>
         {blocks.map((block) => {
           return <LogseqBlock key={block.uuid} block={block} graph={graph} />;
         })}
-      </>
+      </div>
     );
   };
 
   const pagesRender = () => {
-    return (
-      <>
-        {pages.length > 0 ? (
-          <div className="pages">
-            <ul>
-              {pages.map((page) => {
-                if (!page) return <></>;
-                return (
-                  <p key={page.name}>
-                    <LogseqPageLink
-                      graph={graph}
-                      page={page}
-                    ></LogseqPageLink>
-                  </p>
-                );
-              })}
-            </ul>
+    if (pages.length === 0) {
+      return <></>;
+    }
+    return <div className={styles.pages}>
+      {pages.slice(0, 9).map((page) => {
+        if (!page) return <></>;
+        return (
+          <div className={styles.page}>
+            <LogseqPageLink
+              key={page.name}
+              graph={graph}
+              page={page}
+            ></LogseqPageLink>
           </div>
-        ) : (
-          <></>
-        )}
-      </>
-    );
+        );
+      })}
+    </div>
+
   };
 
   if (count() === 0) {

src/components/LogseqPage.tsx

@@ -16,14 +16,15 @@ const LogseqPageLink = ({
   if (page === undefined || page?.name === undefined) {
     return <></>;
   }
+
   return (
     <>
       <a
         className={styles.logseqPageLink}
         href={`logseq://graph/${graph}?page=${page?.name}`}
       >
         <span className="tie tie-page"></span>
-        {page?.name}
+        {page?.originalName?.replaceAll("/", "/ ")}
       </a>
     </>
   );

src/components/logseq.module.scss

@@ -1,11 +1,80 @@
-.blockFooter {
-  @apply w-full justify-between flex flex-row;
+.pageContent {
+  @apply flex flex-col gap-2 prose-sm dark:prose-invert whitespace-pre-wrap text-sm;
+}
+
+.pageContentFooter {
+  @apply flex flex-row justify-end;
+}
+
+.copilotCardHeader {
+  @apply flex flex-row justify-between items-center text-sm pb-2;
+
+  a {
+    @apply text-sm text-center object-center;
+  }
+}
+
+.divide {
+  @apply divide-y divide-x-0 divide-dashed;
+}
+
+.toBlock {
+  @apply no-underline hover:underline min-w-max;
+}
+
+.logseqPageLink {
+  @apply no-underline hover:underline;
+}
+
+.pages {
+  @apply grid grid-cols-3 gap-3;
+}
+
+:root {
+  --cardShadow: color-mix(in srgb, black 30%, transparent) 0 1px 2px 0,
+    color-mix(in srgb, black 15%, transparent) 0 1px 3px 1px;
+
+  --cardBG: rgba(210, 210, 210, 0.2);
+  --markerStatusHoverColor: black;
+  --markerCheckerBGColor: rgba(175, 175, 175, 0.799);
+
+  // @media (prefers-color-scheme: dark) {
+  //   --cardBG: #292a2d;
+  //   --markerStatusHoverColor: white;
+  // }
+}
+
+.page {
+  @apply rounded-lg p-2 whitespace-break-spaces overflow-hidden text-ellipsis break-normal;
+  background-color: var(--cardBG);
+  box-shadow: var(--cardShadow);
+}
+
+.blocks {
+  @apply flex flex-col gap-2;
+}
+
+.block {
+  @apply p-2 rounded-lg;
+  background-color: var(--cardBG);
+  box-shadow: var(--cardShadow);
+}
+
+.blockBody {
+  @apply flex flex-row flex-wrap gap-2 items-start hover:no-underline;
+}
+
+.blockHeader {
+  @apply w-full justify-between flex flex-row gap-2;
 }
 
 .blockContent {
-  @apply flex flex-col  prose-sm dark:prose-invert whitespace-pre-wrap text-sm prose-img:w-full prose-p:my-0 prose-img:my-1;
+  @apply flex flex-col items-start whitespace-pre-wrap text-sm prose-img:w-full prose-p:my-0 prose-img:my-1;
   * {
-    @apply break-all text-sm;
+    @apply m-0 break-all text-sm;
+  }
+  p {
+    @apply m-0;
   }
 
   a {
@@ -21,34 +90,25 @@
   }
 }
 
-.pageContent {
-  @apply flex flex-col gap-2 prose-sm  dark:prose-invert whitespace-pre-wrap text-sm;
+.blockMarker {
+  @apply flex flex-row h-5 justify-center items-center;
 }
 
-.pageContentFooter {
-  @apply flex flex-row justify-end;
+.blockMarkerCheckbox {
+  @apply h-4 w-4 m-0 border-none transition ease-in-out mr-1 transform hover:scale-110 duration-150 rounded-sm;
+  appearance: none;
+  background-color: var(--markerCheckerBGColor);
 }
 
-.copilotCardHeader {
-  @apply flex flex-row justify-between items-center text-sm pb-2;
-
-  a {
-    @apply text-sm text-center object-center;
-  }
-}
-
-.divide {
-  @apply divide-y divide-x-0 divide-dashed;
+.blockMarkerCheckbox:checked {
+  appearance: auto;
+  background-color: var(--markerCheckerBGColor);
 }
 
-.block {
-  @apply py-2;
+.blockMarkerStatus {
+  @apply h-4 text-sm flex items-center self-center text-center border-none font-bold no-underline text-orange-500 hover:no-underline transform duration-300 px-0;
+  background: none;
 }
-
-.toBlock {
-  @apply no-underline hover:underline;
-}
-
-.logseqPageLink {
-  @apply no-underline hover:underline;
+.blockMarkerStatus:hover {
+  color: var(--markerStatusHoverColor);
 }

src/manifest.json.cjs

@@ -52,11 +52,11 @@ const build = (releaseFor) => {
     },
     commands: {
       clip: {
-        "suggested_key": {
-          "default": "Ctrl+Shift+U",
+        suggested_key: {
+          default: 'Ctrl+Shift+U',
         },
-        "description": "Make Clip note"
-      }
+        description: 'Make Clip note',
+      },
     },
     web_accessible_resources: [
       {