experiment: version in status bar (codesandbox#3690)

* experiment-status-bar-version

* move version + skeleton

* remove version from sidebar

* the lengths you have to go

* equal spacing on both sides

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts

@@ -99,6 +99,15 @@ export const SkeletonDevtoolsNavigator = styled.div`
     ${props => props.theme.colors?.sideBar.border || 'rgba(0, 0, 0, 0.5)'};
 `;
 export const SkeletonDevtoolsIframe = styled.div`
-  height: 100%;
+  height: calc(100% - 22px);
   background-color: #fff;
 `;
+export const SkeletonStatusBar = styled.div`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 22px;
+  background-color: ${props =>
+    props.theme.colors?.statusBar.background || 'rgba(0, 0, 0, 0.5)'};
+`;

packages/app/src/app/pages/Sandbox/Editor/Skeleton/index.tsx

@@ -13,6 +13,7 @@ import {
   SkeletonExplorer,
   SkeletonTextBlock,
   SkeletonWrapper,
+  SkeletonStatusBar,
 } from './elements';
 
 export const ContentSkeleton = ({ style }) => (
@@ -36,6 +37,7 @@ export const ContentSkeleton = ({ style }) => (
       </SkeletonDevtoolsNavigator>
       <SkeletonDevtoolsIframe />
     </SkeletonDevtools>
+    <SkeletonStatusBar />
   </SkeletonWrapper>
 );
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx

@@ -1,8 +1,7 @@
 import React, { MouseEvent } from 'react';
-import VERSION from '@codesandbox/common/lib/version';
 import { useOvermind } from 'app/overmind';
 import css from '@styled-system/css';
-import { Button, Stack, Text, Element, Link } from '@codesandbox/components';
+import { Button, Stack, Element, Link } from '@codesandbox/components';
 import { SpectrumLogo, GithubIcon, TwitterIcon } from './icons';
 
 const links = [
@@ -64,13 +63,6 @@ export const Delete = () => {
             </Link>
           ))}
         </Stack>
-        <Text
-          size={1}
-          block
-          css={css({ color: 'sideBar.border', textAlign: 'right' })}
-        >
-          {VERSION}
-        </Text>
       </Element>
     </Element>
   );

packages/app/src/app/pages/Sandbox/Editor/index.tsx

@@ -2,12 +2,19 @@ import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 import { REDESIGNED_SIDEBAR } from '@codesandbox/common/lib/utils/feature-flags';
-import { ThemeProvider as NewThemeProvider } from '@codesandbox/components';
+import {
+  ThemeProvider as NewThemeProvider,
+  Stack,
+  Element,
+} from '@codesandbox/components';
+import css from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
 import { templateColor } from 'app/utils/template-color';
 import React, { useEffect, useRef, useState } from 'react';
 import SplitPane from 'react-split-pane';
 import styled, { ThemeProvider } from 'styled-components';
+import VERSION from '@codesandbox/common/lib/version';
+import VisuallyHidden from '@reach/visually-hidden';
 
 import Content from './Content';
 import { Container } from './elements';
@@ -188,18 +195,33 @@ const Editor = () => {
             ) : null}
           </div>
 
-          <StatusBar
-            style={{
-              position: 'fixed',
-              display: statusBar ? 'block' : 'none',
-              bottom: 0,
-              left: 0,
-              right: 0,
-              height: STATUS_BAR_SIZE,
-            }}
-            className="monaco-workbench mac nopanel"
-            ref={statusbarEl}
-          />
+          <NewThemeProvider theme={localState.theme.vscodeTheme}>
+            <Stack
+              justify="space-between"
+              align="center"
+              className=".monaco-workbench"
+              css={css({
+                backgroundColor: 'statusBar.background',
+                color: 'statusBar.foreground',
+                position: 'fixed',
+                display: statusBar ? 'flex' : 'none',
+                bottom: 0,
+                right: 0,
+                left: 0,
+                width: '100%',
+                height: STATUS_BAR_SIZE,
+              })}
+            >
+              <FakeStatusBarText>
+                Version: {VERSION.split('-').pop()}
+              </FakeStatusBarText>
+              <StatusBar
+                className="monaco-workbench mac nopanel"
+                ref={statusbarEl}
+                style={{ width: 'calc(100% - 126px)' }}
+              />
+            </Stack>
+          </NewThemeProvider>
         </Fullscreen>
 
         <ForkFrozenSandboxModal />
@@ -212,3 +234,49 @@ const Editor = () => {
 };
 
 export default Editor;
+
+/** To use the same styles + behavior of the vscode status bar,
+ *  we recreate the html structure outside of the status bar
+ *  the code is garbage
+ */
+/* eslint-disable */
+const FakeStatusBarText = props => {
+  const [copied, setCopied] = React.useState(false);
+
+  const copyText = () => {
+    const inputElement = document.querySelector('#status-bar-version');
+    // @ts-ignore it's not even a button!
+    inputElement.select();
+    document.execCommand('copy');
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Element
+      as="span"
+      className="part statusbar"
+      css={css({
+        width: 'auto !important',
+        minWidth: '120px',
+        color: 'statusBar.foreground',
+      })}
+      {...props}
+    >
+      <span className="statusbar-item" style={{ paddingLeft: '10px' }}>
+        <a
+          title="Copy version"
+          style={{ color: 'inherit', padding: '0 5px' }}
+          onClick={copyText}
+        >
+          {copied ? 'Copied!' : props.children}
+        </a>
+
+        <VisuallyHidden>
+          <input id="status-bar-version" defaultValue={props.children} />
+        </VisuallyHidden>
+      </span>
+    </Element>
+  );
+};
+/* eslint-enable */