Rework the view layout

Author: robertpiosik

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

@@ -11,18 +11,36 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: var(--header-height);
-  gap: var(--padding-2px);
-  padding: 0 15px var(--padding-6px) var(--padding-14px);
+  padding: var(--padding-8px) var(--padding-12px) var(--padding-6px)
+    var(--padding-14px);
   border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
+  position: relative;
+
+  &__title {
+    position: absolute;
+    left: 50%;
+    font-weight: 600;
+    transform: translateX(-50%);
+    font-size: var(--font-size-14px);
+  }
 
   &__back {
     display: flex;
     align-items: center;
+    gap: var(--padding-2px);
 
     > span {
       font-size: var(--font-size-13px);
-      color: var(--vscode-foreground);
+      font-weight: 500;
+      color: var(--vscode-editor-foreground);
+    }
+  }
+
+  &__right {
+    display: flex;
+
+    &__slot {
+      padding-right: var(--padding-3px);
     }
   }
 }

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

@@ -0,0 +1,54 @@
+import styles from './Page.module.scss'
+import { IconButton } from '../IconButton/IconButton'
+import SimpleBar from 'simplebar-react'
+
+type Props = {
+  title?: string
+  on_back_click?: () => void
+  on_close_click?: () => void
+  header_slot?: React.ReactNode
+  children: React.ReactNode
+}
+
+export const Page: React.FC<Props> = (props) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        {props.title && (
+          <div className={styles.header__title}>{props.title}</div>
+        )}
+        <div className={styles.header__back}>
+          {props.on_back_click && (
+            <>
+              <IconButton
+                codicon_icon="chevron-left"
+                on_click={props.on_back_click}
+                title="Return to previous screen"
+              />
+              <span>Back</span>
+            </>
+          )}
+        </div>
+        <div className={styles.header__right}>
+          <div className={styles.header__right__slot}>{props.header_slot}</div>
+          {props.on_close_click && (
+            <IconButton
+              codicon_icon="chrome-close"
+              on_click={props.on_close_click}
+              title="Close"
+            />
+          )}
+        </div>
+      </div>
+      <div className={styles.content}>
+        <SimpleBar
+          style={{
+            height: '100%'
+          }}
+        >
+          <div className={styles.content__inner}>{props.children}</div>
+        </SimpleBar>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -1,7 +1,6 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--padding-6px);
 
   &--disabled {
     opacity: var(--disabled-opacity);
@@ -14,6 +13,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--padding-12px);
+  margin-bottom: var(--padding-2px);
 
   &__left {
     display: flex;
@@ -129,6 +129,6 @@
   }
 
   &__create {
-    margin: 0 var(--padding-12px);
+    margin: var(--padding-8px) var(--padding-12px) 0 var(--padding-12px);
   }
 }