From 27901231dc9a6a74f36034c41273f3b27963e8f1 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 6 Jun 2025 20:34:23 -0700
Subject: [PATCH] Clarify proxy HTTP/HTTPS setting

---
 src-web/components/Settings/SettingsProxy.tsx | 13 +++++++++++--
 src-web/components/core/PlainInput.tsx        | 17 +++++++++--------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src-web/components/Settings/SettingsProxy.tsx b/src-web/components/Settings/SettingsProxy.tsx
index 2c33f5c5..c2094f40 100644
--- a/src-web/components/Settings/SettingsProxy.tsx
+++ b/src-web/components/Settings/SettingsProxy.tsx
@@ -2,6 +2,7 @@ import { patchModel, settingsAtom } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import React from 'react';
 import { Checkbox } from '../core/Checkbox';
+import { InlineCode } from '../core/InlineCode';
 import { PlainInput } from '../core/PlainInput';
 import { Select } from '../core/Select';
 import { Separator } from '../core/Separator';
@@ -62,7 +63,11 @@ export function SettingsProxy() {
           <HStack space={1.5}>
             <PlainInput
               size="sm"
-              label="HTTP"
+              label={
+                <>
+                  Proxy for <InlineCode>http://</InlineCode> traffic
+                </>
+              }
               placeholder="localhost:9090"
               defaultValue={settings.proxy?.http}
               onChange={async (http) => {
@@ -83,7 +88,11 @@ export function SettingsProxy() {
             />
             <PlainInput
               size="sm"
-              label="HTTPS"
+              label={
+                <>
+                  Proxy for <InlineCode>https://</InlineCode> traffic
+                </>
+              }
               placeholder="localhost:9090"
               defaultValue={settings.proxy?.https}
               onChange={async (https) => {
diff --git a/src-web/components/core/PlainInput.tsx b/src-web/components/core/PlainInput.tsx
index c4ad205c..38fae6f3 100644
--- a/src-web/components/core/PlainInput.tsx
+++ b/src-web/components/core/PlainInput.tsx
@@ -16,11 +16,15 @@ export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type
   };
 
 export function PlainInput({
+  autoFocus,
+  autoSelect,
   className,
   containerClassName,
   defaultValue,
   forceUpdateKey,
+  help,
   hideLabel,
+  hideObscureToggle,
   label,
   labelClassName,
   labelPosition = 'top',
@@ -29,19 +33,16 @@ export function PlainInput({
   onBlur,
   onChange,
   onFocus,
+  onFocusRaw,
+  onKeyDownCapture,
   onPaste,
+  placeholder,
   required,
   rightSlot,
-  hideObscureToggle,
   size = 'md',
-  type = 'text',
   tint,
+  type = 'text',
   validate,
-  autoSelect,
-  placeholder,
-  autoFocus,
-  onKeyDownCapture,
-  onFocusRaw,
 }: PlainInputProps) {
   const [obscured, setObscured] = useStateWithDeps(type === 'password', [type]);
   const [focused, setFocused] = useState(false);
@@ -101,7 +102,7 @@ export function PlainInput({
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <Label htmlFor={id} className={labelClassName} visuallyHidden={hideLabel} required={required}>
+      <Label htmlFor={id} className={labelClassName} visuallyHidden={hideLabel} required={required} help={help}>
         {label}
       </Label>
       <HStack