feat: sticky header

src/CodeView.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { CoffeeScript } from 'coffeescript';
 import * as React from 'react';
 import { appendEmptyLine } from './append-empty-line';
@@ -6,7 +7,9 @@ import { blockify, cellify, ICodeCell } from './cellify';
 import { CodeCell } from './CodeCell';
 import './completion';
 import { Sandbox } from './sandbox';
+import style from './styles/code-view.scss';
 import { TextCell } from './TextCell';
+import flex from './styles/flex.scss';
 
 export interface CodeViewProps {
   code: string;
@@ -63,8 +66,20 @@ export function CodeView({ code }: CodeViewProps) {
     onGame();
   }, []);
 
+  const fileInfo = {
+    iconUrl:
+      'https://assets.hackforplay.xyz/img/6d152a956071fc7b2e7ec0c8590146e4.png',
+    name: {
+      ja: 'プレイヤー'
+    }
+  };
+
   return (
     <>
+      <div className={classNames(style.header, flex.horizontal)}>
+        <img src={fileInfo.iconUrl} alt="" className={style.icon} />
+        <div className={style.name}>{fileInfo.name.ja}</div>
+      </div>
       {cellsRef.current.map(cell =>
         cell.type === 'code' ? (
           <CodeCell

src/styles/code-view.scss

@@ -3,6 +3,28 @@
 
 $padding: 4px;
 
+.header {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  padding-top: 8px;
+  background-color: $backgroundColor;
+  z-index: 10;
+  align-items: center;
+  height: 32px;
+
+  .icon {
+    height: 100%;
+    margin-right: 8px;
+  }
+
+  .name {
+    font-size: 21px;
+    font-weight: 600;
+    color: $textColor;
+  }
+}
+
 .installer {
   width: 50%;
   padding-left: $padding;

src/styles/region.scss

@@ -29,7 +29,7 @@
 // エディタ表示部分
 .editorView {
   @extend %base;
-  padding: 8px 8px $footerHeight 8px;
+  padding: 0px 8px $footerHeight 8px;
   overflow: scroll;
 
   z-index: 9;