From 34debbe73ff6c260d5189f61c59b1f9955642983 Mon Sep 17 00:00:00 2001
From: M-DEV-1 <mahadevankizhakkedathu@gmail.com>
Date: Mon, 28 Apr 2025 19:42:07 +0530
Subject: [PATCH] add: copy-to-clipboard with notification stack

Signed-off-by: M-DEV-1 <mahadevankizhakkedathu@gmail.com>
---
 site/package-lock.json                        | 340 ++++++++++++++++++
 site/package.json                             |   1 +
 site/src/components/ShapeBuilder/index.js     |  25 +-
 .../components/utils/notification-handlers.js |  64 ++++
 site/src/pages/index.js                       |  23 +-
 site/src/styles/theme.styles.js               |  84 +++++
 6 files changed, 525 insertions(+), 12 deletions(-)
 create mode 100644 site/src/components/utils/notification-handlers.js
 create mode 100644 site/src/styles/theme.styles.js

diff --git a/site/package-lock.json b/site/package-lock.json
index d5aaa49..b51b6cc 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -13,6 +13,7 @@
         "babel-plugin-styled-components": "^2.1.4",
         "gatsby": "^5.14.0",
         "gatsby-plugin-styled-components": "^6.14.0",
+        "notistack": "^3.0.2",
         "path-browserify": "^1.0.1",
         "process": "^0.11.10",
         "react": "^18.2.0",
@@ -4869,6 +4870,215 @@
       "integrity": "sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw==",
       "license": "MIT"
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
+      "integrity": "sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/experimental-utils": "4.33.0",
+        "@typescript-eslint/scope-manager": "4.33.0",
+        "debug": "^4.3.1",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.1.8",
+        "regexpp": "^3.1.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^4.0.0",
+        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/experimental-utils": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz",
+      "integrity": "sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.7",
+        "@typescript-eslint/scope-manager": "4.33.0",
+        "@typescript-eslint/types": "4.33.0",
+        "@typescript-eslint/typescript-estree": "4.33.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/experimental-utils/node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz",
+      "integrity": "sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "4.33.0",
+        "@typescript-eslint/types": "4.33.0",
+        "@typescript-eslint/typescript-estree": "4.33.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz",
+      "integrity": "sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/types": "4.33.0",
+        "@typescript-eslint/visitor-keys": "4.33.0"
+      },
+      "engines": {
+        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.33.0.tgz",
+      "integrity": "sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz",
+      "integrity": "sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/types": "4.33.0",
+        "@typescript-eslint/visitor-keys": "4.33.0",
+        "debug": "^4.3.1",
+        "globby": "^11.0.3",
+        "is-glob": "^4.0.1",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz",
+      "integrity": "sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/types": "4.33.0",
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@vercel/webpack-asset-relocator-loader": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/@vercel/webpack-asset-relocator-loader/-/webpack-asset-relocator-loader-1.7.3.tgz",
@@ -5024,6 +5234,26 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@xstate/react": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@xstate/react/-/react-5.0.3.tgz",
+      "integrity": "sha512-Zdnn0VTPcVdoaAiW0OX6Nkvdoe7SNGjfaZqM61NKhjt2aNULqiicmDu2tOd1ChzlRWYDxGTdbzVqqVyMLpoHJw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.2",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "xstate": "^5.19.2"
+      },
+      "peerDependenciesMeta": {
+        "xstate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -5657,6 +5887,38 @@
       "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==",
       "license": "Apache-2.0"
     },
+    "node_modules/babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "eslint": ">= 4.12.1"
+      }
+    },
+    "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/babel-jsx-utils": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz",
@@ -11230,6 +11492,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -13614,6 +13885,36 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/notistack": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.2.tgz",
+      "integrity": "sha512-0R+/arLYbK5Hh7mEfR2adt0tyXJcCC9KkA2hc56FeWik2QN6Bm/S4uW+BjzDARsJth5u06nTjelSw/VSnB1YEA==",
+      "dependencies": {
+        "clsx": "^1.1.0",
+        "goober": "^2.0.33"
+      },
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/notistack"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/notistack/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -18268,6 +18569,20 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/ua-parser-js": {
       "version": "1.0.40",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.40.tgz",
@@ -18542,6 +18857,31 @@
       "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
       "license": "MIT"
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz",
+      "integrity": "sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/site/package.json b/site/package.json
index 6a5abad..3b8ac8a 100644
--- a/site/package.json
+++ b/site/package.json
@@ -20,6 +20,7 @@
     "babel-plugin-styled-components": "^2.1.4",
     "gatsby": "^5.14.0",
     "gatsby-plugin-styled-components": "^6.14.0",
+    "notistack": "^3.0.2",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
diff --git a/site/src/components/ShapeBuilder/index.js b/site/src/components/ShapeBuilder/index.js
index 439bdce..cf4edde 100644
--- a/site/src/components/ShapeBuilder/index.js
+++ b/site/src/components/ShapeBuilder/index.js
@@ -1,13 +1,14 @@
 // /* global window */
 import React, { useEffect, useRef, useState } from "react";
-import { Wrapper, CanvasContainer, OutputBox, StyledSVG } from "./shapeBuilder.styles";
-import { Button, Typography, Box } from "@layer5/sistent";
-
+import { Wrapper, CanvasContainer, StyledSVG } from "./shapeBuilder.styles";
+import { Button, Box } from "@layer5/sistent";
+import { useNotificationHandlers } from "../utils/notification-handlers"
 // import { useTheme } from "@layer5/sistent/components/ThemeProvider";
 // import { useMediaQuery } from "@layer5/sistent/components/MediaQuery";
 
 
 const ShapeBuilder = () => {
+  const { handleError, handleSuccess } = useNotificationHandlers();
   const boardRef = useRef(null);
   const polyRef = useRef(null);
   const keyHandlersRef = useRef({});
@@ -137,6 +138,16 @@ const ShapeBuilder = () => {
     showCytoArray();
   };
 
+  const copyToClipboard = () => {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(result).then(() => {
+        handleSuccess("Coordinates copied to clipboard!");
+      }).catch(err => {
+        handleError("Failed to copy to clipboard: " + err);
+      });
+    }
+  };
+
   useEffect(() => {
     const checkSVG = () => {
       if (!window.SVG || !window.SVG.Element.prototype.draw) {
@@ -202,13 +213,7 @@ const ShapeBuilder = () => {
         <Button variant="contained" onClick={closeShape}>Close Shape</Button>
         <Button variant="contained" onClick={handleMaximize}>Maximize</Button>
       </Box>
-
-      <OutputBox>
-        <Typography variant="subtitle1" component="h6">
-          Polygon Coordinates (SVG format):
-        </Typography>
-        <textarea readOnly value={result} />
-      </OutputBox>
+      <Button variant="contained" onClick={copyToClipboard}>Copy To Clipboard</Button>
     </Wrapper>
   );
 };
diff --git a/site/src/components/utils/notification-handlers.js b/site/src/components/utils/notification-handlers.js
new file mode 100644
index 0000000..1ddcfac
--- /dev/null
+++ b/site/src/components/utils/notification-handlers.js
@@ -0,0 +1,64 @@
+// utils/notification-handlers.js
+import { IconButton } from "@layer5/sistent";
+import CloseIcon from "@mui/icons-material/Close";
+import { useSnackbar } from "notistack";
+import React, { useCallback } from "react";
+
+export const useNotificationHandlers = () => {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+
+  const handleNotification = useCallback(
+    (type, msg) => {
+      let message = typeof msg === "string" ? msg : msg?.response?.data;
+      enqueueSnackbar(message, {
+        variant: type,
+        action: key => (
+          <IconButton
+            key="close"
+            aria-label="Close"
+            color="inherit"
+            onClick={() => closeSnackbar(key)}
+          >
+            <CloseIcon />
+          </IconButton>
+        ),
+        autoHideDuration: 8000,
+        style: {
+          display: "flex",
+          flexWrap: "nowrap"
+        }
+      });
+    },
+    [enqueueSnackbar, closeSnackbar]
+  );
+
+  const handleSuccess = useCallback(
+    message => {
+      handleNotification("success", message);
+    },
+    [handleNotification]
+  );
+
+  const handleError = useCallback(
+    message => {
+      handleNotification("error", message);
+    },
+    [handleNotification]
+  );
+
+  const handleInfo = useCallback(
+    message => {
+      handleNotification("info", message);
+    },
+    [handleNotification]
+  );
+
+  const handleWarn = useCallback(
+    message => {
+      handleNotification("warning", message);
+    },
+    [handleNotification]
+  );
+
+  return { handleSuccess, handleError, handleInfo, handleWarn };
+};
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
index a512b3f..cb79125 100644
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@@ -5,8 +5,11 @@ import { useDarkMode } from "../components/useDarkMode";
 import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import ShapeBuilder from "../components/ShapeBuilder";
-import { Button, SistentThemeProviderWithoutBaseLine, Box } from "@layer5/sistent"
+import { Button, SistentThemeProviderWithoutBaseLine, Box, SistentThemeProvider } from "@layer5/sistent"
 import InstructionsModal from "../components/utils/instructionsModal";
+import { SnackbarProvider } from "notistack";
+import { CheckCircle, Error, Info, Warning } from "@mui/icons-material";
+import { ThemeResponsiveSnackbar } from "../styles/theme.styles";
 
 const IndexPage = () => {
   // const themesistent = useTheme();
@@ -16,6 +19,21 @@ const IndexPage = () => {
 
   return (
     <SistentThemeProviderWithoutBaseLine>
+      <SnackbarProvider
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        iconVariant={{
+          success: <CheckCircle style={{ marginRight: "1rem" }} />,
+          error: <Error style={{ marginRight: "1rem" }} />,
+          warning: <Warning style={{ marginRight: "1rem" }} />,
+          info: <Info style={{ marginRight: "1rem" }} />
+        }}
+        Components={{
+          info: ThemeResponsiveSnackbar,
+          success: ThemeResponsiveSnackbar,
+          error: ThemeResponsiveSnackbar,
+          warning: ThemeResponsiveSnackbar
+        }}
+        maxSnack={5}>
       <ThemeProvider theme={themeMode}>
         <GlobalStyle />
         <Navigation theme={theme} toggleTheme={toggleTheme} />
@@ -39,7 +57,8 @@ const IndexPage = () => {
           <ShapeBuilder />
         </Main>
         <Footer />
-      </ThemeProvider>
+        </ThemeProvider>
+      </SnackbarProvider>
     </SistentThemeProviderWithoutBaseLine>
   );
 };
diff --git a/site/src/styles/theme.styles.js b/site/src/styles/theme.styles.js
new file mode 100644
index 0000000..cbecd5d
--- /dev/null
+++ b/site/src/styles/theme.styles.js
@@ -0,0 +1,84 @@
+import {
+    BasicMarkdown,
+    Box,
+    CircularProgress,
+    lighten,
+    styled,
+    useTheme
+} from "@layer5/sistent";
+import { CheckCircle, Error, Info, Warning } from "@mui/icons-material";
+import { SnackbarContent } from "notistack";
+import React, { forwardRef } from "react";
+
+const StyledCircularProgress = styled(CircularProgress)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    marginRight: "0.75rem",
+    height: "1.5rem !important",
+    width: "1.5rem !important"
+}));
+
+export const ThemeResponsiveSnackbar = forwardRef((props, forwardedRef) => {
+    const theme = useTheme();
+    const { variant = "info", message, action, key } = props;
+
+    // Function to determine the icon based on variant
+    const getIcon = () => {
+        const iconProps = { style: { marginRight: "0.5rem" } };
+        switch (variant) {
+            case "error":
+                return <Error {...iconProps} />;
+            case "success":
+                return <CheckCircle {...iconProps} />;
+            case "warning":
+                return <Warning {...iconProps} />;
+            case "info":
+                return <Info {...iconProps} />;
+            case "loading":
+                return <StyledCircularProgress />;
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <StyledSnackbarContent ref={forwardedRef} variant={variant} theme={theme}>
+            <div
+                style={{
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "0.5rem 1rem",
+                    width: "100%"
+                }}
+            >
+                {getIcon()}
+                <BasicMarkdown content={message} />
+                <Box marginLeft={"auto"} paddingLeft={"0.5rem"}>
+                    {action && action(key)}
+                </Box>
+            </div>
+        </StyledSnackbarContent>
+    );
+});
+
+ThemeResponsiveSnackbar.displayName = "ThemeResponsiveSnackbar";
+
+export const StyledSnackbarContent = styled(SnackbarContent)(({ theme, variant }) => {
+    const notificationColors = {
+        success: theme.palette.text.success,
+        info: theme.palette.text.info,
+        warning: theme.palette.text.warning,
+        error: theme.palette.text.error
+    };
+
+    const baseColor = notificationColors[variant] || notificationColors.info;
+    const backgroundColor =
+        theme.palette.mode === "light" ? lighten(baseColor || "#323232", 0.95) : "#323232";
+
+    return {
+        backgroundColor,
+        color: baseColor,
+        pointerEvents: "auto",
+        borderRadius: "0.3rem",
+        boxShadow: `0 0px 4px ${theme.palette.background.tabs}`
+    };
+});