refactor: improve button click handling and class management in components

- Updated button click handlers in Notifications and RClone components to pass parameters directly, enhancing clarity and functionality.
- Introduced a computed property for button classes in UserProfile component, streamlining class management based on item properties.
- Refactored navigation logic in UpdateOs component for better readability and maintainability.

web/components/Notifications/Item.vue

@@ -128,7 +128,7 @@ const reformattedTimestamp = computed<string>(() => {
       <Button
         v-if="type === NotificationType.UNREAD"
         :disabled="archive.loading"
-        @click="archive.mutate"
+        @click="() => archive.mutate({ id: props.id })"
       >
         <ArchiveBoxIcon class="size-4 mr-2" />
         <span class="text-sm">Archive</span>
@@ -136,7 +136,7 @@ const reformattedTimestamp = computed<string>(() => {
       <Button
         v-if="type === NotificationType.ARCHIVE"
         :disabled="deleteNotification.loading"
-        @click="deleteNotification.mutate"
+        @click="() => deleteNotification.mutate({ id: props.id, type: props.type })"
       >
         <TrashIcon class="size-4 mr-2" />
         <span class="text-sm">Delete</span>

web/components/RClone/RCloneOverview.vue

@@ -116,7 +116,7 @@ declare global {
 
     <div v-else-if="error" class="py-8 text-center text-red-500">
       <p class="mb-4">Failed to load remotes</p>
-      <Button @click="refetchRemotes">Retry</Button>
+      <Button @click="() => refetchRemotes()">Retry</Button>
     </div>
 
     <div v-else class="py-8 text-center">

web/components/UpdateOs/Status.vue

@@ -110,6 +110,12 @@ const checkButton = computed((): BrandButtonProps => {
       : props.t('Unraid OS {0} Update Available', [available.value]),
   };
 });
+
+const navigateToRegistration = () => {
+  if (typeof window !== 'undefined') {
+    window.location.href = WEBGUI_TOOLS_REGISTRATION.toString();
+  }
+};
 </script>
 
 <template>
@@ -140,7 +146,7 @@ const checkButton = computed((): BrandButtonProps => {
           variant="ghost"
           class="p-0 h-auto hover:bg-transparent"
           :title="t('Learn more and fix')"
-          @click="() => window.location.href = WEBGUI_TOOLS_REGISTRATION.toString()"
+          @click="navigateToRegistration"
         >
           <Badge
             variant="yellow"

web/components/UserProfile/DropdownItem.vue

@@ -18,6 +18,25 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const showExternalIconOnHover = computed(() => props.item?.external && props.item.icon !== ArrowTopRightOnSquareIcon);
+
+const buttonClass = computed(() => {
+  const classes = ['text-left', 'text-sm', 'w-full', 'flex', 'flex-row', 'items-center', 'justify-between', 'gap-x-2', 'px-2', 'py-2', 'h-auto'];
+  
+  if (!props.item?.emphasize) {
+    classes.push('dropdown-item-hover');
+  }
+  if (props.item?.emphasize) {
+    classes.push('dropdown-item-emphasized');
+  }
+  if (showExternalIconOnHover.value) {
+    classes.push('group');
+  }
+  if (props.rounded) {
+    classes.push('rounded-md');
+  }
+  
+  return classes.join(' ');
+});
 </script>
 
 <template>
@@ -28,13 +47,7 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
     :target="item?.external ? '_blank' : null"
     :rel="item?.external ? 'noopener noreferrer' : null"
     variant="ghost"
-    class="text-left text-sm w-full flex flex-row items-center justify-between gap-x-2 px-2 py-2 h-auto"
-    :class="{
-      'dropdown-item-hover': !item?.emphasize,
-      'dropdown-item-emphasized': item?.emphasize,
-      'group': showExternalIconOnHover,
-      'rounded-md': rounded,
-    }"
+    :class="buttonClass"
     @click.stop="item?.click ? item?.click(item?.clickParams ?? []) : null"
   >
     <span class="leading-snug inline-flex flex-row items-center gap-x-2">