fix: type check

web/components/Auth.ce.vue

@@ -26,7 +26,7 @@ const { authAction, stateData } = storeToRefs(serverStore);
         size="12px"
         :text="t(authAction.text)"
         :title="authAction?.title ? t(authAction?.title) : undefined"
-        @click="authAction.click()"
+        @click="authAction.click ? authAction.click() : undefined"
       />
     </span>
   </div>

web/components/KeyActions.vue

@@ -50,7 +50,7 @@ const filteredKeyActions = computed((): ServerStateDataAction[] | undefined => {
         :icon-right-hover-display="true"
         :text="t(action.text)"
         :title="action.title ? t(action.title) : undefined"
-        @click="action.click()"
+        @click="action.click ? action.click() : undefined"
       />
     </li>
   </ul>

web/components/Registration.ce.vue

@@ -244,7 +244,7 @@ const items = computed((): RegistrationItemProps[] => {
               :icon="authAction.icon"
               :text="t(authAction.text)"
               :title="authAction.title ? t(authAction.title) : undefined"
-              @click="authAction.click()"
+              @click="authAction.click ? authAction.click() : undefined"
             />
           </span>
         </header>

web/components/Registration/KeyLinkedStatus.vue

@@ -36,7 +36,7 @@ defineProps<{
         :icon-right="ArrowPathIcon"
         size="16px"
       >
-        {{ t(keyLinkedOutput.text) }}
+        {{ t(keyLinkedOutput.text ?? 'Unknown') }}
       </UiBadge>
     </BrandButton>
     <UiBadge
@@ -45,7 +45,7 @@ defineProps<{
       :icon="keyLinkedOutput.icon"
       size="16px"
     >
-      {{ t(keyLinkedOutput.text) }}
+      {{ t(keyLinkedOutput.text ?? 'Unknown') }}
     </UiBadge>
 
     <span class="inline-flex flex-wrap-items-start gap-8px">

web/components/Registration/ReplaceCheck.vue

@@ -33,7 +33,7 @@ defineProps<{
       :icon="replaceStatusOutput.icon"
       size="16px"
     >
-      {{ t(replaceStatusOutput.text) }}
+      {{ t(replaceStatusOutput.text ?? 'Unknown') }}
     </UiBadge>
 
     <BrandButton

web/components/Registration/UpdateExpirationAction.vue

@@ -76,7 +76,7 @@ const output = computed(() => {
         :text="t('Extend License')"
         :title="t('Pay your annual fee to continue receiving OS updates.')"
         class="flex-grow"
-        @click="renewAction.click()"
+        @click="renewAction.click ? renewAction.click() : undefined"
       />
 
       <BrandButton

web/components/UpdateOs/CheckUpdateResponseModal.vue

@@ -254,7 +254,7 @@ const modalWidth = computed(() => {
             :icon="item.icon"
             :icon-right="item.iconRight"
             :icon-right-hover-display="item.iconRightHoverDisplay"
-            :text="t(item.text)"
+            :text="t(item.text ?? '')"
             :title="item.title ? t(item.title) : undefined"
             @click="item.click ? item.click() : undefined"
           />
@@ -324,7 +324,7 @@ const modalWidth = computed(() => {
             :icon="item.icon"
             :icon-right="item.iconRight"
             :icon-right-hover-display="item.iconRightHoverDisplay"
-            :text="t(item.text)"
+            :text="t(item.text ?? '')"
             :title="item.title ? t(item.title) : undefined"
             @click="item.click ? item.click() : undefined"
           />

web/components/UpdateOs/UpdateIneligible.vue

@@ -95,7 +95,7 @@ watchEffect(() => {
           :text="t('Extend License')"
           :title="t('Pay your annual fee to continue receiving OS updates.')"
           class="flex-grow"
-          @click="renewAction.click()"
+          @click="renewAction.click ? renewAction.click() : undefined"
         />
         <!-- <BrandButton
           btn-style="black"

web/components/UserProfile/DropdownItem.vue

@@ -34,11 +34,11 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
       'rounded-md': rounded,
       'disabled:opacity-50 disabled:hover:opacity-50 disabled:focus:opacity-50 disabled:cursor-not-allowed': item?.disabled,
     }"
-    @click.stop="item?.click ? item?.click(item?.clickParams) : null"
+    @click.stop="item?.click ? item?.click(item?.clickParams ?? []) : null"
   >
     <span class="leading-snug inline-flex flex-row items-center gap-x-8px">
       <component :is="item?.icon" class="flex-shrink-0 text-current w-16px h-16px" aria-hidden="true" />
-      {{ t(item?.text, item?.textParams) }}
+      {{ t(item?.text, item?.textParams ?? []) }}
     </span>
     <ArrowTopRightOnSquareIcon
       v-if="showExternalIconOnHover"

web/components/UserProfile/DropdownLaunchpad.vue

@@ -41,7 +41,7 @@ const showExpireTime = computed(() => (state.value === 'TRIAL' || state.value ==
             :icon="unraidApiStatus === 'restarting' ? BrandLoadingWhite : unraidApiRestartAction?.icon"
             :text="unraidApiStatus === 'restarting' ? t('Restarting unraid-api…') : t('Restart unraid-api')"
             :title="unraidApiStatus === 'restarting' ? t('Restarting unraid-api…') : t('Restart unraid-api')"
-            @click="unraidApiRestartAction?.click()"
+            @click="unraidApiRestartAction?.click ? unraidApiRestartAction?.click() : undefined"
           />
         </li>
       </ul>

web/components/UserProfile/ServerState.vue

@@ -23,7 +23,7 @@ const upgradeAction = computed((): ServerStateDataAction | undefined => {
       <UpcServerStateBuy
         class="text-gamma"
         :title="t('Upgrade Key')"
-        @click="upgradeAction.click()"
+        @click="upgradeAction.click ? upgradeAction.click() : undefined"
       >
         <h5>Unraid OS <em><strong>{{ t(stateData.humanReadable) }}</strong></em></h5>
       </UpcServerStateBuy>
@@ -36,7 +36,7 @@ const upgradeAction = computed((): ServerStateDataAction | undefined => {
       <UpcServerStateBuy
         class="text-orange-dark relative top-[1px] hidden sm:block"
         :title="t('Purchase Key')"
-        @click="purchaseAction.click()"
+        @click="purchaseAction.click ? purchaseAction.click() : undefined"
       >{{ t('Purchase') }}</UpcServerStateBuy>
     </template>
   </span>

web/types/userProfile.ts

@@ -1,8 +1,14 @@
 import type { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
 
+// type the click key in the UserProfileLink interface to allow for optional params
+// the click key can be a function that returns void or a promise that returns void
+
+export type UserProfileLinkClickParams = string[] | number[] | undefined;
+export type UserProfileLinkClick = ((...args: UserProfileLinkClickParams[]) => void | Promise<void>) | ((...args: UserProfileLinkClickParams[]) => Promise<NodeJS.Timeout | undefined>);
+
 export interface UserProfileLink {
-  click?: () => void | Promise<void>;
-  clickParams?: string[] | number[];
+  click?: UserProfileLinkClick;
+  clickParams?: UserProfileLinkClickParams;
   disabled?: boolean;
   emphasize?: boolean;
   external?: boolean;