feat: add default visibility setting to extension

frontend/extension/src/components/CreateShortcutButton.tsx

@@ -1,8 +1,9 @@
 import { Button, IconButton, Input, Modal, ModalDialog } from "@mui/joy";
-import { useStorage } from "@plasmohq/storage/hook";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { useStorageContext } from "@/context";
 import useShortcutStore from "@/store/shortcut";
+import type { Visibility } from "@/types/proto/api/v1/common";
 import { Shortcut } from "@/types/proto/api/v1/shortcut_service";
 import Icon from "./Icon";
 
@@ -13,8 +14,7 @@ interface State {
 }
 
 const CreateShortcutButton = () => {
-  const [instanceUrl] = useStorage("domain");
-  const [accessToken] = useStorage("access_token");
+  const context = useStorageContext();
   const shortcutStore = useShortcutStore();
   const [state, setState] = useState<State>({
     name: "",
@@ -101,13 +101,14 @@ const CreateShortcutButton = () => {
     try {
       const tags = tag.split(" ").filter(Boolean);
       await shortcutStore.createShortcut(
-        instanceUrl,
-        accessToken,
+        context.instanceUrl,
+        context.accessToken,
         Shortcut.fromPartial({
           name: state.name,
           title: state.title,
           link: state.link,
           tags,
+          visibility: context.defaultVisibility as Visibility,
         })
       );
       toast.success("Shortcut created successfully");

frontend/extension/src/components/PullShortcutsButton.tsx

@@ -1,24 +1,23 @@
 import { IconButton } from "@mui/joy";
-import { useStorage } from "@plasmohq/storage/hook";
 import { useEffect } from "react";
 import { toast } from "react-hot-toast";
+import { useStorageContext } from "@/context";
 import useShortcutStore from "@/store/shortcut";
 import Icon from "./Icon";
 
 const PullShortcutsButton = () => {
-  const [instanceUrl] = useStorage("domain");
-  const [accessToken] = useStorage("access_token");
+  const context = useStorageContext();
   const shortcutStore = useShortcutStore();
 
   useEffect(() => {
-    if (instanceUrl && accessToken) {
+    if (context.instanceUrl && context.accessToken) {
       handlePullShortcuts(true);
     }
-  }, [instanceUrl, accessToken]);
+  }, [context]);
 
   const handlePullShortcuts = async (silence = false) => {
     try {
-      await shortcutStore.fetchShortcutList(instanceUrl, accessToken);
+      await shortcutStore.fetchShortcutList(context.instanceUrl, context.accessToken);
       if (!silence) {
         toast.success("Shortcuts pulled");
       }