Fix size of embed loader, hide search on sm devices and improve theme…

… update (#278)

* Fix iframe loading sizing

* Hide search container in small devices and when we have less than 8 ints

* Simplify theme update handling effect

* Improve connect-dev example to switch themes with a toggle

* Bump connect package version

apps/connect-dev/.env.example

@@ -1 +1 @@
-OPENINT_TOKEN="xxx"
+NEXT_PUBLIC_OPENINT_TOKEN="xxx"

apps/connect-dev/app/page.tsx

@@ -1,17 +1,59 @@
 'use client'
 
+import {useState} from 'react'
 import {OpenIntConnectEmbed} from '../../../kits/connect/src/embed-react'
 
 export default function Home() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light')
+  const token = process.env['NEXT_PUBLIC_OPENINT_TOKEN']
+
   return (
-    <div className="p-4">
-      <h1 className="mb-4 text-2xl font-bold">Embed React connect portal</h1>
+    <div style={{padding: '1.5rem'}}>
+      <h1
+        style={{marginBottom: '1rem', fontSize: '1.5rem', fontWeight: 'bold'}}>
+        Embed React connect portal
+      </h1>
+
+      <div
+        style={{
+          margin: '1rem',
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '1rem',
+        }}>
+        <label
+          htmlFor="theme-toggle"
+          style={{marginRight: '1.5rem', fontSize: '0.875rem'}}>
+          Theme: {theme}
+        </label>
+        <button
+          id="theme-toggle"
+          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          style={{
+            borderRadius: '0.25rem',
+            backgroundColor: '#8066FF',
+            color: 'white',
+            border: '1px solid white',
+            padding: '0.25rem 0.75rem',
+            fontSize: '0.875rem',
+            width: 'fit-content',
+          }}
+          onMouseOver={(e) =>
+            (e.currentTarget.style.backgroundColor = '#6645FF')
+          }
+          onMouseOut={(e) =>
+            (e.currentTarget.style.backgroundColor = '#8066FF')
+          }>
+          Toggle Theme
+        </button>
+      </div>
+
       <OpenIntConnectEmbed
         baseUrl="http://localhost:4000"
         params={{
-          token: process.env['OPENINT_TOKEN'],
+          token,
           view: 'manage',
-          theme: 'dark',
+          theme,
         }}
         height={500}
         width={350}

kits/connect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openint/connect",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

kits/connect/src/embed-react.tsx

@@ -44,7 +44,7 @@ export const OpenIntConnectEmbed = React.forwardRef(
         ? iframeProps.width > DEFAULT_WIDTH
           ? iframeProps.width
           : DEFAULT_WIDTH
-        : iframeProps.width || '100%'
+        : iframeProps.width || DEFAULT_WIDTH
 
     // Add a more reliable way to know iframe has fully finished loading
     // by sending message from iframe to parent when ready
@@ -93,15 +93,17 @@ export const OpenIntConnectEmbed = React.forwardRef(
           height: 100%;
           background: white;
           transition: opacity 0.3s ease;
+          max-width: ${width}px;
+          max-height: ${height}px;
         }
         .spinner-container.loaded {
           opacity: 0;
           pointer-events: none;
         }
         .spinner {
           animation: rotate 2s linear infinite;
-          width: 50px;
-          height: 50px;
+          width: 30px;
+          height: 30px;
         }
         .path {
           stroke: #5652BF;

packages/engine-frontend/components/ConnectionPortal.tsx

@@ -53,7 +53,7 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
   const pathname = usePathname()
-  const {theme, setTheme} = useTheme()
+  const {setTheme} = useTheme()
   const connectionId = searchParams.get('connectionId')
   const themeParam = searchParams.get('theme')
 
@@ -64,11 +64,10 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
   })
 
   useEffect(() => {
-    // Only update if there's a valid theme parameter that differs from current theme
-    if (themeParam && isValidTheme(themeParam) && themeParam !== theme) {
+    if (themeParam && isValidTheme(themeParam)) {
       setTheme(themeParam)
     }
-  }, [themeParam, setTheme, theme])
+  }, [themeParam, setTheme])
 
   const deleteConnection = _trpcReact.deleteConnection.useMutation({
     onSuccess: () => {
@@ -158,7 +157,6 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
           <div
             className={cn(
               'flex size-full flex-col gap-4 overflow-hidden bg-background',
-              theme === 'dark' ? 'dark' : '',
               className,
             )}>
             <Tabs

packages/engine-frontend/components/IntegrationSearch.tsx

@@ -130,7 +130,10 @@ export function IntegrationSearch({
   return (
     <div className={cn('flex h-full flex-col', className)}>
       {/* Search integrations - Fixed header */}
-      <div className="sticky top-0 z-10 border-b bg-popover pt-2">
+      <div
+        className={`sticky top-0 z-10 border-b bg-popover pt-2 ${
+          (ints?.length ?? 0) < 8 ? 'hidden md:block' : ''
+        }`}>
         <div className="flex flex-row gap-2 px-6 pb-2">
           <div className="relative w-[450px]">
             <div className="pointer-events-none absolute inset-y-0 left-2 flex items-center">