only pop up if there are some required (#1035)

<!-- ELLIPSIS_HIDDEN -->


> [!IMPORTANT]
> Modify `ShowSettingsButton` in `SettingsDialog.tsx` to check
`requiredEnvVars` before showing the dialog and add `rel="noreferrer"`
to an anchor tag.
> 
>   - **Behavior**:
> - Modify `ShowSettingsButton` in `SettingsDialog.tsx` to check
`requiredEnvVars` before showing the settings dialog if no env vars are
set.
> - Add `rel="noreferrer"` to anchor tag in `SettingsDialog.tsx` for
security.
>   - **Misc**:
>     - Minor formatting change (extra newline) in `SettingsDialog.tsx`.
> 
> <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 b73012a. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

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

@@ -181,18 +181,23 @@ export const ShowSettingsButton: React.FC<{ iconClassName: string }> = ({ iconCl
   const setShowSettings = useSetAtom(showSettingsAtom)
   const requiredButUnset = useAtomValue(requiredButUnsetAtom)
   const requiredAndSetCount = useAtomValue(requiredAndSetCountAtom)
+  const requiredEnvVars = useAtomValue(runtimeRequiredEnvVarsAtom)
   const requiredButUnsetCount = requiredButUnset.length
-  if ((window as any).next?.version) {
-    // dont run in nextjs
-    return null
-  }
-
   useEffect(() => {
-    if (requiredAndSetCount === 0) {
+    if ((window as any).next?.version) {
+      // dont run in nextjs
+      return
+    }
+    if (requiredAndSetCount === 0 && requiredEnvVars.length > 0) {
       // no env vars have been set at all pop up the dialog
       setShowSettings(true)
     }
-  }, [requiredAndSetCount])
+  }, [requiredAndSetCount, requiredEnvVars, setShowSettings])
+
+  if ((window as any).next?.version) {
+    // dont run in nextjs
+    return null
+  }
 
   const button = (
     <Button
@@ -263,7 +268,12 @@ export const SettingsDialog: React.FC = () => {
               <>
                 <p className='text-xs italic text-vscode-descriptionForeground'>
                   You can get these from{' '}
-                  <a className='text-blue-400 underline' target='_blank' href='https://app.boundaryml.com'>
+                  <a
+                    className='text-blue-400 underline'
+                    target='_blank'
+                    href='https://app.boundaryml.com'
+                    rel='noreferrer'
+                  >
                     Boundary Studio
                   </a>
                 </p>