|
1 | 1 | import type { EnvironmentId, UnifiedSettings } from "@t3tools/contracts"; |
| 2 | +import { XIcon } from "lucide-react"; |
2 | 3 |
|
3 | 4 | import { useUpdateEnvironmentSettings } from "../../hooks/useSettings"; |
4 | 5 | import { Button } from "../ui/button"; |
@@ -61,31 +62,57 @@ export function ProviderProxySettings({ |
61 | 62 | title={<label htmlFor="provider-proxy-api-key-input">API key</label>} |
62 | 63 | description="One of the proxy's API keys. Leave empty if the proxy has none." |
63 | 64 | control={ |
64 | | - <SecretInput |
65 | | - id="provider-proxy-api-key-input" |
66 | | - size="sm" |
67 | | - className={CONTROL_CLASS} |
68 | | - value="" |
69 | | - configured={proxy.apiKey !== ""} |
70 | | - disabled={readOnly} |
71 | | - onCommit={(apiKey) => update({ apiKey: apiKey.trim() })} |
72 | | - /> |
| 65 | + <div className="flex w-full min-w-0 items-center gap-2 @min-[32rem]/settings-row:w-56"> |
| 66 | + <SecretInput |
| 67 | + id="provider-proxy-api-key-input" |
| 68 | + size="sm" |
| 69 | + className="min-w-0 flex-1" |
| 70 | + value="" |
| 71 | + configured={proxy.apiKey !== ""} |
| 72 | + disabled={readOnly} |
| 73 | + onCommit={(apiKey) => update({ apiKey: apiKey.trim() })} |
| 74 | + /> |
| 75 | + {proxy.apiKey !== "" && !readOnly ? ( |
| 76 | + <Button |
| 77 | + type="button" |
| 78 | + size="icon-sm" |
| 79 | + variant="ghost-destructive" |
| 80 | + onClick={() => update({ apiKey: "" })} |
| 81 | + aria-label="Clear API key" |
| 82 | + > |
| 83 | + <XIcon className="size-3.5" /> |
| 84 | + </Button> |
| 85 | + ) : null} |
| 86 | + </div> |
73 | 87 | } |
74 | 88 | /> |
75 | 89 | <SettingsRow |
76 | 90 | id="provider-proxy-management-key" |
77 | 91 | title={<label htmlFor="provider-proxy-management-key-input">Management key</label>} |
78 | 92 | description="Optional. Shows the proxy's accounts under Usage → Limits." |
79 | 93 | control={ |
80 | | - <SecretInput |
81 | | - id="provider-proxy-management-key-input" |
82 | | - size="sm" |
83 | | - className={CONTROL_CLASS} |
84 | | - value="" |
85 | | - configured={proxy.managementKey !== ""} |
86 | | - disabled={readOnly} |
87 | | - onCommit={(managementKey) => update({ managementKey: managementKey.trim() })} |
88 | | - /> |
| 94 | + <div className="flex w-full min-w-0 items-center gap-2 @min-[32rem]/settings-row:w-56"> |
| 95 | + <SecretInput |
| 96 | + id="provider-proxy-management-key-input" |
| 97 | + size="sm" |
| 98 | + className="min-w-0 flex-1" |
| 99 | + value="" |
| 100 | + configured={proxy.managementKey !== ""} |
| 101 | + disabled={readOnly} |
| 102 | + onCommit={(managementKey) => update({ managementKey: managementKey.trim() })} |
| 103 | + /> |
| 104 | + {proxy.managementKey !== "" && !readOnly ? ( |
| 105 | + <Button |
| 106 | + type="button" |
| 107 | + size="icon-sm" |
| 108 | + variant="ghost-destructive" |
| 109 | + onClick={() => update({ managementKey: "" })} |
| 110 | + aria-label="Clear management key" |
| 111 | + > |
| 112 | + <XIcon className="size-3.5" /> |
| 113 | + </Button> |
| 114 | + ) : null} |
| 115 | + </div> |
89 | 116 | } |
90 | 117 | /> |
91 | 118 | </SettingsSection> |
|
0 commit comments