Google Sheets: add plugin menu

plugins/google-sheets/package.json

@@ -13,7 +13,7 @@
     "dependencies": {
         "@tanstack/react-query": "^5.81.5",
         "classnames": "^2.5.1",
-        "framer-plugin": "^3.3.2",
+        "framer-plugin": "^3.5.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^6.0.0",

plugins/google-sheets/src/App.tsx

@@ -8,14 +8,14 @@ import { MapSheetFieldsPage } from "./pages/MapSheetFields"
 import { Problem } from "./pages/Problem"
 import { SelectSheetPage } from "./pages/SelectSheet"
 import {
-    getPluginContext,
     type PluginContext,
     type PluginContextUpdate,
     syncSheet,
     useFetchUserInfo,
     useSheetQuery,
     useSyncSheetMutation,
 } from "./sheets"
+import { showFieldMappingUI, showLoginUI } from "./ui"
 import { assert, syncMethods } from "./utils"
 
 interface AppProps {
@@ -64,6 +64,8 @@ export function AuthenticatedApp({ pluginContext, setContext }: AuthenticatedApp
 
     const { data: sheet, isPending: isSheetPending } = useSheetQuery(spreadsheetId ?? "", sheetTitle ?? "")
 
+    const hasSheet = Boolean(spreadsheetId && sheetTitle)
+
     const syncMutation = useSyncSheetMutation({
         onSuccess: result => {
             logSyncResult(result)
@@ -86,19 +88,45 @@ export function AuthenticatedApp({ pluginContext, setContext }: AuthenticatedApp
     }, [isUserInfoError, isSelectSheetError, setContext])
 
     useLayoutEffect(() => {
-        const width = sheetTitle !== null ? 360 : 320
-        const height = sheetTitle !== null ? 425 : 345
-
-        void framer.showUI({
-            width,
-            height,
-            minWidth: width,
-            minHeight: height,
-            // Only allow resizing when mapping fields as the default size could not be enough.
-            // This will keep the given dimensions in the Select Sheet Screen.
-            resizable: sheetTitle !== null,
-        })
-    }, [sheetTitle])
+        const showUI = async () => {
+            try {
+                if (hasSheet) {
+                    await showFieldMappingUI()
+                } else {
+                    await showLoginUI()
+                }
+            } catch (error) {
+                console.error(error)
+                framer.notify("Failed to open plugin. Check the logs for more details.", { variant: "error" })
+            }
+        }
+
+        void showUI()
+    }, [sheetTitle, hasSheet, isSheetPending])
+
+    useEffect(() => {
+        framer
+            .setMenu([
+                {
+                    label: `View ${sheetTitle ?? ""} in Google Sheets`,
+                    visible: Boolean(spreadsheetId),
+                    onAction: () => {
+                        if (!spreadsheetId) return
+                        window.open(`https://docs.google.com/spreadsheets/d/${spreadsheetId}/edit`, "_blank")
+                    },
+                },
+                { type: "separator" },
+                {
+                    label: "Log Out",
+                    onAction: () => {
+                        void auth.logout()
+                    },
+                },
+            ])
+            .catch((e: unknown) => {
+                console.error(e)
+            })
+    }, [sheetTitle, spreadsheetId])
 
     if (!spreadsheetId || sheetTitle === null) {
         return (
@@ -185,7 +213,7 @@ export function App({ pluginContext }: AppProps) {
                 }),
             })
 
-            await framer.closePlugin()
+            void framer.closePlugin()
         }
 
         void task()
@@ -199,14 +227,7 @@ export function App({ pluginContext }: AppProps) {
                 <p className="text-content">
                     Your Google Account does not have access to the synced spreadsheet. Check your access and try again
                     or{" "}
-                    <a
-                        href="#"
-                        className="text-sheets-green"
-                        onClick={() => {
-                            auth.logout()
-                            void getPluginContext().then(setContext)
-                        }}
-                    >
+                    <a href="#" className="text-sheets-green" onClick={() => void auth.logout()}>
                         log out
                     </a>{" "}
                     and try a different account.

plugins/google-sheets/src/auth.ts

@@ -1,3 +1,6 @@
+import { framer } from "framer-plugin"
+import { showLoginUI } from "./ui"
+
 interface Tokens {
     access_token: string
     refresh_token?: string
@@ -33,8 +36,12 @@ class Auth {
             : "https://oauth.framer.wtf/google-sheets-plugin"
     }
 
-    logout() {
+    async logout() {
         this.tokens.clear()
+        await framer.setMenu([])
+        await showLoginUI()
+        framer.notify("Logged out of your Google account", { variant: "success" })
+        window.location.reload()
     }
 
     async refreshTokens() {

plugins/google-sheets/src/main.tsx

@@ -35,5 +35,5 @@ try {
     )
 } catch (e) {
     const message = e instanceof Error ? e.message : String(e)
-    await framer.closePlugin(message, { variant: "error" })
+    void framer.closePlugin(message, { variant: "error" })
 }

plugins/google-sheets/src/ui.ts

@@ -0,0 +1,21 @@
+import { framer } from "framer-plugin"
+
+export async function showFieldMappingUI() {
+    await framer.showUI({
+        width: 425,
+        height: 425,
+        minWidth: 360,
+        minHeight: 425,
+        resizable: true,
+    })
+}
+
+export async function showLoginUI() {
+    await framer.showUI({
+        width: 320,
+        height: 345,
+        minWidth: 320,
+        minHeight: 345,
+        resizable: false,
+    })
+}

yarn.lock

@@ -4811,7 +4811,7 @@ __metadata:
     "@types/react": "npm:^18.3.23"
     "@types/react-dom": "npm:^18.3.7"
     classnames: "npm:^2.5.1"
-    framer-plugin: "npm:^3.3.2"
+    framer-plugin: "npm:^3.5.2"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-error-boundary: "npm:^6.0.0"