From fa1bb2eea3ce8b7fd8cbc4e7fdd6fd383207f39c Mon Sep 17 00:00:00 2001
From: Madison <madison.w.kennedy@gmail.com>
Date: Tue, 20 Jan 2026 13:05:09 -0600
Subject: [PATCH] [Docs] API Auth panel UI overhaul (#1080)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->


Updates the API Docs auth panel for a new look.

<img width="404" height="346" alt="image"
src="https://github.com/user-attachments/assets/5791a6ea-ac28-4e35-9d8c-c88a64f86386"
/>

<img width="394" height="622" alt="image"
src="https://github.com/user-attachments/assets/ca7ba243-52f0-49e4-ad21-a4acd652bfe1"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
  * Added project dropdown selector with automatic authentication setup
  * Introduced manual mode for direct header configuration
  * Added authentication status indicators

* **Bug Fixes**
  * Unified error handling across desktop and mobile views

* **Style**
* Improved mobile interface with better spacing and safe-area
accommodations
  * Refined panel layout and transition animations

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 docs/src/components/api/auth-panel.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/docs/src/components/api/auth-panel.tsx b/docs/src/components/api/auth-panel.tsx
index 1e84ae550..c8dfe9827 100644
--- a/docs/src/components/api/auth-panel.tsx
+++ b/docs/src/components/api/auth-panel.tsx
@@ -149,6 +149,15 @@ export function AuthPanel() {
 
   // Handle project selection
   const handleProjectSelect = (projectId: string) => {
+    // Handle deselection (empty string)
+    if (projectId === '') {
+      setSelectedProjectId('');
+      // Clear all headers when deselecting
+      updateSharedHeaders(defaultHeaders);
+      return;
+    }
+
+    // Validate project exists
     if (!projects.some((projectItem) => projectItem.id === projectId)) {
       return;
     }