feat: improved update ui (#1691)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Global awaitable confirmation modal for notification actions.
  * “Ignore this release” toggle that persists to the server when used.
* New test pages and standalone test controls for the update modal and
theme switching.

* **Refactor**
* Update modal rebuilt with a responsive layout, unified “Update
Available” title, revised action logic, and centralized modal plumbing.

* **Style**
* OS Update highlight block, improved spacing, refreshed iconography,
and tooltips clarifying actions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: elibosley

CLAUDE.md

@@ -7,7 +7,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 This is the Unraid API monorepo containing multiple packages that provide API functionality for Unraid servers. It uses pnpm workspaces with the following structure:
 
 - `/api` - Core NestJS API server with GraphQL
-- `/web` - Nuxt.js frontend application
+- `/web` - Vue 3 frontend application
 - `/unraid-ui` - Vue 3 component library
 - `/plugin` - Unraid plugin package (.plg)
 - `/packages` - Shared packages and API plugins
@@ -128,9 +128,6 @@ Enables GraphQL playground at `http://tower.local/graphql`
 - **Use Mocks Correctly**: Mocks should be used as nouns, not verbs.
 
 #### Vue Component Testing
-
-- This is a Nuxt.js app but we are testing with vitest outside of the Nuxt environment
-- Nuxt is currently set to auto import so some vue files may need compute or ref imported
 - Use pnpm when running terminal commands and stay within the web directory
 - Tests are located under `web/__test__`, run with `pnpm test`
 - Use `mount` from Vue Test Utils for component testing

unraid-ui/src/components/brand/BrandButton.vue

@@ -51,7 +51,7 @@ const classes = computed(() => {
 });
 
 const needsBrandGradientBackground = computed(() => {
-  return ['outline-solid', 'outline-primary'].includes(props.variant ?? '');
+  return ['outline', 'outline-solid', 'outline-primary'].includes(props.variant ?? '');
 });
 
 const isLink = computed(() => Boolean(props.href));

web/components.d.ts

@@ -31,6 +31,7 @@ declare module 'vue' {
     ChangelogModal: typeof import('./src/components/UpdateOs/ChangelogModal.vue')['default']
     CheckUpdateResponseModal: typeof import('./src/components/UpdateOs/CheckUpdateResponseModal.vue')['default']
     'ColorSwitcher.standalone': typeof import('./src/components/ColorSwitcher.standalone.vue')['default']
+    ConfirmDialog: typeof import('./src/components/ConfirmDialog.vue')['default']
     'ConnectSettings.standalone': typeof import('./src/components/ConnectSettings/ConnectSettings.standalone.vue')['default']
     Console: typeof import('./src/components/Docker/Console.vue')['default']
     Detail: typeof import('./src/components/LayoutViews/Detail/Detail.vue')['default']
@@ -97,6 +98,8 @@ declare module 'vue' {
     SsoButtons: typeof import('./src/components/sso/SsoButtons.vue')['default']
     SsoProviderButton: typeof import('./src/components/sso/SsoProviderButton.vue')['default']
     Status: typeof import('./src/components/UpdateOs/Status.vue')['default']
+    'TestThemeSwitcher.standalone': typeof import('./src/components/TestThemeSwitcher.standalone.vue')['default']
+    'TestUpdateModal.standalone': typeof import('./src/components/UpdateOs/TestUpdateModal.standalone.vue')['default']
     'ThemeSwitcher.standalone': typeof import('./src/components/ThemeSwitcher.standalone.vue')['default']
     ThirdPartyDrivers: typeof import('./src/components/UpdateOs/ThirdPartyDrivers.vue')['default']
     Trial: typeof import('./src/components/UserProfile/Trial.vue')['default']

web/public/test-pages/index.html

@@ -179,6 +179,14 @@ <h3>OS Management <span class="badge new">NEW</span></h3>
           </div>
           <a href="/test-pages/os-management.html">Open →</a>
         </div>
+
+        <div class="page-item">
+          <div>
+            <h3>Update Modal Testing <span class="badge new">NEW</span></h3>
+            <p>Test various update scenarios including expired licenses, renewals, and auth requirements</p>
+          </div>
+          <a href="/test-update-modal.html">Open →</a>
+        </div>
       </div>
     </div>
 

web/src/components/ConfirmDialog.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {
+  Button,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+} from '@unraid/ui';
+
+import { useConfirm } from '~/composables/useConfirm';
+
+const { isOpen, state, handleConfirm, handleCancel } = useConfirm();
+</script>
+
+<template>
+  <DialogRoot :open="isOpen" @update:open="!$event && handleCancel()">
+    <DialogContent>
+      <DialogHeader v-if="state">
+        <DialogTitle>{{ state.title }}</DialogTitle>
+        <DialogDescription v-if="state.description">
+          {{ state.description }}
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter v-if="state">
+        <div class="flex w-full justify-between gap-3">
+          <Button variant="outline" @click="handleCancel">
+            {{ state.cancelText }}
+          </Button>
+          <Button :variant="state.confirmVariant" @click="handleConfirm">
+            {{ state.confirmText }}
+          </Button>
+        </div>
+      </DialogFooter>
+    </DialogContent>
+  </DialogRoot>
+</template>

web/src/components/Notifications/Sidebar.vue

@@ -21,6 +21,7 @@ import {
 } from '@unraid/ui';
 import { Settings } from 'lucide-vue-next';
 
+import ConfirmDialog from '~/components/ConfirmDialog.vue';
 import {
   archiveAllNotifications,
   deleteArchivedNotifications,
@@ -37,10 +38,12 @@ import NotificationsList from '~/components/Notifications/List.vue';
 import { useTrackLatestSeenNotification } from '~/composables/api/use-notifications';
 import { useFragment } from '~/composables/gql';
 import { NotificationImportance as Importance, NotificationType } from '~/composables/gql/graphql';
+import { useConfirm } from '~/composables/useConfirm';
 
 const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(archiveAllNotifications);
 const { mutate: deleteArchives, loading: loadingDeleteAll } = useMutation(deleteArchivedNotifications);
 const { mutate: recalculateOverview } = useMutation(resetOverview);
+const { confirm } = useConfirm();
 const importance = ref<Importance | undefined>(undefined);
 
 const filterItems = [
@@ -52,17 +55,26 @@ const filterItems = [
 ];
 
 const confirmAndArchiveAll = async () => {
-  if (confirm('This will archive all notifications on your Unraid server. Continue?')) {
+  const confirmed = await confirm({
+    title: 'Archive All Notifications',
+    description: 'This will archive all notifications on your Unraid server. Continue?',
+    confirmText: 'Archive All',
+    confirmVariant: 'primary',
+  });
+  if (confirmed) {
     await archiveAll();
   }
 };
 
 const confirmAndDeleteArchives = async () => {
-  if (
-    confirm(
-      'This will permanently delete all archived notifications currently on your Unraid server. Continue?'
-    )
-  ) {
+  const confirmed = await confirm({
+    title: 'Delete All Archived Notifications',
+    description:
+      'This will permanently delete all archived notifications currently on your Unraid server. This action cannot be undone.',
+    confirmText: 'Delete All',
+    confirmVariant: 'destructive',
+  });
+  if (confirmed) {
     await deleteArchives();
   }
 };
@@ -230,4 +242,7 @@ const prepareToViewNotifications = () => {
       </div>
     </SheetContent>
   </Sheet>
+
+  <!-- Global Confirm Dialog -->
+  <ConfirmDialog />
 </template>

web/src/components/TestThemeSwitcher.standalone.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+
+import { Select } from '@unraid/ui';
+
+import type { Theme } from '~/themes/types';
+
+import { useThemeStore } from '~/store/theme';
+
+const themeStore = useThemeStore();
+const { theme } = storeToRefs(themeStore);
+
+// Available theme options
+const items = [
+  { value: 'white', label: 'Light' },
+  { value: 'black', label: 'Dark' },
+  { value: 'azure', label: 'Azure' },
+  { value: 'gray', label: 'Gray' },
+];
+
+// Current theme value
+const currentTheme = computed({
+  get: () => theme.value.name,
+  set: (value: string) => {
+    const newTheme: Theme = {
+      ...theme.value,
+      name: value,
+    };
+    themeStore.setTheme(newTheme);
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <span class="text-sm font-medium text-white">Theme:</span>
+    <Select v-model="currentTheme" :items="items" placeholder="Select theme" class="w-32" />
+  </div>
+</template>