enhance: add tiny setting button on graph row

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

Author: EINDEX

package-lock.json

@@ -17,6 +17,7 @@
     "@chakra-ui/react": "^2.4.9",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@tabler/icons-react": "^2.12.0",
     "@tailwindcss/typography": "^0.5.9",
     "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
     "@types/marked": "^4.0.8",

package.json

@@ -5,6 +5,7 @@ import { LogseqBlock } from '@components/LogseqBlock';
 import LogseqPageLink from '@components/LogseqPage';
 import Browser from 'webextension-polyfill';
 import styles from './index.module.scss';
+import { IconSettings } from '@tabler/icons-react';
 
 type LogseqCopliotProps = {
   connect: Browser.Runtime.Port;
@@ -59,7 +60,6 @@ export const LogseqCopliot = ({ connect }: LogseqCopliotProps) => {
     );
   };
 
-
   const pages = () => {
     return (
       <>
@@ -114,7 +114,10 @@ export const LogseqCopliot = ({ connect }: LogseqCopliotProps) => {
           <>{statusShower()}</>
         ) : (
           <>
-            <span>Graph: {logseqSearchResult?.graph}</span>
+            <div className={styles.copilotCardHeader}>
+              <span>Graph: {logseqSearchResult?.graph}</span>
+              <IconSettings onClick={goOptionPage} size={16} />
+            </div>
             {noContent()}
             {pages()}
             {blocks()}
@@ -125,9 +128,7 @@ export const LogseqCopliot = ({ connect }: LogseqCopliotProps) => {
 
       <div className={styles.copilotFooter}>
         <span>
-          <a href="https://github.com/EINDEX/logseq-copilot/issues">
-            Feedback
-          </a>
+          <a href="https://github.com/EINDEX/logseq-copilot/issues">Feedback</a>
         </span>
         <span>
           power by{' '}

src/pages/content/LogseqCopliot.tsx

@@ -33,6 +33,14 @@
   @apply divide-y divide-x-0 divide-dashed;
 }
 
+.copilotCardHeader {
+  @apply flex flex-row justify-between items-center text-sm pb-2;
+
+  a {
+    @apply text-sm text-center object-center;
+  }
+}
+
 .copilotFooter {
   @apply flex flex-row text-xs justify-between text-gray-500 px-2;