feat(toast): added toast notifications

added toast notifications for controls to better notify users that action was taken.

Author: cody-molisee

.wxt/types/imports.d.ts

@@ -61,6 +61,7 @@ declare global {
   const lazy: typeof import('solid-js')['lazy']
   const mapArray: typeof import('solid-js')['mapArray']
   const mergeProps: typeof import('solid-js')['mergeProps']
+  const notification: typeof import('/Users/cmolisee/Documents/session-storage-hub/src/utils/utils')['notification']
   const observable: typeof import('solid-js')['observable']
   const on: typeof import('solid-js')['on']
   const onCleanup: typeof import('solid-js')['onCleanup']

package-lock.json

@@ -100,7 +100,8 @@
         "@uiw/codemirror-theme-tokyo-night-storm": "^4.23.6",
         "@webext-core/messaging": "^2.1.0",
         "codemirror": "^6.0.1",
-        "solid-js": "^1.9.3"
+        "solid-js": "^1.9.3",
+        "solid-toast": "^0.5.0"
     },
     "devDependencies": {
         "@semantic-release/changelog": "^6.0.3",

package.json

@@ -4,6 +4,8 @@ import ViewGrid from '@/components/ViewGrid';
 import { storage as wxtStorage } from '@wxt-dev/storage';
 import Tooltip from '@/components/tooltip';
 import { version } from '../../../package.json';
+import { Toaster } from 'solid-toast';
+import { notification } from '@/utils/utils';
 
 function Popup() {
     const { storage, setSessionStorageData, selectAllKeys, unselectAllKeys } = useStorage();
@@ -18,36 +20,44 @@ function Popup() {
         }
 
         await extensionClipboard.setValue(dataToCopy)
+            .then(() => notification('Session Storage Data Copied.'))
             .catch((error) => console.debug('Failed to set extensionClipboard:', error));
     }
 
     const pasteCallback = async () => {
         const dataToPaste = await extensionClipboard.getValue()
+            .then(() => notification('Session Storage Data Pasted.'))
             .catch((error) => console.debug('Failed to get extensionClipboard:', error));
 
         await extensionMessenger.sendMessage('sendToBackground', dataToPaste)
+            .then(() => notification('Session Storage on webpage has been updated.'))
             .catch((error) => console.debug(error));
     }
 
     const addCallback = async () => {
         const newKey = new Date().getTime().toString();
         const dataToAdd = deepCopy(storage.sessionStorageData);
         Object.assign(dataToAdd, { [newKey]: '{}' });
+        notification(`New key-value pair added with key: ${newKey}.`);
 
         await extensionMessenger.sendMessage('sendToBackground', dataToAdd)
+            .then(() => notification('Session Storage on webpage has been updated.'))
             .catch((error) => console.debug(error));
     }
 
     const deleteCallback = async () => {
         const dataUpdate = deepCopy(storage.sessionStorageData);
+        notification(`key: ${storage.activeKey} has been deleted.`);
         delete dataUpdate[storage.activeKey];
 
         await extensionMessenger.sendMessage('sendToBackground', dataUpdate)
+            .then(() => notification('Session Storage on webpage has been updated.'))
             .catch((error) => console.debug(error));
     }
 
     const clearCallback = async () => {
         await extensionMessenger.sendMessage('sendToBackground', {})
+            .then(() => notification('Session Storage has been cleared.'))
             .catch((error) => console.debug(error));
     }
 
@@ -115,6 +125,7 @@ function Popup() {
 				</div>
 			</div>
 			<ViewGrid />
+            <Toaster />
 			<div class={'flex m-1 justify-start text-[var(--borderColor)]'}>
 				<div class={'cursor-default mr-4'}>
 					{version}

src/entrypoints/popup/popup.tsx

@@ -1,4 +1,5 @@
 import { IStorageContext, IStorageShape } from "@/types/hooks";
+import { notification } from "@/utils/utils";
 
 const initialStorage: IStorageShape = {
     sessionStorageData: {},
@@ -74,13 +75,15 @@ export const StorageProvider = (props: any) => {
      * Set selectedKeys in storage to array of all availalbe keys.
      */
 	const selectAllKeys = () => {
+        notification('All keys selected.');
 		setStore('selectedKeys', deepCopy(store.keys) );
 	};
 
     /**
      * Set selectedKeys in storage to empty array.
      */
 	const unselectAllKeys = () => {
+        notification('All keys unselected.');
 		setStore('selectedKeys', []);
 	};
 

src/hooks/useStorage.tsx

@@ -1,3 +1,5 @@
+import toast from "solid-toast";
+
 /**
  * Merge css class strings together.
  * Necessary for tailwind to properly build css since it cannot handle dynamic classes.
@@ -79,4 +81,26 @@ export function safeParse(obj: any, isLogging: boolean = false) {
  */
 export function deepCopy(obj: any) {
     return safeParse(JSON.stringify(obj));
+}
+
+/** Helper for displaying toast notifications. */
+export function notification(txt: string) {
+    toast(txt, {
+        duration: 3000,
+        position: 'bottom-center',
+        unmountDelay: 500,
+        style: {
+            'background-color': 'var(--specialTextColor)',
+            'font-weight': 'bold',
+            'color': 'var(--backgroundColor)'
+        },
+        iconTheme: {
+            primary: '#fff',
+            secondary: '#000',
+        },
+        ariaProps: {
+            role: 'status',
+            'aria-live': 'polite',
+        },
+    });
 }