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

This reverts commit e0cf873a36.

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 ? (
-              <TableOfContentsMenu headings={headings} />
-            ) : (
-              <DocumentBreadcrumb document={document}>
-                {!isEditing && toc}
-              </DocumentBreadcrumb>
-            )}
-          </FadeOut>
+          isMobile ? (
+            <TableOfContentsMenu headings={headings} />
+          ) : (
+            <DocumentBreadcrumb document={document}>
+              {!isEditing && toc}
+            </DocumentBreadcrumb>
+          )
         }
         title={
           <>
@@ -250,101 +213,117 @@ function DocumentHeader({
         actions={
           <>
             <ObservingBanner />
-            <FadeOut $fade={hideHeader}>
-              {!isPublishing && isSaving && !team?.collaborativeEditing && (
-                <Status>{t("Saving")}…</Status>
-              )}
-              {!isDeleted && <Collaborators document={document} />}
-              {(isEditing || team?.collaborativeEditing) &&
-                !isTemplate &&
-                isNew && (
-                  <Action>
-                    <TemplatesMenu
-                      document={document}
-                      onSelectTemplate={onSelectTemplate}
-                    />
-                  </Action>
-                )}
-              {!isEditing && !isDeleted && (!isMobile || !isTemplate) && (
-                <Action>
-                  <ShareButton document={document} />
-                </Action>
-              )}
-              {isEditing && (
-                <>
-                  <Action>
-                    <Tooltip
-                      tooltip={t("Save")}
-                      shortcut={`${metaDisplay}+enter`}
-                      delay={500}
-                      placement="bottom"
-                    >
-                      <Button
-                        onClick={handleSave}
-                        disabled={savingIsDisabled}
-                        neutral={isDraft}
-                      >
-                        {isDraft ? t("Save Draft") : t("Done Editing")}
-                      </Button>
-                    </Tooltip>
-                  </Action>
-                </>
-              )}
-              {canEdit && !team?.collaborativeEditing && editAction}
-              {canEdit && can.createChildDocument && !isMobile && (
-                <Action>
-                  <NewChildDocumentMenu
-                    document={document}
-                    label={NewChildDocLabel}
-                  />
-                </Action>
-              )}
-              {canEdit && isTemplate && !isDraft && !isRevision && (
-                <Action>
-                  <Button
-                    icon={<PlusIcon />}
-                    as={Link}
-                    to={newDocumentPath(document.collectionId, {
-                      templateId: document.id,
-                    })}
-                    primary
-                  >
-                    {t("New from template")}
-                  </Button>
-                </Action>
-              )}
-              {can.update && isDraft && !isRevision && (
+
+            {!isPublishing && isSaving && !team?.collaborativeEditing && (
+              <Status>{t("Saving")}…</Status>
+            )}
+            {!isDeleted && <Collaborators document={document} />}
+            {(isEditing || team?.collaborativeEditing) && !isTemplate && isNew && (
+              <Action>
+                <TemplatesMenu
+                  document={document}
+                  onSelectTemplate={onSelectTemplate}
+                />
+              </Action>
+            )}
+            {!isEditing && !isDeleted && (!isMobile || !isTemplate) && (
+              <Action>
+                <ShareButton document={document} />
+              </Action>
+            )}
+            {isEditing && (
+              <>
                 <Action>
                   <Tooltip
-                    tooltip={t("Publish")}
-                    shortcut={`${metaDisplay}+shift+p`}
+                    tooltip={t("Save")}
+                    shortcut={`${metaDisplay}+enter`}
                     delay={500}
                     placement="bottom"
                   >
                     <Button
-                      onClick={handlePublish}
-                      disabled={publishingIsDisabled}
+                      onClick={handleSave}
+                      disabled={savingIsDisabled}
+                      neutral={isDraft}
                     >
-                      {isPublishing ? `${t("Publishing")}…` : t("Publish")}
+                      {isDraft ? t("Save Draft") : t("Done Editing")}
                     </Button>
                   </Tooltip>
                 </Action>
-              )}
-              {!isEditing && (
-                <>
-                  {!isDeleted && <Separator />}
-                  <Action>
-                    <DocumentMenu
-                      document={document}
-                      isRevision={isRevision}
-                      label={DocumentMenuLabel}
-                      showToggleEmbeds={canToggleEmbeds}
-                      showDisplayOptions
-                    />
-                  </Action>
-                </>
-              )}
-            </FadeOut>
+              </>
+            )}
+            {canEdit && !team?.collaborativeEditing && editAction}
+            {canEdit && can.createChildDocument && !isMobile && (
+              <Action>
+                <NewChildDocumentMenu
+                  document={document}
+                  label={(props) => (
+                    <Tooltip
+                      tooltip={t("New document")}
+                      shortcut="n"
+                      delay={500}
+                      placement="bottom"
+                    >
+                      <Button icon={<PlusIcon />} {...props} neutral>
+                        {t("New doc")}
+                      </Button>
+                    </Tooltip>
+                  )}
+                />
+              </Action>
+            )}
+            {canEdit && isTemplate && !isDraft && !isRevision && (
+              <Action>
+                <Button
+                  icon={<PlusIcon />}
+                  as={Link}
+                  to={newDocumentPath(document.collectionId, {
+                    templateId: document.id,
+                  })}
+                  primary
+                >
+                  {t("New from template")}
+                </Button>
+              </Action>
+            )}
+            {can.update && isDraft && !isRevision && (
+              <Action>
+                <Tooltip
+                  tooltip={t("Publish")}
+                  shortcut={`${metaDisplay}+shift+p`}
+                  delay={500}
+                  placement="bottom"
+                >
+                  <Button
+                    onClick={handlePublish}
+                    disabled={publishingIsDisabled}
+                  >
+                    {isPublishing ? `${t("Publishing")}…` : t("Publish")}
+                  </Button>
+                </Tooltip>
+              </Action>
+            )}
+            {!isEditing && (
+              <>
+                {!isDeleted && <Separator />}
+                <Action>
+                  <DocumentMenu
+                    document={document}
+                    isRevision={isRevision}
+                    label={(props) => (
+                      <Button
+                        icon={<MoreIcon />}
+                        iconColor="currentColor"
+                        {...props}
+                        borderOnHover
+                        neutral
+                      />
+                    )}
+                    showToggleEmbeds={canToggleEmbeds}
+                    showDisplayOptions
+                  />
+                </Action>
+              </>
+            )}
           </>
         }
       />