docs/src/components/api/auth-panel.tsx (4)

159-161: Dead conditional logic.

Both branches of these ternaries evaluate to the same values:

• topPosition: 'top-0' in both cases
• height: 'h-screen' and 'h-[calc(100vh)]' are effectively identical

This appears to be leftover from refactoring. Simplify to constants or remove the conditionals entirely.

♻️ Suggested simplification

-  // Calculate position based on homepage and scroll state (same as AIChatDrawer)
-  const topPosition = isHomePage && isScrolled ? 'top-0' : 'top-0';
-  const height = isHomePage && isScrolled ? 'h-screen' : 'h-[calc(100vh)]';
+  // Position constants
+  const topPosition = 'top-0';
+  const height = 'h-screen';

If different values were intended for homepage vs. non-homepage states, please update accordingly.

---

167-196: Consider memoizing handleProjectSelect.

This function is recreated on every render. While it's not a performance concern since it's only used in click handlers, wrapping it with useCallback would be more consistent with React best practices and prevent unnecessary re-renders if passed to memoized child components in the future.

---

380-396: Consider extracting repeated status condition.

The condition missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim()) is repeated three times here and again in the mobile footer. Extract to a memoized value for clarity and DRY.

♻️ Suggested refactor

+ const isReady = useMemo(() => 
+   missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim()),
+   [missingRequiredHeaders, headers]
+ );

  {/* Footer Status */}
  <div className="border-t border-fd-border p-4 rounded-b-xl">
    <div className="flex items-center gap-2 text-sm">
      <div className={`w-2 h-2 rounded-full ${
-       missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
-         ? 'bg-green-500'
-         : 'bg-fd-muted-foreground'
+       isReady ? 'bg-green-500' : 'bg-fd-muted-foreground'
      }`} />
      <span className={`${
-       missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
-         ? 'text-green-600 dark:text-green-400'
-         : 'text-fd-muted-foreground'
+       isReady ? 'text-green-600 dark:text-green-400' : 'text-fd-muted-foreground'
      }`}>
-       {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
-         ? 'Ready'
-         : 'Not configured'}
+       {isReady ? 'Ready' : 'Not configured'}
      </span>
    </div>
  </div>

---

203-598: Consider extracting shared sub-components to reduce duplication.

The desktop and mobile panels share nearly identical logic for:

• Tab buttons (lines 226-247, 421-442)
• Error banner (lines 249-264, 444-459)
• Project dropdown (lines 269-337, 463-532)
• Manual input form (lines 339-376, 534-571)
• Status footer (lines 379-397, 574-596)

Extracting these into reusable sub-components with size/style props would improve maintainability and ensure consistent behavior across both variants.