Skip to content

implement home ui#7

Merged
Retsomm merged 2 commits into
mainfrom
dev
May 19, 2026
Merged

implement home ui#7
Retsomm merged 2 commits into
mainfrom
dev

Conversation

@Retsomm
Copy link
Copy Markdown
Owner

@Retsomm Retsomm commented May 19, 2026

Summary by CodeRabbit

  • New Features

    • Personalized Home screen with greeting, flag, notifications button, and static streak display
    • Daily goal card with progress bar and XP progress
    • Continue learning card focused on current language/unit
    • Today’s plan list showing lesson rows, completion state, and new-words counts
  • Assets

    • Added new visual assets (palace, streak/fire, treasure, teacher portrait)

Review Change Stack

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 19, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1f0e84a4-ede6-44b0-8502-021993d31ca0

📥 Commits

Reviewing files that changed from the base of the PR and between b3e6841 and 1f1793f.

📒 Files selected for processing (2)
  • app/(tabs)/home.tsx
  • constants/images.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • app/(tabs)/home.tsx

📝 Walkthrough

Walkthrough

Implements the home tab screen with personalized greeting from Clerk user data, daily XP progress tracking, current lesson/unit selection from store-driven language choice, new image asset constants, and a "Today's plan" section composed of reusable PlanRow components displaying task icons, titles, and completion indicators.

Changes

Home Screen Dashboard

Layer / File(s) Summary
Image asset imports and exports
constants/images.ts
Adds palace, streakFire, and treasure image imports and extends images export to include palace, streakFire, treasure, and teacherPortrait (mapped to mascotAuth).
Home screen state and derived data
app/(tabs)/home.tsx
Derives selected language from store, filters/sorts lessons and units by language and order, selects current lesson/unit, totals vocabulary words, caps earned XP and computes daily progress percentage, and derives greeting first name from Clerk user fields.
UI rendering, PlanRow component, and styles
app/(tabs)/home.tsx
Renders header (flag, greeting, streak, notifications), daily goal progress card, continue-learning card, and "Today's plan" list; introduces typed PlanRow component with variant-based icon backgrounds and completion indicator; adds local StyleSheet for padding, shadows, and pressed opacity.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • Retsomm/react-native-lingua#5: Previous work on language selection and lesson data structure that this PR consumes to populate the home screen dashboard.

Poem

🐰 I hopped in with a joyful cheer,
Lessons, flags, and XP near—
Plan rows lined up, progress in view,
New words waiting to learn anew,
Tiny rabbit, big hooray for you!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: implementing the home screen UI component with full functionality and styling.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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 dev

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🧹 Nitpick comments (1)
app/(tabs)/home.tsx (1)

177-221: ⚡ Quick win

Move PlanRow out of the screen into a reusable component file.

This block is a reusable UI section and makes the screen file heavier than necessary.

As per coding guidelines, "Screens should compose components and call hooks/stores, but should not contain large reusable UI blocks or complex business logic".

🤖 Prompt for 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.

In `@app/`(tabs)/home.tsx around lines 177 - 221, The PlanRow component (PlanRow
and PlanRowProps) is a reusable UI block and should be moved out of the screen
file into its own component file; create a new component file (e.g.,
PlanRow.tsx) that exports PlanRow as default, copy the PlanRow and PlanRowProps
definitions plus any local style references (or refactor styles.planIcon into
the new file or import shared styles), keep the same prop defaults (isComplete,
variant) and Ionicons usage, then replace the inline definition in home.tsx with
an import of the new PlanRow component and ensure any TypeScript types and
styling imports are updated so the screen composes the component without
duplicating logic.
🤖 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/`(tabs)/home.tsx:
- Around line 192-197: Replace dynamic NativeWind class concatenation for the
icon background and the other conditional classes by computing plain style
values and passing them via the style prop or a StyleSheet instead of embedding
them in className; for example, remove iconBackground (the string built from
variant === "coral" ? "bg-[`#FF515B`]" : "bg-lingua-deep-purple") and create an
iconBackgroundColor variable (e.g., variant === "coral" ? "`#FF515B`" : "`#2F2064`")
then keep the static className on the View
(h/w/rounded/items-center/justify-center) and add style={{ backgroundColor:
iconBackgroundColor }}; apply the same approach to the other conditional class
usage (the ternary used around lines 213-215) by computing the corresponding
color/font-size/etc. value and moving it into style or a StyleSheet entry
referenced by that component.
- Around line 74-80: The Pressable elements (e.g., the Pressable wrapping
Ionicons in app/(tabs)/home.tsx and the other Pressable controls at the ranges
reported) are interactive but lack onPress handlers; wire them to real handlers
using Expo Router or render non-interactive Views. For each Pressable (identify
by the Pressable component instances and the icons they wrap, e.g., the
notifications Ionicons), import and use useRouter() from "expo-router" and add
an onPress that calls router.push(...) to the appropriate route or call the
intended handler function, or replace the Pressable with a plain View/Text when
no action is required. Ensure hitSlop, accessibilityLabel and pressed style are
preserved and update any tests/components expecting navigation to point to the
new routes.

In `@constants/images.ts`:
- Around line 32-34: Replace the remote URI in the images object for
teacherPortrait with a bundled import/require so the asset is deterministic and
available offline: add an import or require for the teacher portrait asset at
the top of constants/images.ts (e.g., const teacherPortraitImg =
require('./path/to/teacherPortrait.png') or import teacherPortraitImg from
'...'), then update the teacherPortrait entry in the exported images object to
use that imported value instead of the remote uri string; keep the property name
teacherPortrait unchanged so other modules referencing images.teacherPortrait
continue to work.

---

Nitpick comments:
In `@app/`(tabs)/home.tsx:
- Around line 177-221: The PlanRow component (PlanRow and PlanRowProps) is a
reusable UI block and should be moved out of the screen file into its own
component file; create a new component file (e.g., PlanRow.tsx) that exports
PlanRow as default, copy the PlanRow and PlanRowProps definitions plus any local
style references (or refactor styles.planIcon into the new file or import shared
styles), keep the same prop defaults (isComplete, variant) and Ionicons usage,
then replace the inline definition in home.tsx with an import of the new PlanRow
component and ensure any TypeScript types and styling imports are updated so the
screen composes the component without duplicating logic.
🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f7748b8d-d291-446d-812e-03fbf587bf68

📥 Commits

Reviewing files that changed from the base of the PR and between 82640a9 and b3e6841.

📒 Files selected for processing (2)
  • app/(tabs)/home.tsx
  • constants/images.ts

Comment thread app/(tabs)/home.tsx
Comment on lines +74 to +80
<Pressable
accessibilityLabel="Notifications"
hitSlop={12}
style={({ pressed }) => pressed && styles.pressed}
>
<Ionicons name="notifications-outline" size={30} color="#0D132B" />
</Pressable>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

cat -n app/\(tabs\)/home.tsx | head -200

Repository: Retsomm/react-native-lingua

Length of output: 8866


🏁 Script executed:

cat -n app/\(tabs\)/home.tsx | grep -E "(import|useRouter|router)" | head -20

Repository: Retsomm/react-native-lingua

Length of output: 605


🏁 Script executed:

cat -n app/\(tabs\)/home.tsx | tail -50

Repository: Retsomm/react-native-lingua

Length of output: 1748


Wire all Pressable controls to real handlers (or render non-interactive views).

Lines 74-80, 130-138, and 145-149 render tappable UI with no onPress handlers, making these controls non-functional despite button affordance. According to the coding guidelines for app/**/*.{ts,tsx}, use Expo Router for navigation and wire these to appropriate routes or handlers.

🤖 Prompt for 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.

In `@app/`(tabs)/home.tsx around lines 74 - 80, The Pressable elements (e.g., the
Pressable wrapping Ionicons in app/(tabs)/home.tsx and the other Pressable
controls at the ranges reported) are interactive but lack onPress handlers; wire
them to real handlers using Expo Router or render non-interactive Views. For
each Pressable (identify by the Pressable component instances and the icons they
wrap, e.g., the notifications Ionicons), import and use useRouter() from
"expo-router" and add an onPress that calls router.push(...) to the appropriate
route or call the intended handler function, or replace the Pressable with a
plain View/Text when no action is required. Ensure hitSlop, accessibilityLabel
and pressed style are preserved and update any tests/components expecting
navigation to point to the new routes.

Comment thread app/(tabs)/home.tsx Outdated
Comment thread constants/images.ts Outdated
@Retsomm Retsomm merged commit 7b69342 into main May 19, 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