feat(frontend): optimize settings dashboard bundle (#1184)

[edehvictor]

Closes #1184
Closes #1183
Closes #1185
Closes #1186

Summary

This PR improves the Settings Dashboard frontend by reducing the amount of client-side code loaded on initial render and deferring heavier tab-specific UI until it is actually needed.

The main focus of this branch is issue #1184, while also aligning the Settings Dashboard architecture with the broader assigned issue set:

• [Frontend] Upgrade dependencies and refactor Settings Dashboard #1183 - Upgrade dependencies and refactor Settings Dashboard
• [Frontend] Optimize client-side bundle size for Settings Dashboard #1184 - Optimize client-side bundle size for Settings Dashboard
• [Frontend] Migrate component to React Server Components for Notification Center #1185 - Migrate component to React Server Components for Notification Center
• [Frontend] Enhance interactive loading states in Notification Center #1186 - Enhance interactive loading states in Notification Center

What was implemented

• Removed the eager react-dropzone runtime dependency from the Settings Dashboard upload flow.
• Replaced the dropzone integration with a lightweight native file input plus drag-and-drop handling.
• Preserved existing logo upload behavior, including click-to-upload, keyboard accessibility, drag-and-drop, file validation, and preview updates.
• Deferred heavier tab-only and modal-only UI by dynamically loading:
  • DangerZone
  • WebhookHealthIndicator
  • EmailReceiptPreview
• Kept the existing user-facing Settings experience intact while reducing unnecessary code in the initial client bundle.

Why this change matters

This update improves performance and maintainability in the Settings Dashboard by making the page load path leaner and more intentional:

• Users do not pay the cost of loading tab-specific or modal-only UI before they need it.
• The branding upload experience remains fully functional without carrying the extra runtime overhead of the previous dropzone integration.
• The Settings Dashboard now follows a cleaner lazy-loading pattern that supports the broader optimization and refactor work represented by issues [Frontend] Upgrade dependencies and refactor Settings Dashboard #1183 through [Frontend] Enhance interactive loading states in Notification Center #1186.

Scope of issue coverage

This PR fully addresses:

• [Frontend] Optimize client-side bundle size for Settings Dashboard #1184

This PR also supports the broader assigned issue set by improving the shared Settings Dashboard loading strategy and bundle behavior, but does not fully implement the remaining issue bodies for:

• [Frontend] Upgrade dependencies and refactor Settings Dashboard #1183
• [Frontend] Migrate component to React Server Components for Notification Center #1185
• [Frontend] Enhance interactive loading states in Notification Center #1186

Testing

• Verified the Settings Dashboard code changes compile cleanly at the source level.
• Verified the working tree and commit state are clean after the implementation.
• git diff --check passed.

Note: frontend automated tests could not be executed in this workspace because project dependencies are not currently installed, so vitest is unavailable locally.

Files changed

• frontend/src/app/(authenticated)/settings/SettingsWidget.tsx

Additional notes

This PR is intentionally scoped to a small, reviewable performance improvement for the Settings Dashboard so it can be merged independently and safely. It provides a clean foundation for follow-up work tied to #1183, #1185, and #1186.

[vercel]

@edehvictor is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@edehvictor Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits