It's time to toast 🥂

package-lock.json

@@ -20,6 +20,7 @@
         "preact-router": "~4.1.0",
         "react-intersection-observer": "~9.4.1",
         "string-length": "~5.0.1",
+        "toastify-js": "~1.12.0",
         "use-resize-observer": "~9.1.0",
         "valtio": "~1.7.6"
       },
@@ -5104,6 +5105,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toastify-js": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
+      "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
+    },
     "node_modules/tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -9408,6 +9414,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toastify-js": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
+      "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
+    },
     "tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "preact-router": "~4.1.0",
     "react-intersection-observer": "~9.4.1",
     "string-length": "~5.0.1",
+    "toastify-js": "~1.12.0",
     "use-resize-observer": "~9.1.0",
     "valtio": "~1.7.6"
   },

src/app.css

@@ -424,6 +424,14 @@ a.mention span {
   left: 50%;
   transform: translate(-50%, 0);
   font-size: 90%;
+  background: linear-gradient(
+    to bottom,
+    var(--button-bg-blur-color),
+    var(--button-bg-color)
+  );
+  backdrop-filter: blur(16px);
+  box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
+    0 10px 36px -4px var(--button-bg-blur-color);
 }
 .updates-button .icon {
   vertical-align: top;
@@ -739,6 +747,28 @@ meter.donut:is(.danger, .explode):after {
   color: var(--red-color);
 }
 
+/* TOAST */
+
+:root .toastify {
+  background-image: linear-gradient(
+    to bottom,
+    var(--button-bg-blur-color),
+    var(--button-bg-color)
+  );
+  backdrop-filter: blur(16px);
+  color: var(--button-text-color);
+  border-radius: 10em;
+  padding: 8px 16px;
+  box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
+    0 10px 36px -4px var(--button-bg-blur-color);
+}
+:root .toastify:hover {
+  filter: brightness(1.2);
+}
+:root .toastify:active {
+  filter: brightness(0.8);
+}
+
 @media (min-width: 40em) {
   html,
   body {

src/app.jsx

@@ -1,9 +1,11 @@
 import './app.css';
+import 'toastify-js/src/toastify.css';
 
 import { createHashHistory } from 'history';
 import { login } from 'masto';
-import Router from 'preact-router';
+import Router, { route } from 'preact-router';
 import { useEffect, useLayoutEffect, useState } from 'preact/hooks';
+import Toastify from 'toastify-js';
 import { useSnapshot } from 'valtio';
 
 import Account from './components/account';
@@ -382,6 +384,18 @@ export function App() {
               states.showCompose = false;
               if (newStatus) {
                 states.reloadStatusPage++;
+                const toast = Toastify({
+                  text: 'Status posted. Check it out.',
+                  duration: 10_000, // 10 seconds
+                  gravity: 'bottom',
+                  position: 'center',
+                  // destination: `/#/s/${newStatus.id}`,
+                  onClick: () => {
+                    toast.hideToast();
+                    route(`/s/${newStatus.id}`);
+                  },
+                });
+                toast.showToast();
               }
             }}
           />