feat: add dismissible banner and update layout adjustments

Author: AykutSarac

src/features/Banner.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { Anchor, Flex, Button } from "@mantine/core";
+import { Anchor, Flex, Button, ActionIcon } from "@mantine/core";
+import { useSessionStorage } from "@mantine/hooks";
+import { MdClose } from "react-icons/md";
 
 export const BANNER_HEIGHT =
   process.env.NEXT_PUBLIC_DISABLE_EXTERNAL_MODE === "true" ? "0px" : "40px";
@@ -19,8 +21,14 @@ export const Banner = () => {
 
   const [index, setIndex] = useState(0);
   const [visible, setVisible] = useState(true);
+  const [dismissed, setDismissed] = useSessionStorage({
+    key: "jsoncrack_banner_dismissed",
+    defaultValue: false,
+  });
 
   useEffect(() => {
+    if (dismissed) return;
+
     let fadeTimeout: ReturnType<typeof setTimeout> | undefined;
     const intervalId = setInterval(() => {
       setVisible(false);
@@ -34,14 +42,23 @@ export const Banner = () => {
       clearInterval(intervalId);
       if (fadeTimeout) clearTimeout(fadeTimeout);
     };
-  }, []);
+  }, [dismissed]);
+
+  const handleDismiss = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDismissed(true);
+  };
+
+  if (dismissed) return null;
 
   return (
     <Anchor
       href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=top_banner"
       target="_blank"
       rel="noopener"
       underline="never"
+      style={{ position: "relative" }}
     >
       <Flex
         h={BANNER_HEIGHT}
@@ -67,6 +84,19 @@ export const Banner = () => {
         <Button size="xs" color="gray">
           Try now
         </Button>
+        <ActionIcon
+          onClick={handleDismiss}
+          size="sm"
+          variant="transparent"
+          style={{
+            position: "absolute",
+            right: "8px",
+            color: "black",
+          }}
+          aria-label="Close banner"
+        >
+          <MdClose size={18} />
+        </ActionIcon>
       </Flex>
     </Anchor>
   );

src/features/editor/TextEditor.tsx

@@ -4,7 +4,6 @@ import styled from "styled-components";
 import Editor, { type EditorProps, loader, type OnMount, useMonaco } from "@monaco-editor/react";
 import useConfig from "../../store/useConfig";
 import useFile from "../../store/useFile";
-import { BANNER_HEIGHT } from "../Banner";
 
 loader.config({
   paths: {
@@ -105,7 +104,7 @@ const StyledEditorWrapper = styled.div`
 
 const StyledWrapper = styled.div`
   display: grid;
-  height: ${`calc(100vh - 67px - ${BANNER_HEIGHT})`};
+  height: 100%;
   grid-template-columns: 100%;
   grid-template-rows: minmax(0, 1fr);
 `;

src/features/editor/views/GraphView/index.tsx

@@ -8,7 +8,6 @@ import { Canvas } from "reaflow";
 import type { ElkRoot } from "reaflow/dist/layout/useLayout";
 import { useLongPress } from "use-long-press";
 import useConfig from "../../../../store/useConfig";
-import { BANNER_HEIGHT } from "../../../Banner";
 import { CustomEdge } from "./CustomEdge";
 import { CustomNode } from "./CustomNode";
 import { NotSupported } from "./NotSupported";
@@ -18,9 +17,8 @@ import { ZoomControl } from "./ZoomControl";
 import useGraph from "./stores/useGraph";
 
 const StyledEditorWrapper = styled.div<{ $widget: boolean; $showRulers: boolean }>`
-  position: absolute;
   width: 100%;
-  height: ${({ $widget }) => ($widget ? "100vh" : `calc(100vh - 40px - ${BANNER_HEIGHT})`)};
+  height: 100vh;
 
   --bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
   --line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};

src/pages/editor.tsx

@@ -11,7 +11,7 @@ import "allotment/dist/style.css";
 import { NextSeo } from "next-seo";
 import { SEO } from "../constants/seo";
 import { darkTheme, lightTheme } from "../constants/theme";
-import { Banner, BANNER_HEIGHT } from "../features/Banner";
+import { Banner } from "../features/Banner";
 import { BottomBar } from "../features/editor/BottomBar";
 import { FullscreenDropzone } from "../features/editor/FullscreenDropzone";
 import { Toolbar } from "../features/editor/Toolbar";
@@ -32,6 +32,8 @@ const queryClient = new QueryClient({
 });
 
 export const StyledPageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   height: 100vh;
   width: 100%;
 
@@ -50,7 +52,6 @@ export const StyledEditor = styled(Allotment)`
   position: relative !important;
   display: flex;
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  height: ${`calc(100vh - 40px - ${BANNER_HEIGHT})`};
 
   @media only screen and (max-width: 320px) {
     height: 100vh;