From 6b41666efe74ee995a12de3199364f999e137568 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 26 Dec 2022 14:02:05 +0800
Subject: [PATCH] =?UTF-8?q?It's=20time=20to=20toast=20=F0=9F=A5=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 src/app.css       | 30 ++++++++++++++++++++++++++++++
 src/app.jsx       | 16 +++++++++++++++-
 4 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index d469cb1b..ff84b889 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 51551e22..7fc056fb 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/app.css b/src/app.css
index a6e9b582..c5c6270f 100644
--- a/src/app.css
+++ b/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 {
diff --git a/src/app.jsx b/src/app.jsx
index 1e1eb9e5..2be745a9 100644
--- a/src/app.jsx
+++ b/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();
               }
             }}
           />