chore: update favicon getter

frontend/extension/src/components/ShortcutView.tsx

@@ -1,8 +1,7 @@
 import type { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 import { useStorage } from "@plasmohq/storage/hook";
 import classNames from "classnames";
-import { useEffect, useState } from "react";
-import useFaviconStore from "../stores/favicon";
+import { getFaviconWithGoogleS2 } from "@/helpers/utils";
 import Icon from "./Icon";
 
 interface Props {
@@ -11,17 +10,8 @@ interface Props {
 
 const ShortcutView = (props: Props) => {
   const { shortcut } = props;
-  const faviconStore = useFaviconStore();
   const [domain] = useStorage<string>("domain", "");
-  const [favicon, setFavicon] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
-      if (url) {
-        setFavicon(url);
-      }
-    });
-  }, [shortcut.link]);
+  const favicon = getFaviconWithGoogleS2(shortcut.link);
 
   const handleShortcutLinkClick = () => {
     const shortcutLink = `${domain}/s/${shortcut.name}`;

frontend/extension/src/helpers/api.ts

@@ -1,14 +0,0 @@
-import { Storage } from "@plasmohq/storage";
-import axios from "axios";
-
-const storage = new Storage();
-
-export const getUrlFavicon = async (url: string) => {
-  const domain = await storage.getItem<string>("domain");
-  const accessToken = await storage.getItem<string>("access_token");
-  return axios.get<string>(`${domain}/api/v1/url/favicon?url=${url}`, {
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-    },
-  });
-};

frontend/extension/src/helpers/utils.ts

@@ -3,3 +3,12 @@ import { isNull, isUndefined } from "lodash-es";
 export const isNullorUndefined = (value: any) => {
   return isNull(value) || isUndefined(value);
 };
+
+export const getFaviconWithGoogleS2 = (url: string) => {
+  try {
+    const urlObject = new URL(url);
+    return `https://www.google.com/s2/favicons?sz=128&domain=${urlObject.hostname}`;
+  } catch (error) {
+    return undefined;
+  }
+};

frontend/extension/src/popup.tsx

@@ -86,7 +86,8 @@ const IndexPopup = () => {
             </>
           ) : (
             <div className="w-full flex flex-col justify-start items-center">
-              <p>No domain and access token found.</p>
+              <Icon.Cookie strokeWidth={1} className="w-20 h-auto mb-4 text-gray-400" />
+              <p>Please set your domain and access token first.</p>
               <div className="w-full flex flex-row justify-center items-center py-4">
                 <Button size="sm" color="primary" onClick={handleSettingButtonClick}>
                   <Icon.Settings className="w-5 h-auto mr-1" /> Setting

frontend/extension/src/stores/favicon.ts

@@ -1,41 +0,0 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import { getUrlFavicon } from "../helpers/api";
-
-interface FaviconState {
-  cache: {
-    [key: string]: string;
-  };
-  getOrFetchUrlFavicon: (url: string) => Promise<string>;
-}
-
-const useFaviconStore = create<FaviconState>()(
-  persist(
-    (set, get) => ({
-      cache: {},
-      getOrFetchUrlFavicon: async (url: string) => {
-        const cache = get().cache;
-        if (cache[url]) {
-          return cache[url];
-        }
-
-        try {
-          const { data: favicon } = await getUrlFavicon(url);
-          if (favicon) {
-            cache[url] = favicon;
-            set(cache);
-            return favicon;
-          }
-        } catch (error) {
-          // do nothing
-        }
-        return "";
-      },
-    }),
-    {
-      name: "favicon_cache",
-    }
-  )
-);
-
-export default useFaviconStore;