From 15f344fe4af53e479ac9775bf66524af8106606c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 24 Sep 2025 22:40:03 +0300
Subject: [PATCH] feat(toast): improve layout for toasts without title

---
 apps/client/src/services/toast.ts             | 36 ++++++++++++-------
 apps/client/src/stylesheets/style.css         | 20 +++++++++++
 .../src/stylesheets/theme-next/base.css       | 19 ++++++++++
 3 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/services/toast.ts b/apps/client/src/services/toast.ts
index 66b3f7f50..f275e625b 100644
--- a/apps/client/src/services/toast.ts
+++ b/apps/client/src/services/toast.ts
@@ -4,7 +4,7 @@ import utils from "./utils.js";
 export interface ToastOptions {
     id?: string;
     icon: string;
-    title: string;
+    title?: string;
     message: string;
     delay?: number;
     autohide?: boolean;
@@ -12,20 +12,32 @@ export interface ToastOptions {
 }
 
 function toast(options: ToastOptions) {
-    const $toast = $(
-        `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-            <div class="toast-header">
-                <strong class="me-auto">
+    const $toast = $(options.title
+        ? `\
+            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+                <div class="toast-header">
+                    <strong class="me-auto">
+                        <span class="bx bx-${options.icon}"></span>
+                        <span class="toast-title"></span>
+                    </strong>
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+                <div class="toast-body"></div>
+            </div>`
+        : `
+            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+                <div class="toast-icon">
                     <span class="bx bx-${options.icon}"></span>
-                    <span class="toast-title"></span>
-                </strong>
-                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-            </div>
-            <div class="toast-body"></div>
-        </div>`
+                </div>
+                <div class="toast-body"></div>
+                <div class="toast-header">
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+            </div>`
     );
 
-    $toast.find(".toast-title").text(options.title);
+    $toast.toggleClass("no-title", !options.title);
+    $toast.find(".toast-title").text(options.title ?? "");
     $toast.find(".toast-body").html(options.message);
 
     if (options.id) {
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 5f1e49a4f..ee6a6d081 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -1141,6 +1141,26 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     overflow: hidden;
 }
 
+.toast.no-title {
+    display: flex;
+    flex-direction: row;
+}
+
+.toast.no-title .toast-icon {
+    display: flex;
+    align-items: center;
+    padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
+}
+
+.toast.no-title .toast-body {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.toast.no-title .toast-header {
+    background-color: unset !important;
+}
+
 .ck-mentions .ck-button {
     font-size: var(--detail-font-size) !important;
     padding: 5px;
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index f213d98c1..0a29ab689 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -342,7 +342,10 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 
 #toast-container .toast .toast-header .btn-close {
     margin: 0 0 0 12px;
+}
 
+#toast-container .toast.no-title {
+    flex-direction: row;
 }
 
 #toast-container .toast .toast-body {
@@ -350,6 +353,22 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     overflow: hidden;
     text-overflow: ellipsis;
     padding-top: 0;
+    color: var(--muted-text-color);
+}
+
+#toast-container .toast:not(.no-title) .bx {
+    margin-right: 0.5em;
+    font-size: 1.1em;
+}
+
+#toast-container .toast.no-title .bx {
+    margin-right: 0;
+    font-size: 1.3em;
+}
+
+#toast-container .toast.no-title .toast-body {
+    padding-top: var(--bs-toast-padding-x);
+    color: var(--toast-text-color);
 }
 
 /*