feat: clip note upgrade

Signed-off-by: EINDEX <snowstarlbk@gmail.com>

Author: EINDEX

package-lock.json

@@ -21,6 +21,8 @@
     "@tailwindcss/typography": "^0.5.9",
     "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
     "@types/marked": "^4.0.8",
+    "chakra-react-select": "^4.6.0",
+    "date-fns": "^2.29.3",
     "lodash": "^4.17.21",
     "marked": "^4.2.12",
     "markit": "^0.2.0",

package.json

@@ -0,0 +1,77 @@
+import { IconSettings } from '@tabler/icons-react';
+import styles from './logseq.module.scss';
+import React from 'react';
+import Browser from 'webextension-polyfill';
+import { LogseqBlock } from './LogseqBlock';
+import LogseqPageLink from './LogseqPage';
+
+const connect = Browser.runtime.connect();
+
+const LogseqCopilot = ({ graph, pages, blocks }) => {
+  const goOptionPage = () => {
+    connect.postMessage({ type: 'open-options' });
+  };
+
+  const count = () => {
+    return pages.length + blocks.length;
+  };
+
+  const blocksRender = () => {
+    return (
+      <>
+        {blocks.map((block) => {
+          return <LogseqBlock key={block.uuid} block={block} graph={graph} />;
+        })}
+      </>
+    );
+  };
+
+  const pagesRender = () => {
+    return (
+      <>
+        {pages.length > 0 ? (
+          <div className="pages">
+            <ul>
+              {pages.map((page) => {
+                if (!page) return <></>;
+                return (
+                  <p>
+                    <LogseqPageLink
+                      key={page.uuid}
+                      graph={graph}
+                      page={page}
+                    ></LogseqPageLink>
+                  </p>
+                );
+              })}
+            </ul>
+          </div>
+        ) : (
+          <></>
+        )}
+      </>
+    );
+  };
+
+  if (count() === 0) {
+    return (
+      <span>
+        Nothing here, Do some research with Logseq!{' '}
+        <a href={`logseq://graph/${graph}`}>Go</a>
+      </span>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.copilotCardHeader}>
+        <span>Graph: {graph}</span>
+        <IconSettings onClick={goOptionPage} size={16} />
+      </div>
+      {pagesRender()}
+      {blocksRender()}
+    </>
+  );
+};
+
+export default LogseqCopilot;

src/assets/img/logo-192.png

@@ -29,6 +29,18 @@
   @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;
+}
+
 .block {
   @apply py-2;
 }

src/components/LogseqCopilot.tsx

@@ -4,6 +4,9 @@ export type LogseqCopliotConfig = {
   logseqHost: string;
   logseqAuthToken: string;
   enableClipNoteFloatButton: boolean;
+  clipNoteLocation: string;
+  clipNoteCustomPage: string;
+  clipNoteTemplate: string;
 };
 
 export const getLogseqCopliotConfig =
@@ -12,11 +15,20 @@ export const getLogseqCopliotConfig =
       logseqHost = 'http://localhost:12315',
       logseqAuthToken = '',
       enableClipNoteFloatButton = true,
+      clipNoteLocation = "journal",
+      clipNoteCustomPage = "",
+      clipNoteTemplate = `[[date]] **{{time}}**
+url:: [{{title}}]({{url}})
+tags:: [[Clip]]
+{{content}}`
     } = await Browser.storage.local.get();
     return {
       logseqHost,
       logseqAuthToken,
       enableClipNoteFloatButton,
+      clipNoteLocation,
+      clipNoteCustomPage,
+      clipNoteTemplate,
     };
   };
 

src/components/logseq.module.scss

@@ -55,7 +55,7 @@ const build = (releaseFor) => {
       'Logseq Copilot, Connect with you logseq API server, bring your information when you browsing.',
     chrome_url_overrides: {},
     icons: {
-      192: 'assets/img/logo.png',
+      192: 'assets/img/logo-192.png',
     },
     content_scripts: [
       {