Merge pull request #256

* Update environment model to get ready for request/folder environments

* Folder environments in UI

* Folder environments working

* Tweaks and fixes

* Tweak environment encryption UX

* Tweak environment encryption UX

* Address comments

* Update fn name

* Add tsc back to lint rules

* Update src-web/components/EnvironmentEditor.tsx

* Merge remote-tracking branch 'origin/folder-environments' into folder…

src-web/components/core/DismissibleBanner.tsx

@@ -1,15 +1,18 @@
+import type { Color } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { useKeyValue } from '../../hooks/useKeyValue';
 import type { BannerProps } from './Banner';
 import { Banner } from './Banner';
 import { Button } from './Button';
+import { HStack } from './Stacks';
 
 export function DismissibleBanner({
   children,
   className,
   id,
+  actions,
   ...props
-}: BannerProps & { id: string }) {
+}: BannerProps & { id: string; actions?: { label: string; onClick: () => void; color?: Color }[] }) {
   const { set: setDismissed, value: dismissed } = useKeyValue<boolean>({
     namespace: 'global',
     key: ['dismiss-banner', id],
@@ -19,17 +22,34 @@ export function DismissibleBanner({
   if (dismissed) return null;
 
   return (
-    <Banner className={classNames(className, 'relative grid grid-cols-[1fr_auto] gap-3')} {...props}>
+    <Banner
+      className={classNames(className, 'relative grid grid-cols-[1fr_auto] gap-3')}
+      {...props}
+    >
       {children}
-      <Button
-        variant="border"
-        color={props.color}
-        size="xs"
-        onClick={() => setDismissed((d) => !d)}
-        title="Dismiss message"
-      >
-        Dismiss
-      </Button>
+      <HStack space={1.5}>
+        {actions?.map((a, i) => (
+          <Button
+            key={a.label + i}
+            variant="border"
+            color={a.color ?? props.color}
+            size="xs"
+            onClick={a.onClick}
+            title="Dismiss message"
+          >
+            {a.label}
+          </Button>
+        ))}
+        <Button
+          variant="border"
+          color={props.color}
+          size="xs"
+          onClick={() => setDismissed((d) => !d)}
+          title="Dismiss message"
+        >
+          Dismiss
+        </Button>
+      </HStack>
     </Banner>
   );
 }