Revert "fix: Fade out navigation when editing and mouse hasn't moved (#3256)" (#3502)

This reverts commit e0cf873a36.

app/components/DocumentMetaWithViews.tsx

@@ -83,4 +83,4 @@ const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
   }
 `;
 
-export default React.memo(DocumentMetaWithViews);
+export default DocumentMetaWithViews;

app/editor/components/EmojiMenu.tsx

@@ -21,7 +21,7 @@ const searcher = new FuzzySearch<{
   sort: true,
 });
 
-class EmojiMenu extends React.PureComponent<
+class EmojiMenu extends React.Component<
   Omit<
     Props<Emoji>,
     | "renderMenuItem"

app/hooks/useMouseMove.ts

@@ -1,28 +0,0 @@
-import * as React from "react";
-
-/**
- * Hook to check if mouse is moving in the window
- * @param {number} [timeout] - time in ms to wait before marking the mouse as not moving
- * @returns {boolean} true if the mouse is moving, false otherwise
- */
-const useMouseMove = (timeout = 5000) => {
-  const [isMouseMoving, setIsMouseMoving] = React.useState(false);
-  const timeoutId = React.useRef<ReturnType<typeof setTimeout>>();
-
-  const onMouseMove = React.useCallback(() => {
-    timeoutId.current && clearTimeout(timeoutId.current);
-    setIsMouseMoving(true);
-    timeoutId.current = setTimeout(() => setIsMouseMoving(false), timeout);
-  }, [timeout]);
-
-  React.useEffect(() => {
-    document.addEventListener("mousemove", onMouseMove);
-    return () => {
-      document.removeEventListener("mousemove", onMouseMove);
-    };
-  }, [onMouseMove]);
-
-  return isMouseMoving;
-};
-
-export default useMouseMove;

app/models/Document.ts

@@ -5,7 +5,7 @@ import parseTitle from "@shared/utils/parseTitle";
 import unescape from "@shared/utils/unescape";
 import DocumentsStore from "~/stores/DocumentsStore";
 import User from "~/models/User";
-import type { NavigationNode } from "~/types";
+import { NavigationNode } from "~/types";
 import Storage from "~/utils/Storage";
 import ParanoidModel from "./ParanoidModel";
 import View from "./View";

app/scenes/Document/components/Document.tsx

@@ -87,9 +87,6 @@ class DocumentScene extends React.Component<Props> {
   @observable
   isEditorDirty = false;
 
-  @observable
-  isEditorFocused = false;
-
   @observable
   isEmpty = true;
 
@@ -415,9 +412,6 @@ class DocumentScene extends React.Component<Props> {
     }
   };
 
-  onBlur = () => (this.isEditorFocused = false);
-  onFocus = () => (this.isEditorFocused = true);
-
   render() {
     const {
       document,
@@ -455,9 +449,6 @@ class DocumentScene extends React.Component<Props> {
       ? this.props.match.url
       : updateDocumentUrl(this.props.match.url, document);
 
-    const isFocusing =
-      !readOnly || this.isEditorFocused || !!ui.observingUserId;
-
     return (
       <ErrorBoundary>
         {this.props.location.pathname !== canonicalUrl && (
@@ -547,7 +538,6 @@ class DocumentScene extends React.Component<Props> {
               shareId={shareId}
               isRevision={!!revision}
               isDraft={document.isDraft}
-              isFocusing={isFocusing}
               isEditing={!readOnly && !team?.collaborativeEditing}
               isSaving={this.isSaving}
               isPublishing={this.isPublishing}
@@ -589,8 +579,6 @@ class DocumentScene extends React.Component<Props> {
                     document={document}
                     value={readOnly ? value : undefined}
                     defaultValue={value}
-                    onBlur={this.onBlur}
-                    onFocus={this.onFocus}
                     embedsDisabled={embedsDisabled}
                     onSynced={this.onSynced}
                     onFileUploadStart={this.onFileUploadStart}
@@ -618,10 +606,7 @@ class DocumentScene extends React.Component<Props> {
                       <>
                         <MarkAsViewed document={document} />
                         <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
-                          <References
+                          <References document={document} />
-                            isFocusing={isFocusing}
-                            document={document}
-                          />
                         </ReferencesWrapper>
                       </>
                     )}

app/scenes/Document/components/FadeOut.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import Flex from "~/components/Flex";
-
-const FadeOut = styled(Flex)<{ $fade: boolean }>`
-  opacity: ${(props) => (props.$fade ? 0 : 1)};
-  visibility: ${(props) => (props.$fade ? "hidden" : "visible")};
-  transition: opacity 900ms ease-in-out, visibility ease-in-out 900ms;
-`;
-
-export default React.memo(FadeOut);

app/scenes/Document/components/Header.tsx

@@ -21,7 +21,6 @@ import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import Header from "~/components/Header";
 import Tooltip from "~/components/Tooltip";
 import useMobile from "~/hooks/useMobile";
-import useMouseMove from "~/hooks/useMouseMove";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
@@ -31,7 +30,6 @@ import TemplatesMenu from "~/menus/TemplatesMenu";
 import { NavigationNode } from "~/types";
 import { metaDisplay } from "~/utils/keyboard";
 import { newDocumentPath, editDocumentUrl } from "~/utils/routeHelpers";
-import FadeOut from "./FadeOut";
 import ObservingBanner from "./ObservingBanner";
 import PublicBreadcrumb from "./PublicBreadcrumb";
 import ShareButton from "./ShareButton";
@@ -43,7 +41,6 @@ type Props = {
   shareId: string | null | undefined;
   isDraft: boolean;
   isEditing: boolean;
-  isFocusing: boolean;
   isRevision: boolean;
   isSaving: boolean;
   isPublishing: boolean;
@@ -70,7 +67,6 @@ function DocumentHeader({
   isDraft,
   isPublishing,
   isRevision,
-  isFocusing,
   isSaving,
   savingIsDisabled,
   publishingIsDisabled,
@@ -84,8 +80,6 @@ function DocumentHeader({
   const { resolvedTheme } = ui;
   const { team } = auth;
   const isMobile = useMobile();
-  const isMouseMoving = useMouseMove();
-  const hideHeader = isFocusing && !isMouseMoving;
 
   // We cache this value for as long as the component is mounted so that if you
   // apply a template there is still the option to replace it until the user
@@ -169,35 +163,6 @@ function DocumentHeader({
     </Action>
   );
 
-  const DocumentMenuLabel = React.useCallback(
-    (props) => (
-      <Button
-        icon={<MoreIcon />}
-        iconColor="currentColor"
-        {...props}
-        borderOnHover
-        neutral
-      />
-    ),
-    []
-  );
-
-  const NewChildDocLabel = React.useCallback(
-    (props) => (
-      <Tooltip
-        tooltip={t("New document")}
-        shortcut="n"
-        delay={500}
-        placement="bottom"
-      >
-        <Button icon={<PlusIcon />} {...props} neutral>
-          {t("New doc")}
-        </Button>
-      </Tooltip>
-    ),
-    [t]
-  );
-
   if (shareId) {
     return (
       <Header
@@ -231,15 +196,13 @@ function DocumentHeader({
       <Header
         hasSidebar
         breadcrumb={
-          <FadeOut $fade={hideHeader}>
+          isMobile ? (
-            {isMobile ? (
             <TableOfContentsMenu headings={headings} />
           ) : (
             <DocumentBreadcrumb document={document}>
               {!isEditing && toc}
             </DocumentBreadcrumb>
-            )}
+          )
-          </FadeOut>
         }
         title={
           <>
@@ -250,14 +213,12 @@ function DocumentHeader({
         actions={
           <>
             <ObservingBanner />
-            <FadeOut $fade={hideHeader}>
+
             {!isPublishing && isSaving && !team?.collaborativeEditing && (
               <Status>{t("Saving")}…</Status>
             )}
             {!isDeleted && <Collaborators document={document} />}
-              {(isEditing || team?.collaborativeEditing) &&
+            {(isEditing || team?.collaborativeEditing) && !isTemplate && isNew && (
-                !isTemplate &&
-                isNew && (
               <Action>
                 <TemplatesMenu
                   document={document}
@@ -295,7 +256,18 @@ function DocumentHeader({
               <Action>
                 <NewChildDocumentMenu
                   document={document}
-                    label={NewChildDocLabel}
+                  label={(props) => (
+                    <Tooltip
+                      tooltip={t("New document")}
+                      shortcut="n"
+                      delay={500}
+                      placement="bottom"
+                    >
+                      <Button icon={<PlusIcon />} {...props} neutral>
+                        {t("New doc")}
+                      </Button>
+                    </Tooltip>
+                  )}
                 />
               </Action>
             )}
@@ -337,14 +309,21 @@ function DocumentHeader({
                   <DocumentMenu
                     document={document}
                     isRevision={isRevision}
-                      label={DocumentMenuLabel}
+                    label={(props) => (
+                      <Button
+                        icon={<MoreIcon />}
+                        iconColor="currentColor"
+                        {...props}
+                        borderOnHover
+                        neutral
+                      />
+                    )}
                     showToggleEmbeds={canToggleEmbeds}
                     showDisplayOptions
                   />
                 </Action>
               </>
             )}
-            </FadeOut>
           </>
         }
       />

app/scenes/Document/components/References.tsx

@@ -7,21 +7,16 @@ import Document from "~/models/Document";
 import Fade from "~/components/Fade";
 import Tab from "~/components/Tab";
 import Tabs from "~/components/Tabs";
-import useMouseMove from "~/hooks/useMouseMove";
 import useStores from "~/hooks/useStores";
-import FadeOut from "./FadeOut";
 import ReferenceListItem from "./ReferenceListItem";
 
 type Props = {
   document: Document;
-  isFocusing: boolean;
 };
 
-function References({ document, isFocusing }: Props) {
+function References({ document }: Props) {
   const { collections, documents } = useStores();
   const location = useLocation();
-  const isMouseMoving = useMouseMove();
-  const hideHeader = isFocusing && !isMouseMoving;
 
   React.useEffect(() => {
     documents.fetchBacklinks(document.id);
@@ -38,8 +33,7 @@ function References({ document, isFocusing }: Props) {
   const height = Math.max(backlinks.length, children.length) * 40;
 
   return showBacklinks || showChildDocuments ? (
-    <FadeOut $fade={hideHeader}>
+    <Fade>
-      <Fade style={{ width: "100%" }}>
       <Tabs>
         {showChildDocuments && (
           <Tab to="#children" isActive={() => !isBacklinksTab}>
@@ -85,7 +79,6 @@ function References({ document, isFocusing }: Props) {
         )}
       </Content>
     </Fade>
-    </FadeOut>
   ) : null;
 }
 

app/scenes/KeyboardShortcuts.tsx

@@ -445,4 +445,4 @@ const Label = styled.dd`
   color: ${(props) => props.theme.textSecondary};
 `;
 
-export default React.memo(KeyboardShortcuts);
+export default KeyboardShortcuts;