Fix embed

Author: CompuIves

packages/app/src/embed/components/Content/index.js

@@ -5,6 +5,15 @@ import BasePreview from 'app/components/Preview';
 import CodeEditor from 'app/components/CodeEditor';
 import type { Editor, Settings } from 'app/components/CodeEditor/types';
 import Tab from 'app/pages/Sandbox/Editor/Content/Tabs/Tab';
+import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import getType from 'app/utils/get-type';
+
+import { StyledNotSyncedIcon } from 'app/pages/Sandbox/Editor/Content/Tabs/ModuleTab/elements';
+import {
+  TabTitle,
+  TabDir,
+  StyledCloseIcon,
+} from 'app/pages/Sandbox/Editor/Content/Tabs/Tab/elements';
 
 import DevTools from 'app/components/Preview/DevTools';
 
@@ -77,6 +86,30 @@ export default class Content extends React.PureComponent<Props, State> {
     this.errors = [];
   }
 
+  renderTabStatus = (hovering, closeTab) => {
+    const { isNotSynced, tabCount } = this.props;
+
+    if (hovering && isNotSynced && tabCount === 1) {
+      return <StyledNotSyncedIcon show={'true'} />;
+    }
+    if (hovering && isNotSynced && tabCount > 1) {
+      return <StyledCloseIcon onClick={closeTab} show={'true'} />;
+    }
+    if (hovering && tabCount === 1) {
+      return <StyledCloseIcon onClick={closeTab} show={undefined} />;
+    }
+    if (hovering && tabCount > 1) {
+      return <StyledCloseIcon onClick={closeTab} show={'true'} />;
+    }
+    if (!hovering && isNotSynced) {
+      return <StyledNotSyncedIcon show={'true'} />;
+    }
+    if (!hovering && !isNotSynced) {
+      return <StyledNotSyncedIcon show={undefined} />;
+    }
+    return <StyledNotSyncedIcon show={undefined} />;
+  };
+
   errors: Array<ModuleError>;
   editor: ?Editor;
   preview: ?BasePreview;
@@ -326,7 +359,18 @@ export default class Content extends React.PureComponent<Props, State> {
                     position={i}
                     closeTab={this.closeTab}
                     dirName={dirName}
-                  />
+                  >
+                    {({ hovering, closeTab }) => (
+                      // TODO deduplicate this
+                      <React.Fragment>
+                        <EntryIcons type={getType(module.title)} />
+                        <TabTitle>{module.title}</TabTitle>
+                        {dirName && <TabDir>../{dirName}</TabDir>}
+
+                        {this.renderTabStatus(hovering, closeTab)}
+                      </React.Fragment>
+                    )}
+                  </Tab>
                 );
               })}
             </Tabs>