feat: start apikey component

apps/landing/src/app/docs/layout.tsx

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation';
 import { SubsectionNav } from '@/components/shared/SubsectionNav';
 import { DocsSidebar } from '@/components/docs/layout/DocsSidebar';
 import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout';
+import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
 
 /**
  * Root Documentation Layout
@@ -57,6 +58,7 @@ export default function DocsRootLayout({ children }: DocsRootLayoutProps) {
         currentPath={pathname}
         ctaText="Join Beta"
         ctaHref="/signup"
+        rightSlot={<ApiKeyWidget />}
       />
 
       {/* Three-column Documentation Layout */}

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

@@ -0,0 +1,17 @@
+/*
+
+TODO: create ApiKeyProvider and useApiKey hook to access provider values
+
+usage example: const { organizationSlug, projectSlug, apiKey, onRevoke } = useApiKey();
+
+see ApiKeyWidget component (src/components/shared/ApiKeyWidget/apikey-widget.tsx)
+
+the functionality should be strictly copied from  src/app/demo/tti/page.tsx (see apikey related functionality) and MinimizedApiKey
+
+Move apikey simple actions in src/lib/apikey
+
+Provider should centralize apikey information and organize actions call from lib and then provide apikey related functionality down to children
+
+
+This is phase 1 of a task of centralizing apikey functionality that now is not DRY in demo pages
+*/

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

@@ -9,14 +9,10 @@ interface ApiKeyWidgetProps {
   onRevoke: () => void;
 }
 
-export function ApiKeyWidget({
+export function ApiKeyWidget() {
-  organizationSlug,
-  projectSlug,
-  apiKey,
-  onRevoke,
-}: ApiKeyWidgetProps) {
   const [expanded, setExpanded] = useState(false);
   const [keyVisible, setKeyVisible] = useState(false);
+  const { organizationSlug, projectSlug, apiKey, onRevoke } = useApiKey();
 
   return (
     <div className="fixed top-4 right-4 z-40">

apps/landing/src/components/shared/SubsectionNav.tsx

@@ -7,7 +7,6 @@
  * Features:
  * - Dark nav bar with decorative wave line
  * - Active state indicator (purple color)
- * - Optional API Key input on the right
  * - Responsive (hamburger menu on mobile)
  * - Three-column layout matching docs structure
  * - Customizable left/right slots
@@ -19,13 +18,12 @@
  * <SubsectionNav
  *   items={[...]}
  *   currentPath="/docs/final"
- *   showApiKeyInput={true}
  *   leftSlot={<Logo />}
  *   rightSlot={<UserMenu />}
  * />
  */
 
-import { useState, useEffect, useRef, ReactNode } from 'react';
+import { useState, ReactNode } from 'react';
 import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout';
 
 interface NavItem {
@@ -39,210 +37,17 @@ interface SubsectionNavProps {
   ctaText?: string;
   ctaHref?: string;
   onCtaClick?: () => void;
-  showApiKeyInput?: boolean;
   /** Optional content for left column (w-64, hidden until lg) */
   leftSlot?: ReactNode;
-  /** Optional content for right column (w-56, hidden until xl). If not provided and showApiKeyInput is true, API key input is used. */
+  /** Optional content for right column (w-56, hidden until xl) */
   rightSlot?: ReactNode;
 }
 
-const API_KEY_STORAGE = 'banatie_docs_api_key';
+export const SubsectionNav = ({ items, currentPath, leftSlot, rightSlot }: SubsectionNavProps) => {
-
-export const SubsectionNav = ({
-  items,
-  currentPath,
-  showApiKeyInput = false,
-  leftSlot,
-  rightSlot,
-}: SubsectionNavProps) => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [apiKey, setApiKey] = useState('');
-  const [isApiKeyExpanded, setIsApiKeyExpanded] = useState(false);
-  const [keyVisible, setKeyVisible] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const isActive = (href: string) => currentPath.startsWith(href);
 
-  // Load API key from localStorage
-  useEffect(() => {
-    if (showApiKeyInput) {
-      const stored = localStorage.getItem(API_KEY_STORAGE);
-      if (stored) setApiKey(stored);
-    }
-  }, [showApiKeyInput]);
-
-  // Handle API key changes
-  const handleApiKeyChange = (value: string) => {
-    setApiKey(value);
-    if (value) {
-      localStorage.setItem(API_KEY_STORAGE, value);
-    } else {
-      localStorage.removeItem(API_KEY_STORAGE);
-    }
-
-    // Dispatch event to notify widgets
-    window.dispatchEvent(new CustomEvent('apiKeyChanged', { detail: value }));
-  };
-
-  // Handle clear API key
-  const handleClear = () => {
-    setApiKey('');
-    localStorage.removeItem(API_KEY_STORAGE);
-    window.dispatchEvent(new CustomEvent('apiKeyChanged', { detail: '' }));
-  };
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsApiKeyExpanded(false);
-      }
-    };
-
-    if (isApiKeyExpanded) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isApiKeyExpanded]);
-
-  // Listen for custom event to expand API key from widgets
-  useEffect(() => {
-    const handleExpandApiKey = () => {
-      setIsApiKeyExpanded(true);
-      // Scroll to top to show nav
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    };
-
-    window.addEventListener('expandApiKeyInput', handleExpandApiKey);
-
-    return () => {
-      window.removeEventListener('expandApiKeyInput', handleExpandApiKey);
-    };
-  }, []);
-
-  // Desktop API Key Input Component
-  const apiKeyComponent = showApiKeyInput && (
-            <div className="hidden md:block relative" ref={dropdownRef}>
-              <button
-                onClick={() => setIsApiKeyExpanded(!isApiKeyExpanded)}
-                className="flex items-center gap-2 px-3 py-1.5 bg-slate-800/50 hover:bg-slate-800 border border-purple-500/30 hover:border-purple-500/50 rounded-lg transition-all"
-                aria-label="Toggle API key input"
-              >
-                <div
-                  className={`w-2 h-2 rounded-full transition-colors ${
-                    apiKey ? 'bg-green-400' : 'bg-amber-400'
-                  }`}
-                ></div>
-                <span className="text-xs text-gray-300 font-medium">
-                  🔑 {apiKey ? 'API Key Set' : 'API Key'}
-                </span>
-                <svg
-                  className={`w-3 h-3 text-gray-400 transition-transform ${
-                    isApiKeyExpanded ? 'rotate-180' : ''
-                  }`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-
-              {/* Dropdown Card */}
-              {isApiKeyExpanded && (
-                <div className="absolute top-full right-0 mt-2 w-80 p-4 bg-slate-900/95 backdrop-blur-sm border border-purple-500/30 rounded-xl shadow-2xl z-50 animate-fade-in">
-                  <div className="flex items-start justify-between mb-3">
-                    <div>
-                      <h3 className="text-sm font-semibold text-white mb-1">API Key</h3>
-                      <p className="text-xs text-gray-400">
-                        Enter once, use across all examples
-                      </p>
-                    </div>
-                    <button
-                      onClick={() => setIsApiKeyExpanded(false)}
-                      className="w-8 h-8 rounded-lg bg-slate-800 hover:bg-slate-700 text-gray-400 hover:text-white flex items-center justify-center transition-colors"
-                      aria-label="Close API key input"
-                    >
-                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-
-                  <div className="mb-3">
-                    <label className="text-xs text-gray-500 mb-1 block">Your API Key</label>
-                    <div className="flex gap-2 mb-2">
-                      <input
-                        type={keyVisible ? 'text' : 'password'}
-                        value={apiKey}
-                        onChange={(e) => handleApiKeyChange(e.target.value)}
-                        placeholder="Enter your API key"
-                        className="flex-1 px-3 py-2 bg-slate-800 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 rounded-lg text-sm text-gray-300 font-mono placeholder-gray-500 focus:outline-none transition-colors"
-                      />
-                      <button
-                        onClick={() => setKeyVisible(!keyVisible)}
-                        className="px-3 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-gray-400 hover:text-white transition-colors"
-                        aria-label={keyVisible ? 'Hide API key' : 'Show API key'}
-                      >
-                        {keyVisible ? (
-                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                            />
-                          </svg>
-                        ) : (
-                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                            />
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                            />
-                          </svg>
-                        )}
-                      </button>
-                    </div>
-
-                    {apiKey && (
-                      <button
-                        onClick={handleClear}
-                        className="w-full px-3 py-2 bg-red-900/20 hover:bg-red-900/30 border border-red-700/50 hover:border-red-600 rounded-lg text-red-400 text-xs font-medium transition-colors"
-                      >
-                        Clear API Key
-                      </button>
-                    )}
-                  </div>
-
-                  <div className="text-xs text-gray-500">
-                    <p>Stored locally in your browser</p>
-                  </div>
-                </div>
-              )}
-            </div>
-  );
-
   return (
     <nav className="sticky top-0 z-40 bg-slate-950/80 backdrop-blur-sm border-b border-white/10">
       {/* Three-Column Layout */}
@@ -277,12 +82,7 @@ export const SubsectionNav = ({
                   className="p-2 text-gray-400 hover:text-white transition-colors"
                   aria-label="Toggle menu"
                 >
-              <svg
+                  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                className="w-6 h-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
                     {mobileMenuOpen ? (
                       <path
                         strokeLinecap="round"
@@ -304,7 +104,7 @@ export const SubsectionNav = ({
             </div>
           </div>
         }
-        right={rightSlot || apiKeyComponent}
+        right={rightSlot}
       />
 
       {/* Decorative Wave Line */}
@@ -352,65 +152,6 @@ export const SubsectionNav = ({
                 </a>
               );
             })}
-
-            {/* API Key Input in Mobile Menu */}
-            {showApiKeyInput && (
-              <div className="pt-4 mt-4 border-t border-white/10">
-                <h4 className="text-xs font-semibold text-white mb-2">API Key</h4>
-                <p className="text-xs text-gray-400 mb-3">
-                  Enter once, use across all examples
-                </p>
-                <div className="flex gap-2 mb-2">
-                  <input
-                    type={keyVisible ? 'text' : 'password'}
-                    value={apiKey}
-                    onChange={(e) => handleApiKeyChange(e.target.value)}
-                    placeholder="Enter your API key"
-                    className="flex-1 px-3 py-2 bg-slate-800 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 rounded-lg text-sm text-gray-300 font-mono placeholder-gray-500 focus:outline-none transition-colors"
-                  />
-                  <button
-                    onClick={() => setKeyVisible(!keyVisible)}
-                    className="px-3 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-gray-400 hover:text-white transition-colors"
-                    aria-label={keyVisible ? 'Hide API key' : 'Show API key'}
-                  >
-                    {keyVisible ? (
-                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                        />
-                      </svg>
-                    ) : (
-                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                        />
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                        />
-                      </svg>
-                    )}
-                  </button>
-                </div>
-                {apiKey && (
-                  <button
-                    onClick={handleClear}
-                    className="w-full px-3 py-2 bg-red-900/20 hover:bg-red-900/30 border border-red-700/50 hover:border-red-600 rounded-lg text-red-400 text-xs font-medium transition-colors"
-                  >
-                    Clear API Key
-                  </button>
-                )}
-                <p className="text-xs text-gray-500 mt-2">Stored locally in your browser</p>
-              </div>
-            )}
           </div>
         </div>
       )}