improved save file experience

packages/web/src/utility/SaveFileToolbarButton.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import ToolbarButton, { ToolbarDropDownButton } from '../widgets/ToolbarButton';
+
+export default function SaveFileToolbarButton({ tabid, save, saveAs }) {
+  if (!saveAs) return null;
+
+  if (save) {
+    return (
+      <ToolbarDropDownButton icon="icon save" text="Save">
+        <DropDownMenuItem onClick={save}>Save</DropDownMenuItem>
+        <DropDownMenuItem onClick={saveAs}>Save As</DropDownMenuItem>
+      </ToolbarDropDownButton>
+    );
+  }
+
+  return (
+    <ToolbarButton onClick={saveAs} icon="icon save">
+      Save As
+    </ToolbarButton>
+  );
+}

packages/web/src/utility/ToolbarPortal.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export default function ToolbarPortal({ toolbarPortalRef, tabVisible, children }) {
+  return (
+    (toolbarPortalRef &&
+      toolbarPortalRef.current &&
+      tabVisible &&
+      children &&
+      ReactDOM.createPortal(children, toolbarPortalRef.current)) ||
+    null
+  );
+}