3 files changed, 115 insertions, 0 deletions
diff --git a/src/app/index.html b/src/app/index.html
index b861736..8222416 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -7,12 +7,14 @@
 	</head>
 	<body>
 		<div id="bgHolder"></div>
+		<div id="toasts"></div>
 
 		<div id="winbtns">
 			<div id="minimize" onclick="ipcRenderer.send('minimize')"></div>
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
 
+
 		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
 			<div id="misc">
@@ -116,6 +118,7 @@
 
 		<script src="lang.js"></script>
 		<script src="main.js"></script>
+		<script src="toast.js"></script>
 		<script src="browser.js"></script>
 		<script src="launcher.js"></script>
 	</body>
diff --git a/src/app/main.css b/src/app/main.css
index 94ef767..14348bd 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -558,6 +558,60 @@ code {
 	margin-bottom: calc(var(--spacing) / 2);
 }
 
+#toasts {
+	position: fixed;
+	z-index: 100000;
+	right: calc(var(--padding) * 1.5);
+	bottom: calc(var(--padding) * 1.5);
+}
+
+@keyframes bodyfadeaway {
+	0% {opacity: 0.0; transform: scale(0.95)}
+	100% {opacity: 1.0; transform: scale(1.0)}
+}
+
+#toasts .toast {
+	width: 300px;
+	opacity: 0.0;
+	cursor: pointer;
+	overflow: hidden;
+	max-height: 100vh;
+	background: #FFFFFF;
+	transform: scale(0.95);
+	transition: 0.2s ease-in-out;
+	padding: calc(var(--padding) / 2);
+	margin-top: calc(var(--padding) / 2);
+	border-radius: calc(var(--padding) / 2.5);
+	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
+
+	animation-duration: 0.2s;
+	animation-iteration-count: 1;
+	animation-name: bodyfadeaway;
+	animation-fill-mode: forwards;
+	animation-timing-function: ease-in-out;
+}
+
+#toasts .toast.hidden {
+	margin-top: 0px;
+	max-height: 0px;
+	padding-top: 0px;
+	padding-bottom: 0px;
+	filter: opacity(0.0);
+	transform: scale(0.95);
+}
+
+#toasts .toast:not(.hidden):hover {filter: opacity(0.9)}
+#toasts .toast:not(.hidden):active {filter: opacity(0.8)}
+
+.toast .title {
+}
+
+.toast .description {
+	opacity: 0.8;
+	font-size: 0.8em;
+	font-weight: 400;
+}
+
 /* drag control */
 
 #bgHolder,
diff --git a/src/app/toast.js b/src/app/toast.js
new file mode 100644
index 0000000..8d78e37
--- /dev/null
+++ b/src/app/toast.js
@@ -0,0 +1,58 @@
+function Toast(properties) {
+	let toast = {
+		fg: "#000000",
+		bg: "#FFFFFF",
+		timeout: 3000,
+		title: "Untitled Toast",
+		description: "No description provided for toast",
+		...properties
+	}
+
+	switch(toast.scheme) {
+		case "error":
+			toast.fg = "#FFFFFF";
+			toast.bg = "var(--red)";
+			break
+		case "success":
+			toast.fg = "#FFFFFF";
+			toast.bg = "#60D394";
+			break
+		case "warning":
+			toast.fg = "#FFFFFF";
+			toast.bg = "#FF9B85";
+			break
+	}
+
+
+	let id = Date.now();
+	let el = document.createElement("div");
+
+	el.classList.add("toast");
+
+	el.style.color = toast.fg;
+	el.style.background = toast.bg;
+
+	el.id = id;
+	el.setAttribute("onclick", `dismissToast(${id})`);
+
+	el.innerHTML = `
+		<div class="title">${toast.title}</div>
+		<div class="description">${toast.description}</div>
+	`
+
+	toasts.appendChild(el);
+
+	setTimeout(() => {
+		dismissToast(id);
+	}, toast.timeout)
+}
+
+function dismissToast(id) {
+	id = document.getElementById(id);
+	if (id) {
+		id.classList.add("hidden");
+		setTimeout(() => {
+			id.remove();
+		}, 500)
+	}
+}