Add command bar component

source/Component/CommandBar/CommandBar.scss

@@ -0,0 +1,3 @@
+div.command-bar {
+    height: 100%;
+}

source/Component/CommandBar/CommandBar.tsx

@@ -0,0 +1,20 @@
+import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
+import { Component, ReactNode } from "react";
+
+interface ICommandBarProps {
+    width: number;
+}
+
+class CommandBar extends Component<ICommandBarProps> {
+    
+    render(): ReactNode {
+        return <Theme 
+            className="command-bar"
+            backgroundLevel={BackgroundLevel.Level2}
+            style={{ width: this.props.width }}
+        >
+        </Theme>    
+    }
+}
+
+export { CommandBar };

source/Component/HeaderBar/HeaderBar.scss

@@ -1,5 +1,5 @@
 div.header-bar {
-    padding: 0 20px;
+    padding: 0 10px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -11,7 +11,7 @@ div.header-bar {
         vertical-align: text-bottom;
         padding-right: 5px;
     }
-    
+
     div.ms-TooltipHost {
         padding: 0 5px;
         overflow: hidden;

source/Component/HeaderBar/HeaderBar.tsx

@@ -60,6 +60,7 @@ class HeaderBar extends Component<
             setting.on("language", this.changeListener);
         }
         if (status) {
+            status.archive.on("save", this.changeListener);
             status.model.on("loop", this.physicsFpsCalc);
             status.renderer.on("loop", this.renderFpsCalc);
         }
@@ -71,6 +72,7 @@ class HeaderBar extends Component<
             setting.off("language", this.changeListener);
         }
         if (status) {
+            status.archive.off("save", this.changeListener);
             status.model.off("loop", this.physicsFpsCalc);
             status.renderer.off("loop", this.renderFpsCalc);
         }