update: add a dismissable alert to the left drawer

webapp/app.ironcalc.com/frontend/src/components/LeftDrawer/DrawerContent.tsx

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import LocalStorageAlert from "./LocalStorageAlert";
 import WorkbookList from "./WorkbookList";
 
 interface DrawerContentProps {
@@ -10,9 +11,14 @@ function DrawerContent(props: DrawerContentProps) {
   const { setModel, onDelete } = props;
 
   return (
+    <>
       <ContentContainer>
         <WorkbookList setModel={setModel} onDelete={onDelete} />
       </ContentContainer>
+      <LocalStorageAlertWrapper>
+        <LocalStorageAlert />
+      </LocalStorageAlertWrapper>
+    </>
   );
 }
 
@@ -22,8 +28,17 @@ const ContentContainer = styled("div")`
   gap: 4px;
   padding: 16px 12px;
   height: 100%;
-  overflow: scroll;
+  overflow-y: auto;
+  overflow-x: hidden;
   font-size: 12px;
 `;
 
+const LocalStorageAlertWrapper = styled("div")`
+  position: absolute;
+  bottom: 56px;
+  left: 0;
+  right: 0;
+  padding: 12px;
+`;
+
 export default DrawerContent;

webapp/app.ironcalc.com/frontend/src/components/LeftDrawer/LocalStorageAlert.tsx

@@ -0,0 +1,110 @@
+import styled from "@emotion/styled";
+import { Alert } from "@mui/material";
+import { CircleAlert, X } from "lucide-react";
+import { useState } from "react";
+
+const ALERT_DISMISSED_KEY = "localStorageAlertDismissed";
+
+function LocalStorageAlert() {
+  const [isAlertVisible, setIsAlertVisible] = useState(
+    () => localStorage.getItem(ALERT_DISMISSED_KEY) !== "true",
+  );
+
+  const handleClose = () => {
+    setIsAlertVisible(false);
+    localStorage.setItem(ALERT_DISMISSED_KEY, "true");
+  };
+
+  if (!isAlertVisible) {
+    return null;
+  }
+
+  return (
+    <AlertWrapper
+      icon={<CircleAlert />}
+      action={
+        <CloseButton onClick={handleClose}>
+          <X />
+        </CloseButton>
+      }
+      sx={{
+        padding: 0,
+        borderRadius: "8px",
+        backgroundColor: "rgba(255, 255, 255, 0.4)",
+        backdropFilter: "blur(10px)",
+        border: "1px solid #e0e0e0",
+        boxShadow: "0px 1px 3px 0px #0000001A",
+        fontFamily: "Inter",
+        fontWeight: "400",
+        lineHeight: "16px",
+        zIndex: 1,
+      }}
+    >
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertBody>
+        IronCalc stores your data only in your browser's local storage.
+      </AlertBody>
+      <AlertBody style={{ fontWeight: "600", margin: "6px 0px 0px 0px" }}>
+        To keep your work safe, please download your XLSX file regularly.
+      </AlertBody>
+    </AlertWrapper>
+  );
+}
+
+const AlertWrapper = styled(Alert)`
+  margin: 0;
+  .MuiAlert-message {
+    font-size: 11px;
+    padding: 12px 12px 12px 6px;
+    color: #333333;
+  }
+  .MuiAlert-icon {
+    height: 12px;
+    width: 12px;
+    color: #f2994a;
+    margin: 2px 0px 0px 8px;
+    padding: 6px 0px;
+  }
+`;
+
+const AlertTitle = styled("h2")`
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  color: #333333;
+  margin: 0px 0px 4px 0px;
+`;
+
+const AlertBody = styled("p")`
+  font-weight: 400;
+  line-height: 16px;
+  margin: 0;
+`;
+
+const CloseButton = styled("button")`
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  color: #666666;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+  &:hover {
+    background-color: #e0e0e0;
+  }
+  &:active {
+    background-color: #9e9e9e;
+  }
+`;
+
+export default LocalStorageAlert;