feat: Improve Home Screen#38
Merged
Merged
Conversation
added 11 commits
April 14, 2026 21:44
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 8 minutes and 46 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (13)
📝 WalkthroughWalkthroughBackend expands GET /api/companies access to multiple roles; frontend adds company browsing UI (search, list, cards), related components, types, hooks, theme persistence for a "blobs" background toggle, and navigation/header adjustments. Changes
Sequence DiagramsequenceDiagram
actor User
participant UI as App UI
participant Screen as BrowseCompaniesScreen
participant Query as ReactQuery
participant API as Backend API
participant ThemeStore
participant Bg as BackgroundShapes
participant Access as AccessibilityMenu
User->>UI: Open app / navigate to BrowseCompanies
UI->>Screen: mount (params: serviceType)
Screen->>Query: useCompanies() (queryKey: ["companies"])
Query->>API: GET /api/companies
API-->>Query: Company[]
Query-->>Screen: data / isLoading / error
Screen->>Screen: filter by serviceType and search
Screen-->>UI: render CompanyCard list or empty/error/loading
User->>Access: Toggle blobs
Access->>ThemeStore: toggleBlobs()
ThemeStore->>ThemeStore: persist BLOBS_KEY
ThemeStore-->>Bg: showBlobs updated
Bg-->>UI: show/hide decorations
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~35 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/components/AccessibilityMenu/AccessibilityMenu.tsx`:
- Around line 83-95: The TouchableOpacity used for the blobs toggle in
AccessibilityMenu should expose switch semantics for screen readers: update the
TouchableOpacity (where toggleBlobs is passed to onPress and showBlobs controls
visuals) to include accessibilityRole="switch" and accessibilityState={{
checked: showBlobs }} so assistive tech announces it as a switch with the
correct checked state; keep existing styles and onPress logic unchanged.
In `@frontend/src/components/BackgroundShapes/BackgroundShapes.tsx`:
- Around line 1-5: The module-level Dimensions.get("window") is fixed at load
time so blob positions won't update on rotation; inside the BackgroundShapes
component replace the top-level const { width: W, height: H } =
Dimensions.get("window") with React Native's useWindowDimensions() hook (import
useWindowDimensions) and compute W and H from that within the component (update
any uses in BackgroundShapes and BackgroundShapes.styles consumers so blob
positions are derived from the hook values), removing the module-scope
Dimensions.get call so the component re-renders and recomputes positions on
window size changes.
In `@frontend/src/navigation/navigation.styles.ts`:
- Around line 8-17: The headerStyle currently hard-codes backgroundColor
("#00E8C5") which breaks theme-driven dark/light contrast; replace that literal
with a theme token by adding a header background (and optionally header
foreground) to the ThemeColors type and use that token in headerStyle (e.g.,
headerStyle.backgroundColor = colors.headerBackground) and keep
createHeaderTitleStyle using colors.headerForeground or colors.text for
consistent contrast; update any related typings/usages (ThemeColors and
createHeaderTitleStyle) so the header colors come from the active theme rather
than a hard-coded value.
In `@frontend/src/screens/Home/HomeScreen.tsx`:
- Around line 57-70: Loading and error branches render only styles.centered and
bypass the themed background; update both Views (the isLoading and error return
blocks) to combine the container background with the centering by using
styles.container along with styles.centered (e.g., pass an array or merged style
to the View) so the themed background/colors.background from styles.container is
preserved while still centering ActivityIndicator and Text; update references
around isLoading, error, styles.centered, and styles.container accordingly.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: df2dd9e7-1bd8-447d-86ac-6e247acc4ee4
📒 Files selected for processing (15)
backend/src/main/java/com/angel/autonow/company/CompanyController.javafrontend/src/api/companies.tsfrontend/src/components/AccessibilityMenu/AccessibilityMenu.styles.tsfrontend/src/components/AccessibilityMenu/AccessibilityMenu.tsxfrontend/src/components/BackgroundShapes/BackgroundShapes.styles.tsfrontend/src/components/BackgroundShapes/BackgroundShapes.tsxfrontend/src/constants/locales/bg.jsonfrontend/src/constants/locales/en.jsonfrontend/src/hooks/useCompanies.tsfrontend/src/navigation/MainTabs.tsxfrontend/src/navigation/navigation.styles.tsfrontend/src/screens/Home/HomeScreen.styles.tsfrontend/src/screens/Home/HomeScreen.tsxfrontend/src/stores/themeStore.tsfrontend/src/types/api.ts
added 6 commits
April 17, 2026 16:50
Add transparent glass colors for iOS-style liquid glass UI effects.
Use varied border radii per corner for more unpredictable, amorphous forms.
Add keys for service types, selection prompts, and browse options.
- GlassCard: Semi-transparent card with press animation - BackButton: Positioned back navigation - ScreenContainer: Screen wrapper with optional blobs - SearchInput: Styled text input - CompanyCard: Company info display card
- SelectServiceScreen: Service type selection grid - ServiceOptionsScreen: Options after selecting service - BrowseCompaniesScreen: Search and list companies
Replace monolithic HomeScreen with stack-based navigation flow.
There was a problem hiding this comment.
🧹 Nitpick comments (6)
frontend/src/components/BackButton/BackButton.tsx (1)
15-19: Consider accessibility props and a proper back glyph.
TouchableOpacityhere has noaccessibilityRole/accessibilityLabel, so screen readers will announce just the raw text"< Back". Also, using the ASCII<as a back indicator is visually thinner than the conventional chevron/arrow and can look like stray punctuation. Consider using‹,←, or an icon, and marking the control as a button for assistive tech.♻️ Suggested refinement
- <TouchableOpacity onPress={onPress} style={styles.button}> - <Text style={styles.text}>{"<"} {label}</Text> - </TouchableOpacity> + <TouchableOpacity + onPress={onPress} + style={styles.button} + accessibilityRole="button" + accessibilityLabel={label} + hitSlop={{top: 8, bottom: 8, left: 8, right: 8}} + > + <Text style={styles.text}>{"‹ "}{label}</Text> + </TouchableOpacity>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/BackButton/BackButton.tsx` around lines 15 - 19, In the BackButton component, improve accessibility and visual affordance by marking the TouchableOpacity as a button (add accessibilityRole="button") and supplying an accessibilityLabel (e.g., `${label} back`) and optional accessibilityHint; replace the ASCII "<" with a proper glyph or icon (e.g., "←", "‹" or a chevron icon) when rendering the text or use an Icon component, keeping the onPress handler and styles (styles.button, styles.text) intact so screen readers announce a clear control and users see a conventional back symbol.frontend/src/navigation/HomeStack.tsx (1)
24-45: Deduplicate identicaloptionscallbacks forServiceOptionsandBrowseCompanies.Both screens declare the same
optionsshape. Extract a helper to keep them in sync and reduce boilerplate:♻️ Proposed refactor
+ const serviceHeaderOptions = useMemo( + () => ({route}: {route: {params: {serviceType: string}}}) => ({ + headerShown: true, + headerTitle: t(`home.serviceTypes.${route.params.serviceType}`), + headerStyle: {backgroundColor: colors.background}, + headerTintColor: colors.primary, + headerShadowVisible: false, + }), + [colors, t], + ); @@ - <Stack.Screen - name="ServiceOptions" - component={ServiceOptionsScreen} - options={({route}) => ({ - headerShown: true, - headerTitle: t(`home.serviceTypes.${route.params.serviceType}`), - headerStyle: {backgroundColor: colors.background}, - headerTintColor: colors.primary, - headerShadowVisible: false, - })} - /> - <Stack.Screen - name="BrowseCompanies" - component={BrowseCompaniesScreen} - options={({route}) => ({ - headerShown: true, - headerTitle: t(`home.serviceTypes.${route.params.serviceType}`), - headerStyle: {backgroundColor: colors.background}, - headerTintColor: colors.primary, - headerShadowVisible: false, - })} - /> + <Stack.Screen name="ServiceOptions" component={ServiceOptionsScreen} options={serviceHeaderOptions} /> + <Stack.Screen name="BrowseCompanies" component={BrowseCompaniesScreen} options={serviceHeaderOptions} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/navigation/HomeStack.tsx` around lines 24 - 45, The two Stack.Screen entries for ServiceOptions and BrowseCompanies both use identical options callbacks; extract a shared helper function (e.g., getServiceHeaderOptions or buildHeaderOptions) that accepts the route (or serviceType) and returns the options object (headerShown, headerTitle: t(`home.serviceTypes.${route.params.serviceType}`), headerStyle: {backgroundColor: colors.background}, headerTintColor: colors.primary, headerShadowVisible: false), then replace the inline options={({route}) => ({...})} on both ServiceOptions and BrowseCompanies with options={getServiceHeaderOptions} (or options={({route}) => getServiceHeaderOptions(route)}) to remove duplication and keep behavior identical.frontend/src/components/CompanyCard/CompanyCard.tsx (1)
18-20: Optional: add accessibility label to the logo image.The remote
Imagehas noaccessibilityLabel/accessibleprop, so screen readers won't announce meaningful context for the company logo. Consider passing the company name:- <Image source={{uri: company.logoUrl}} style={styles.image} /> + <Image + source={{uri: company.logoUrl}} + style={styles.image} + accessible + accessibilityLabel={company.name} + />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/CompanyCard/CompanyCard.tsx` around lines 18 - 20, In CompanyCard, the remote Image rendered when company.logoUrl is truthy lacks accessibility props; update the JSX that renders Image (the Image with source {{uri: company.logoUrl}} and style={styles.image}) to include an accessibilityLabel (e.g., using company.name or `${company.name} logo`) and set accessible={true} so screen readers announce the logo; ensure company.name is used defensively (fallback text if missing) when constructing the label.frontend/src/screens/SelectService/SelectServiceScreen.tsx (1)
13-13: Optional: enforce exhaustiveness againstCompanyType.
SERVICE_TYPESis hardcoded. If a new value is added to theCompanyTypeunion infrontend/src/types/api.ts, this list will silently drift out of sync. Consider a compile-time guard:-const SERVICE_TYPES: CompanyType[] = ["TAXI", "LOGISTICS", "AMBULANCE", "MOVING", "RENTAL"]; +const SERVICE_TYPES = ["TAXI", "LOGISTICS", "AMBULANCE", "MOVING", "RENTAL"] as const satisfies readonly CompanyType[]; +type _Exhaustive = Exclude<CompanyType, (typeof SERVICE_TYPES)[number]> extends never ? true : never;Or derive it from a single source of truth shared with the backend/types.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/screens/SelectService/SelectServiceScreen.tsx` at line 13, SERVICE_TYPES is hardcoded and can drift from the CompanyType union; update the code so SERVICE_TYPES is derived or verified against CompanyType at compile time: either (a) derive the list from the single source of truth (e.g., import an enum/object of company types from your shared types and use its values instead of a hardcoded array) or (b) keep SERVICE_TYPES but add a compile-time exhaustiveness check by creating a const SERVICE_TYPES array and an assertNever/assertUnreachable helper that you call with any missing CompanyType members to force TS to error when CompanyType changes; reference SERVICE_TYPES and CompanyType when making the change so the compiler enforces synchronization.frontend/src/screens/BrowseCompanies/BrowseCompaniesScreen.tsx (2)
27-33: Optional: precompute the lowercased query once.Minor nit —
search.trim()is invoked twice and.toLowerCase()runs inside the filter callback per item (acceptable, but readability can improve):♻️ Proposed refactor
const filtered = useMemo(() => { if (!companies) return []; const byType = companies.filter((c) => c.companyType === serviceType); - if (!search.trim()) return byType; - const query = search.trim().toLowerCase(); + const query = search.trim().toLowerCase(); + if (!query) return byType; return byType.filter((c) => c.name.toLowerCase().includes(query)); }, [companies, serviceType, search]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/screens/BrowseCompanies/BrowseCompaniesScreen.tsx` around lines 27 - 33, The memoized filtered computation calls search.trim() and toLowerCase repeatedly; precompute a single lowercased trimmed query outside the filter to avoid duplicate work: inside the useMemo for filtered, after the early returns compute const query = search.trim(); if (!query) return byType; const lowerQuery = query.toLowerCase(); then use lowerQuery in the byType.filter callback (referring to companies, serviceType, search, filtered/useMemo to locate the block).
55-61: Consider a user-friendly error fallback.Rendering
error.messagedirectly surfaces raw error text (potentially from Axios/fetch internals) to end users, which may be untranslated and leak implementation details. Consider showing a localized generic message (e.g.,t("common.errorLoading")) and logging the technical details separately.♻️ Proposed refactor
if (error) { return ( <ScreenContainer centered> - <Text style={styles.errorText}>{error.message}</Text> + <Text style={styles.errorText}>{t("common.errorLoading")}</Text> </ScreenContainer> ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/screens/BrowseCompanies/BrowseCompaniesScreen.tsx` around lines 55 - 61, The current BrowseCompaniesScreen renders raw error.message inside <ScreenContainer> which may expose internals; replace the UI text with a localized generic message (e.g., use t("common.errorLoading") from the i18n hook) instead of error.message in the component return, and move the technical details into a diagnostic log (e.g., console.error or the app's error logger) when handling the error; update the JSX that uses styles.errorText and the error branch in BrowseCompaniesScreen to show the friendly message while logging the original error object for debugging.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/components/BackButton/BackButton.tsx`:
- Around line 15-19: In the BackButton component, improve accessibility and
visual affordance by marking the TouchableOpacity as a button (add
accessibilityRole="button") and supplying an accessibilityLabel (e.g., `${label}
back`) and optional accessibilityHint; replace the ASCII "<" with a proper glyph
or icon (e.g., "←", "‹" or a chevron icon) when rendering the text or use an
Icon component, keeping the onPress handler and styles (styles.button,
styles.text) intact so screen readers announce a clear control and users see a
conventional back symbol.
In `@frontend/src/components/CompanyCard/CompanyCard.tsx`:
- Around line 18-20: In CompanyCard, the remote Image rendered when
company.logoUrl is truthy lacks accessibility props; update the JSX that renders
Image (the Image with source {{uri: company.logoUrl}} and style={styles.image})
to include an accessibilityLabel (e.g., using company.name or `${company.name}
logo`) and set accessible={true} so screen readers announce the logo; ensure
company.name is used defensively (fallback text if missing) when constructing
the label.
In `@frontend/src/navigation/HomeStack.tsx`:
- Around line 24-45: The two Stack.Screen entries for ServiceOptions and
BrowseCompanies both use identical options callbacks; extract a shared helper
function (e.g., getServiceHeaderOptions or buildHeaderOptions) that accepts the
route (or serviceType) and returns the options object (headerShown, headerTitle:
t(`home.serviceTypes.${route.params.serviceType}`), headerStyle:
{backgroundColor: colors.background}, headerTintColor: colors.primary,
headerShadowVisible: false), then replace the inline options={({route}) =>
({...})} on both ServiceOptions and BrowseCompanies with
options={getServiceHeaderOptions} (or options={({route}) =>
getServiceHeaderOptions(route)}) to remove duplication and keep behavior
identical.
In `@frontend/src/screens/BrowseCompanies/BrowseCompaniesScreen.tsx`:
- Around line 27-33: The memoized filtered computation calls search.trim() and
toLowerCase repeatedly; precompute a single lowercased trimmed query outside the
filter to avoid duplicate work: inside the useMemo for filtered, after the early
returns compute const query = search.trim(); if (!query) return byType; const
lowerQuery = query.toLowerCase(); then use lowerQuery in the byType.filter
callback (referring to companies, serviceType, search, filtered/useMemo to
locate the block).
- Around line 55-61: The current BrowseCompaniesScreen renders raw error.message
inside <ScreenContainer> which may expose internals; replace the UI text with a
localized generic message (e.g., use t("common.errorLoading") from the i18n
hook) instead of error.message in the component return, and move the technical
details into a diagnostic log (e.g., console.error or the app's error logger)
when handling the error; update the JSX that uses styles.errorText and the error
branch in BrowseCompaniesScreen to show the friendly message while logging the
original error object for debugging.
In `@frontend/src/screens/SelectService/SelectServiceScreen.tsx`:
- Line 13: SERVICE_TYPES is hardcoded and can drift from the CompanyType union;
update the code so SERVICE_TYPES is derived or verified against CompanyType at
compile time: either (a) derive the list from the single source of truth (e.g.,
import an enum/object of company types from your shared types and use its values
instead of a hardcoded array) or (b) keep SERVICE_TYPES but add a compile-time
exhaustiveness check by creating a const SERVICE_TYPES array and an
assertNever/assertUnreachable helper that you call with any missing CompanyType
members to force TS to error when CompanyType changes; reference SERVICE_TYPES
and CompanyType when making the change so the compiler enforces synchronization.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: aef8cf8f-426d-46f5-8562-de1baa668196
📒 Files selected for processing (25)
frontend/src/components/BackButton/BackButton.styles.tsfrontend/src/components/BackButton/BackButton.tsxfrontend/src/components/BackgroundShapes/BackgroundShapes.tsxfrontend/src/components/CompanyCard/CompanyCard.styles.tsfrontend/src/components/CompanyCard/CompanyCard.tsxfrontend/src/components/GlassCard/GlassCard.styles.tsfrontend/src/components/GlassCard/GlassCard.tsxfrontend/src/components/ScreenContainer/ScreenContainer.styles.tsfrontend/src/components/ScreenContainer/ScreenContainer.tsxfrontend/src/components/SearchInput/SearchInput.styles.tsfrontend/src/components/SearchInput/SearchInput.tsxfrontend/src/constants/locales/bg.jsonfrontend/src/constants/locales/en.jsonfrontend/src/constants/theme.tsfrontend/src/navigation/HomeStack.tsxfrontend/src/navigation/MainTabs.tsxfrontend/src/screens/BrowseCompanies/BrowseCompaniesScreen.styles.tsfrontend/src/screens/BrowseCompanies/BrowseCompaniesScreen.tsxfrontend/src/screens/Home/HomeScreen.styles.tsfrontend/src/screens/Home/HomeScreen.tsxfrontend/src/screens/SelectService/SelectServiceScreen.styles.tsfrontend/src/screens/SelectService/SelectServiceScreen.tsxfrontend/src/screens/ServiceOptions/ServiceOptionsScreen.styles.tsfrontend/src/screens/ServiceOptions/ServiceOptionsScreen.tsxfrontend/src/types/navigation.ts
💤 Files with no reviewable changes (2)
- frontend/src/screens/Home/HomeScreen.styles.ts
- frontend/src/screens/Home/HomeScreen.tsx
✅ Files skipped from review due to trivial changes (12)
- frontend/src/constants/theme.ts
- frontend/src/components/BackButton/BackButton.styles.ts
- frontend/src/components/GlassCard/GlassCard.styles.ts
- frontend/src/components/ScreenContainer/ScreenContainer.styles.ts
- frontend/src/components/SearchInput/SearchInput.styles.ts
- frontend/src/screens/BrowseCompanies/BrowseCompaniesScreen.styles.ts
- frontend/src/screens/SelectService/SelectServiceScreen.styles.ts
- frontend/src/screens/ServiceOptions/ServiceOptionsScreen.styles.ts
- frontend/src/navigation/MainTabs.tsx
- frontend/src/components/BackgroundShapes/BackgroundShapes.tsx
- frontend/src/constants/locales/bg.json
- frontend/src/components/SearchInput/SearchInput.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/constants/locales/en.json
added 9 commits
April 17, 2026 17:35
Remove native stack headers in favor of custom BackButton component.
Change from absolute to relative positioning.
- Clean header with surface background and hairline border - Accessibility button as green pill shape
Red circle with standard logout icon next to accessibility menu.
|
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Permissions
Localization