feat: enhance dialog and user profile components for improved styling and functionality

- Updated DialogContent.vue to simplify animation classes for fullscreen modals, enhancing visual consistency.
- Added pre-render CSS in standalone-mount.ts to prevent FOUC by hiding components until they are fully mounted.
- Refactored ServerStatus.vue to streamline class bindings for better readability.
- Improved UptimeExpire.vue by adding dynamic styling based on props and optimizing computed properties for clarity.

Author: elibosley

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

@@ -41,9 +41,9 @@ const { teleportTarget } = useTeleport();
       :class="
         cn(
           'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-muted fixed top-1/2 left-1/2 z-50 flex w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border p-6 shadow-lg duration-200',
-          // Only apply zoom and slide animations if not fullscreen
+          // Only apply zoom animation if not fullscreen
           !props.class?.includes('min-h-screen') &&
-            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
           // Apply slide-up animation for fullscreen modals
           props.class?.includes('min-h-screen') &&
             'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',

web/components/UserProfile/ServerStatus.vue

@@ -8,7 +8,7 @@ import UpcServerState from './ServerState.vue';
   <div
     :class="
       cn(
-        'text-header-text-secondary text-right font-semibold leading-tight',
+        'text-header-text-secondary font-semibold leading-tight',
         'flex flex-col items-end gap-y-0.5 justify-end',
         'xs:flex-row xs:items-baseline xs:gap-x-2 xs:gap-y-0',
         'text-xs',

web/components/UserProfile/UptimeExpire.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
 
 import useDateTimeHelper from '~/composables/dateTime';
 import { useServerStore } from '~/store/server';
@@ -23,11 +23,22 @@ const { t } = useI18n();
 const serverStore = useServerStore();
 const { dateTimeFormat, uptime, expireTime, state } = storeToRefs(serverStore);
 
+const style = computed(() => {
+  if (props.as === 'span') {
+    return {
+      'text-align': 'right',
+    };
+  }
+  return {};
+});
+
 const time = computed(() => {
   if (props.forExpire && expireTime.value) {
     return expireTime.value;
   }
-  return (state.value === 'TRIAL' || state.value === 'EEXPIRED') && expireTime.value && expireTime.value > 0
+  return (state.value === 'TRIAL' || state.value === 'EEXPIRED') &&
+    expireTime.value &&
+    expireTime.value > 0
     ? expireTime.value
     : uptime.value;
 });
@@ -39,20 +50,20 @@ const countUp = computed<boolean>(() => {
   return state.value !== 'TRIAL' && state.value !== 'ENOCONN';
 });
 
-const {
-  outputDateTimeReadableDiff: readableDiff,
-  outputDateTimeFormatted: formatted,
-} = useDateTimeHelper(dateTimeFormat.value, t, false, time.value, countUp.value);
+const { outputDateTimeReadableDiff: readableDiff, outputDateTimeFormatted: formatted } =
+  useDateTimeHelper(dateTimeFormat.value, t, false, time.value, countUp.value);
 
 const output = computed(() => {
   if (!countUp.value || state.value === 'EEXPIRED') {
     return {
-      title: state.value === 'EEXPIRED'
-        ? t(props.shortText ? 'Expired at {0}' : 'Trial Key Expired at {0}', [formatted.value])
-        : t(props.shortText ? 'Expires at {0}' : 'Trial Key Expires at {0}', [formatted.value]),
-      text: state.value === 'EEXPIRED'
-        ? t(props.shortText ? 'Expired {0}' : 'Trial Key Expired {0}', [readableDiff.value])
-        : t(props.shortText ? 'Expires in {0}' : 'Trial Key Expires in {0}', [readableDiff.value]),
+      title:
+        state.value === 'EEXPIRED'
+          ? t(props.shortText ? 'Expired at {0}' : 'Trial Key Expired at {0}', [formatted.value])
+          : t(props.shortText ? 'Expires at {0}' : 'Trial Key Expires at {0}', [formatted.value]),
+      text:
+        state.value === 'EEXPIRED'
+          ? t(props.shortText ? 'Expired {0}' : 'Trial Key Expired {0}', [readableDiff.value])
+          : t(props.shortText ? 'Expires in {0}' : 'Trial Key Expires in {0}', [readableDiff.value]),
     };
   }
   return {
@@ -63,7 +74,7 @@ const output = computed(() => {
 </script>
 
 <template>
-  <component :is="as" :title="output.title">
+  <component :is="as" :title="output.title" :style="style">
     {{ output.text }}
   </component>
 </template>

web/components/standalone-mount.ts

@@ -36,8 +36,66 @@ declare global {
   }
 }
 
+// Add pre-render CSS to hide components until they're mounted
+function injectPreRenderCSS() {
+  const style = document.createElement('style');
+  style.id = 'unraid-prerender-css';
+  style.textContent = `
+    /* Hide unraid components during initial load to prevent FOUC */
+    unraid-auth,
+    unraid-connect-settings,
+    unraid-download-api-logs,
+    unraid-header-os-version,
+    unraid-modals,
+    unraid-user-profile,
+    unraid-update-os,
+    unraid-downgrade-os,
+    unraid-registration,
+    unraid-wan-ip-check,
+    unraid-welcome-modal,
+    unraid-sso-button,
+    unraid-log-viewer,
+    unraid-theme-switcher,
+    unraid-api-key-manager,
+    unraid-dev-modal-test,
+    unraid-api-key-authorize {
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+    
+    /* Show components once they have the unapi class (mounted) */
+    unraid-auth.unapi,
+    unraid-connect-settings.unapi,
+    unraid-download-api-logs.unapi,
+    unraid-header-os-version.unapi,
+    unraid-modals.unapi,
+    unraid-user-profile.unapi,
+    unraid-update-os.unapi,
+    unraid-downgrade-os.unapi,
+    unraid-registration.unapi,
+    unraid-wan-ip-check.unapi,
+    unraid-welcome-modal.unapi,
+    unraid-sso-button.unapi,
+    unraid-log-viewer.unapi,
+    unraid-theme-switcher.unapi,
+    unraid-api-key-manager.unapi,
+    unraid-dev-modal-test.unapi,
+    unraid-api-key-authorize.unapi {
+      opacity: 1;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 // Initialize global Apollo client context
 if (typeof window !== 'undefined') {
+  // Inject pre-render CSS as early as possible
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', injectPreRenderCSS);
+  } else {
+    injectPreRenderCSS();
+  }
+  
   // Make Apollo client globally available
   window.apolloClient = apolloClient;