feat(layout): allow to minimize chat (#35)

packages/bolt/app/components/header/OpenStackBlitz.client.tsx

@@ -1,10 +1,11 @@
-import path from 'path';
 import { useStore } from '@nanostores/react';
 import sdk from '@stackblitz/sdk';
+import path from 'path';
+import { memo, useCallback, useEffect, useState } from 'react';
 import type { FileMap } from '~/lib/stores/files';
 import { workbenchStore, type ArtifactState } from '~/lib/stores/workbench';
+import { classNames } from '~/utils/classNames';
 import { WORK_DIR } from '~/utils/constants';
-import { memo, useCallback, useEffect, useState } from 'react';
 
 // extract relative path and content from file, wrapped in array for flatMap use
 const extractContent = ([file, value]: [string, FileMap[string]]) => {
@@ -47,6 +48,8 @@ const useFirstArtifact = (): [boolean, ArtifactState | undefined] => {
 export const OpenStackBlitz = memo(() => {
   const [artifactLoaded, artifact] = useFirstArtifact();
 
+  const disabled = !artifactLoaded;
+
   const handleClick = useCallback(() => {
     if (!artifact) {
       return;
@@ -66,13 +69,34 @@ export const OpenStackBlitz = memo(() => {
     });
   }, [artifact]);
 
-  if (!artifactLoaded) {
-    return null;
-  }
-
   return (
-    <a onClick={handleClick} className="cursor-pointer">
-      <img alt="Open in StackBlitz" src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" />
-    </a>
+    <button
+      className={classNames(
+        'relative flex items-stretch p-[1px] overflow-hidden text-xs text-bolt-elements-cta-text rounded-lg bg-bolt-elements-borderColor dark:bg-gray-800',
+        {
+          'cursor-not-allowed opacity-50': disabled,
+          'group hover:bg-gradient-to-t from-accent-900 to-accent-500 hover:text-white': !disabled,
+        },
+      )}
+      onClick={handleClick}
+      disabled={disabled}
+    >
+      <div
+        className={classNames(
+          'flex items-center gap-1.5 px-3 bg-bolt-elements-cta-background dark:bg-alpha-gray-80 group-hover:bg-transparent rounded-[calc(0.5rem-1px)] group-hover:bg-opacity-0',
+          {
+            'opacity-50': disabled,
+          },
+        )}
+      >
+        <svg width="11" height="16">
+          <path
+            fill="currentColor"
+            d="M4.67 9.85a.3.3 0 0 0-.27-.4H.67a.3.3 0 0 1-.21-.49l7.36-7.9c.22-.24.6 0 .5.3l-1.75 4.8a.3.3 0 0 0 .28.39h3.72c.26 0 .4.3.22.49l-7.37 7.9c-.21.24-.6 0-.49-.3l1.74-4.8Z"
+          />
+        </svg>
+        <span>Open in StackBlitz</span>
+      </div>
+    </button>
   );
 });