fix: component name collision

We already have a component called Notifications (the ones in the top right). I used now Toster which I borrowed from here https://www.shadcn-vue.com/docs/components/sonner.html

frontend/src/components/misc/Notification.vue

@@ -1,5 +1,5 @@
 <template>
-	<Notifications
+	<Toaster
 		position="bottom left"
 		:max="2"
 		class="global-notification"
@@ -44,7 +44,7 @@
 				</div>
 			</div>
 		</template>
-	</Notifications>
+	</Toaster>
 </template>
 
 <style scoped>

frontend/src/main.ts

@@ -54,7 +54,7 @@ const browserLanguage = getBrowserLanguage()
 setLanguage(browserLanguage).then(() => {
 	const app = createApp(App)
 
-	app.use(Notifications)
+	app.use(Notifications, { componentName: 'Toaster' })
 
 	app.directive('focus', focus)
 	app.directive('tooltip', vTooltip)

frontend/src/types/global-components.d.ts

@@ -11,7 +11,7 @@ import type Card from '@/components/misc/Card.vue'
 declare module 'vue' {
 	export interface GlobalComponents {
 		Icon: FontAwesomeIconFixedTypes
-		Notifications: FunctionalComponent<Notifications>
+		Toaster: FunctionalComponent<Notifications>
 		XButton: typeof XButton,
 		Modal: typeof Modal,
 		Card: typeof Card,