Add external browser support for OAuth2 authorization (#375)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

src-web/components/DynamicForm.tsx

@@ -83,7 +83,7 @@ export function DynamicForm<T extends Record<string, JsonPrimitive>>({
 function FormInputsStack<T extends Record<string, JsonPrimitive>>({
   className,
   ...props
-}: FormInputsProps<T> & { className?: string}) {
+}: FormInputsProps<T> & { className?: string }) {
   return (
     <VStack
       space={3}
@@ -198,6 +198,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
               />
             );
           case 'accordion':
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
             return (
               <div key={i + stateKey}>
                 <DetailsBanner
@@ -219,6 +222,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
               </div>
             );
           case 'h_stack':
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
             return (
               <div className="flex flex-wrap sm:flex-nowrap gap-3 items-end" key={i + stateKey}>
                 <FormInputs
@@ -233,6 +239,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
               </div>
             );
           case 'banner':
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
             return (
               <Banner
                 key={i + stateKey}
@@ -603,3 +612,8 @@ function KeyValueArg({
     </div>
   );
 }
+
+function hasVisibleInputs(inputs: FormInput[] | undefined): boolean {
+  if (!inputs) return false;
+  return inputs.some((i) => !i.hidden);
+}

src-web/components/HttpAuthenticationEditor.tsx

@@ -62,9 +62,7 @@ export function HttpAuthenticationEditor({ model }: Props) {
           <p>
             Apply auth to all requests in <strong>{resolvedModelName(model)}</strong>
           </p>
-          <Link href="https://yaak.app/docs/using-yaak/request-inheritance">
-            Documentation
-          </Link>
+          <Link href="https://yaak.app/docs/using-yaak/request-inheritance">Documentation</Link>
         </EmptyStateText>
       );
     }
@@ -140,7 +138,12 @@ export function HttpAuthenticationEditor({ model }: Props) {
                 }),
               )}
             >
-              <IconButton title="Authentication Actions" icon="settings" size="xs" />
+              <IconButton
+                title="Authentication Actions"
+                icon="settings"
+                size="xs"
+                className="!text-secondary"
+              />
             </Dropdown>
           )}
         </HStack>

src-web/components/core/Icon.tsx

@@ -44,6 +44,7 @@ import {
   CookieIcon,
   CopyCheck,
   CopyIcon,
+  CornerRightDownIcon,
   CornerRightUpIcon,
   CreditCardIcon,
   CrosshairIcon,
@@ -63,6 +64,7 @@ import {
   FlaskConicalIcon,
   FolderCodeIcon,
   FolderCogIcon,
+  FolderDownIcon,
   FolderGitIcon,
   FolderIcon,
   FolderInputIcon,
@@ -179,6 +181,7 @@ const icons = {
   cookie: CookieIcon,
   copy: CopyIcon,
   copy_check: CopyCheck,
+  corner_right_down: CornerRightDownIcon,
   corner_right_up: CornerRightUpIcon,
   credit_card: CreditCardIcon,
   crosshair: CrosshairIcon,
@@ -205,6 +208,7 @@ const icons = {
   folder_output: FolderOutputIcon,
   folder_symlink: FolderSymlinkIcon,
   folder_sync: FolderSyncIcon,
+  folder_down: FolderDownIcon,
   folder_up: FolderUpIcon,
   gift: GiftIcon,
   git_branch: GitBranchIcon,