refactor: packages/

3 files changed, 130 insertions, 0 deletions

diff --git a/packages/excalidraw/components/footer/Footer.tsx b/packages/excalidraw/components/footer/Footer.tsx
new file mode 100644
index 0000000..ccbe9ea
--- /dev/null
+++ b/packages/excalidraw/components/footer/Footer.tsx
@@ -0,0 +1,95 @@
+import clsx from "clsx";
+import { actionShortcuts } from "../../actions";
+import type { ActionManager } from "../../actions/manager";
+import {
+  ExitZenModeAction,
+  FinalizeAction,
+  UndoRedoActions,
+  ZoomActions,
+} from "../Actions";
+import { useDevice } from "../App";
+import { useTunnels } from "../../context/tunnels";
+import { HelpButton } from "../HelpButton";
+import { Section } from "../Section";
+import Stack from "../Stack";
+import type { UIAppState } from "../../types";
+
+const Footer = ({
+  appState,
+  actionManager,
+  showExitZenModeBtn,
+  renderWelcomeScreen,
+}: {
+  appState: UIAppState;
+  actionManager: ActionManager;
+  showExitZenModeBtn: boolean;
+  renderWelcomeScreen: boolean;
+}) => {
+  const { FooterCenterTunnel, WelcomeScreenHelpHintTunnel } = useTunnels();
+
+  const device = useDevice();
+  const showFinalize =
+    !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
+
+  return (
+    <footer
+      role="contentinfo"
+      className="layer-ui__wrapper__footer App-menu App-menu_bottom"
+    >
+      <div
+        className={clsx("layer-ui__wrapper__footer-left zen-mode-transition", {
+          "layer-ui__wrapper__footer-left--transition-left":
+            appState.zenModeEnabled,
+        })}
+      >
+        <Stack.Col gap={2}>
+          <Section heading="canvasActions">
+            <ZoomActions
+              renderAction={actionManager.renderAction}
+              zoom={appState.zoom}
+            />
+
+            {!appState.viewModeEnabled && (
+              <UndoRedoActions
+                renderAction={actionManager.renderAction}
+                className={clsx("zen-mode-transition", {
+                  "layer-ui__wrapper__footer-left--transition-bottom":
+                    appState.zenModeEnabled,
+                })}
+              />
+            )}
+            {showFinalize && (
+              <FinalizeAction
+                renderAction={actionManager.renderAction}
+                className={clsx("zen-mode-transition", {
+                  "layer-ui__wrapper__footer-left--transition-left":
+                    appState.zenModeEnabled,
+                })}
+              />
+            )}
+          </Section>
+        </Stack.Col>
+      </div>
+      <FooterCenterTunnel.Out />
+      <div
+        className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
+          "transition-right": appState.zenModeEnabled,
+        })}
+      >
+        <div style={{ position: "relative" }}>
+          {renderWelcomeScreen && <WelcomeScreenHelpHintTunnel.Out />}
+          <HelpButton
+            onClick={() => actionManager.executeAction(actionShortcuts)}
+          />
+        </div>
+      </div>
+      <ExitZenModeAction
+        actionManager={actionManager}
+        showExitZenModeBtn={showExitZenModeBtn}
+      />
+    </footer>
+  );
+};
+
+export default Footer;
+Footer.displayName = "Footer";
diff --git a/packages/excalidraw/components/footer/FooterCenter.scss b/packages/excalidraw/components/footer/FooterCenter.scss
new file mode 100644
index 0000000..ce65659
--- /dev/null
+++ b/packages/excalidraw/components/footer/FooterCenter.scss
@@ -0,0 +1,11 @@
+.footer-center {
+  pointer-events: none;
+  & > * {
+    pointer-events: var(--ui-pointerEvents);
+  }
+
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  margin-inline-end: 0.6rem;
+}
diff --git a/packages/excalidraw/components/footer/FooterCenter.tsx b/packages/excalidraw/components/footer/FooterCenter.tsx
new file mode 100644
index 0000000..55a0fb9
--- /dev/null
+++ b/packages/excalidraw/components/footer/FooterCenter.tsx
@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { useTunnels } from "../../context/tunnels";
+import "./FooterCenter.scss";
+import { useUIAppState } from "../../context/ui-appState";
+
+const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
+  const { FooterCenterTunnel } = useTunnels();
+  const appState = useUIAppState();
+  return (
+    <FooterCenterTunnel.In>
+      <div
+        className={clsx("footer-center zen-mode-transition", {
+          "layer-ui__wrapper__footer-left--transition-bottom":
+            appState.zenModeEnabled,
+        })}
+      >
+        {children}
+      </div>
+    </FooterCenterTunnel.In>
+  );
+};
+
+export default FooterCenter;
+FooterCenter.displayName = "FooterCenter";