Merge pull request #8209 from sagemathinc/flyout-homepage

frontend/flyout: reinstate homepage

Author: williamstein

src/packages/frontend/project/new/new-file-page.tsx

@@ -9,9 +9,9 @@ import { defineMessage, FormattedMessage, useIntl } from "react-intl";
 
 import { default_filename } from "@cocalc/frontend/account";
 import { Alert, Col, Row } from "@cocalc/frontend/antd-bootstrap";
-import { filenameIcon } from "@cocalc/frontend/file-associations";
 import {
   ProjectActions,
+  redux,
   useActions,
   useRedux,
   useTypedRedux,
@@ -27,9 +27,14 @@ import {
 } from "@cocalc/frontend/components";
 import FakeProgress from "@cocalc/frontend/components/fake-progress";
 import ComputeServer from "@cocalc/frontend/compute/inline";
+import { filenameIcon } from "@cocalc/frontend/file-associations";
 import { FileUpload, UploadLink } from "@cocalc/frontend/file-upload";
 import { labels } from "@cocalc/frontend/i18n";
 import { special_filenames_with_no_extension } from "@cocalc/frontend/project-file";
+import {
+  getValidVBAROption,
+  VBAR_KEY,
+} from "@cocalc/frontend/project/page/vbar";
 import { ProjectMap } from "@cocalc/frontend/todo-types";
 import { filename_extension, is_only_downloadable } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
@@ -330,9 +335,13 @@ export default function NewFilePage(props: Props) {
     );
   };
 
-  const showFiles = () => {
-    actions.set_active_tab("files");
-  };
+  function closeNewPage() {
+    // Showing homepage in flyout only mode, otherwise the files as usual
+    const account_store = redux.getStore("account") as any;
+    const vbar = account_store?.getIn(["other_settings", VBAR_KEY]);
+    const pureFlyoutMode = getValidVBAROption(vbar) === "flyout";
+    actions?.set_active_tab(pureFlyoutMode ? "home" : "files");
+  }
 
   //key is so autofocus works below
   return (
@@ -412,7 +421,7 @@ export default function NewFilePage(props: Props) {
           )}
         </div>
       }
-      close={showFiles}
+      close={closeNewPage}
     >
       <Modal
         onCancel={() => setCreatingFile("")}

src/packages/frontend/project/page/home-page/button.tsx

@@ -5,8 +5,16 @@
 
 import { Button } from "antd";
 
-import { useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
+import {
+  redux,
+  useActions,
+  useTypedRedux,
+} from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
+import {
+  VBAR_KEY,
+  getValidVBAROption,
+} from "@cocalc/frontend/project/page/vbar";
 import track from "@cocalc/frontend/user-tracking";
 import { COLORS } from "@cocalc/util/theme";
 
@@ -28,18 +36,12 @@ export default function HomePageButton({ project_id, active, width }) {
         transitionDuration: "0s",
       }}
       onClick={() => {
-        // People find the entire home page idea very confusing.
-        // Thus I've commented this out:
+        // Showing homepage in flyout only mode, otherwise the files as usual
+        const account_store = redux.getStore("account") as any;
+        const vbar = account_store?.getIn(["other_settings", VBAR_KEY]);
+        const pureFlyoutMode = getValidVBAROption(vbar) === "flyout";
+        actions?.set_active_tab(pureFlyoutMode ? "home" : "files");
 
-        // actions?.set_active_tab("home");
-
-        // And replaced it by just showing the file explorer in the
-        // home directory, with no flyout panels open, which is a reasonable
-        // expectation for a "Home" button, since that's what the project shows
-        // by default on open.  This is just a very quick bandaide to reduce
-        // confusion until we come up with something better (e.g., a dropdown
-        // menu and shortcut toolbar).
-        actions?.set_active_tab("files");
         actions?.set_current_path("");
         actions?.setFlyoutExpanded("files", false, false);
         actions?.set_file_search("");