Added toast service

src/assets/scss/radix/_toast.scss

@@ -0,0 +1,91 @@
+.toast-viewport {
+    --viewport-padding: 25px;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    padding: var(--viewport-padding);
+    gap: 10px;
+    width: 390px;
+    max-width: 100vw;
+    margin: 0;
+    list-style: none;
+    z-index: 2147483647;
+    outline: none;
+}
+
+.toast-root {
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    padding: 15px;
+    display: grid;
+    grid-template-areas: 'title action' 'description action';
+    grid-template-columns: auto max-content;
+    column-gap: 15px;
+    align-items: center;
+}
+.toast-root[data-state='open'] {
+    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.toast-root[data-state='closed'] {
+    animation: hide 100ms ease-in;
+}
+.toast-root[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+}
+.toast-root[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+}
+.toast-root[data-swipe='end'] {
+    animation: swipeOut 100ms ease-out;
+}
+
+@keyframes hide {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes swipeOut {
+    from {
+        transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+    to {
+        transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+}
+
+.toast-title {
+    grid-area: title;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: var(--slate-12);
+    font-size: 15px;
+}
+
+.toast-description {
+    grid-area: description;
+    margin: 0;
+    color: var(--slate-11);
+    font-size: 13px;
+    line-height: 1.3;
+}
+
+.toast-action {
+    grid-area: action;
+}

src/assets/scss/theme.scss

@@ -9,6 +9,8 @@
 @use 'card';
 @use 'map';
 
+@use 'radix/toast';
+
 :root {
     --white: #fff;
     --black: #111;

src/components/maps/MapOverlay.astro

@@ -7,6 +7,7 @@ import type { MapOverlayProps } from "@/types/Map";
 import SearchMarkers from "./overlay/SearchMarkers.vue";
 import LangSwitcher from "./overlay/LangSwitcher.vue";
 import MapOverlayBreadcrumbs from "./MapOverlayBreadcrumbs.astro";
+import ToastService from "./overlay/ToastService.vue";
 
 interface Props extends MapOverlayProps {}
 
@@ -50,6 +51,8 @@ const currentUrl = Astro.url
     }
 </div>
 
+<ToastService client:only="vue" />
+
 <style lang="scss">
 .world-overlay {
     position: absolute;

src/components/maps/overlay/ToastService.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { isVNode } from "vue"
+import { useToast } from './useToast.ts'
+import { ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport } from 'radix-vue'
+
+const { toasts } = useToast()
+
+function handleUpdate(id: string) {
+    toasts.value.forEach((t, i) => {
+        if (t.id === id) {
+            t.open = false
+
+            setTimeout(() => {
+                toasts.value.splice(i, 1)
+            }, 3000)
+        }
+    })
+}
+</script>
+
+<template>
+    <ToastProvider>
+        <ToastRoot
+            class="toast-root"
+            v-for="toast in toasts"
+            :key="toast.id"
+            v-bind="toast"
+            @update:open="handleUpdate(toast.id)"
+        >
+            <ToastTitle class="toast-title" v-if="toast.title">
+                {{ toast.title }}
+            </ToastTitle>
+            <template v-if="toast.description">
+                <ToastDescription class="toast-description" v-if="isVNode(toast.description)">
+                    <component :is="toast.description" />
+                </ToastDescription>
+                <ToastDescription v-else class="toast-description">
+                    {{ toast.description }}
+                </ToastDescription>
+            </template>
+        </ToastRoot>
+
+        <ToastViewport class="toast-viewport"/>
+    </ToastProvider>
+</template>

src/components/maps/overlay/useToast.ts

@@ -0,0 +1,175 @@
+import { computed, ref } from "vue"
+import type { Component, VNode } from "vue"
+import type { ToastRootProps } from "radix-vue"
+
+const TOAST_LIMIT = 3
+const TOAST_REMOVE_DELAY = 1000000
+
+export interface ToastProps extends ToastRootProps {
+    onOpenChange?: ((value: boolean) => void) | undefined
+}
+
+export enum ToastLifetime {
+  SHORT = 2000,
+  MEDIUM = 3500,
+  LONG = 6000,
+}
+
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode)
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: string
+  description?: StringOrVNode
+  action?: Component
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+    type: ActionType["ADD_TOAST"]
+    toast: ToasterToast
+  }
+  | {
+    type: ActionType["UPDATE_TOAST"]
+    toast: Partial<ToasterToast>
+  }
+  | {
+    type: ActionType["DISMISS_TOAST"]
+    toastId?: ToasterToast["id"]
+  }
+  | {
+    type: ActionType["REMOVE_TOAST"]
+    toastId?: ToasterToast["id"]
+  }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+function addToRemoveQueue(toastId: string) {
+  if (toastTimeouts.has(toastId))
+    return
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+const state = ref<State>({
+  toasts: [],
+})
+
+function dispatch(action: Action) {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)
+      break
+
+    case actionTypes.UPDATE_TOAST:
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t,
+      )
+      break
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action
+
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      }
+      else {
+        state.value.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === toastId || toastId === undefined
+          ? {
+            ...t,
+            open: false,
+          }
+          : t,
+      )
+      break
+    }
+
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined)
+        state.value.toasts = []
+      else
+        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
+
+      break
+  }
+}
+
+function useToast() {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  }
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast(props: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id },
+    })
+
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open)
+          dismiss()
+      },
+    },
+  })
+
+  return {
+    id,
+    dismiss,
+    update,
+  }
+}
+
+export { toast, useToast }