fix: Update tetrate signup step (#6324)

2026-01-05 15:27:55 +11:00
parent 4aa6a176ea
commit 5027164e35
3 changed files with 125 additions and 54 deletions
@@ -69,7 +69,7 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
      {/* Recommended pill */}
      <div className="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 z-20">
        <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-600 text-white rounded-full">
-          Recommended
+          Recommended if you have API access already
        </span>
      </div>

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useRef } from 'react';
+import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useConfig } from './ConfigContext';
 import { SetupModal } from './SetupModal';
@@ -37,6 +37,19 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
  const [showSwitchModelModal, setShowSwitchModelModal] = useState(false);
  const [switchModelProvider, setSwitchModelProvider] = useState<string | null>(null);
  const onboardingTracked = useRef(false);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [showScrollIndicator, setShowScrollIndicator] = useState(true);
+
+  const checkScrollPosition = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const isNearBottom = scrollTop + clientHeight >= scrollHeight - 50;
+    const canScroll = scrollHeight > clientHeight;
+
+    setShowScrollIndicator(canScroll && !isNearBottom);
+  }, []);

  const setView = useMemo(() => createNavigationHandler(navigate), [navigate]);

@@ -209,6 +222,15 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
    }
  }, [isChecking, hasProvider, showFirstTimeSetup]);

+  useEffect(() => {
+    if (!isChecking && !hasProvider && showFirstTimeSetup) {
+      // Check scroll position after content renders
+      const timer = setTimeout(checkScrollPosition, 100);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [isChecking, hasProvider, showFirstTimeSetup, checkScrollPosition]);
+
  if (isChecking) {
    return (
      <div className="h-screen w-full bg-background-default flex items-center justify-center">
@@ -223,8 +245,12 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG

  if (!hasProvider && showFirstTimeSetup) {
    return (
-      <div className="h-screen w-full bg-background-default overflow-hidden">
-        <div className="h-full overflow-y-auto">
+      <div className="h-screen w-full bg-background-default overflow-hidden relative">
+        <div
+          ref={scrollContainerRef}
+          onScroll={checkScrollPosition}
+          className="h-full overflow-y-auto"
+        >
          <div className="min-h-full flex flex-col items-center justify-center p-4 py-8">
            <div className="max-w-2xl w-full mx-auto p-8">
              {/* Header section */}
@@ -248,18 +274,26 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                }}
              />

-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-                {/* Tetrate Card */}
+              {/* Tetrate Card - Full Width */}
+              <div className="relative w-full mb-4">
+                {/* Recommended pill */}
+                <div className="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 z-20">
+                  <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-600 text-white rounded-full">
+                    Recommended for new users
+                  </span>
+                </div>
+
                <div
                  onClick={handleTetrateSetup}
                  className="w-full p-4 sm:p-6 bg-transparent border border-background-hover rounded-xl hover:border-text-muted transition-all duration-200 cursor-pointer group"
                >
                  <div className="flex items-start justify-between mb-3">
-                    <div className="flex-1">
-                      <Tetrate className="w-5 h-5 mb-3 text-text-standard" />
-                      <h3 className="font-medium text-text-standard text-sm sm:text-base">
-                        Tetrate Agent Router
-                      </h3>
+                    <div className="flex items-center gap-2">
+                      <Tetrate className="w-5 h-5 text-text-standard" />
+                      <span className="text-sm sm:text-base">
+                        <span className="font-medium text-text-standard">Agent Router</span>
+                        <span className="text-text-muted text-xs"> by Tetrate</span>
+                      </span>
                    </div>
                    <div className="text-text-muted group-hover:text-text-standard transition-colors">
                      <svg
@@ -278,45 +312,45 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                    </div>
                  </div>
                  <p className="text-text-muted text-sm sm:text-base">
-                    Secure access to multiple AI models with automatic setup. Free tier available.
+                    Access multiple AI models with automatic setup. Sign up to receive $10 credit.
                  </p>
                </div>
+              </div>

-                {/* OpenRouter Card */}
-                <div
-                  onClick={handleOpenRouterSetup}
-                  className="relative w-full p-4 sm:p-6 bg-transparent border border-background-hover rounded-xl hover:border-text-muted transition-all duration-200 cursor-pointer group overflow-hidden"
-                >
-                  {/* Subtle shimmer effect */}
-                  <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/8 to-transparent"></div>
+              {/* OpenRouter Card - Full Width */}
+              <div
+                onClick={handleOpenRouterSetup}
+                className="relative w-full p-4 sm:p-6 bg-transparent border border-background-hover rounded-xl hover:border-text-muted transition-all duration-200 cursor-pointer group overflow-hidden mb-6"
+              >
+                {/* Subtle shimmer effect */}
+                <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/8 to-transparent"></div>

-                  <div className="relative flex items-start justify-between mb-3">
-                    <div className="flex-1">
-                      <OpenRouter className="w-5 h-5 mb-3 text-text-standard" />
-                      <h3 className="font-medium text-text-standard text-sm sm:text-base">
-                        OpenRouter
-                      </h3>
-                    </div>
-                    <div className="text-text-muted group-hover:text-text-standard transition-colors">
-                      <svg
-                        className="w-4 h-4 sm:w-5 sm:h-5"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M9 5l7 7-7 7"
-                        />
-                      </svg>
-                    </div>
+                <div className="relative flex items-start justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <OpenRouter className="w-5 h-5 text-text-standard" />
+                    <span className="font-medium text-text-standard text-sm sm:text-base">
+                      OpenRouter
+                    </span>
+                  </div>
+                  <div className="text-text-muted group-hover:text-text-standard transition-colors">
+                    <svg
+                      className="w-4 h-4 sm:w-5 sm:h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
                  </div>
-                  <p className="text-text-muted text-sm sm:text-base">
-                    Access 200+ models with one API. Pay-per-use pricing.
-                  </p>
                </div>
+                <p className="text-text-muted text-sm sm:text-base">
+                  Access 200+ models with one API. Pay-per-use pricing.
+                </p>
              </div>

              {/* Other providers section */}
@@ -341,6 +375,23 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
          </div>
        </div>

+        {/* Scroll indicator - fixed at bottom, hides when scrolled to bottom */}
+        {showScrollIndicator && (
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 pointer-events-none transition-opacity duration-300 opacity-60 animate-bounce">
+            <div className="flex flex-col items-center gap-1 text-text-muted">
+              <span className="text-xs">More options below</span>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </div>
+          </div>
+        )}
+
        {/* Setup Modals */}
        {openRouterSetupState?.show && (
          <SetupModal