fix: focus

apps/landing/src/components/docs/blocks/InteractiveAPIWidget.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
 /**
  * Interactive API Widget - Production Version
  *
@@ -60,6 +61,8 @@ export const InteractiveAPIWidget = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const [paramValues, setParamValues] = useState<Record<string, string>>({});
 
+  const {apiKeyValidated, focus} = useApiKey()
+
   // Load API key from localStorage and listen for changes
   useEffect(() => {
     const loadApiKey = () => {
@@ -266,7 +269,7 @@ func main() {
 
   // Expand API key input in navigation
   const expandApiKey = () => {
-    window.dispatchEvent(new CustomEvent('expandApiKeyInput'));
+    focus();
   };
 
   const isSuccess = response && response.success === true;
@@ -336,7 +339,7 @@ func main() {
             onClick={expandApiKey}
             className="text-sm text-gray-400 hover:text-white underline-offset-4 hover:underline transition-colors"
           >
-            {apiKey ? 'API Key Set' : 'Enter API Key'}
+            {apiKeyValidated ? 'API Key Set' : 'Enter API Key'}
           </button>
           <button
             onClick={executeRequest}

apps/landing/src/components/shared/ApiKeyWidget/apikey-context.tsx

@@ -166,10 +166,11 @@ export function ApiKeyProvider({ children, onValidationSuccess }: ApiKeyProvider
     // Wait for expansion animation, then focus
     setTimeout(() => {
       inputRef.current?.focus();
-      containerRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      });
+      // TODO: don't need because it's always visible
+      // containerRef.current?.scrollIntoView({
+      //   behavior: 'smooth',
+      //   block: 'center',
+      // });
     }, 100);
   }, []);
 
@@ -197,6 +198,8 @@ export function ApiKeyProvider({ children, onValidationSuccess }: ApiKeyProvider
 
     // Focus method
     focus,
+    inputRef,
+    containerRef,
   };
 
   return (

apps/landing/src/components/shared/ApiKeyWidget/apikey-widget.tsx

@@ -26,6 +26,8 @@ export function ApiKeyWidget() {
     apiKeyError,
     validatingKey,
     ui,
+    inputRef,
+    containerRef,
     setApiKey,
     validateApiKey,
     revokeApiKey,
@@ -33,8 +35,8 @@ export function ApiKeyWidget() {
     setExpanded,
   } = useApiKey();
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+  // const containerRef = useRef<HTMLDivElement>(null);
+  // const inputRef = useRef<HTMLInputElement>(null);
   const [isMobileContext, setIsMobileContext] = useState(false);
 
   // Detect mobile context (inside mobile dropdown menu)

apps/landing/src/lib/apikey/types.ts

@@ -4,6 +4,8 @@
  * TypeScript interfaces and types for API key functionality
  */
 
+import React from 'react';
+
 /**
  * Information about an API key extracted from validation response
  */
@@ -61,6 +63,8 @@ export interface ApiKeyContextValue {
 
   // Focus method for external components
   focus: () => void;
+  inputRef: React.Ref<HTMLInputElement>;
+  containerRef: React.Ref<HTMLInputElement>;
 }
 
 /**