From b1590ee609ebb2df19e17dac3735ddf8813e3523 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 2 Sep 2025 10:24:33 -0400
Subject: [PATCH] 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       |  4 +--
 web/components/RClone/RCloneOverview.vue    |  2 +-
 web/components/UpdateOs/Status.vue          |  8 +++++-
 web/components/UserProfile/DropdownItem.vue | 27 +++++++++++++++------
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/web/components/Notifications/Item.vue b/web/components/Notifications/Item.vue
index a908c1761..1a775455b 100644
--- a/web/components/Notifications/Item.vue
+++ b/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>
diff --git a/web/components/RClone/RCloneOverview.vue b/web/components/RClone/RCloneOverview.vue
index 0ba9e520a..4dd559de5 100644
--- a/web/components/RClone/RCloneOverview.vue
+++ b/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">
diff --git a/web/components/UpdateOs/Status.vue b/web/components/UpdateOs/Status.vue
index c9e600c42..400b55cef 100644
--- a/web/components/UpdateOs/Status.vue
+++ b/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"
diff --git a/web/components/UserProfile/DropdownItem.vue b/web/components/UserProfile/DropdownItem.vue
index aeaaa3646..7e7baa70f 100644
--- a/web/components/UserProfile/DropdownItem.vue
+++ b/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">