Add realm properties hooks and reduce main window re-renders.

[michelinewu]

Overview
This PR introduces new React hooks (useRealmProperty and useRealmProperties) to minimize unnecessary component re-renders across the application, particularly in the main window.

Issues Addressed

1. Excessive re-renders - Multiple components were re-rendering when realm properties changed in the realm object, not just the property referenced
2. Stale values in resize handlers - Chat and other resizable components had debounce/cleanup issues with stale state
3. Performance in main window and dock - The main window and live dock components were re-rendering too frequently

Solutions Implemented
New Hooks (app/components-react/hooks/realm.ts)

• Added useRealmProperty - selectively subscribe to individual realm properties
• Added useRealmProperties - subscribe to multiple specific properties
• These mirror the existing useVuex hook pattern for consistency

Component Refactoring

• Refactored Main.tsx (primary change: +84/-44 lines) to use new hooks
• Updated LiveDock.tsx, SideNav.tsx, and other frequently-rendered components
• Replaced broader state subscriptions with targeted property subscriptions

Bug Fixes

• Fixed chat resize bug by adding debounce and cleanup checks to prevent stale values

[bundlemon]

BundleMon

Files added (4)

Status	Path	Size	Limits
✅	renderer.(hash).js	+7.72MB	-
✅	vendors~renderer.(hash).js	+4.67MB	-
✅	updater.js	+115.29KB	-
✅	guest-api.js	+40.23KB	-

Total files change +12.54MB

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history

[wesrupert]

LGTM, with two small suggestions

[wesrupert]

Out of curiousity, is there a benefit to this approach vs the useRealmObjectProperties multi-key signature? From my read of realm.ts changes, this would also be a valid call:

const { currentStep, currentIndex, showOnboarding } = useRealmObjectProperty(
  OnboardingV2Service.state,
  'currentStep',
  'currentIndex',
  'showOnboarding'
);

Comment applies throughout, so I'll just leave it on this one.

[wesrupert]

Nit, but throughout - this gets pretty verbose in some files, especially when renaming the tracked value. I'd recommend two changes:

1. Rename useRealmObjectProperty -> useRealmProperty, to match useRealmProperties
2. If there is only one key (or just make this the "one key only" version, for simplicity/maintainability), return the value directly.

Together, this line would become:

const performanceMode = useRealmProperty(CustomizationService.state, 'performanceMode');

---

The benefits are better realized in other files, like app/components-react/windows/Settings.tsx:

This:

const { currentSettingsTab: currentTab } = useRealmObjectProperty(
  NavigationService.state,
  'currentSettingsTab',
);

Becomes this:

const currentTab = useRealmProperty(NavigationService.state, 'currentSettingsTab');