fix: UnraidToaster component and update dialog close button

- Introduced a new UnraidToaster component for displaying notifications with customizable positions.
- Updated the DialogClose component to use a span element for better semantic structure.
- Enhanced CSS for the sonner component to ensure proper layout and styling.

These changes improve user feedback through notifications and refine the dialog close button's implementation.

Author: elibosley

@tailwind-shared/sonner.css

@@ -229,6 +229,8 @@
   top: 0;
   height: 20px;
   width: 20px;
+  min-width: inherit !important;
+  margin: 0 !important;
   display: flex;
   justify-content: center;
   align-items: center;

unraid-ui/src/components/ui/dialog/DialogClose.vue

@@ -5,32 +5,7 @@ const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
-  <DialogClose v-bind="props">
+  <DialogClose v-bind="props" as="span">
     <slot />
   </DialogClose>
 </template>
-
-<style>
-/* Reset webgui button styles for dialog close buttons */
-[role='dialog'] button[type='button'],
-button[aria-label*='close' i],
-button[aria-label*='dismiss' i] {
-  /* Reset ALL webgui button styles using !important where needed */
-  all: unset !important;
-
-  /* Re-apply necessary styles after reset */
-  display: inline-flex !important;
-  font-family: inherit !important;
-  font-size: inherit !important;
-  font-weight: inherit !important;
-  line-height: inherit !important;
-  cursor: pointer !important;
-  box-sizing: border-box !important;
-
-  /* Reset any webgui CSS variables */
-  --button-border: none !important;
-  --button-text-color: inherit !important;
-  --button-background: transparent !important;
-  --button-background-size: auto !important;
-}
-</style>

web/components/UnraidToaster.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { Toaster } from '@unraid/ui';
+
+defineProps<{
+  position: 'top-center' | 'top-right' | 'top-left' | 'bottom-center' | 'bottom-right' | 'bottom-left';
+}>();
+</script>
+
+<template>
+  <Toaster rich-colors close-button :position="position" />
+</template>

web/components/standalone-mount.ts

@@ -17,7 +17,7 @@ import ThemeSwitcher from './ThemeSwitcher.ce.vue';
 import ApiKeyPage from './ApiKeyPage.ce.vue';
 import DevModalTest from './DevModalTest.ce.vue';
 import ApiKeyAuthorize from './ApiKeyAuthorize.ce.vue';
-
+import UnraidToaster from './UnraidToaster.vue';
 // Import utilities
 import { autoMountComponent, mountVueApp, getMountedApp } from './Wrapper/vue-mount-app';
 import { useThemeStore } from '~/store/theme';
@@ -152,6 +152,7 @@ const componentMappings = [
   { component: ApiKeyPage, selector: 'unraid-api-key-manager', appId: 'api-key-manager' },
   { component: DevModalTest, selector: 'unraid-dev-modal-test', appId: 'dev-modal-test' },
   { component: ApiKeyAuthorize, selector: 'unraid-api-key-authorize', appId: 'api-key-authorize' },
+  { component: UnraidToaster, selector: 'uui-toaster', appId: 'toaster' },
 ];
 
 // Auto-mount all components
@@ -197,6 +198,7 @@ if (typeof window !== 'undefined') {
     ApiKeyPage,
     DevModalTest,
     ApiKeyAuthorize,
+    UnraidToaster,
   };
 
   // Expose utility functions

web/scripts/deploy-dev.sh

@@ -35,7 +35,7 @@ if [ "$has_standalone" = true ]; then
   # Ensure remote directory exists
   ssh root@"${server_name}" "mkdir -p /usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/standalone/"
   # Clear the remote standalone directory before rsyncing
-  ssh root@"${server_name}" "rm -rf /usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/standalone/*"
+  ssh root@"${server_name}" "rm -rf /usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/*"
   # Run rsync with proper quoting
   rsync -avz --delete -e "ssh" "$standalone_directory" "root@${server_name}:/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/standalone/"
   standalone_exit_code=$?