diff --git a/package-lock.json b/package-lock.json index d469cb1..ff84b88 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 51551e2..7fc056f 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 a6e9b58..c5c6270 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 1e1eb9e..2be745a 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(); } }} />