Skip to content

Conversation

@Ajit-Mehrotra
Copy link
Collaborator

@Ajit-Mehrotra Ajit-Mehrotra commented Dec 2, 2025

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

BREAKING CHANGE: ResolvedOrganizerView -> root is replaced by rootId +
flatEntries.

`root` resolved a tree representation of an organizer, but this required
clients to defined and use their own tree operations, thus increasing
client complexity.

Instead, `flatEntries` is more suitable for client operations and only
requires an initial mapping step on the client for efficiency.
…e files

Problem:
ESLint was flagging auto-imported composables (like `useToast`) as undefined variables in `.vue` files. While TypeScript correctly identified these globals via `auto-imports.d.ts`, the default `no-undef` rule in our Vue ESLint config did not account for them, causing false positive linting errors.

Solution:
- Disable the `no-undef` rule specifically for `.vue` files in `eslint.config.mjs`.
- Rely on TypeScript (via `vue-tsc`) and `auto-imports.d.ts` to handle global variable validation, ensuring type safety without conflicting with the auto-import build process.
- Remove manual imports of `useToast` that were added as a workaround (p sure the path I used didn't even exist in node modules).
…posable in ConnectSettings, DockerContainersTable, and RCloneOverview components
…r external URL handling across multiple components
…logging and improve extractGraphQLErrorMessage to handle additional error structures
…olors to streamline notification rendering across components
Updates the notification sidebar to properly refresh notification counts (badges) when the API connection is restored or when the user manually retries.

Changes:
- Emit `refetched` event from `NotificationsList` when the query successfully returns data.
- Trigger `recalculateOverview` and `refetch` in `Sidebar` when the list is refreshed or when the API status becomes 'online'.
- Fixes an issue where notification badges would remain at 0 after an API outage, even though the notification list had populated correctly.
- Added optional properties `expand`, `duration`, and `max` to the Notify interface.
- Updated NotificationSettings class to include validation for new properties.
- Modified the NotificationsService to parse and return the new settings.
- Adjusted the toaster configuration in the app to utilize the new settings.
- Updated GraphQL query to fetch the new notification settings.
…nd clean up imports

- Created a new file for ToastPosition type definitions to improve code organization.
- Removed the inline ToastPosition type definition from mount-engine.ts and updated the import accordingly.
- Added a comment in app.config.ts for clarity on toaster settings.
Base automatically changed from feat/docker-overview-table to main December 18, 2025 16:11
…coping

- Introduced a new class to modify the default base CSS file by wrapping content after the 'body' selector in a CSS scope.
- Implemented methods to read the file, generate a patch, and apply the necessary modifications.
- Added error handling for cases where the 'body' block cannot be found.
Azure theme causing problems because it's the only theme where the color of the icon can't be inverted (bruh)
Ajit-Mehrotra and others added 4 commits December 23, 2025 17:01
Raised by [MitchellThompkins](https://github.com/MitchellThompkins) in
#1848

- Documents how to use Docker to build a local Connect plugin
- Local Plugin flow will now build workspace packages before proceeding
with plugin infra + build
- Removes recommendation to run `pnpm build:watch` from root, as this
race conditions and build cache issues.
- Makes `pnpm dev` from root parallel, preventing servers from blocking
each other.

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

## Summary by CodeRabbit

* **Documentation**
* Updated development workflow documentation to emphasize Docker-based
plugin builds
* Restructured development modes into three workflows: local Docker
builds, direct deployment, and development servers
  * Updated build and deployment instructions

* **Chores**
  * Modified dev script for parallel execution
  * Refactored build scripts with improved dependency handling

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Previously, api plugins could only be installed as `peerDependencies` in
the api. This change allows them to be listed as `dependencies` as well.
This makes plugin loading (eg loading Connect) more robust.

Tests:

- [x] Re-logging on 7.3.0-beta.0.5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Notifications overview archive count includes duplicates, mismatches actual list

4 participants