Refactor/nuxtui notifications #1817

Ajit-Mehrotra · 2025-12-02T22:29:10Z

Purpose

Migrate Notification-related Components from Shadcn to Nuxtui

Summary of changes and notable additions:

converted notification components (including the notification toast) to NuxtUI
connected app.config.ts to the vite.config.ts
connected toast app themes to mount-engine.ts
a new async generator method in the notifications api
added a system for "risky" notifications that use the legacy notify script for email/agents, but handle unread file creation ourselves. By default though, we're using the legacy notify script in webgui/emhttp/webGui/scripts/notify (and no this script did not check for the title size...see bug fixes below :/)
added NotificationSettings to the graphql api model so we can sync toast position with legacy settings
removed vue-sommer (did not remove dependency, nor dependency for non-nuxtui icons )
replaced loading spinner with nuxtui skeleton instead
added ssh retry logic to the deploy script (got unlucky first time I ran the script)

Bug Fixes

fixed api's filtering logic (alert, info, warning). Before, data was being paginated and then filtered. This led to missing notifications when sorting by chosen filter.
fixed bug where notifications silently failed (api thought they succeeded) when the title of the notification was greater than 255 bytes.
fixed bug where when scrolled all the way down in the notification pane (when api is down), unraid infinitely sends network requests, obv not good.
fixed issue where error messages in the notification pane were inaccurate (ex. when api is disconnected, etc).
- Now errors are more graceful ux on failure. Errors now look at non-standard locations as well.

Some Notes

make sure to make these webgui css changes before trying to run this yourself.
I haven't removed vue-sonner or any dependencies we use for icons from package.json or anything. Not sure if they're used elsewhere or what the future plans are.
UButtons need to use window.location.assign not the :to prop as there is no vue router in a standalone component enviornment.

Unfixed Bugs (issues need to be created)

Also, I haven't checked for accessibility yet.
webgui & notification styles look weird on gray mode (black looks fine)
there's something fishy going on with the notification counts but it doesn't impact the user much (it's fine on refresh) and i fixed the bigger bugs. That being said, there are a bug or two that I found out yesterday and already forgot, so it's more robust but still some work to be done.
adding a bunch of notifications at once hangs the UI temporarily
need to upgrade to lastest version of Nuxtui in order to take advantage of newer styling/theming options for the toast

- update VSCode settings for Tailwind CSS support

…rror messages commit addresses the following two bugs/issues: 1. infinite network requests 2. make error messages more accurate bug details: - when scrolled all the way down in the notification pane (when api is down), unraid infinitely sends network requests. - must be scrolled all the way to the bottom and stay at the bottom of the pane while the api is down technical details: - for infinite loop, added try/catch that sets a canLoadMore flag to false when it encounters an error, preventing infinite loop - errors now look at non-standard locations as well impact: - performance benefits - more graceful ux on failure

… improved consistency - replaced Heroicons components with UIcon for better integration - refactored Sidebar.vue to utilize USlideover and UButton for a cleaner UI - removed unused imports and styles in main.css for better maintainability NOTES: - had to change main.css variables for it to work properly. Need to make sure this doesn't ruin other people's code. - still needs to be further refactored to align with existing ui variables

…mproved UI consistency - modified vite.config.ts to integrate app configuration into UI setup - updated app.config.ts to include new button, tabs, and slideover variants for better theming - cleaned up main.css by removing unused styles and ensuring proper imports - refactored notification components to streamline structure and improve readability

> [!Note] This stubs the unraid-ui/src/components/common/toast. Initially created a shim to convert vue-sonnner toasts to nuxtui. However, since there weren't that many, I just did a clean replacement. # Other Changes - replace router link with window.location.assign The `UButton` component attempts to inject the Vue Router instance when the `:to` prop is used. In the standalone component environment (where the router is not installed), this caused a "TypeError: inject(...) is undefined" crash when rendering notifications with links. This change replaces the `:to` prop with a standard `@click` handler that uses `window.location.assign`, ensuring navigation works correctly without requiring the router context.

coderabbitai · 2025-12-02T22:29:16Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch refactor/nuxtui-notifications

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-12-02T22:31:05Z

🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev

…ng logic Problem this solution addresses: Basically, when users filtered by alert, warning, or info, results were being paginated first, then filtered by the requested importance, so filtered notifications were not working properly in some (a lot) of cases. - added a new async generator method to load notifications in batches, enhancing performance and error handling. - refactored the notification loading logic to utilize the generator, improving readability and maintainability. - updated filtering logic to streamline the process of matching notifications based on importance and type.

github-actions · 2025-12-03T22:30:25Z

🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev

- updated file watching logic to ignore initial files, improving performance. - added duplicate check for archive notifications to prevent double counting. - implemented retry mechanism for loading notifications, enhancing reliability. - introduced handling for risky notifications to ensure proper file creation and avoid legacy script failures.

This change ensures that Nuxt UI notifications respect the display position configured in the legacy webGUI settings. Backend: - Added `NotificationSettings` to the GraphQL model. - Exposed `settings` field on the `Notifications` resolver. - Implemented `getSettings` in `NotificationsService` to read `notify.position` from the Dynamix store. Frontend: - Added `getNotificationSettings` GraphQL query. - Updated `mount-engine.ts` to fetch settings before mounting. - Mapped legacy position values (e.g., 'center') to Nuxt UI compatible values (e.g., 'top-center').

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2025-12-05T21:46:14Z

web/src/composables/useClipboardWithToast.ts

 export function useClipboardWithToast() {
  const { copy, copied, isSupported } = useClipboard();
+  const toast = useToast();



Import useToast in clipboard helper

The clipboard composable now calls useToast() to show success/error messages, but the module only imports useClipboard. With no useToast import in this file, the build will fail at compile time with an undefined identifier when copyWithNotification executes.

Useful? React with 👍 / 👎.

good callout.

…with Nuxt UI 4.0.0-alpha.0

zackspear

Mostly focused on front-end related changes in this review. It would be helpful to have @pujitm review the API related changes.

@Ajit-Mehrotra and I also discussed how to manage unrelated bugs that arise during scoped work. And to do his best to not let unrelated bugs introduce scope creep.

zackspear · 2025-12-08T20:27:06Z

web/app.config.ts

+    // Also, for toasts, BUT this is imported in the Root UApp in mount-engine.ts
+    // https://ui.nuxt.com/docs/components/toast#examples
+    toaster: {
+      position: 'top-center' as const,


Make sure this is set to the matching default Unraid webgui value

zackspear · 2025-12-08T20:29:36Z

web/src/components/Notifications/Indicator.vue

 <template>
  <div class="relative flex items-center justify-center">
-    <BellIcon class="text-header-text-primary h-6 w-6" />
+    <UIcon name="i-heroicons-bell-20-solid" class="h-6 w-6" />


could use size-6 to replace h-6 w-6

zackspear · 2025-12-08T20:30:53Z

web/src/components/Notifications/Item.vue

 }, '');

-const icon = computed<{ component: Component; color: string } | null>(() => {
+const icon = computed<{ name: string; color: string } | null>(() => {


Create an interface for this type so it can be shared across files. Since this is also used in Notifications/Indicator.vue.

zackspear · 2025-12-08T20:32:20Z

web/src/components/Notifications/List.vue

+function dbgApolloError(prefix: string, err: ApolloError | null | undefined) {
+  if (!err) return;
+  console.group(`[Notifications] ${prefix}`);
+  console.log('top message:', err.message);
+  console.log('graphQLErrors:', err.graphQLErrors);
+  console.log('networkError:', err.networkError);
+  try {
+    console.log('json:', JSON.parse(JSON.stringify(err)));
+  } catch {
+    console.log('json:', 'failed to parse');
+    console.log('json:', err);
+  }
+  console.groupEnd();
+}


debug code to potentially clean up.

if you're wanting to keep this for later, abstract this into a helper file

zackspear · 2025-12-08T20:33:31Z

web/src/components/Notifications/List.vue

+const displayErrorMessage = computed(() => {
+  if (offlineError.value) return offlineError.value.message;
+
+  const apolloErr = error.value as ApolloError | null | undefined;
+  const firstGqlErr = apolloErr?.graphQLErrors?.[0] as
+    | (GraphQLError & {
+        extensions?: { error?: { message?: string } };
+        error?: { message?: string };
+      })
+    | undefined;
+
+  const gqlEmbedded = firstGqlErr?.extensions?.error?.message;
+  const gqlTop = firstGqlErr?.error?.message;
+  const gqlMessage = firstGqlErr?.message;
+  const netMessage = (apolloErr?.networkError as { message?: string } | undefined)?.message;
+  const topMessage = apolloErr?.message;
+
+  return gqlEmbedded || gqlTop || gqlMessage || netMessage || topMessage || 'An unknown error occurred.';
+});


Could also potentially be used elsewhere in other components (especially in the future). Might be worth it to abstract into a display apollo error component.

zackspear · 2025-12-08T20:33:57Z

web/src/components/Notifications/List.vue

+    <div v-if="loading" class="w-full max-w-md space-y-4">
+      <div v-for="n in 3" :key="n" class="py-1.5">
+        <div class="flex items-center gap-2">
+          <USkeleton class="h-5 w-5 rounded-full" />


size-5 instead of h-5 w-5

zackspear · 2025-12-08T20:34:32Z

web/src/components/Notifications/List.vue

+
+    <!-- Default (empty state) -->
+    <div v-else class="contents">
+      <UIcon name="i-heroicons-check-20-solid" class="text-unraid-green h-10 w-10 translate-y-3" />


size-10 instead of h-10 w-10

zackspear · 2025-12-08T20:36:06Z

web/src/components/Notifications/Sidebar.vue

 });

+const openSettings = () => {
+  window.location.assign('/Settings/Notifications');


I know this was called out in the description of the PR due to lack of vue-router not being used.

The more instances I see of this the more I'm wondering if we need to create a helper / composable to ensure that the usage of this is consistent across components.

zackspear · 2025-12-08T20:37:39Z

web/src/components/Wrapper/mount-engine.ts

+        'top-right': 'top-right',
+        'bottom-left': 'bottom-left',
+        'bottom-right': 'bottom-right',
+        center: 'top-center',


we discussed creating an issue for updating Nuxt UI to the latest version so we can support top-center & bottom-center post update of the dep in a follow up PR.

zackspear · 2025-12-08T20:38:03Z

web/src/composables/useClipboardWithToast.ts

 export function useClipboardWithToast() {
  const { copy, copied, isSupported } = useClipboard();
+  const toast = useToast();



good callout.

…istency with legacy webGUI

…and description

… toasts

…ap text

Ajit-Mehrotra added 6 commits November 21, 2025 12:28

enhance: add ssh retry logic and SSH options in deploy script

daadc94

refactor: replace LoadingSpinner and LoadingError with nuxtUI components

4449997

- update VSCode settings for Tailwind CSS support

Ajit-Mehrotra added 2 commits December 5, 2025 14:37

Ajit-Mehrotra marked this pull request as ready for review December 5, 2025 21:42

Ajit-Mehrotra requested a review from pujitm December 5, 2025 21:42

chatgpt-codex-connector bot reviewed Dec 5, 2025

View reviewed changes

Ajit-Mehrotra requested a review from zackspear December 5, 2025 22:57

fix(app.config): update toast max duration comment for compatibility …

8f0e7b0

…with Nuxt UI 4.0.0-alpha.0

zackspear requested changes Dec 8, 2025

View reviewed changes

Ajit-Mehrotra added 8 commits December 9, 2025 13:43

fix(notifications): override notification bell hover to maintain cons…

baed8f0

…istency with legacy webGUI

fix(notifications): add break-word styling for long words in subject …

391cb12

…and description

fix(notifications): add elipses to long single-word toast titles

501cb0a

fix(notifications): show full title on notification pane and truncate…

7351c00

… toasts

fix(notifications): add support for bottom-center'd nuxtui toasts

b147762

chore(gitignore): add .dev-scripts to gitignore for local dev scripts

6c541a8

fix(notifications): fix color of notification button's active state

e30ce9f

fix(notification): add min width to allow flex title to shrink and wr…

1f79830

…ap text

Refactor/nuxtui notifications #1817

Are you sure you want to change the base?

Refactor/nuxtui notifications #1817

Conversation

Ajit-Mehrotra commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Summary of changes and notable additions:

Bug Fixes

Some Notes

Unfixed Bugs (issues need to be created)

Uh oh!

coderabbitai bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

github-actions bot commented Dec 2, 2025

Uh oh!

github-actions bot commented Dec 3, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zackspear left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Ajit-Mehrotra commented Dec 2, 2025 •

edited

Loading

coderabbitai bot commented Dec 2, 2025 •

edited

Loading