Skip to content

Dev#44

Merged
aryansoni-dev merged 3 commits into
mainfrom
dev
Jun 30, 2026
Merged

Dev#44
aryansoni-dev merged 3 commits into
mainfrom
dev

Conversation

@aryansoni-dev

@aryansoni-dev aryansoni-dev commented Jun 30, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

  • New Features

    • Redesigned onboarding with responsive layouts, updated progress indicators, skip actions, and refreshed preview cards.
    • Added a temporary “Back to onboarding” option on the login screen.
    • Updated Home and Reflect screens with new scenic card visuals and richer recent-entry presentation.
  • Bug Fixes

    • Improved onboarding and sync behavior to better handle navigation, session changes, and duplicate mood logs.
  • Documentation

    • Added guidance for handling design assets and keeping text sizes consistent.

  [+] Redesigned the onboarding screens.
  [+] Redesigned the home screen.
  [+] Redesigned the reflection screen.
  [+] Added assets for the new designs.
  [+] Bug fixes and improvements.
@coderabbitai

coderabbitai Bot commented Jun 30, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@aryansoni-dev, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 35 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d0e69aa9-acc0-4abe-a4a2-fb3a0b5a68b5

📥 Commits

Reviewing files that changed from the base of the PR and between f1d4e42 and c7320fb.

📒 Files selected for processing (10)
  • app/(onboarding)/onboarding-screen-1.tsx
  • app/(onboarding)/onboarding-screen-2.tsx
  • app/(onboarding)/onboarding-screen-5.tsx
  • components/home/home-screen.tsx
  • components/home/mood/HomeMoodCheckInCard.tsx
  • components/home/mood/HomeSelectedMood.tsx
  • components/onboarding/onboarding-insights-preview.tsx
  • components/onboarding/onboarding-overview-content.tsx
  • components/onboarding/onboarding-ritual-content.tsx
  • components/ui/scenic-card-background.tsx
📝 Walkthrough

Walkthrough

Rewrites all five onboarding screens with responsive layouts using safe-area insets, replaces per-screen dot indicators with a shared OnboardingProgressHeader, and introduces new shared components (OnboardingInsightsPreview, OnboardingRitualCard/Features). Adds ScenicCardBackground for home and reflect card backgrounds, refreshes home screen greeting/entry-type rendering and mood card UI, and adds user-identity safety guards in the AI insight hook, achievement sync, and mood log store.

Changes

Onboarding Flow Redesign

Layer / File(s) Summary
Shared onboarding UI components
components/onboarding/onboarding-progress-header.tsx, components/onboarding/onboarding-insights-preview.tsx, components/onboarding/onboarding-ritual-content.tsx
Introduces OnboardingProgressHeader (step dots + skip button), OnboardingInsightsPreview + InsightFeature, and OnboardingRitualCard/OnboardingRitualFeatures — the building blocks consumed by all five screens.
Onboarding screens 1 & 2 rewrite
app/(onboarding)/onboarding-screen-1.tsx, app/(onboarding)/onboarding-screen-2.tsx
Screen 1 replaces static dot indicator with OnboardingProgressHeader, adds safe-area-responsive sizing, new copy, and Link-based CTA. Screen 2 swaps old artwork/feature row for a chat preview image, OnboardingProgressHeader, and a local FeatureItem component.
Onboarding screens 3, 4 & 5 rewrite
app/(onboarding)/onboarding-screen-3.tsx, app/(onboarding)/onboarding-screen-4.tsx, app/(onboarding)/onboarding-screen-5.tsx
Screen 3 replaces emoji mood picker with OnboardingInsightsPreview + InsightFeature strip. Screen 4 replaces mapped ritual cards with OnboardingRitualCard/OnboardingRitualFeatures. Screen 5 replaces ScrollView hero with OnboardingOverviewPreview, EmptyPreviewCard, and a FeatureItem row. All screens add handleSkipPress wired to completeOnboarding() + router.replace.
Login screen back-to-onboarding button
app/(auth)/login.tsx, components/auth/auth-screen.tsx
AuthScreen gains optional showTemporaryOnboardingBackButton prop; when true in login mode it renders a Pressable that calls resetOnboarding() and navigates to /onboarding-screen-1. LoginScreen passes the prop.

Home & Reflect UI Refresh

Layer / File(s) Summary
ScenicCardBackground component and image assets
components/ui/scenic-card-background.tsx, constants/images.ts, data/reflect.ts
Adds ScenicCardBackground (base image + optional blurred overlay + LinearGradient per variant). Expands images constant with aiCard, eveningCard, morningCard, moodCardHeart, noon, onboardingAiChatCard. Removes backgroundColor from ReflectPrompt.
Reflect screen scenic card integration
components/reflect/reflect-screen.tsx
ReflectScreen computes reflectCardWidth from useWindowDimensions, passes it to ReflectPromptCard, and replaces static card backgrounds with ScenicCardBackground (variant="ai" / "evening").
Home screen greeting, entry cards, and scenic cards
components/home/home-screen.tsx
Converts getGreeting to return {label, period} driving background image selection via greetingBackgrounds. Adds entryTypeMetadata for per-type icon/color/label. Expands HomeRecentEntry with borderColor. Rewires AI reflection and morning intention cards to ScenicCardBackground. Refactors recent entry card rendering.
Mood card UI updates
components/home/mood/HomeMoodCheckInCard.tsx, components/home/mood/HomeSelectedMood.tsx
HomeMoodCheckInCard header becomes a flex-row with a new HeartMoodAccent image. HomeSelectedMood switches to a bordered row layout with decorative blobs and a Feather clock icon on the saved state.

Data Safety & Sync Fixes

Layer / File(s) Summary
User-identity guards
hooks/useAIInsightReport.ts, lib/sync/requestSync.ts, store/useMoodLogStore.ts
useAIInsightReport clears state early when report.userId mismatches and no local report exists. syncAchievements returns early when the user is no longer active. dedupeMoodLogs switches key to JSON.stringify([userId, id]) to prevent colon-collision.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • aryansoni-dev/dear-diary#43: Directly overlaps at the function level — same useAIInsightReport.ts userId guard, requestSync.ts active-user check, and useMoodLogStore.ts dedupe key change.
  • aryansoni-dev/dear-diary#37: Modifies the same hooks/useAIInsightReport.ts refresh/caching and staleness-handling logic that this PR further refines.
  • aryansoni-dev/dear-diary#40: Touches lib/sync/requestSync.ts achievement sync flow that this PR adds an active-user guard to.
🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title is too vague to describe the changeset and doesn't communicate the main update. Replace it with a concise, specific title that summarizes the primary change, such as the onboarding and UI refactor.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch dev

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 11

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/`(onboarding)/onboarding-screen-1.tsx:
- Around line 73-90: The ScrollView in onboarding-screen-1 is applying safe-area
spacing twice because `contentContainerStyle` already uses `insets.top` and
`insets.bottom` while `contentInsetAdjustmentBehavior="automatic"` can add
iOS-adjusted insets again. Update the `ScrollView` configuration so the manual
padding remains the source of truth by switching
`contentInsetAdjustmentBehavior` to `never`, and keep the existing
`contentContainerStyle` logic unchanged.

In `@app/`(onboarding)/onboarding-screen-2.tsx:
- Around line 99-110: The onboarding screen layout is preventing access to the
CTA on short-height devices because the ScrollView in onboarding-screen-2 and
the main column height constraints together disable recovery when content
overflows. Re-enable scrolling in the ScrollView and adjust the main content
sizing in the layout around the main column so it can shrink or scroll on
landscape/tiny-height screens; use the ScrollView wrapper, mainHeight
constraint, and the content container setup in onboarding-screen-2 as the places
to fix.

In `@app/`(onboarding)/onboarding-screen-5.tsx:
- Around line 26-59: The onboarding route is still owning the feature overview
UI and hardcoded feature copy, which should be extracted into reusable pieces.
Move the preview/feature row and any substantial shared UI from
OnboardingScreenFive into components/onboarding, and relocate the featureCards
content into a data module or the extracted component so the app route stays
composition-only. Use OnboardingScreenFive and featureCards as the primary
symbols to find and split the logic, and keep the screen limited to composing
extracted components and hooks/stores.

In `@components/home/home-screen.tsx`:
- Line 142: The home screen greeting in the displayName assignment uses a
hardcoded fallback name, which causes users without a firstName to be shown as
someone else. Update the logic in home-screen.tsx around displayName so it no
longer falls back to a specific person’s name; use an empty or neutral fallback
instead, and keep the greeting behavior consistent wherever displayName is
consumed.
- Around line 143-144: The Home screen greeting is being locked by useMemo with
an empty dependency list, so it never updates when the time of day changes.
Update the greeting logic in home-screen.tsx so the value is recomputed when the
relevant time-based state changes, or remove the memoization entirely and derive
the greeting directly before reading greetingBackgrounds[greeting.period]. Make
sure the Home screen component reflects noon/evening transitions without
requiring an unmount.

In `@components/home/mood/HomeMoodCheckInCard.tsx`:
- Around line 223-227: The decorative heart image in HomeMoodCheckInCard is
being exposed to assistive tech via accessibilityLabel even though it is purely
visual. Update the Image in HomeMoodCheckInCard to remove the accessibilityLabel
and mark it as inaccessible/non-accessible so it is hidden from screen readers
while keeping the existing styling and source unchanged.

In `@components/home/mood/HomeSelectedMood.tsx`:
- Around line 113-132: The unsaved prompt is tied too tightly to savedAt in
HomeSelectedMood, so a mood marked isSaved can still render “Save this as
today’s check-in” when the timestamp is missing. Update the conditional in
HomeSelectedMood to render the saved-state UI based on isSaved first, and make
the “Logged today at …” suffix optional when savedAt is null instead of falling
back to the unsaved prompt. Use the existing isSaved, savedAt, and
formatSavedTime symbols to keep the saved and unsaved states clearly separated.
- Around line 103-129: The status text in HomeSelectedMood is disabling Dynamic
Type, which prevents users with larger accessibility text settings from reading
it comfortably. Update the Text elements in HomeSelectedMood so the main title
and supporting copy allow font scaling, and keep allowFontScaling={false} only
on non-textual/decorative elements where needed. Focus on the Text blocks around
the isSaved/savedAt messaging and preserve sizing behavior with
minimumFontScale/numberOfLines instead of turning scaling off.

In `@components/onboarding/onboarding-insights-preview.tsx`:
- Around line 95-119: The compact preview labels in
onboarding-insights-preview.tsx are mixing Tailwind line-height utilities with
inline lineHeight values, so the leading-6 classes on the two Text elements are
misleading and effectively overridden. Update the Text elements in the preview
label block to keep a single source of truth for line height by removing the
conflicting leading-6 usage where the inline style already controls it, while
preserving the intended compact spacing in the component.

In `@components/onboarding/onboarding-ritual-content.tsx`:
- Around line 82-124: The text blocks in onboarding-ritual-content are mixing
the Tailwind `leading-6` class with smaller explicit `lineHeight` values, so the
rendered typography is inconsistent with the class names. Update the affected
`Text` nodes in `OnboardingRitualContent` to either keep `leading-6` and remove
the inline line-height overrides, or remove `leading-6` where compact custom
leading is intended, and apply the same cleanup to the other affected block
mentioned in the review.

In `@components/ui/scenic-card-background.tsx`:
- Around line 58-68: The Image in scenic-card-background should stop using
inline absolute-fill style objects for static layout. Update the shared
scenic-card-background component to express the fixed positioning and fill
behavior with NativeWind className instead of inline styles, and apply the same
cleanup to the other repeated absolute-fill block referenced in the component.
Keep the existing Image and background rendering logic intact while moving the
static styling onto the relevant JSX elements.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: ced6b4af-7ed3-44d2-a5f4-00f228ff01f6

📥 Commits

Reviewing files that changed from the base of the PR and between 655b941 and f1d4e42.

⛔ Files ignored due to path filters (12)
  • UI/Onb v2/onbv2 scr2 card.png is excluded by !**/*.png
  • UI/Onb v2/scr1.png is excluded by !**/*.png
  • UI/Onb v2/scr2.png is excluded by !**/*.png
  • UI/Onb v2/scr3.png is excluded by !**/*.png
  • UI/Onb v2/scr4.png is excluded by !**/*.png
  • UI/Onb v2/scr5.png is excluded by !**/*.png
  • assets/images/AI-chat-mockup.png is excluded by !**/*.png
  • assets/images/ai-card.png is excluded by !**/*.png
  • assets/images/evening-card.png is excluded by !**/*.png
  • assets/images/mood card heart.png is excluded by !**/*.png
  • assets/images/morning-card.png is excluded by !**/*.png
  • assets/images/noon.png is excluded by !**/*.png
📒 Files selected for processing (21)
  • AGENTS.md
  • app/(auth)/login.tsx
  • app/(onboarding)/onboarding-screen-1.tsx
  • app/(onboarding)/onboarding-screen-2.tsx
  • app/(onboarding)/onboarding-screen-3.tsx
  • app/(onboarding)/onboarding-screen-4.tsx
  • app/(onboarding)/onboarding-screen-5.tsx
  • components/auth/auth-screen.tsx
  • components/home/home-screen.tsx
  • components/home/mood/HomeMoodCheckInCard.tsx
  • components/home/mood/HomeSelectedMood.tsx
  • components/onboarding/onboarding-insights-preview.tsx
  • components/onboarding/onboarding-progress-header.tsx
  • components/onboarding/onboarding-ritual-content.tsx
  • components/reflect/reflect-screen.tsx
  • components/ui/scenic-card-background.tsx
  • constants/images.ts
  • data/reflect.ts
  • hooks/useAIInsightReport.ts
  • lib/sync/requestSync.ts
  • store/useMoodLogStore.ts
💤 Files with no reviewable changes (1)
  • data/reflect.ts

Comment thread app/(onboarding)/onboarding-screen-1.tsx
Comment thread app/(onboarding)/onboarding-screen-2.tsx
Comment thread app/(onboarding)/onboarding-screen-5.tsx Outdated
Comment thread components/home/home-screen.tsx Outdated
Comment thread components/home/home-screen.tsx Outdated
Comment thread components/home/mood/HomeSelectedMood.tsx
Comment thread components/home/mood/HomeSelectedMood.tsx Outdated
Comment thread components/onboarding/onboarding-insights-preview.tsx
Comment thread components/onboarding/onboarding-ritual-content.tsx
Comment thread components/ui/scenic-card-background.tsx Outdated
@aryansoni-dev aryansoni-dev merged commit 0e3df8f into main Jun 30, 2026
1 check passed
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.

1 participant