refactor: unraid ui cleanup and migration (#998)

Co-authored-by: Eli Bosley <ekbosley@gmail.com>
Co-authored-by: Pujit Mehrotra <pujit@lime-technology.com>
Co-authored-by: mdatelle <mike@datelle.net>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Zack Spear <zackspear@users.noreply.github.com>

web/components/HeaderOsVersion.ce.vue

@@ -1,21 +1,12 @@
 <script lang="ts" setup>
-import {
-  BellAlertIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-} from '@heroicons/vue/24/solid';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-
-import 'tailwindcss/tailwind.css';
-import '~/assets/main.css';
-
+import { BellAlertIcon, ExclamationTriangleIcon, InformationCircleIcon } from '@heroicons/vue/24/solid';
+import { Badge } from '@unraid/ui';
 import { getReleaseNotesUrl, WEBGUI_TOOLS_DOWNGRADE, WEBGUI_TOOLS_UPDATE } from '~/helpers/urls';
 import { useServerStore } from '~/store/server';
 import { useUpdateOsStore } from '~/store/updateOs';
 import { useUpdateOsActionsStore } from '~/store/updateOsActions';
-import type { UserProfileLink } from '~/types/userProfile';
-import type { UiBadgeProps, UiBadgePropsColor } from '~/types/ui/badge';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
@@ -27,23 +18,22 @@ const { osVersion, rebootType, stateDataError } = storeToRefs(serverStore);
 const { available, availableWithRenewal } = storeToRefs(updateOsStore);
 const { rebootTypeText } = storeToRefs(updateOsActionsStore);
 
-export interface UpdateOsStatus extends UserProfileLink {
-  badge: UiBadgeProps;
-}
 const updateOsStatus = computed(() => {
-  if (stateDataError.value) { // only allowed to update when server is does not have a state error
+  if (stateDataError.value) {
+    // only allowed to update when server is does not have a state error
     return null;
   }
 
   if (rebootTypeText.value) {
     return {
       badge: {
-        color: 'yellow' as UiBadgePropsColor,
+        color: 'yellow',
         icon: ExclamationTriangleIcon,
       },
-      href: rebootType.value === 'downgrade'
-        ? WEBGUI_TOOLS_DOWNGRADE.toString()
-        : WEBGUI_TOOLS_UPDATE.toString(),
+      href:
+        rebootType.value === 'downgrade'
+          ? WEBGUI_TOOLS_DOWNGRADE.toString()
+          : WEBGUI_TOOLS_UPDATE.toString(),
       text: t(rebootTypeText.value),
     };
   }
@@ -51,13 +41,13 @@ const updateOsStatus = computed(() => {
   if (availableWithRenewal.value || available.value) {
     return {
       badge: {
-        color: 'orange' as UiBadgePropsColor,
+        color: 'orange',
         icon: BellAlertIcon,
       },
-      click: () => { updateOsStore.setModalOpen(true); },
-      text: availableWithRenewal.value
-        ? t('Update Released')
-        : t('Update Available'),
+      click: () => {
+        updateOsStore.setModalOpen(true);
+      },
+      text: availableWithRenewal.value ? t('Update Released') : t('Update Available'),
       title: availableWithRenewal.value
         ? t('Unraid OS {0} Released', [availableWithRenewal.value])
         : t('Unraid OS {0} Update Available', [available.value]),
@@ -77,15 +67,15 @@ const updateOsStatus = computed(() => {
       target="_blank"
       rel="noopener"
     >
-      <UiBadge
-        color="custom"
+      <Badge
+        variant="custom"
         :icon="InformationCircleIcon"
         icon-styles="text-header-text-secondary"
-        size="14px"
+        size="sm"
         class="text-header-text-secondary group-hover:text-orange-dark group-focus:text-orange-dark group-hover:underline group-focus:underline"
       >
         {{ osVersion }}
-      </UiBadge>
+      </Badge>
     </a>
     <component
       :is="updateOsStatus.href ? 'a' : 'button'"
@@ -95,14 +85,14 @@ const updateOsStatus = computed(() => {
       class="group"
       @click="updateOsStatus.click?.()"
     >
-      <UiBadge
+      <Badge
         v-if="updateOsStatus.badge"
         :color="updateOsStatus.badge.color"
         :icon="updateOsStatus.badge.icon"
-        size="12px"
+        size="xs"
       >
         {{ updateOsStatus.text }}
-      </UiBadge>
+      </Badge>
       <template v-else>
         {{ updateOsStatus.text }}
       </template>
@@ -111,7 +101,6 @@ const updateOsStatus = computed(() => {
 </template>
 
 <style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* Import unraid-ui globals first */
+@import '@unraid/ui/styles';
 </style>