docs: add message-string-only overload to showToast

contributing.md

@@ -523,7 +523,7 @@ Functions marked with 🔒 need to be passed a per-session and per-plugin authen
 <br>
 
 > #### getPluginInfo()
-> Usage:  
+> Usages:  
 > ```ts
 > unsafeWindow.BYTM.getPluginInfo(token: string | undefined, name: string, namespace: string): PluginInfo | undefined
 > unsafeWindow.BYTM.getPluginInfo(token: string | undefined, pluginDef: { plugin: { name: string, namespace: string } }): PluginInfo | undefined
@@ -1679,15 +1679,17 @@ Functions marked with 🔒 need to be passed a per-session and per-plugin authen
 <br>
 
 > #### showToast()
-> Usage:  
+> Usages:  
 > ```ts
-> unsafeWindow.BYTM.showToast(props: ToastProps): Promise<void>
+> unsafeWindow.BYTM.showToast(props: ToastProps): Promise<void>;
+> unsafeWindow.BYTM.showToast(message: string): Promise<void>;
 > ```
 >   
 > Shows a toast notification with the specified message or element for the given duration and anchored in the specified corner of the viewport.  
 > If a toast is already shown, it will be immediately closed and the new one will be shown shortly afterwards.  
+> If the second overload is used, the duration will default to the value of the `toastDuration` option in the feature config.  
 >   
-> Properties:
+> Properties for first overload:
 > - either of:
 >   - `message: string` - The message to show in the toast
 >   - `element: HTMLElement` and `title: string` - The element to show in the toast and the hover and accessibility title of the toast
@@ -1741,10 +1743,10 @@ Functions marked with 🔒 need to be passed a per-session and per-plugin authen
 <br>
 
 > #### createRipple()
-> Usage:  
+> Usages:  
 > ```ts
 > unsafeWindow.BYTM.createRipple<TElement>(rippleElement: TElement, props?: RippleProps): TElement
-> unsafeWindow.BYTM.createRipple(rippleElement: undefined, props?: RippleProps): HTMLDivElement
+> unsafeWindow.BYTM.createRipple(rippleElement?: undefined, props?: RippleProps): HTMLDivElement
 > ```
 >   
 > Creates a circular, expanding ripple effect on the specified element or creates a new one with the effect already applied if none is provided.  

src/components/toast.ts

@@ -74,12 +74,22 @@ export async function showIconToast({
   });
 }
 
-/** Shows a toast message in the top right corner of the screen by default */
-export async function showToast({
-  duration = getFeature("toastDuration"),
-  position = "tr",
-  ...rest
-}: ToastProps) {
+/** Shows a toast message in the top right corner of the screen by default and uses the default timeout from the config option `toastDuration` */
+export async function showToast(message: string): Promise<void>;
+/** Shows a toast message or element in the top right corner of the screen by default and uses the default timeout from the config option `toastDuration` */
+export async function showToast(props: ToastProps): Promise<void>;
+/** Shows a toast message or element in the specified position (top right corner by default) and uses the default timeout from the config option `toastDuration` */
+export async function showToast(arg: string | ToastProps): Promise<void> {
+  const props: ToastProps = typeof arg === "string"
+    ? { message: arg, duration: getFeature("toastDuration") }
+    : arg;
+
+  const {
+    duration = getFeature("toastDuration"),
+    position = "tr",
+    ...rest
+  } = props;
+
   if(duration <= 0)
     return info("Toast duration is <= 0, so it won't be shown");
   const toastEl = document.querySelector("#bytm-toast");