OUT-2705: improve initial page

src/components/layouts/CheckConnection.tsx

@@ -1,15 +1,18 @@
 'use client'
 
 import { useAuthContext } from '@/features/auth/hooks/useAuth'
-import { postMessageParentDashboard } from '@/lib/copilot/hooks/app-bridge/postParentMessage'
+import { Overlay } from '@/features/sync/components/Overlay'
 
 export const CheckConnection = ({ children }: { children: React.ReactNode }) => {
   const { connectionStatus } = useAuthContext()
   if (!connectionStatus) {
-    postMessageParentDashboard({ type: 'header.actionsMenu', items: [] })
-    postMessageParentDashboard({ type: 'header.primaryCta' })
-    return
-  } //remove app bridge functionality when app is disconnected.
+    return (
+      <div className="relative opacity-50">
+        <Overlay />
+        {children}
+      </div>
+    )
+  }
 
   return <>{children}</>
 }

src/features/app-bridge/components/AppBridge.tsx

@@ -1,12 +1,14 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { useAuthContext } from '@/features/auth/hooks/useAuth'
 import { useSubHeader } from '@/features/sync/hooks/useSubHeader'
 import { useActionsMenu, usePrimaryCta } from '@/lib/copilot/hooks/app-bridge'
 import { type AppBridgeProps, Icons } from '@/lib/copilot/hooks/app-bridge/types'
 
 export const AppBridge = ({ portalUrl, handleDropboxDisconnection }: AppBridgeProps) => {
   const [_awake, setAwake] = useState(false)
+  const { connectionStatus } = useAuthContext()
 
   useEffect(() => {
     setTimeout(() => {
@@ -16,25 +18,26 @@ export const AppBridge = ({ portalUrl, handleDropboxDisconnection }: AppBridgePr
 
   const { handleAddRule } = useSubHeader()
 
-  usePrimaryCta(
-    {
-      label: 'Add',
-      icon: Icons.PLUS,
-      onClick: handleAddRule,
-    },
-    { portalUrl },
-  )
-
-  useActionsMenu(
-    [
-      {
-        label: 'Disconnect account',
-        icon: Icons.DISCONNECT,
-        onClick: handleDropboxDisconnection,
-      },
-    ],
-    { portalUrl },
-  )
+  const primaryCta = connectionStatus
+    ? {
+        label: 'Add',
+        icon: Icons.PLUS,
+        onClick: handleAddRule,
+      }
+    : null
+
+  const actionsMenu = connectionStatus
+    ? [
+        {
+          label: 'Disconnect account',
+          icon: Icons.DISCONNECT,
+          onClick: handleDropboxDisconnection,
+        },
+      ]
+    : []
+
+  usePrimaryCta(primaryCta, { portalUrl })
+  useActionsMenu(actionsMenu, { portalUrl })
 
   return null
 }

src/features/auth/components/Callout.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button } from 'copilot-design-system'
+import { Callout as CalloutComponent } from 'copilot-design-system'
 import { useAuthContext } from '@/features/auth/hooks/useAuth'
 
 export const authInitUrl = `/auth/initiate?token=`
@@ -9,14 +9,21 @@ export const Callout = () => {
   const { user, connectionStatus } = useAuthContext()
 
   return (
-    <div className="px-10 py-5">
+    <div className="revert-svg px-10 py-5">
       {!connectionStatus ? (
-        <div className="flex justify-center">
-          <Button
-            label="Initiate Dropbox connection"
-            onClick={() => window.open(`${authInitUrl}${user.token}`)}
-          />
-        </div>
+        <CalloutComponent
+          title={'Authorize your account'}
+          description={'Log into Dropbox to get started.'}
+          variant={'info'}
+          actionProps={{
+            variant: 'primary',
+            label: 'Connect to Dropbox',
+            prefixIcon: 'Check',
+            onClick: (_e: unknown) => {
+              window.open(`${authInitUrl}${user.token}`, '_blank', 'noopener,noreferrer')
+            },
+          }}
+        />
       ) : null}
     </div>
   )

src/features/sync/components/Overlay.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+export const Overlay = () => {
+  return <div className="absolute top-0 left-0 z-10 h-full w-full"></div>
+}

src/features/sync/hooks/useFolder.ts

@@ -3,11 +3,15 @@ import { useAuthContext } from '@/features/auth/hooks/useAuth'
 import type { Folder } from '@/features/sync/types'
 
 export const useFolder = () => {
-  const { user } = useAuthContext()
+  const { user, connectionStatus } = useAuthContext()
   const [folderTree, setFolderTree] = useState<Folder[]>([])
   const [isFolderTreeLoading, setIsFolderTreeLoading] = useState(true)
 
   const getPathOptions = useCallback(async () => {
+    if (!connectionStatus) {
+      setIsFolderTreeLoading(false)
+      return
+    }
     setIsFolderTreeLoading(true)
     // api call to get all the folders
     const response = await fetch(`/api/dropbox/folder-tree?token=${user.token}`, {
@@ -19,7 +23,7 @@ export const useFolder = () => {
     const resp = await response.json()
     setFolderTree(resp.folders)
     setIsFolderTreeLoading(false)
-  }, [user.token])
+  }, [user.token, connectionStatus])
 
   useEffect(() => {
     // biome-ignore lint/nursery/noFloatingPromises: floating promises are fine here