Popup settings dialog when no env vars set (#1033)

<!-- ELLIPSIS_HIDDEN -->



> [!IMPORTANT]
> Automatically show settings dialog if no environment variables are
set, with UI adjustments in `SettingsDialog.tsx`.
> 
>   - **Behavior**:
> - Automatically shows settings dialog if no environment variables are
set using `requiredAndSetCountAtom` in `SettingsDialog.tsx`.
>   - **Atoms**:
> - Adds `requiredAndSetCountAtom` to count set environment variables in
`SettingsDialog.tsx`.
>   - **UI Adjustments**:
> - Adjusts flexbox properties in `EnvvarInput` and `SettingsDialog`
components for better alignment.
> - Updates tooltip message logic in `ShowSettingsButton` for unset
environment variables.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for d6cbef8. It will automatically
update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

typescript/playground-common/src/shared/SettingsDialog.tsx

@@ -112,12 +112,19 @@ const requiredButUnsetAtom = atom((get) => {
   )
 })
 
+const requiredAndSetCountAtom = atom((get) => {
+  const envvars = get(envvarsAtom)
+  return get(runtimeRequiredEnvVarsAtom).filter((k) =>
+    envvars.some(({ key, value }) => k === key && value && value.length > 0),
+  ).length
+})
+
 type EnvVar = { key: string; value: string; type: 'baml' | 'tracing' | 'user' | 'config'; index: number | null }
 const EnvvarInput: React.FC<{ envvar: EnvVar }> = ({ envvar }) => {
   const [showEnvvarValues] = useAtom(showEnvvarValuesAtom)
   const setEnvKeyValue = useSetAtom(envKeyValuesAtom)
   return (
-    <div className='flex flex-row items-center gap-2 my-2'>
+    <div className='flex flex-row gap-2 items-center my-2'>
       <Input
         type='text'
         value={envvar.key}
@@ -173,20 +180,28 @@ const EnvvarInput: React.FC<{ envvar: EnvVar }> = ({ envvar }) => {
 export const ShowSettingsButton: React.FC<{ iconClassName: string }> = ({ iconClassName }) => {
   const setShowSettings = useSetAtom(showSettingsAtom)
   const requiredButUnset = useAtomValue(requiredButUnsetAtom)
+  const requiredAndSetCount = useAtomValue(requiredAndSetCountAtom)
   const requiredButUnsetCount = requiredButUnset.length
   if ((window as any).next?.version) {
     // dont run in nextjs
     return null
   }
 
+  useEffect(() => {
+    if (requiredAndSetCount === 0) {
+      // no env vars have been set at all pop up the dialog
+      setShowSettings(true)
+    }
+  }, [requiredAndSetCount])
+
   const button = (
     <Button
       className='relative px-2 py-1 bg-transparent h-fit text-vscode-editor-foreground hover:text-vscode-button-foreground hover:bg-vscode-button-hoverBackground'
       onClick={() => setShowSettings(true)}
     >
       <SettingsIcon className='w-4' /> Env Vars
       {requiredButUnsetCount > 0 && (
-        <div className='absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-yellow-500 border-2 border-white rounded-full -top-2 -end-3 dark:border-gray-900'>
+        <div className='inline-flex absolute -top-2 justify-center items-center w-6 h-6 text-xs font-bold text-white bg-yellow-500 rounded-full border-2 border-white -end-3 dark:border-gray-900'>
           {requiredButUnsetCount}
         </div>
       )}
@@ -223,12 +238,12 @@ export const SettingsDialog: React.FC = () => {
   return (
     <Dialog open={showSettings} onOpenChange={setShowSettings}>
       <DialogContent className=' min-h-[550px] max-h-[550px] overflow-y-auto bg-vscode-editorWidget-background flex flex-col border-vscode-textSeparator-foreground overflow-x-clip'>
-        <DialogHeader className='flex flex-row items-end gap-x-4'>
+        <DialogHeader className='flex flex-row gap-x-4 items-end'>
           <DialogTitle className='font-semibold'>Environment variables</DialogTitle>
           <Button
             variant='ghost'
             size='icon'
-            className='flex flex-row items-center p-1 py-0 text-xs w-fit h-fit gap-x-2 hover:bg-vscode-descriptionForeground'
+            className='flex flex-row gap-x-2 items-center p-1 py-0 text-xs w-fit h-fit hover:bg-vscode-descriptionForeground'
             onClick={() => setShowEnvvarValues((prev) => !prev)}
           >
             {showEnvvarValues ? <ShowIcon className='h-4' /> : <HideIcon className='h-4' />}
@@ -263,7 +278,8 @@ export const SettingsDialog: React.FC = () => {
           <div className='flex flex-col gap-1'>
             <span className='text-sm text-vscode-foreground'>From .baml files</span>
             <p className='text-xs italic text-vscode-descriptionForeground'>
-              Environment variables are loaded lazily, only set any you want to use.
+              Environment variables are loaded lazily, only set any you want to use. They are stored locally in your
+              machine.
             </p>
             {envvars
               .filter((t) => t.type === 'baml')
@@ -281,7 +297,7 @@ export const SettingsDialog: React.FC = () => {
             <Button
               variant='ghost'
               size='icon'
-              className='flex flex-row items-center p-1 text-xs w-fit h-fit gap-x-2 hover:bg-vscode-descriptionForeground'
+              className='flex flex-row gap-x-2 items-center p-1 text-xs w-fit h-fit hover:bg-vscode-descriptionForeground'
               onClick={() => setEnvKeyValue({ itemIndex: null, key: 'NEW_ENV_VAR' })}
             >
               <PlusIcon size={14} /> <div>Add item</div>