Refactor desktop app into separate client and proxy apps

apps/yaak-client/components/core/DismissibleBanner.tsx

@@ -0,0 +1,58 @@
+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;
+  actions?: { label: string; onClick: () => void; color?: Color }[];
+}) {
+  const { set: setDismissed, value: dismissed } = useKeyValue<boolean>({
+    namespace: 'global',
+    key: ['dismiss-banner', id],
+    fallback: false,
+  });
+
+  if (dismissed) return null;
+
+  return (
+    <Banner
+      className={classNames(className, 'relative grid grid-cols-[1fr_auto] gap-3')}
+      {...props}
+    >
+      {children}
+      <HStack space={1.5}>
+        {actions?.map((a) => (
+          <Button
+            key={a.label}
+            variant="border"
+            color={a.color ?? props.color}
+            size="xs"
+            onClick={a.onClick}
+            title={a.label}
+          >
+            {a.label}
+          </Button>
+        ))}
+        <Button
+          variant="border"
+          color={props.color}
+          size="xs"
+          onClick={() => setDismissed((d) => !d)}
+          title="Dismiss message"
+        >
+          Dismiss
+        </Button>
+      </HStack>
+    </Banner>
+  );
+}