hide useless things in file mode

src/components/Footer.jsx

@@ -196,7 +196,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.props.saveHtmlBtnClickHandler}
 						id="saveHtmlBtn"
-						class="mode-btn  hint--rounded  hint--top-left hide-on-mobile"
+						class="mode-btn  hint--rounded  hint--top-left hide-on-mobile hide-in-file-mode"
 						aria-label="Save as HTML file"
 					>
 						<svg viewBox="0 0 24 24">
@@ -219,7 +219,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.props.codepenBtnClickHandler}
 						id="codepenBtn"
-						class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile"
+						class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile hide-in-file-mode"
 						aria-label="Edit on CodePen"
 					>
 						<svg>
@@ -243,7 +243,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.layoutBtnClickhandler.bind(this, 1)}
 						id="layoutBtn1"
-						class="mode-btn hide-on-mobile"
+						class="mode-btn hide-on-mobile hide-in-file-mode"
 						aria-label="Switch to layout with preview on right"
 					>
 						<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
@@ -253,7 +253,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.layoutBtnClickhandler.bind(this, 2)}
 						id="layoutBtn2"
-						class="mode-btn hide-on-mobile"
+						class="mode-btn hide-on-mobile hide-in-file-mode"
 						aria-label="Switch to layout with preview on bottom"
 					>
 						<svg viewBox="0 0 100 100">
@@ -263,7 +263,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.layoutBtnClickhandler.bind(this, 3)}
 						id="layoutBtn3"
-						class="mode-btn hide-on-mobile"
+						class="mode-btn hide-on-mobile hide-in-file-mode"
 						aria-label="Switch to layout with preview on left"
 					>
 						<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
@@ -273,7 +273,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.layoutBtnClickhandler.bind(this, 5)}
 						id="layoutBtn5"
-						class="mode-btn hide-on-mobile"
+						class="mode-btn hide-on-mobile hide-in-file-mode"
 						aria-label="Switch to layout with all vertical panes"
 					>
 						<svg viewBox="0 0 100 100">

src/components/MainHeader.jsx

@@ -27,22 +27,24 @@ export function MainHeader(props) {
 					</svg>Run
 				</button>
 
-				<Button
+				{!this.props.isFileMode && (
-					onClick={props.addLibraryBtnHandler}
+					<Button
-					data-event-category="ui"
+						onClick={props.addLibraryBtnHandler}
-					data-event-action="addLibraryButtonClick"
+						data-event-category="ui"
-					class="btn--dark flex-v-center hint--rounded hint--bottom-left"
+						data-event-action="addLibraryButtonClick"
-					aria-label="Add a JS/CSS library"
+						class="btn--dark flex-v-center hint--rounded hint--bottom-left"
-				>
+						aria-label="Add a JS/CSS library"
-					Add library{' '}
-					<span
-						id="js-external-lib-count"
-						style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
-						class="count-label"
 					>
-						{props.externalLibCount}
+						Add library{' '}
-					</span>
+						<span
-				</Button>
+							id="js-external-lib-count"
+							style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
+							class="count-label"
+						>
+							{props.externalLibCount}
+						</span>
+					</Button>
+				)}
 
 				<button
 					class="btn--dark flex  flex-v-center hint--rounded hint--bottom-left"

src/components/app.jsx

@@ -1222,6 +1222,7 @@ export default class App extends Component {
 						titleInputBlurHandler={this.titleInputBlurHandler.bind(this)}
 						user={this.state.user}
 						unsavedEditCount={this.state.unsavedEditCount}
+						isFileMode={this.state.currentItem && this.state.currentItem.files}
 					/>
 					{this.state.currentItem && this.state.currentItem.files ? (
 						<ContentWrapFiles

src/style.css

@@ -1642,6 +1642,10 @@ body:not(.is-app) .show-when-app {
 .sidebar__file:focus .sidebar__file-options {
 	visibility: visible;
 }
+
+.is-project .hide-in-file-mode {
+	display: none !important;
+}
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;