chore: update frontend folder

frontend/extension/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "ignorePatterns": ["node_modules", "dist", "public"],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-no-target-blank": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

frontend/extension/.gitignore

@@ -0,0 +1,38 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

frontend/extension/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 140,
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+  plugins: [require.resolve("@trivago/prettier-plugin-sort-imports")],
+  importOrder: ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "^@/((?!css).+)", "^[./]", "^[../]", "^(.+).css"],
+};

frontend/extension/README.md

@@ -0,0 +1 @@
+# Slash Browser Extension

frontend/extension/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "slash-extension",
+  "displayName": "Slash",
+  "version": "0.1.4",
+  "description": "An open source, self-hosted bookmarks and link sharing platform. Save and share your links very easily.",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package",
+    "lint": "eslint --ext .js,.ts,.tsx, src",
+    "lint-fix": "eslint --ext .js,.ts,.tsx, src --fix"
+  },
+  "dependencies": {
+    "@bufbuild/protobuf": "^1.3.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/joy": "5.0.0-beta.0",
+    "@plasmohq/storage": "^1.7.2",
+    "axios": "^1.4.0",
+    "classnames": "^2.3.2",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.264.0",
+    "plasmo": "0.82.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "4.1.0",
+    "@types/chrome": "0.0.241",
+    "@types/lodash-es": "^4.17.8",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "postcss": "^8.4.27",
+    "prettier": "2.6.2",
+    "tailwindcss": "^3.3.3",
+    "typescript": "5.1.6"
+  },
+  "manifest": {
+    "omnibox": {
+      "keyword": "s"
+    },
+    "permissions": [
+      "tabs",
+      "storage"
+    ]
+  }
+}

frontend/extension/postcss.config.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-undef */
+/**
+ * @type {import('postcss').ProcessOptions}
+ */
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/extension/src/background.ts

@@ -0,0 +1,62 @@
+import type { Shortcut } from "../../types/proto/api/v2/shortcut_service_pb";
+import { Storage } from "@plasmohq/storage";
+
+const storage = new Storage();
+const urlRegex = /https?:\/\/s\/(.+)/;
+
+chrome.tabs.onUpdated.addListener(async (tabId, _, tab) => {
+  if (!tab.url) {
+    return;
+  }
+
+  const shortcutName = getShortcutNameFromUrl(tab.url);
+  if (shortcutName) {
+    const shortcuts = (await storage.getItem<Shortcut[]>("shortcuts")) || [];
+    const shortcut = shortcuts.find((shortcut) => shortcut.name === shortcutName);
+    if (!shortcut) {
+      return;
+    }
+    return chrome.tabs.update(tabId, { url: shortcut.link });
+  }
+});
+
+chrome.omnibox.onInputEntered.addListener(async (text) => {
+  const shortcuts = (await storage.getItem<Shortcut[]>("shortcuts")) || [];
+  const shortcut = shortcuts.find((shortcut) => shortcut.name === text);
+  if (!shortcut) {
+    return;
+  }
+  return chrome.tabs.update({ url: shortcut.link });
+});
+
+const getShortcutNameFromUrl = (urlString: string) => {
+  const matchResult = urlRegex.exec(urlString);
+  if (matchResult === null) {
+    return getShortcutNameFromSearchUrl(urlString);
+  }
+  return matchResult[1];
+};
+
+const getShortcutNameFromSearchUrl = (urlString: string) => {
+  const url = new URL(urlString);
+  if ((url.hostname === "www.google.com" || url.hostname === "www.bing.com") && url.pathname === "/search") {
+    const params = new URLSearchParams(url.search);
+    const shortcutName = params.get("q");
+    if (typeof shortcutName === "string" && shortcutName.startsWith("s/")) {
+      return shortcutName.slice(2);
+    }
+  } else if (url.hostname === "www.baidu.com" && url.pathname === "/s") {
+    const params = new URLSearchParams(url.search);
+    const shortcutName = params.get("wd");
+    if (typeof shortcutName === "string" && shortcutName.startsWith("s/")) {
+      return shortcutName.slice(2);
+    }
+  } else if (url.hostname === "duckduckgo.com" && url.pathname === "/") {
+    const params = new URLSearchParams(url.search);
+    const shortcutName = params.get("q");
+    if (typeof shortcutName === "string" && shortcutName.startsWith("s/")) {
+      return shortcutName.slice(2);
+    }
+  }
+  return "";
+};

frontend/extension/src/components/CreateShortcutsButton.tsx

@@ -0,0 +1,173 @@
+import { Button, IconButton, Input, Modal, ModalDialog } from "@mui/joy";
+import { useStorage } from "@plasmohq/storage/hook";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+import { CreateShortcutResponse, OpenGraphMetadata, Visibility } from "../../../types/proto/api/v2/shortcut_service_pb";
+import Icon from "./Icon";
+
+const generateTempName = (length = 6) => {
+  let result = "";
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  return result;
+};
+
+interface State {
+  name: string;
+  title: string;
+  link: string;
+}
+
+const CreateShortcutsButton = () => {
+  const [domain] = useStorage("domain");
+  const [accessToken] = useStorage("access_token");
+  const [shortcuts, setShortcuts] = useStorage("shortcuts");
+  const [state, setState] = useState<State>({
+    name: "",
+    title: "",
+    link: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    if (showModal) {
+      document.body.style.height = "384px";
+    } else {
+      document.body.style.height = "auto";
+    }
+  }, [showModal]);
+
+  const handleCreateShortcutButtonClick = async () => {
+    chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
+      if (tabs.length === 0) {
+        toast.error("No active tab found");
+        return;
+      }
+      const tab = tabs[0];
+      setState((state) => ({
+        ...state,
+        name: generateTempName().toLowerCase() + "-temp",
+        title: tab.title || "",
+        link: tab.url || "",
+      }));
+      setShowModal(true);
+    });
+  };
+
+  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setState((state) => ({
+      ...state,
+      name: e.target.value,
+    }));
+  };
+
+  const handleTitleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setState((state) => ({
+      ...state,
+      title: e.target.value,
+    }));
+  };
+
+  const handleLinkInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setState((state) => ({
+      ...state,
+      link: e.target.value,
+    }));
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (isLoading) {
+      return;
+    }
+    if (!state.name) {
+      toast.error("Name is required");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const {
+        data: { shortcut },
+      } = await axios.post<CreateShortcutResponse>(
+        `${domain}/api/v2/shortcuts`,
+        {
+          name: state.name,
+          title: state.title,
+          link: state.link,
+          visibility: Visibility.PRIVATE,
+          ogMetadata: OpenGraphMetadata.fromJsonString("{}"),
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+
+      setShortcuts([shortcut, ...shortcuts]);
+      toast.success("Shortcut created successfully");
+      setShowModal(false);
+    } catch (error: any) {
+      console.error(error);
+      toast.error(error.response.data.message);
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <IconButton color="primary" variant="solid" size="sm" onClick={() => handleCreateShortcutButtonClick()}>
+        <Icon.Plus className="w-5 h-auto" />
+      </IconButton>
+
+      <Modal container={() => document.body} open={showModal} onClose={() => setShowModal(false)}>
+        <ModalDialog className="w-3/4">
+          <div className="w-full flex flex-row justify-between items-center mb-2">
+            <span className="text-base font-medium">Create Shortcut</span>
+            <Button size="sm" variant="plain" onClick={() => setShowModal(false)}>
+              <Icon.X className="w-5 h-auto text-gray-600" />
+            </Button>
+          </div>
+          <div className="overflow-x-hidden w-full flex flex-col justify-start items-center">
+            <div className="w-full flex flex-row justify-start items-center mb-2">
+              <span className="block w-12 mr-2 shrink-0">Name</span>
+              <Input className="grow" type="text" placeholder="Unique shortcut name" value={state.name} onChange={handleNameInputChange} />
+            </div>
+            <div className="w-full flex flex-row justify-start items-center mb-2">
+              <span className="block w-12 mr-2 shrink-0">Title</span>
+              <Input className="grow" type="text" placeholder="Shortcut title" value={state.title} onChange={handleTitleInputChange} />
+            </div>
+            <div className="w-full flex flex-row justify-start items-center mb-2">
+              <span className="block w-12 mr-2 shrink-0">Link</span>
+              <Input
+                className="grow"
+                type="text"
+                placeholder="https://github.com/boojack/slash"
+                value={state.link}
+                onChange={handleLinkInputChange}
+              />
+            </div>
+
+            <div className="w-full flex flex-row justify-end items-center mt-2 space-x-2">
+              <Button color="neutral" variant="plain" onClick={() => setShowModal(false)}>
+                Cancel
+              </Button>
+              <Button color="primary" disabled={isLoading} loading={isLoading} onClick={handleSaveBtnClick}>
+                Save
+              </Button>
+            </div>
+          </div>
+        </ModalDialog>
+      </Modal>
+    </>
+  );
+};
+
+export default CreateShortcutsButton;

frontend/extension/src/components/Icon.ts

@@ -0,0 +1,3 @@
+import * as Icon from "lucide-react";
+
+export default Icon;

frontend/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;

frontend/extension/src/components/PullShortcutsButton.tsx

@@ -0,0 +1,45 @@
+import { IconButton } from "@mui/joy";
+import { useStorage } from "@plasmohq/storage/hook";
+import axios from "axios";
+import { useEffect } from "react";
+import { toast } from "react-hot-toast";
+import { ListShortcutsResponse } from "../../../types/proto/api/v2/shortcut_service_pb";
+import Icon from "./Icon";
+
+const PullShortcutsButton = () => {
+  const [domain] = useStorage("domain");
+  const [accessToken] = useStorage("access_token");
+  const [, setShortcuts] = useStorage("shortcuts");
+
+  useEffect(() => {
+    if (domain && accessToken) {
+      handlePullShortcuts(true);
+    }
+  }, [domain, accessToken]);
+
+  const handlePullShortcuts = async (silence = false) => {
+    try {
+      const {
+        data: { shortcuts },
+      } = await axios.get<ListShortcutsResponse>(`${domain}/api/v2/shortcuts`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      setShortcuts(shortcuts);
+      if (!silence) {
+        toast.success("Shortcuts pulled");
+      }
+    } catch (error) {
+      toast.error("Failed to pull shortcuts, error: " + error.message);
+    }
+  };
+
+  return (
+    <IconButton color="neutral" variant="plain" size="sm" onClick={() => handlePullShortcuts()}>
+      <Icon.RefreshCcw className="w-4 h-auto" />
+    </IconButton>
+  );
+};
+
+export default PullShortcutsButton;

frontend/extension/src/components/ShortcutView.tsx

@@ -0,0 +1,77 @@
+import type { Shortcut } from "../../../types/proto/api/v2/shortcut_service_pb";
+import { useStorage } from "@plasmohq/storage/hook";
+import classNames from "classnames";
+import { useEffect, useState } from "react";
+import useFaviconStore from "../stores/favicon";
+import Icon from "./Icon";
+
+interface Props {
+  shortcut: Shortcut;
+}
+
+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 handleShortcutLinkClick = () => {
+    const shortcutLink = `${domain}/s/${shortcut.name}`;
+    chrome.tabs.create({ url: shortcutLink });
+  };
+
+  return (
+    <>
+      <div
+        className={classNames(
+          "group w-full px-3 py-2 flex flex-col justify-start items-start border rounded-lg hover:bg-gray-100 hover:shadow"
+        )}
+      >
+        <div className="w-full flex flex-row justify-start items-center">
+          <span className={classNames("w-5 h-5 flex justify-center items-center overflow-clip shrink-0")}>
+            {favicon ? (
+              <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
+            ) : (
+              <Icon.CircleSlash className="w-full h-auto text-gray-400" />
+            )}
+          </span>
+          <div className="ml-1 w-[calc(100%-20px)] flex flex-col justify-start items-start">
+            <div className="w-full flex flex-row justify-start items-center">
+              <button
+                className={classNames(
+                  "max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline"
+                )}
+                onClick={handleShortcutLinkClick}
+              >
+                <div className="truncate">
+                  <span>{shortcut.title}</span>
+                  {shortcut.title ? (
+                    <span className="text-gray-400">(s/{shortcut.name})</span>
+                  ) : (
+                    <>
+                      <span className="text-gray-400">s/</span>
+                      <span className="truncate">{shortcut.name}</span>
+                    </>
+                  )}
+                </div>
+                <span className="hidden group-hover:block ml-1 cursor-pointer shrink-0">
+                  <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ShortcutView;

frontend/extension/src/components/ShortcutsContainer.tsx

@@ -0,0 +1,18 @@
+import type { Shortcut } from "../../../types/proto/api/v2/shortcut_service_pb";
+import { useStorage } from "@plasmohq/storage/hook";
+import classNames from "classnames";
+import ShortcutView from "./ShortcutView";
+
+const ShortcutsContainer = () => {
+  const [shortcuts] = useStorage<Shortcut[]>("shortcuts", (v) => (v ? v : []));
+
+  return (
+    <div className={classNames("w-full grid grid-cols-2 gap-2")}>
+      {shortcuts.map((shortcut) => {
+        return <ShortcutView key={shortcut.id} shortcut={shortcut} />;
+      })}
+    </div>
+  );
+};
+
+export default ShortcutsContainer;

frontend/extension/src/helpers/api.ts

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,5 @@
+import { isNull, isUndefined } from "lodash-es";
+
+export const isNullorUndefined = (value: any) => {
+  return isNull(value) || isUndefined(value);
+};

frontend/extension/src/options.tsx

@@ -0,0 +1,134 @@
+import type { Shortcut } from "../../types/proto/api/v2/shortcut_service_pb";
+import { Button, Divider, Input } from "@mui/joy";
+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";
+
+interface SettingState {
+  domain: string;
+  accessToken: string;
+}
+
+const IndexOptions = () => {
+  const [domain, setDomain] = useStorage<string>("domain", (v) => (v ? v : ""));
+  const [accessToken, setAccessToken] = useStorage<string>("access_token", (v) => (v ? v : ""));
+  const [settingState, setSettingState] = useState<SettingState>({
+    domain,
+    accessToken,
+  });
+  const [shortcuts] = useStorage<Shortcut[]>("shortcuts", []);
+  const isInitialized = domain && accessToken;
+
+  useEffect(() => {
+    setSettingState({
+      domain,
+      accessToken,
+    });
+  }, [domain, accessToken]);
+
+  const setPartialSettingState = (partialSettingState: Partial<SettingState>) => {
+    setSettingState((prevState) => ({
+      ...prevState,
+      ...partialSettingState,
+    }));
+  };
+
+  const handleSaveSetting = () => {
+    setDomain(settingState.domain);
+    setAccessToken(settingState.accessToken);
+    toast.success("Setting saved");
+  };
+
+  return (
+    <>
+      <div className="w-full">
+        <div className="w-full flex flex-row justify-center items-center">
+          <a
+            className="bg-yellow-100 mt-12 py-2 px-3 rounded-full border flex flex-row justify-start items-center cursor-pointer shadow hover:underline hover:text-blue-600"
+            href="https://github.com/boojack/slash#browser-extension"
+            target="_blank"
+          >
+            <Icon.HelpCircle className="w-4 h-auto" />
+            <span className="mx-1 text-sm">Need help? Check out the docs</span>
+            <Icon.ExternalLink className="w-4 h-auto" />
+          </a>
+        </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 text-2xl">
+            <Logo className="w-10 h-auto mr-2" />
+            <span>Slash</span>
+            <span className="mx-2 text-gray-400">/</span>
+            <span>Setting</span>
+          </h2>
+
+          <div className="w-full flex flex-col justify-start items-start">
+            <div className="w-full flex flex-col justify-start items-start mb-4">
+              <div className="mb-2 text-base w-full flex flex-row justify-between items-center">
+                <span>Domain</span>
+                {domain !== "" && (
+                  <a
+                    className="text-sm flex flex-row justify-start items-center hover:underline hover:text-blue-600"
+                    href={domain}
+                    target="_blank"
+                  >
+                    <span className="mr-1">Go to my Slash</span>
+                    <Icon.ExternalLink className="w-4 h-auto" />
+                  </a>
+                )}
+              </div>
+              <div className="relative w-full">
+                <Input
+                  className="w-full"
+                  type="text"
+                  placeholder="The domain of your Slash instance"
+                  value={settingState.domain}
+                  onChange={(e) => setPartialSettingState({ domain: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div className="w-full flex flex-col justify-start items-start">
+              <span className="mb-2 text-base">Access Token</span>
+              <div className="relative w-full">
+                <Input
+                  className="w-full"
+                  type="text"
+                  placeholder="The access token of your Slash instance"
+                  value={settingState.accessToken}
+                  onChange={(e) => setPartialSettingState({ accessToken: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div className="w-full mt-6">
+              <Button onClick={handleSaveSetting}>Save</Button>
+            </div>
+          </div>
+
+          {isInitialized && (
+            <>
+              <Divider className="!my-6" />
+
+              <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 />
+              </h2>
+              <ShortcutsContainer />
+            </>
+          )}
+        </div>
+      </div>
+
+      <Toaster position="top-center" />
+    </>
+  );
+};
+
+export default IndexOptions;

frontend/extension/src/popup.tsx

@@ -0,0 +1,109 @@
+import type { Shortcut } from "../../types/proto/api/v2/shortcut_service_pb";
+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 "./style.css";
+
+const IndexPopup = () => {
+  const [domain] = useStorage<string>("domain", "");
+  const [accessToken] = useStorage<string>("access_token", "");
+  const [shortcuts] = useStorage<Shortcut[]>("shortcuts", []);
+  const isInitialized = domain && accessToken;
+
+  const handleSettingButtonClick = () => {
+    chrome.runtime.openOptionsPage();
+  };
+
+  const handleRefreshButtonClick = () => {
+    chrome.runtime.reload();
+    chrome.browserAction.setPopup({ popup: "" });
+  };
+
+  return (
+    <>
+      <div className="w-full min-w-[512px] px-4 pt-4">
+        <div className="w-full flex flex-row justify-between items-center">
+          <div className="flex flex-row justify-start items-center">
+            <Logo className="w-6 h-auto mr-2" />
+            <span className="">Slash</span>
+            {isInitialized && (
+              <>
+                <span className="mx-1 text-gray-400">/</span>
+                <span>Shortcuts</span>
+                <span className="text-gray-500 mr-0.5">({shortcuts.length})</span>
+                <PullShortcutsButton />
+              </>
+            )}
+          </div>
+          <div>{isInitialized && <CreateShortcutsButton />}</div>
+        </div>
+
+        <div className="w-full mt-4">
+          {isInitialized ? (
+            <>
+              {shortcuts.length !== 0 ? (
+                <ShortcutsContainer />
+              ) : (
+                <div className="w-full flex flex-col justify-center items-center">
+                  <p>No shortcut found.</p>
+                </div>
+              )}
+
+              <Divider className="!mt-4 !mb-2 opacity-40" />
+
+              <div className="w-full flex flex-row justify-between items-center mb-2">
+                <div className="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" />
+                  </IconButton>
+                  <IconButton
+                    size="sm"
+                    variant="plain"
+                    color="neutral"
+                    component="a"
+                    href="https://github.com/boojack/slash"
+                    target="_blank"
+                  >
+                    <Icon.Github className="w-5 h-auto text-gray-500" />
+                  </IconButton>
+                </div>
+                <div className="flex flex-row justify-end items-center">
+                  <a
+                    className="text-sm flex flex-row justify-start items-center text-gray-500 hover:underline hover:text-blue-600"
+                    href={domain}
+                    target="_blank"
+                  >
+                    <span className="mr-1">Go to my Slash</span>
+                    <Icon.ExternalLink className="w-4 h-auto" />
+                  </a>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="w-full flex flex-col justify-start items-center">
+              <p>No domain and access token found.</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
+                </Button>
+                <span className="mx-2">Or</span>
+                <Button size="sm" variant="outlined" color="neutral" onClick={handleRefreshButtonClick}>
+                  <Icon.RefreshCcw className="w-5 h-auto mr-1" /> Refresh
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Toaster position="top-right" />
+    </>
+  );
+};
+
+export default IndexPopup;

frontend/extension/src/stores/favicon.ts

@@ -0,0 +1,41 @@
+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;

frontend/extension/src/style.css

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body,
+html,
+#root {
+  @apply text-base;
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
+    "WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

frontend/extension/tailwind.config.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-undef */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  mode: "jit",
+  darkMode: "class",
+  content: ["./**/*.tsx"],
+  plugins: [],
+};

frontend/extension/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    ".plasmo/index.d.ts",
+    "./**/*.ts",
+    "./**/*.tsx"
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "baseUrl": "."
+  }
+}