refactor: ♻️ Refactor toaster code for more accessibility and better UI

components/loading.vue

@@ -10,15 +10,7 @@
 
 <script lang="ts" setup>
 const loading = ref(true);
-const oidcError = useRequestURL().searchParams.get(
+const params = useUrlSearchParams();
-    "oidc_account_linking_error",
-);
-const oidcErrorDesc = useRequestURL().searchParams.get(
-    "oidc_account_linking_error_message",
-);
-const oidcAccountLinked = useRequestURL().searchParams.get(
-    "oidc_account_linked",
-);
 
 const estimatedProgress = (duration: number, elapsed: number) =>
     (2 / Math.PI) * 100 * Math.atan(((elapsed / duration) * 100) / 50);
@@ -39,39 +31,41 @@ app.hook("page:finish", async () => {
     await new Promise((resolve) => setTimeout(resolve, 300));
     loading.value = false;
 
-    if (oidcError) {
+    if (params.oidc_account_linking_error) {
         useEvent("notification:new", {
             type: "error",
-            title: oidcError,
+            title: params.oidc_account_linking_error,
-            message: oidcErrorDesc ?? undefined,
+            description: params.oidc_account_linking_error_message ?? undefined,
-            persistent: true,
+            duration: 999999,
-            onDismiss: () => {
+            onStatusChange: (details) => {
+                if (details.status === "dismissing") {
                     // Remove data from URL
                     window.history.replaceState(
                         {},
                         document.title,
                         window.location.pathname,
                     );
+                }
             },
         });
-
-        // Remove the error from the URL
     }
 
-    if (oidcAccountLinked) {
+    if (params.oidc_account_linked) {
         useEvent("notification:new", {
             type: "success",
             title: "Account linked",
-            message:
+            description:
                 "Your account has been successfully linked to your OpenID Connect provider.",
-            persistent: true,
+            duration: 999999,
-            onDismiss: () => {
+            onStatusChange: (details) => {
+                if (details.status === "dismissing") {
                     // Remove data from URL
                     window.history.replaceState(
                         {},
                         document.title,
                         window.location.pathname,
                     );
+                }
             },
         });
     }

components/notifications/Renderer.vue

@@ -1,71 +1,42 @@
 <template>
     <Teleport to="body">
-        <div aria-live="assertive"
+        <Toaster :toaster="toaster" v-slot="toast">
-            class="pointer-events-none fixed inset-0 flex items-end px-4 pt-6 pb-24 sm:pb-6 sm:items-start sm:p-6 z-50">
+            <Toast.Root
-            <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+                class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-dark-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
-                <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
+                <div class="grid grid-cols-[auto_1fr_auto]">
-                <TransitionGroup enter-active-class="transform ease-out duration-300 transition"
-                    enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-                    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-                    leave-active-class="transition transform ease-in duration-100"
-                    leave-from-class="translate-y-0 opacity-100 sm:translate-x-0"
-                    leave-to-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2">
-                    <div v-for="notification in notifications" :key="notification.id"
-                        class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-dark-500 shadow-lg ring-1 ring-white/10">
-                        <div class="p-4">
-                            <div class="flex items-start">
                     <div class="shrink-0 h-6 w-6">
-                                    <iconify-icon v-if="notification.type === 'success'" icon="tabler:check"
+                        <iconify-icon v-if="toast.type === 'success'" icon="tabler:check" height="none"
-                                        height="none" class="h-6 w-6 text-green-400" aria-hidden="true" />
+                            class="h-6 w-6 text-green-400" aria-hidden="true" />
-                                    <iconify-icon v-else-if="notification.type === 'error'" icon="tabler:alert-triangle"
+                        <iconify-icon v-else-if="toast.type === 'error'" icon="tabler:alert-triangle" height="none"
-                                        height="none" class="h-6 w-6 text-red-400" aria-hidden="true" />
+                            class="h-6 w-6 text-red-400" aria-hidden="true" />
-                                    <iconify-icon v-else-if="notification.type === 'progress'" icon="tabler:loader"
+                        <iconify-icon v-else-if="toast.type === 'progress'" icon="tabler:loader" height="none"
-                                        height="none" class="h-6 w-6 text-primary-500 animate-spin"
+                            class="h-6 w-6 text-primary-500 animate-spin" aria-hidden="true" />
-                                        aria-hidden="true" />
+                        <iconify-icon v-else-if="toast.type === 'info'" icon="tabler:info-circle" height="none"
+                            class="h-6 w-6 text-blue-500" aria-hidden="true" />
                     </div>
-                                <div class="ml-3 w-0 flex-1 pt-0.5">
+                    <div class="ml-3 flex-1 pt-0.5 shrink-0 min-w-48">
-                                    <p class="text-sm font-semibold text-gray-50">{{ notification.title }}</p>
+                        <Toast.Title class="text-sm font-semibold text-gray-50">{{ toast.title }}</Toast.Title>
-                                    <p class="mt-1 text-sm text-gray-400" v-if="notification.message">{{
+                        <Toast.Description class="mt-1 text-sm text-gray-400">{{
-                        notification.message }}</p>
+                            toast.description }}</Toast.Description>
                     </div>
-                                <div class="ml-4 flex flex-shrink-0">
+                    <div class="ml-4 flex shrink-0">
-                                    <button type="button" title="Close this notification"
+                        <Toast.CloseTrigger type="button" title="Close this notification"
-                                        @click="notifications.splice(notifications.indexOf(notification), 1); notification.onDismiss?.()"
                             class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
                             <iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
-                                    </button>
+                        </Toast.CloseTrigger>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </TransitionGroup>
                     </div>
                 </div>
+            </Toast.Root>
+        </Toaster>
     </Teleport>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="tsx">
-const notifications = ref<
+import { Toast, Toaster, createToaster } from "@ark-ui/vue";
-    (NotificationEvent & {
-        id: string;
-    })[]
->([]);
 
-useListen("notification:new", (n) => {
+const toaster = createToaster({ placement: "top-end", overlap: true, gap: 24 });
-    const newNotification = {
-        ...n,
-        id: Math.random().toString(36).substring(7),
-    };
 
-    notifications.value.push(newNotification);
+useListen("notification:new", (notification) => {
-
+    toaster.create(notification);
-    !newNotification.persistent &&
-        setTimeout(() => {
-            notifications.value.splice(
-                notifications.value.indexOf(newNotification),
-                1,
-            );
-            newNotification.onDismiss?.();
-        }, 5000);
 });
 </script>

components/settings/oidc.vue

@@ -51,7 +51,7 @@ const link = async (providerId: string) => {
 
         useEvent("notification:new", {
             title: "Failed to link account",
-            message: e.response.data.error,
+            description: e.response.data.error,
             type: "error",
         });
     }
@@ -78,7 +78,7 @@ const unlink = async (providerId: string) => {
 
         useEvent("notification:new", {
             title: "Failed to unlink account",
-            message: e.response.data.error,
+            description: e.response.data.error,
             type: "error",
         });
     }

components/settings/profile-editor.vue

@@ -112,7 +112,7 @@ const save = async () => {
 
         useEvent("notification:new", {
             title: "Failed to update profile",
-            message: error.response.data.error,
+            description: error.response.data.error,
             type: "error",
         });
     }

components/sidebars/navigation.vue

@@ -222,7 +222,7 @@ const signOut = async (id?: string) => {
     await useEvent("notification:new", {
         type: "success",
         title: "Signed out",
-        message: "Account signed out successfully",
+        description: "Account signed out successfully",
     });
 };
 </script>

composables/CacheRefresh.ts

@@ -29,7 +29,7 @@ export const useCacheRefresh = (client: MaybeRef<LysandClient | null>) => {
                         useEvent("notification:new", {
                             type: "error",
                             title: "Your session has expired",
-                            message:
+                            description:
                                 "You have been logged out. Please log in again.",
                         });
                     }

composables/Client.ts

@@ -17,7 +17,7 @@ export const useClient = (
                     useEvent("notification:new", {
                         title: "An error occured",
                         type: "error",
-                        message:
+                        description:
                             error.response.data.error ??
                             "No error message provided",
                     });

composables/EventBus.ts

@@ -1,14 +1,11 @@
+import type { createToaster } from "@ark-ui/vue";
 import type { Attachment, Status } from "@lysand-org/client/types";
 import mitt from "mitt";
 import type { Identity } from "./Identities";
 
-export type NotificationEvent = {
+export type NotificationEvent = Parameters<
-    type: "error" | "success" | "progress";
+    ReturnType<typeof createToaster>["create"]
-    title: string;
+>[0];
-    message?: string;
-    persistent?: boolean;
-    onDismiss?: () => void;
-};
 
 type ApplicationEvents = {
     "note:reply": Status;

package.json

@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "@ark-ui/vue": "^3.4.0",
-        "@lysand-org/client": "^0.2.0",
+        "@lysand-org/client": "^0.2.1",
         "@nuxt/fonts": "^0.7.0",
         "@tailwindcss/typography": "^0.5.13",
         "@vee-validate/nuxt": "^4.13.1",

pages/oauth/authorize.vue

@@ -4,12 +4,12 @@
             class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" />
         <div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
             <VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema"
-                :action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
+                :action="`/api/auth/login?redirect_uri=${params.redirect_uri}&response_type=${params.response_type}&client_id=${params.client_id}&scope=${params.scope}`">
                 <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
 
-                <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
+                <div v-if="params.error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
                     <h2 class="font-bold text-lg">An error occured</h2>
-                    <span class="text-sm">{{ error_description }}</span>
+                    <span class="text-sm">{{ params.error_description }}</span>
                 </div>
 
                 <VeeField name="identifier" as="div" v-slot="{ errorMessage, field }" validate-on-change>
@@ -41,7 +41,7 @@
                     </div>
                     <div class="grid md:grid-cols-2 md:[&:has(>:last-child:nth-child(1))]:grid-cols-1 gap-4 w-full">
                         <a v-for="provider of ssoConfig.providers" :key="provider.id"
-                            :href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
+                            :href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${params.redirect_uri}&response_type=${params.response_type}&client_id=${params.client_id}&scope=${params.scope}`">
                             <ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
                                 <img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
                                     class="w-6 h-6" />
@@ -108,17 +108,13 @@ const schema = toTypedSchema(
 );
 
 const hostname = useRequestURL().hostname;
-const query = new URLSearchParams(
+const params = useUrlSearchParams();
-    window?.location.search ?? useRequestURL().search,
-);
-const redirectUri = query.get("redirect_uri");
-const responseType = query.get("response_type");
-const clientId = query.get("client_id");
-const scope = query.get("scope");
-const error = query.get("error");
-const errorDescription = query.get("error_description");
 
-const validUrlParameters = redirectUri && responseType && clientId && scope;
+const validUrlParameters =
+    params.redirect_uri &&
+    params.response_type &&
+    params.client_id &&
+    params.scope;
 
 const ssoConfig = useSSOConfig();
 </script>

pages/oauth/code.vue

@@ -23,9 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from "vue-router";
+const params = useUrlSearchParams();
 
-const query = useRoute().query;
+const code = params.code;
-
-const code = query.code;
 </script>

pages/oauth/consent.vue

@@ -83,18 +83,16 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from "vue-router";
-
 const url = useRequestURL();
-const query = useRoute().query;
+const params = useUrlSearchParams();
 
-const application = query.application;
+const application = params.application;
-const website = query.website
+const website = params.website
-    ? decodeURIComponent(query.website as string)
+    ? decodeURIComponent(params.website as string)
     : null;
-const redirectUri = query.redirect_uri as string;
+const redirectUri = params.redirect_uri as string;
-const clientId = query.client_id;
+const clientId = params.client_id;
-const scope = query.scope ? decodeURIComponent(query.scope as string) : "";
+const scope = params.scope ? decodeURIComponent(params.scope as string) : "";
 
 const validUrlParameters = application && redirectUri && clientId && scope;
 

pages/oauth/reset.vue

@@ -3,18 +3,14 @@
         <img crossorigin="anonymous" src="https://cdn.lysand.org/logo.webp" alt="Lysand logo"
             class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" />
         <div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
-            <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
-                <h2 class="font-bold text-lg">An error occured</h2>
-                <span class="text-sm">{{ error_description }}</span>
-            </div>
             <VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
-                <input type="hidden" name="token" :value="token" />
+                <input type="hidden" name="token" :value="params.token" />
 
                 <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
 
                 <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
                     <h2 class="font-bold text-lg">An error occured</h2>
-                    <span class="text-sm">{{ error_description }}</span>
+                    <span class="text-sm">{{ params.error_description }}</span>
                 </div>
 
                 <VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change>
@@ -46,7 +42,7 @@
                 <ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
             </VeeForm>
         </div>
-        <div v-else-if="success">
+        <div v-else-if="params.success">
             <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
                 successful!
             </h1>
@@ -95,20 +91,15 @@ const schema = toTypedSchema(
         }),
 );
 
-const query = new URLSearchParams(
+const params = useUrlSearchParams();
-    window?.location.search ?? useRequestURL().search,
+let error = params.error;
-);
+let errorDescription = params.error_description;
-const token = query.get("token");
-const loginReset = query.get("login_reset") === "true";
-const success = query.get("success") === "true";
-let error = query.get("error");
-let errorDescription = query.get("error_description");
 
-if (loginReset) {
+if (params.login_reset) {
     error = "Login reset";
     errorDescription =
         "Your password has been reset by an administrator. Please change it here.";
 }
 
-const validUrlParameters = token;
+const validUrlParameters = !!params.token;
 </script>