feat: add logo to extension

extension/package.json

@@ -1,9 +1,8 @@
 {
-  "name": "slash-extexnsion",
+  "name": "slash-extension",
   "displayName": "Slash",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "An open source, self-hosted bookmarks and link sharing platform. Save and share your links very easily.",
-  "author": "steven",
   "scripts": {
     "dev": "plasmo dev",
     "build": "plasmo build",

extension/src/components/CreateShortcutsButton.tsx

@@ -1,10 +1,9 @@
-import { Button, Input, Modal, ModalDialog } from "@mui/joy";
+import { Button, IconButton, Input, Modal, ModalDialog } from "@mui/joy";
 import { useStorage } from "@plasmohq/storage/hook";
 import axios from "axios";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { CreateShortcutResponse, OpenGraphMetadata, Visibility } from "@/types/proto/api/v2/shortcut_service_pb";
-import "../style.css";
 import Icon from "./Icon";
 
 const generateTempName = (length = 6) => {
@@ -116,9 +115,9 @@ const CreateShortcutsButton = () => {
 
   return (
     <>
-      <Button size="sm" onClick={() => handleCreateShortcutButtonClick()}>
+      <IconButton color="primary" variant="solid" size="sm" onClick={() => handleCreateShortcutButtonClick()}>
         <Icon.Plus className="w-5 h-auto" />
-      </Button>
+      </IconButton>
 
       <Modal open={showModal}>
         <ModalDialog layout="fullscreen">

extension/src/components/Logo.tsx

@@ -0,0 +1,12 @@
+import classNames from "classnames";
+import LogoBase64 from "data-base64:../..//assets/icon.png";
+
+interface Props {
+  className?: string;
+}
+
+const Logo = ({ className }: Props) => {
+  return <img className={classNames(className)} src={LogoBase64} alt="" />;
+};
+
+export default Logo;

extension/src/components/PullShortcutsButton.tsx

@@ -1,17 +1,15 @@
-import { Button } from "@mui/joy";
+import { IconButton } from "@mui/joy";
 import { useStorage } from "@plasmohq/storage/hook";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { toast } from "react-hot-toast";
 import { ListShortcutsResponse } from "@/types/proto/api/v2/shortcut_service_pb";
-import "../style.css";
 import Icon from "./Icon";
 
 const PullShortcutsButton = () => {
   const [domain] = useStorage("domain");
   const [accessToken] = useStorage("access_token");
   const [, setShortcuts] = useStorage("shortcuts");
-  const [isPulling, setIsPulling] = useState(false);
 
   useEffect(() => {
     if (domain && accessToken) {
@@ -21,7 +19,6 @@ const PullShortcutsButton = () => {
 
   const handlePullShortcuts = async (silence = false) => {
     try {
-      setIsPulling(true);
       const {
         data: { shortcuts },
       } = await axios.get<ListShortcutsResponse>(`${domain}/api/v2/shortcuts`, {
@@ -36,13 +33,12 @@ const PullShortcutsButton = () => {
     } catch (error) {
       toast.error("Failed to pull shortcuts, error: " + error.message);
     }
-    setIsPulling(false);
   };
 
   return (
-    <Button loading={isPulling} color="neutral" variant="plain" size="sm" onClick={() => handlePullShortcuts()}>
+    <IconButton color="neutral" variant="plain" size="sm" onClick={() => handlePullShortcuts()}>
       <Icon.RefreshCcw className="w-4 h-auto" />
-    </Button>
+    </IconButton>
   );
 };
 

extension/src/options.tsx

@@ -4,6 +4,7 @@ import { useStorage } from "@plasmohq/storage/hook";
 import { useEffect, useState } from "react";
 import { Toaster, toast } from "react-hot-toast";
 import Icon from "./components/Icon";
+import Logo from "./components/Logo";
 import PullShortcutsButton from "./components/PullShortcutsButton";
 import ShortcutsContainer from "./components/ShortcutsContainer";
 import "./style.css";
@@ -59,11 +60,11 @@ const IndexOptions = () => {
         </div>
 
         <div className="w-full max-w-lg mx-auto flex flex-col justify-start items-start mt-12">
-          <h2 className="flex flex-row justify-start items-center mb-6 font-mono">
+          <h2 className="flex flex-row justify-start items-center mb-6 text-2xl">
-            <Icon.CircleSlash className="w-8 h-auto mr-2 text-gray-500" />
+            <Logo className="w-10 h-auto mr-2" />
-            <span className="text-lg">Slash</span>
+            <span>Slash</span>
             <span className="mx-2 text-gray-400">/</span>
-            <span className="text-lg">Setting</span>
+            <span>Setting</span>
           </h2>
 
           <div className="w-full flex flex-col justify-start items-start">
@@ -114,7 +115,7 @@ const IndexOptions = () => {
             <>
               <Divider className="!my-6" />
 
-              <h2 className="flex flex-row justify-start items-center mb-4 font-mono">
+              <h2 className="flex flex-row justify-start items-center mb-4">
                 <span className="text-lg">Shortcuts</span>
                 <span className="text-gray-500 mr-1">({shortcuts.length})</span>
                 <PullShortcutsButton />

extension/src/popup.tsx

@@ -1,11 +1,12 @@
-import { Button } from "@mui/joy";
+import { Button, Divider, IconButton } from "@mui/joy";
 import { useStorage } from "@plasmohq/storage/hook";
 import { Toaster } from "react-hot-toast";
+import CreateShortcutsButton from "@/components/CreateShortcutsButton";
+import Icon from "@/components/Icon";
+import Logo from "@/components/Logo";
+import PullShortcutsButton from "@/components/PullShortcutsButton";
+import ShortcutsContainer from "@/components/ShortcutsContainer";
 import { Shortcut } from "@/types/proto/api/v2/shortcut_service_pb";
-import CreateShortcutsButton from "./components/CreateShortcutsButton";
-import Icon from "./components/Icon";
-import PullShortcutsButton from "./components/PullShortcutsButton";
-import ShortcutsContainer from "./components/ShortcutsContainer";
 import "./style.css";
 
 const IndexPopup = () => {
@@ -20,6 +21,7 @@ const IndexPopup = () => {
 
   const handleRefreshButtonClick = () => {
     chrome.runtime.reload();
+    chrome.browserAction.setPopup({ popup: "" });
   };
 
   return (
@@ -27,7 +29,7 @@ const IndexPopup = () => {
       <div className="w-full min-w-[512px] p-6">
         <div className="w-full flex flex-row justify-between items-center">
           <div className="flex flex-row justify-start items-center">
-            <Icon.CircleSlash className="w-5 h-auto mr-1 text-gray-500" />
+            <Logo className="w-6 h-auto mr-2" />
             <span className="">Slash</span>
             {isInitialized && (
               <>
@@ -52,18 +54,15 @@ const IndexPopup = () => {
                 </div>
               )}
 
-              <div className="mt-4 w-full flex flex-row justify-start items-center">
+              <Divider className="!mt-4 !mb-3" />
-                <Button size="sm" variant="plain" color="neutral" onClick={handleSettingButtonClick}>
+
+              <div className="w-full flex flex-row justify-start items-center">
+                <IconButton size="sm" variant="plain" color="neutral" onClick={handleSettingButtonClick}>
                   <Icon.Settings className="w-5 h-auto text-gray-500" />
-                </Button>
+                </IconButton>
-                <a
+                <IconButton size="sm" variant="plain" color="neutral" component="a" href="https://github.com/boojack/slash" target="_blank">
-                  className="flex flex-row justify-start items-center text-sm rounded-md py-1 px-2 text-gray-500 cursor-pointer hover:text-blue-600 hover:underline"
+                  <Icon.Github className="w-5 h-auto text-gray-500" />
-                  href="https://github.com/boojack/slash"
+                </IconButton>
-                  target="_blank"
-                >
-                  <Icon.Github className="w-5 h-auto mr-1" />
-                  <span>GitHub</span>
-                </a>
               </div>
             </>
           ) : (