fix: settings mobile layout, email validation, and dark mode UI contrast

[VaibhavDaveDev]

• Replace custom email regexes with Zod's built-in z.email() validator
• Fix Settings page mobile responsiveness by stacking the profile avatar and fields on narrow screens
• Prevent stale pending edit request counts in usePropertyData when switching tabs or properties
• Fix dark mode contrast issues and Fix auth link hover-state contrast in dark mode
• Prevent stale property data, including tenancies, bills, and pending edit counts, from bleeding across property switches or role changes
• Strengthen the usePropertyData test suite by fixing async microtask leaks and adding strict guard coverage

Summary by CodeRabbit

• Bug Fixes

  • Improved data loading reliability by preventing outdated responses from replacing current property information.
  • Ensured dashboard bill updates reflect the latest state.

• Accessibility

  • Unread notifications now use accessible button controls and labels.

• UI Improvements

  • Refined theme colors, hover states, dashboard controls, and profile styling.
  • Added responsive layouts for the settings profile section.

• Validation

  • Improved email validation for OTP requests and tenant invitations.

• Tests

  • Added comprehensive coverage for property data loading and refresh behavior.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 06e5885c-a3ba-4029-a9ed-a8de8a0a0b16

📥 Commits

Reviewing files that changed from the base of the PR and between eac3fc7 and 8fe159f.

📒 Files selected for processing (14)

• src/api/app.ts
• src/api/routes/tenancies.ts
• src/components/auth/AuthFormLayout.tsx
• src/components/auth/LoginForm.tsx
• src/components/common/NotificationBell.tsx
• src/components/common/UserNav.tsx
• src/components/dashboard/Overview.tsx
• src/components/dashboard/OwnerDashboard.tsx
• src/components/dashboard/SharedUI.tsx
• src/components/settings/SettingsPageSections.tsx
• src/hooks/use-property-data.test.ts
• src/hooks/use-property-data.ts
• src/pages/index.astro
• src/styles/globals.css

---

📝 Walkthrough

Walkthrough

The changes update email validation, protect property data from stale asynchronous responses, improve dashboard and notification interactions, and apply theme, responsive layout, and formatting updates across the interface.

Changes

Application updates

Layer / File(s)	Summary
Email validation src/api/app.ts, src/api/routes/tenancies.ts	OTP and tenant invitation schemas now use Zod email validation. OTP input is trimmed and lowercased before validation.
Property data request guards src/hooks/use-property-data.ts, src/hooks/use-property-data.test.ts	usePropertyData tracks request generations, separates fetch effects, resets property-dependent state, and ignores stale responses. Tests cover request races, loading cleanup, refetch isolation, and property or tab changes.
Dashboard state updates src/components/dashboard/Overview.tsx, src/components/dashboard/OwnerDashboard.tsx	OwnerDashboard uses functional state updates when marking bills paid. Overview adapts the callback to nullable owner statistics. Dashboard controls also use primary theme styling.
Unread notification controls src/components/common/NotificationBell.tsx	Unread notification rows now use accessible buttons. Read rows remain non-interactive. Theme variables replace hardcoded unread badge colors.
Theme and responsive layout styling src/components/auth/*, src/components/common/UserNav.tsx, src/components/dashboard/SharedUI.tsx, src/components/settings/SettingsPageSections.tsx, src/pages/index.astro, src/styles/globals.css	The interface receives formatting, hover-state, theme-variable, chart-control, landing-page, and responsive settings-profile layout updates.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant PropertyView
  participant usePropertyData
  participant apiClient
  PropertyView->>usePropertyData: change property or active tab
  usePropertyData->>apiClient: fetch current domain data
  apiClient-->>usePropertyData: return response
  usePropertyData->>PropertyView: update state only for current request

Loading

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/email-validation-and-ui-polish

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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