Introduce dedicated modal components for chat initialization and refactor the progress display into a modal

Author: robertpiosik

packages/ui/src/components/editor/ChatInitializedModal/ChatInitializedModal.module.scss

@@ -0,0 +1,15 @@
+.title {
+  text-align: center;
+}
+
+.progress {
+  width: 100%;
+  height: 2px;
+  background-color: var(--vscode-input-background);
+  overflow: hidden;
+
+  &__fill {
+    height: 100%;
+    background-color: var(--vscode-focusBorder);
+  }
+}

packages/ui/src/components/editor/ChatInitializedModal/ChatInitializedModal.stories.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import { ChatInitializedModal } from './ChatInitializedModal'
+
+export default {
+  component: ChatInitializedModal
+}
+
+export const Default = () => {
+  const [visible, set_visible] = useState(true)
+
+  const handle_close = () => {
+    set_visible(false)
+  }
+
+  return visible ? (
+    <ChatInitializedModal
+      title="Chat has been initialized in the connected browser."
+      duration={3000}
+      on_close={handle_close}
+    />
+  ) : null
+}

packages/ui/src/components/editor/ChatInitializedModal/ChatInitializedModal.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react'
+import styles from './ChatInitializedModal.module.scss'
+import { Button } from '../Button'
+import { Modal } from '../Modal'
+
+type Props = {
+  title: string
+  duration: number
+  on_close: () => void
+}
+
+export const ChatInitializedModal: React.FC<Props> = (props) => {
+  const [is_filling, set_is_filling] = useState(false)
+
+  useEffect(() => {
+    const request_id = requestAnimationFrame(() => {
+      set_is_filling(true)
+    })
+
+    const close_timeout = setTimeout(() => {
+      props.on_close()
+    }, props.duration)
+
+    return () => {
+      cancelAnimationFrame(request_id)
+      clearTimeout(close_timeout)
+    }
+  }, [props.duration, props.on_close])
+
+  return (
+    <Modal>
+      <div className={styles.title}>{props.title}</div>
+      <div className={styles.progress}>
+        <div
+          className={styles.progress__fill}
+          style={{
+            width: is_filling ? '100%' : '0%',
+            transition: `width ${props.duration}ms linear`
+          }}
+        />
+      </div>
+      <Button on_click={props.on_close}>Close</Button>
+    </Modal>
+  )
+}

packages/ui/src/components/editor/ChatInitializedModal/index.ts

@@ -0,0 +1 @@
+export * from './ChatInitializedModal'

packages/ui/src/components/editor/Modal/Modal.module.scss

@@ -0,0 +1,38 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  padding-bottom: 41px;
+
+  &--visible {
+    opacity: 1;
+    transition: opacity var(--transition-duration-250)
+      var(--transition-timing-function);
+
+    .container {
+      transform: scale(1);
+      transition: transform var(--transition-duration-250)
+        var(--transition-timing-function);
+    }
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vscode-sideBar-background);
+  padding: var(--padding-16px) var(--padding-12px) var(--padding-12px)
+    var(--padding-12px);
+  border-radius: var(--border-radius-8px);
+  width: 100%;
+  margin: var(--padding-24px);
+  gap: var(--padding-12px);
+  transform: scale(0.9);
+}

packages/ui/src/components/editor/Modal/Modal.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+import styles from './Modal.module.scss'
+import cn from 'classnames'
+
+type Props = {
+  children: React.ReactNode
+}
+
+export const Modal: React.FC<Props> = (props) => {
+  const [is_hydrated, set_is_hydrated] = useState(false) // For entry animation
+
+  useEffect(() => {
+    set_is_hydrated(true)
+  }, [])
+
+  return (
+    <div
+      className={cn(styles.overlay, {
+        [styles['overlay--visible']]: is_hydrated
+      })}
+    >
+      <div className={styles.container}>{props.children}</div>
+    </div>
+  )
+}

packages/ui/src/components/editor/Modal/index.ts

@@ -0,0 +1 @@
+export * from './Modal'