From aec1da14a922e0276704760078fa22728b9b6a4a Mon Sep 17 00:00:00 2001
From: Rodrigo Arze <ral77ro@gmail.com>
Date: Mon, 24 Feb 2025 18:42:50 -0400
Subject: [PATCH 1/5] Fix iframe loading sizing

---
 kits/connect/src/embed-react.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/kits/connect/src/embed-react.tsx b/kits/connect/src/embed-react.tsx
index 0c3c0047..95655114 100644
--- a/kits/connect/src/embed-react.tsx
+++ b/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,6 +93,8 @@ 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;
@@ -100,8 +102,8 @@ export const OpenIntConnectEmbed = React.forwardRef(
         }
         .spinner {
           animation: rotate 2s linear infinite;
-          width: 50px;
-          height: 50px;
+          width: 30px;
+          height: 30px;
         }
         .path {
           stroke: #5652BF;

From d7abed5a169b725ddc7e4ffb7cfb70a9ae93da00 Mon Sep 17 00:00:00 2001
From: Rodrigo Arze <ral77ro@gmail.com>
Date: Mon, 24 Feb 2025 18:44:58 -0400
Subject: [PATCH 2/5] Hide search container in small devices and when we have
 less than 8 ints

---
 packages/engine-frontend/components/IntegrationSearch.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/engine-frontend/components/IntegrationSearch.tsx b/packages/engine-frontend/components/IntegrationSearch.tsx
index f5f92906..45d1cdd8 100644
--- a/packages/engine-frontend/components/IntegrationSearch.tsx
+++ b/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">

From afb5ed995abe682a8dd9f449e843bc925b4b2452 Mon Sep 17 00:00:00 2001
From: Rodrigo Arze <ral77ro@gmail.com>
Date: Mon, 24 Feb 2025 18:46:12 -0400
Subject: [PATCH 3/5] Simplify theme update handling effect

---
 packages/engine-frontend/components/ConnectionPortal.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/engine-frontend/components/ConnectionPortal.tsx b/packages/engine-frontend/components/ConnectionPortal.tsx
index a0e0fbea..8cae1911 100644
--- a/packages/engine-frontend/components/ConnectionPortal.tsx
+++ b/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

From 4530d9a1ba8d7139ab99b6696b03bdf44aff8768 Mon Sep 17 00:00:00 2001
From: Rodrigo Arze <ral77ro@gmail.com>
Date: Mon, 24 Feb 2025 19:11:08 -0400
Subject: [PATCH 4/5] Improve connect-dev example to switch themes with a
 toggle

---
 apps/connect-dev/.env.example |  2 +-
 apps/connect-dev/app/page.tsx | 50 ++++++++++++++++++++++++++++++++---
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/apps/connect-dev/.env.example b/apps/connect-dev/.env.example
index d30d9bd5..3abfb98f 100644
--- a/apps/connect-dev/.env.example
+++ b/apps/connect-dev/.env.example
@@ -1 +1 @@
-OPENINT_TOKEN="xxx"
\ No newline at end of file
+NEXT_PUBLIC_OPENINT_TOKEN="xxx"
\ No newline at end of file
diff --git a/apps/connect-dev/app/page.tsx b/apps/connect-dev/app/page.tsx
index cdde11b0..e1e9065e 100644
--- a/apps/connect-dev/app/page.tsx
+++ b/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}

From 3baf10edb3e15ac8093a3d65ea93b4d9ee06c3f6 Mon Sep 17 00:00:00 2001
From: Rodrigo Arze <ral77ro@gmail.com>
Date: Mon, 24 Feb 2025 20:11:02 -0400
Subject: [PATCH 5/5] Bump connect package version

---
 kits/connect/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kits/connect/package.json b/kits/connect/package.json
index 1da9c0b6..756043b0 100644
--- a/kits/connect/package.json
+++ b/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",