group screens into folders#3
Conversation
- Added `@gorhom/bottom-sheet` for bottom sheet functionality. - Introduced `@rn-primitives/dropdown-menu` for dropdown menu implementation. - Updated `package.json` to include new dependencies. - Refactored layout components to handle authentication state with redirects. - Created `HeaderUser` component to manage user session display and login. - Implemented new icons for dropdown and check functionalities.
Reviewer's GuideThis PR restructures the app’s navigation into folder-based layouts with authentication guards, refactors the Header to use a dedicated HeaderUser component for session handling, and introduces new UI primitives for dropdown menus and bottom sheets (web & native), complemented by a LoadingScreen component, icon wrappers, and updated dependencies. Sequence diagram for HeaderUser session handling and loginsequenceDiagram
actor User
participant HeaderUser
participant AuthClient
participant Navigation
User->>HeaderUser: View header
HeaderUser->>AuthClient: useSession()
AuthClient-->>HeaderUser: {isPending, data}
alt isPending
HeaderUser->>User: Show ActivityIndicator
else data exists
HeaderUser->>User: Show Avatar
else not authenticated
HeaderUser->>User: Show Login button
User->>HeaderUser: Click Login
HeaderUser->>Navigation: navigate('/sign-in')
end
Class diagram for new UI primitives and HeaderUserclassDiagram
class HeaderUser {
+useSession()
+navigate()
+render()
}
class DropdownMenu {
<<component>>
}
class BottomSheetModal {
<<component>>
+isOpen
+snapPoints
}
class LoadingScreen {
+message
+showSpinner
+render()
}
class Menu {
<<icon>>
}
class Check {
<<icon>>
}
class ChevronRight {
<<icon>>
}
class ChevronUp {
<<icon>>
}
HeaderUser --> DropdownMenu : uses
HeaderUser --> BottomSheetModal : uses
HeaderUser --> Menu : uses
DropdownMenu --> Check : uses
DropdownMenu --> ChevronRight : uses
DropdownMenu --> ChevronUp : uses
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughThis update restructures the application's layout system, introduces new UI primitives for dropdown menus and bottom sheets, and enhances authentication flow handling. It adds and updates several dependencies, creates new utility and icon modules, and refines responsive styling. Multiple new components and type definitions are introduced, with some existing files removed or reorganized. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant AuthClient
participant Router
User->>App: Open app
App->>AuthClient: Check session
alt Session pending
App-->>User: Render nothing/loading
else Session exists
App->>Router: Redirect to /home (if in public/auth)
App-->>User: Render protected layout (header + Slot)
else No session
App->>Router: Redirect to /sign-in (if in protected)
App-->>User: Render auth layout (header + auth stack)
end
sequenceDiagram
participant User
participant Header
participant HeaderUser
participant BottomSheetModal
User->>Header: View header
Header->>HeaderUser: Render user/session controls
alt On mobile
User->>HeaderUser: Tap menu icon
HeaderUser->>BottomSheetModal: Open modal
BottomSheetModal-->>User: Show login or user info
else On desktop
HeaderUser-->>User: Show avatar or login button
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @chakrihacker - I've reviewed your changes and they look great!
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||||
![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
♻️ Duplicate comments (2)
src/lib/icons/Check.tsx (1)
1-4: Same remark as forMenu.tsx– could be.tsand optionally exported asCheckIconto avoid naming collisions.src/lib/icons/ChevronUp.tsx (1)
1-4: Same remark as forMenu.tsx– could be.tsand optionally exported asChevronUpIconto avoid naming collisions.
🧹 Nitpick comments (7)
src/components/ui/bottom-sheet/util.ts (2)
1-2: Consider additional input validation.The
isPercentagefunction could be more robust by checking for valid percentage formats.-const isPercentage = (value: string | number) => - value && typeof value === "string" && value.includes("%"); +const isPercentage = (value: string | number) => + value && typeof value === "string" && value.includes("%") && !isNaN(Number(value.replace("%", "")));
4-4: Add input validation for percentage conversion.The
toDecimalfunction should validate the input to prevent NaN results.-const toDecimal = (value: string) => Number(value.replace("%", "")) / 100; +const toDecimal = (value: string) => { + const num = Number(value.replace("%", "")); + if (isNaN(num)) throw new Error(`Invalid percentage value: ${value}`); + return num / 100; +};src/containers/loading-screen.tsx (1)
20-22: Simplify platform checks.The logic can be simplified by removing redundant conditions.
- Platform.OS === "web" && "min-h-screen w-full", - // Mobile-specific optimizations - Platform.OS !== "web" && "absolute inset-0 z-50", + Platform.OS === "web" ? "min-h-screen w-full" : "absolute inset-0 z-50",src/lib/icons/Menu.tsx (1)
1-5: Prefer.tsextension & consider an alias to avoid name clashesThe file contains no JSX, so switching the extension to
.tsskips an unnecessary JSX transform during build.
Additionally, re-exporting under an alias (e.g.,MenuIcon) prevents future collisions with components namedMenu.src/app/index.tsx (1)
4-8: Root container should fill the viewport
SafeAreaViewwithoutflex: 1occupies only the height of its children, potentially leaving blank space on taller screens.- <SafeAreaView> + <SafeAreaView style={{ flex: 1 }}>Consider adding
edgesif you need full-screen insets handling.src/containers/core/HeaderUser.tsx (2)
16-17: Consider using typed navigation for better type safety.The
useNavigationhook from expo-router returns an untyped navigation object. Consider using the typed navigation pattern for better type safety.-import { useNavigation } from "expo-router"; +import { router } from "expo-router"; -const { navigate } = useNavigation(); +// Remove this line -navigate("/sign-in"); +router.push("/sign-in");
16-16: Consider handling the error state from useSession.The component retrieves the
errorstate fromauthClient.useSession()but doesn't handle it. Consider displaying an error message or fallback UI when authentication fails.const { isPending, data, error } = authClient.useSession(); +if (error) { + return ( + <Button variant="outline" size="sm" onPress={() => router.push("/sign-in")}> + <Text>Login</Text> + </Button> + ); +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (21)
package.json(2 hunks)src/app/(auth)/_layout.tsx(0 hunks)src/app/(common)/_layout.tsx(1 hunks)src/app/(protected)/_layout.tsx(1 hunks)src/app/(public)/(auth)/_layout.tsx(1 hunks)src/app/(public)/(auth)/sign-in.tsx(1 hunks)src/app/(public)/_layout.tsx(1 hunks)src/app/_layout.tsx(2 hunks)src/app/index.tsx(1 hunks)src/components/layouts/default/Header.tsx(3 hunks)src/components/ui/bottom-sheet/index.tsx(1 hunks)src/components/ui/bottom-sheet/index.web.tsx(1 hunks)src/components/ui/bottom-sheet/types.ts(1 hunks)src/components/ui/bottom-sheet/util.ts(1 hunks)src/components/ui/dropdown-menu.tsx(1 hunks)src/containers/core/HeaderUser.tsx(1 hunks)src/containers/loading-screen.tsx(1 hunks)src/lib/icons/Check.tsx(1 hunks)src/lib/icons/ChevronRight.tsx(1 hunks)src/lib/icons/ChevronUp.tsx(1 hunks)src/lib/icons/Menu.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/(auth)/_layout.tsx
🧰 Additional context used
🧠 Learnings (20)
📓 Common learnings
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the `(auth)` route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with `(auth)` group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use `StyleSheet.create((theme) => ({...}))` with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use `authClient` hooks for authentication state management in components
src/app/(public)/(auth)/sign-in.tsx (10)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient.useSession() hook for session state management
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : All routes are defined in src/app/ using Expo Router file-based routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the (tabs) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : Expo Router requires specific file naming conventions for routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/lib/auth-client.ts : Auth client is set up in src/lib/auth-client.ts with platform-specific plugins
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: TypeScript paths are configured for @/* imports from project root
src/app/(common)/_layout.tsx (10)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : All routes are defined in src/app/ using Expo Router file-based routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : Expo Router requires specific file naming conventions for routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the (tabs) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/**/*.{ts,tsx} : Use Platform.OS and process.env.EXPO_OS for conditional logic in universal components
src/app/index.tsx (10)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the (tabs) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : All routes are defined in src/app/ using Expo Router file-based routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : Expo Router requires specific file naming conventions for routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
src/lib/icons/ChevronRight.tsx (3)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/IconSymbol.{ts,tsx} : IconSymbol component maps SF Symbols (iOS) to Material Icons (other platforms)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
src/lib/icons/Menu.tsx (4)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/IconSymbol.{ts,tsx} : IconSymbol component maps SF Symbols (iOS) to Material Icons (other platforms)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/index.ts : Import unistyles config in app entry: import "./unistyles" in index.ts
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
src/app/(public)/_layout.tsx (10)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : All routes are defined in src/app/ using Expo Router file-based routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : Expo Router requires specific file naming conventions for routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the (tabs) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient.useSession() hook for session state management
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/**/*.{ts,tsx} : Use Platform.OS and process.env.EXPO_OS for conditional logic in universal components
src/app/(protected)/_layout.tsx (10)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient.useSession() hook for session state management
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/lib/auth-client.ts : Use SecureStore for native and web storage for web via conditional plugins in auth client
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : All routes are defined in src/app/ using Expo Router file-based routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/lib/auth-client.ts : Auth client is set up in src/lib/auth-client.ts with platform-specific plugins
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/lib/auth-client.ts : Better Auth requires platform-specific plugin setup for native vs web in auth client
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the (tabs) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
src/components/ui/bottom-sheet/util.ts (3)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use theme.padding(n) and theme.gap(n) functions for consistent spacing in styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/breakpoints.ts : Breakpoints are defined in breakpoints.ts and used in unistyles responsive syntax
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use breakpoint objects like { xs: value, sm: value } in styles for responsive design
src/lib/icons/Check.tsx (9)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/IconSymbol.{ts,tsx} : IconSymbol component maps SF Symbols (iOS) to Material Icons (other platforms)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use useUnistyles() hook to access theme in components without styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Define variants in stylesheet and extract types with UnistylesVariants
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
src/app/_layout.tsx (17)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the (tabs) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use useUnistyles() hook to access theme in components without styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : All routes are defined in src/app/ using Expo Router file-based routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/TabBar.{ts,tsx} : Tab bar uses platform-specific blur effects via conditional components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use theme.padding(n) and theme.gap(n) functions for consistent spacing in styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Access typography via theme.fontSize, theme.fontWeight, etc. in styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/index.ts : Import unistyles config in app entry: import "./unistyles" in index.ts
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/**/*.{ts,tsx} : Use Platform.OS and process.env.EXPO_OS for conditional logic in universal components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/unistyles.ts : Themes are configured in unistyles.ts
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/theme.ts : Themes are defined in theme.ts using @radix-ui/colors
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/theme.ts : Extend theme colors in theme.ts using Radix UI color system
src/lib/icons/ChevronUp.tsx (3)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/IconSymbol.{ts,tsx} : IconSymbol component maps SF Symbols (iOS) to Material Icons (other platforms)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
src/app/(public)/(auth)/_layout.tsx (11)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient.useSession() hook for session state management
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/lib/auth-client.ts : Auth client is set up in src/lib/auth-client.ts with platform-specific plugins
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/lib/auth-client.ts : Better Auth requires platform-specific plugin setup for native vs web in auth client
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : All routes are defined in src/app/ using Expo Router file-based routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the (tabs) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/lib/auth-client.ts : Use SecureStore for native and web storage for web via conditional plugins in auth client
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/**/*.{ts,tsx} : Expo Router requires specific file naming conventions for routing
src/components/layouts/default/Header.tsx (17)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient.useSession() hook for session state management
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/TabBar.{ts,tsx} : Tab bar uses platform-specific blur effects via conditional components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use useUnistyles() hook to access theme in components without styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use theme.padding(n) and theme.gap(n) functions for consistent spacing in styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/IconSymbol.{ts,tsx} : IconSymbol component maps SF Symbols (iOS) to Material Icons (other platforms)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/**/*.{ts,tsx} : Use Platform.OS and process.env.EXPO_OS for conditional logic in universal components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Access typography via theme.fontSize, theme.fontWeight, etc. in styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Web-specific styles use _web key with pseudo-selectors like _hover
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/index.ts : Import unistyles config in app entry: import "./unistyles" in index.ts
src/containers/loading-screen.tsx (2)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
src/containers/core/HeaderUser.tsx (5)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient.useSession() hook for session state management
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
src/components/ui/bottom-sheet/types.ts (9)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Define variants in stylesheet and extract types with UnistylesVariants
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use UnistylesVariants<typeof styles> for type-safe props after stylesheet definition
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UnistylesVariants type must be defined AFTER the stylesheet in component files
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Web-specific styles use _web key with pseudo-selectors like _hover
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Access typography via theme.fontSize, theme.fontWeight, etc. in styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/unistyles.ts : Themes are configured in unistyles.ts
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/TabBar.{ts,tsx} : Tab bar uses platform-specific blur effects via conditional components
src/components/ui/bottom-sheet/index.tsx (10)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/TabBar.{ts,tsx} : Tab bar uses platform-specific blur effects via conditional components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Define variants in stylesheet and extract types with UnistylesVariants
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use useUnistyles() hook to access theme in components without styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use UnistylesVariants<typeof styles> for type-safe props after stylesheet definition
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Access typography via theme.fontSize, theme.fontWeight, etc. in styles
src/components/ui/dropdown-menu.tsx (5)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
src/components/ui/bottom-sheet/index.web.tsx (8)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Web-specific styles use _web key with pseudo-selectors like _hover
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Place UI components in src/components/ui/ with proper TypeScript interfaces
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/TabBar.{ts,tsx} : Tab bar uses platform-specific blur effects via conditional components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Define variants in stylesheet and extract types with UnistylesVariants
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
🧬 Code Graph Analysis (10)
src/lib/icons/ChevronRight.tsx (1)
src/lib/icons/iconWithClassName.ts (1)
iconWithClassName(4-14)
src/lib/icons/Menu.tsx (1)
src/lib/icons/iconWithClassName.ts (1)
iconWithClassName(4-14)
src/app/(protected)/_layout.tsx (2)
src/lib/auth-client.ts (1)
authClient(17-25)src/components/layouts/default/Header.tsx (1)
Header(59-196)
src/lib/icons/Check.tsx (1)
src/lib/icons/iconWithClassName.ts (1)
iconWithClassName(4-14)
src/lib/icons/ChevronUp.tsx (1)
src/lib/icons/iconWithClassName.ts (1)
iconWithClassName(4-14)
src/app/(public)/(auth)/_layout.tsx (2)
src/lib/auth-client.ts (1)
authClient(17-25)src/components/layouts/default/Header.tsx (1)
Header(59-196)
src/containers/loading-screen.tsx (3)
src/lib/utils.ts (1)
cn(4-6)src/components/ui/activity-indicator.tsx (1)
ActivityIndicator(14-14)src/components/ui/text.tsx (1)
Text(26-26)
src/containers/core/HeaderUser.tsx (7)
src/lib/auth-client.ts (1)
authClient(17-25)src/components/ui/activity-indicator.tsx (1)
ActivityIndicator(14-14)src/components/ui/avatar.tsx (3)
Avatar(47-47)AvatarImage(47-47)AvatarFallback(47-47)src/components/ui/text.tsx (1)
Text(26-26)src/components/ui/button.tsx (1)
Button(80-80)src/components/ui/bottom-sheet/index.tsx (2)
BottomSheetModal(43-43)BottomSheetTrigger(46-46)src/lib/icons/Menu.tsx (1)
Menu(5-5)
src/components/ui/bottom-sheet/index.tsx (2)
src/components/ui/bottom-sheet/index.web.tsx (5)
BottomSheetTrigger(83-83)BottomSheetModal(80-80)BottomSheetView(84-84)BottomSheetScrollView(82-82)BottomSheetHandle(79-79)src/components/ui/bottom-sheet/types.ts (2)
BottomSheetProps(52-56)BSHandleProps(8-10)
src/components/ui/bottom-sheet/index.web.tsx (3)
src/components/ui/bottom-sheet/index.tsx (7)
BottomSheet(41-41)BottomSheetView(47-47)BottomSheetModalProvider(44-44)BottomSheetModal(43-43)BottomSheetScrollView(45-45)BottomSheetTrigger(46-46)BottomSheetHandle(42-42)src/components/ui/bottom-sheet/util.ts (1)
convertSnapPoints(11-11)src/components/ui/bottom-sheet/types.ts (1)
BSHandleProps(8-10)
🪛 Biome (1.9.4)
src/components/ui/bottom-sheet/types.ts
[error] 16-16: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 17-17: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
🪛 ESLint
src/components/ui/bottom-sheet/index.tsx
[error] 18-27: Component definition is missing display name
(react/display-name)
src/components/ui/bottom-sheet/index.web.tsx
[error] 15-32: Component definition is missing display name
(react/display-name)
🔇 Additional comments (24)
package.json (1)
16-16: Dependency Security Check Passed — Please Verify Peer Dependencies and CompatibilityNo known security advisories were found for:
- @gorhom/bottom-sheet@^5.1.6
- @rn-primitives/dropdown-menu@^1.2.0
- vaul@^1.1.2
Please ensure these versions meet your React Native (0.79.5) and Expo (53.0.19) setup:
• Confirm peer dependencies for @gorhom/bottom-sheet (e.g. react-native-reanimated ≥2.x, react-native-gesture-handler) are installed and configured in your Babel/Metro setup.
• Verify @rn-primitives/dropdown-menu does not require additional native modules or config plugins.
• Check that using vaul at runtime does not introduce unsupported Node APIs or require extra setup in Expo.src/components/ui/bottom-sheet/util.ts (1)
6-9: LGTM! Clean and focused implementation.The main
convertSnapPointsfunction correctly handles the conversion logic for both percentage and pixel values as expected by the Vaul library.src/containers/loading-screen.tsx (2)
11-44: Well-structured component with good platform considerations.The component follows project conventions, uses proper UI component imports, and handles platform differences appropriately. The responsive design and conditional rendering are implemented correctly.
35-36: native:text-lg prefix is supported by Nativewind presetThe
native:text-lgutility is valid—your Tailwind config includesrequire("nativewind/preset"), which enables thenative:prefix. No changes needed.src/app/(public)/(auth)/sign-in.tsx (1)
38-38: LGTM! Redirect aligns with new routing structure.The redirect to "/home" is consistent with the new authentication flow and layout restructuring. This change properly integrates with the new
(public)/(auth)and(protected)layout structure.src/app/(public)/_layout.tsx (1)
1-5: LGTM! Clean and correct layout implementation.This public layout properly follows Expo Router conventions by using
Slotto render child routes. The minimal implementation is appropriate for a layout wrapper that doesn't need additional logic.src/app/(common)/_layout.tsx (1)
3-5: LGTM – minimal, correct layout wrapperStraight-through layout that simply renders the nested
Slot; no issues spotted.src/lib/icons/ChevronRight.tsx (1)
1-4: LGTM! Icon module follows established patterns correctly.The implementation correctly imports the Lucide icon, applies the
iconWithClassNameutility for React Native className support, and re-exports the enhanced component. This follows the consistent pattern used across other icon modules in the project.src/app/(protected)/_layout.tsx (1)
5-22: Well-implemented protected route layout with proper authentication gating.The component correctly uses
authClient.useSession()for authentication state management and implements proper redirect logic. The implementation follows established patterns for protected routes and handles the authentication flow appropriately.src/app/_layout.tsx (2)
6-6: Theme import simplification looks good.The simplified
ThemeProviderimport removes the unused theme constants, which is a good cleanup as theme handling appears to have been moved elsewhere in the application.
40-43: Route structure reorganization improves separation of concerns.The new route groups
(protected),(public),index, and(common)provide a clearer separation between authenticated and public areas of the app. This architectural improvement aligns well with the new layout components introduced in this PR.src/app/(public)/(auth)/_layout.tsx (2)
6-15: Authentication state handling implemented correctly.The component properly uses
authClient.useSession()to manage authentication state and implements appropriate redirect logic for authenticated users. The session state handling follows the established patterns in the project.
20-25: Auth flow screens configured; verify/homeroute exists
- File:
src/app/(public)/(auth)/_layout.tsx(lines 20–25) correctly includes all auth screens.- I did not find a matching
/homeroute insrc/app. Please confirm:
- A
homeroute file exists (e.g.src/app/home/page.tsxor within(tabs)).- Any redirects to
/homepoint to this properly configured route.src/components/layouts/default/Header.tsx (3)
17-17: Good replacement of static login button with dynamic HeaderUser component.The import change from
ButtontoHeaderUserimproves the header by providing authentication-aware user interface elements that can dynamically respond to user session state.
108-112: Responsive navigation menu improves mobile experience.Adding the
className="hidden md:flex"to the NavigationMenu appropriately hides the complex navigation on smaller screens while keeping it visible on medium and larger screens, which enhances the mobile user experience.
191-191: HeaderUser integration enhances authentication UX.The replacement of the static login button with the
HeaderUsercomponent provides a more sophisticated and authentication-aware user interface that can dynamically show user information or login options based on session state.src/components/ui/bottom-sheet/types.ts (1)
1-58: Well-structured type definitions.The type organization with regions and proper extension of third-party types follows good TypeScript practices. The interfaces provide comprehensive prop definitions for the bottom sheet components.
src/components/ui/bottom-sheet/index.tsx (1)
29-36: Clean cssInterop integration for styling.The cssInterop usage properly integrates NativeWind styling with the underlying bottom sheet components, allowing className props to work correctly.
src/components/ui/bottom-sheet/index.web.tsx (2)
48-51: Efficient snap points conversion with useMemo.Good use of
useMemoto optimize the snap points conversion, preventing unnecessary recalculations on each render.
64-75: Smart platform-specific rendering.The platform checks ensure components render appropriately for web vs native platforms, providing a clean abstraction for cross-platform usage.
src/components/ui/dropdown-menu.tsx (4)
31-65: Well-implemented platform-aware dropdown trigger.The
DropdownMenuSubTriggercomponent correctly handles platform-specific icon rendering and state-based styling. The use ofTextClassContext.Providerensures consistent text styling throughout the dropdown hierarchy.
88-129: Robust dropdown content with portal rendering.The
DropdownMenuContentcomponent properly handles portal rendering, overlay styling, and platform-specific animations. The conditional styling based on open state provides good user feedback.
155-182: Accessible checkbox item with proper indicators.The
DropdownMenuCheckboxItemincludes proper accessibility features with visual indicators and handles disabled states correctly. The absolute positioning of the check icon follows good UX patterns.
184-209: Clean radio item implementation.The
DropdownMenuRadioItemuses a simple but effective visual indicator (filled circle) and maintains consistency with the checkbox item pattern.
| const BottomSheetModal = forwardRef< | ||
| BSModal, | ||
| BottomSheetProps & { children: React.ReactNode; isOpen?: boolean } | ||
| >(({ children, ...rest }: BottomSheetProps, ref) => { | ||
| return ( | ||
| <BSModal ref={ref} {...rest}> | ||
| {children} | ||
| </BSModal> | ||
| ); | ||
| }); |
There was a problem hiding this comment.
Add displayName to forwardRef component.
ESLint correctly identifies that the BottomSheetModal component is missing a displayName, which is important for React dev tools and debugging.
const BottomSheetModal = forwardRef<
BSModal,
BottomSheetProps & { children: React.ReactNode; isOpen?: boolean }
>(({ children, ...rest }: BottomSheetProps, ref) => {
return (
<BSModal ref={ref} {...rest}>
{children}
</BSModal>
);
});
+
+BottomSheetModal.displayName = "BottomSheetModal";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const BottomSheetModal = forwardRef< | |
| BSModal, | |
| BottomSheetProps & { children: React.ReactNode; isOpen?: boolean } | |
| >(({ children, ...rest }: BottomSheetProps, ref) => { | |
| return ( | |
| <BSModal ref={ref} {...rest}> | |
| {children} | |
| </BSModal> | |
| ); | |
| }); | |
| const BottomSheetModal = forwardRef< | |
| BSModal, | |
| BottomSheetProps & { children: React.ReactNode; isOpen?: boolean } | |
| >(({ children, ...rest }: BottomSheetProps, ref) => { | |
| return ( | |
| <BSModal ref={ref} {...rest}> | |
| {children} | |
| </BSModal> | |
| ); | |
| }); | |
| BottomSheetModal.displayName = "BottomSheetModal"; |
🧰 Tools
🪛 ESLint
[error] 18-27: Component definition is missing display name
(react/display-name)
🤖 Prompt for AI Agents
In src/components/ui/bottom-sheet/index.tsx around lines 18 to 27, the
BottomSheetModal component created with forwardRef is missing a displayName
property. Add a static displayName property to BottomSheetModal by assigning
BottomSheetModal.displayName = 'BottomSheetModal' after its declaration to
improve React dev tools identification and debugging.
| const BottomSheetView = forwardRef< | ||
| HTMLDivElement, | ||
| { | ||
| children: React.ReactNode; | ||
| ref?: React.Ref<HTMLDivElement>; | ||
| className?: string; | ||
| } | ||
| >(({ children, className }, ref) => ( | ||
| <Drawer.Portal> | ||
| <Drawer.Overlay className="fixed inset-0 bg-black/40" /> | ||
| <Drawer.Content | ||
| ref={ref} | ||
| className={`bg-white shadow-lg flex flex-col rounded-t-[10px] h-full mt-24 fixed bottom-0 left-0 right-0 ${className}`} | ||
| > | ||
| {children} | ||
| </Drawer.Content> | ||
| </Drawer.Portal> | ||
| )); |
There was a problem hiding this comment.
Add displayName to forwardRef component.
ESLint correctly identifies that the BottomSheetView component is missing a displayName, which is important for React dev tools and debugging.
const BottomSheetView = forwardRef<
HTMLDivElement,
{
children: React.ReactNode;
ref?: React.Ref<HTMLDivElement>;
className?: string;
}
>(({ children, className }, ref) => (
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content
ref={ref}
className={`bg-white shadow-lg flex flex-col rounded-t-[10px] h-full mt-24 fixed bottom-0 left-0 right-0 ${className}`}
>
{children}
</Drawer.Content>
</Drawer.Portal>
));
+
+BottomSheetView.displayName = "BottomSheetView";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const BottomSheetView = forwardRef< | |
| HTMLDivElement, | |
| { | |
| children: React.ReactNode; | |
| ref?: React.Ref<HTMLDivElement>; | |
| className?: string; | |
| } | |
| >(({ children, className }, ref) => ( | |
| <Drawer.Portal> | |
| <Drawer.Overlay className="fixed inset-0 bg-black/40" /> | |
| <Drawer.Content | |
| ref={ref} | |
| className={`bg-white shadow-lg flex flex-col rounded-t-[10px] h-full mt-24 fixed bottom-0 left-0 right-0 ${className}`} | |
| > | |
| {children} | |
| </Drawer.Content> | |
| </Drawer.Portal> | |
| )); | |
| const BottomSheetView = forwardRef< | |
| HTMLDivElement, | |
| { | |
| children: React.ReactNode; | |
| ref?: React.Ref<HTMLDivElement>; | |
| className?: string; | |
| } | |
| >(({ children, className }, ref) => ( | |
| <Drawer.Portal> | |
| <Drawer.Overlay className="fixed inset-0 bg-black/40" /> | |
| <Drawer.Content | |
| ref={ref} | |
| className={`bg-white shadow-lg flex flex-col rounded-t-[10px] h-full mt-24 fixed bottom-0 left-0 right-0 ${className}`} | |
| > | |
| {children} | |
| </Drawer.Content> | |
| </Drawer.Portal> | |
| )); | |
| BottomSheetView.displayName = "BottomSheetView"; |
🧰 Tools
🪛 ESLint
[error] 15-32: Component definition is missing display name
(react/display-name)
🤖 Prompt for AI Agents
In src/components/ui/bottom-sheet/index.web.tsx around lines 15 to 32, the
BottomSheetView component created with forwardRef lacks a displayName property.
Add a static displayName property to BottomSheetView by assigning it a string
name, e.g., 'BottomSheetView', immediately after its declaration to improve
React dev tools debugging.
| type WithFadeFromProps = {}; | ||
| type WithoutFadeFromProps = {}; |
There was a problem hiding this comment.
Replace empty object types with proper marker interfaces.
Static analysis correctly flags the empty object types {} as problematic. These appear to be marker types for fade animations.
-type WithFadeFromProps = {};
-type WithoutFadeFromProps = {};
+type WithFadeFromProps = Record<string, never>;
+type WithoutFadeFromProps = Record<string, never>;Alternatively, if these are truly just marker types with no properties, use more explicit typing:
-type WithFadeFromProps = {};
-type WithoutFadeFromProps = {};
+interface WithFadeFromProps {}
+interface WithoutFadeFromProps {}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| type WithFadeFromProps = {}; | |
| type WithoutFadeFromProps = {}; | |
| type WithFadeFromProps = Record<string, never>; | |
| type WithoutFadeFromProps = Record<string, never>; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 16-16: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 17-17: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
🤖 Prompt for AI Agents
In src/components/ui/bottom-sheet/types.ts at lines 16 to 17, replace the empty
object types WithFadeFromProps and WithoutFadeFromProps with proper marker
interfaces by declaring them as empty interfaces instead of empty object types.
This clarifies their intent as marker types and resolves static analysis issues.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/containers/core/HeaderUser.tsx (1)
54-69: Bottom sheet content is now properly implemented.The bottom sheet modal now includes meaningful content that handles both authenticated and unauthenticated states, addressing the previous review feedback. However, there's redundant padding in the authenticated user view.
Consider this minor optimization to remove redundant padding:
<BottomSheetView className="bg-background p-4"> {data ? ( - <View className="bg-background p-4"> + <View> <Text>Welcome, {data.user.name}</Text> {/* Add logout functionality */} </View> ) : ( - <View className="p-4"> + <View> <Button onPress={() => navigate("/sign-in")}> <Text>Login</Text> </Button> </View> )} </BottomSheetView>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (5)
babel.config.js(1 hunks)global.css(1 hunks)package.json(1 hunks)src/app/_layout.tsx(2 hunks)src/containers/core/HeaderUser.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- babel.config.js
🚧 Files skipped from review as they are similar to previous changes (2)
- package.json
- src/app/_layout.tsx
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with `(auth)` group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the `(auth)` route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the `(tabs)` route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use `authClient` hooks for authentication state management in components
global.css (2)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Web-specific styles use _web key with pseudo-selectors like _hover
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
src/containers/core/HeaderUser.tsx (5)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient.useSession() hook for session state management
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.060Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : UI components in src/components/ui/ must follow React.forwardRef pattern with displayName
🔇 Additional comments (5)
global.css (2)
5-49: LGTM! Consistent formatting improvements.The reformatting provides consistent indentation and spacing throughout the CSS custom properties, making the code more readable and maintainable.
54-62: Well-implemented responsive utility class.The
.mobile-onlyclass fills a gap in Tailwind's responsive utilities by providing mobile-specific visibility. The implementation correctly usesdisplay: flexby default and hides content on tablet/desktop breakpoints with!importantto ensure specificity.src/containers/core/HeaderUser.tsx (3)
1-14: Good import organization and dependency usage.The imports are well-organized and use the appropriate libraries. The use of
authClient.useSession()aligns with the established authentication patterns in this codebase.
15-19: Proper hook usage and ref management.The component correctly uses the session hook and sets up a ref for the bottom sheet modal. The destructuring of session data is appropriate.
23-44: Well-implemented responsive desktop view.The desktop view properly handles all three states: loading (spinner), authenticated (avatar), and unauthenticated (login button). The conditional rendering logic is clear and appropriate.
| import { Menu } from "~/lib/icons/Menu"; | ||
|
|
||
| export const HeaderUser = () => { | ||
| const { isPending, data, error } = authClient.useSession(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for session state.
The component retrieves the error from the session hook but doesn't handle error states in the UI. Consider displaying error information to users when authentication fails.
Add error handling after the loading and data checks:
<View className="hidden md:flex">
{isPending && <ActivityIndicator />}
+ {error && (
+ <Text className="text-destructive text-sm">
+ Authentication error
+ </Text>
+ )}
{data && !isPending && (🤖 Prompt for AI Agents
In src/containers/core/HeaderUser.tsx at line 16, the session hook returns an
error value that is currently not handled in the UI. Add conditional rendering
logic after checking for loading and data states to detect if an error exists.
If so, display an appropriate error message or UI element to inform the user
about the authentication failure.
| <div className="flex mobile-only"> | ||
| <Button | ||
| onPress={() => bottomSheetModalRef.current?.present()} | ||
| variant={"ghost"} | ||
| > | ||
| <Menu className="text-base text-foreground" /> | ||
| </Button> | ||
| </div> |
There was a problem hiding this comment.
Fix inconsistent element usage in React Native context.
Using a div element in a React Native component is incorrect and will cause runtime errors. React Native components should use View consistently.
Apply this diff to fix the element inconsistency:
- <div className="flex mobile-only">
+ <View className="flex mobile-only">
<Button
onPress={() => bottomSheetModalRef.current?.present()}
variant={"ghost"}
>
<Menu className="text-base text-foreground" />
</Button>
- </div>
+ </View>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="flex mobile-only"> | |
| <Button | |
| onPress={() => bottomSheetModalRef.current?.present()} | |
| variant={"ghost"} | |
| > | |
| <Menu className="text-base text-foreground" /> | |
| </Button> | |
| </div> | |
| <View className="flex mobile-only"> | |
| <Button | |
| onPress={() => bottomSheetModalRef.current?.present()} | |
| variant={"ghost"} | |
| > | |
| <Menu className="text-base text-foreground" /> | |
| </Button> | |
| </View> |
🤖 Prompt for AI Agents
In src/containers/core/HeaderUser.tsx around lines 45 to 52, replace the HTML
div element with a React Native View component to ensure compatibility and
prevent runtime errors. Change the <div className="flex mobile-only"> to <View
style={styles.flexMobileOnly}> and define the corresponding styles in a
StyleSheet object to replicate the CSS classes. This maintains consistent React
Native element usage.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (3)
package.json(1 hunks)src/app/(protected)/home/(tabs)/index.tsx(1 hunks)src/app/_layout.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/app/(protected)/home/(tabs)/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with `(auth)` group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the `(auth)` route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the `(tabs)` route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use `StyleSheet.create((theme) => ({...}))` with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
src/app/_layout.tsx (12)
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Always use react-native-unistyles v3 syntax with theme access for styling
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : All UI components use StyleSheet.create((theme) => ({...})) with variant support
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/app/(tabs)/**/*.{ts,tsx} : Main app navigation screens are placed in the (tabs) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/components/ui/TabBar.{ts,tsx} : Tab bar uses platform-specific blur effects via conditional components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/app/**/*.{ts,tsx} : All routes are defined in src/app/ using Expo Router file-based routing
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication flow uses file-based routing with (auth) group for sign-in/sign-up screens
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/app/(auth)/**/*.{ts,tsx} : Authentication screens are placed in the (auth) route group
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use theme.padding(n) and theme.gap(n) functions for consistent spacing in styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Use useUnistyles() hook to access theme in components without styles
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/components/ui/**/*.{ts,tsx} : Consider all platforms (iOS/Android/Web) when using native APIs in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/{app,components}/**/*.{ts,tsx} : Use authClient hooks for authentication state management in components
Learnt from: CR
PR: fyndx/expo-universal-starter#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T10:20:02.091Z
Learning: Applies to src/**/*.{ts,tsx} : Use Platform.OS and process.env.EXPO_OS for conditional logic in universal components
🧬 Code Graph Analysis (1)
src/app/_layout.tsx (1)
src/components/ui/bottom-sheet/index.tsx (1)
BottomSheetModalProvider(47-47)
🔇 Additional comments (2)
src/app/_layout.tsx (2)
6-6: LGTM! Import changes support new bottom sheet functionality.The import modifications correctly add the necessary dependencies for gesture handling and bottom sheet modals while maintaining the existing ThemeProvider import.
Also applies to: 12-12, 14-14
39-43: Well-structured provider hierarchy for bottom sheet integration.The provider nesting correctly establishes context hierarchy:
GestureHandlerRootViewenables gesture handling app-wideBottomSheetModalProvidernested withinThemeProviderensures themed bottom sheets- Core components (
StatusBar,Toaster,PortalHost) properly positioned within theme contextAlso applies to: 57-64
| <Stack.Screen | ||
| name="(protected)" | ||
| options={{ headerShown: false }} | ||
| /> | ||
| <Stack.Screen name="(public)" options={{ headerShown: false }} /> | ||
| <Stack.Screen | ||
| name="(public)/(auth)" | ||
| options={{ headerShown: false }} | ||
| /> | ||
| <Stack.Screen name="index" options={{ headerShown: false }} /> | ||
| <Stack.Screen name="(common)" options={{ headerShown: false }} /> | ||
| <Stack.Screen name="+not-found" /> | ||
| </Stack> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Navigation restructure supports authentication flow separation.
The new screen configuration appropriately separates protected and public routes with clear hierarchy. The headerShown: false setting correctly delegates header management to individual layouts.
Verify that the corresponding layout files exist and handle routing correctly:
🏁 Script executed:
#!/bin/bash
# Description: Verify all referenced layout files exist and check for proper redirect logic
# Check for existence of layout files
echo "Checking layout files..."
fd "_layout.tsx" src/app/ --exec ls -la {}
# Look for authentication redirect logic in layouts
echo -e "\nChecking for auth redirect logic..."
rg -A 5 -B 2 "redirect|router\.(push|replace)" src/app/ --type tsx
# Check for useAuth or similar authentication hooks usage
echo -e "\nChecking authentication state management..."
rg -A 3 "useAuth|authClient" src/app/ --type tsxLength of output: 870
Missing (public) layout file in navigation stack
A screen named (public) is registered, but there’s no corresponding src/app/(public)/_layout.tsx, which will break routing for the public route group. Please add the missing layout and ensure all route layouts include proper redirect logic and session guards.
• Create src/app/(public)/_layout.tsx
• In each layout (including (protected), (public)/(auth), (common)), verify use of router.push/redirect or authClient.useSession() to enforce access control
🤖 Prompt for AI Agents
In src/app/_layout.tsx around lines 44 to 56, the navigation stack registers a
screen named (public) but the corresponding layout file
src/app/(public)/_layout.tsx is missing, which will break routing for the public
route group. To fix this, create the missing src/app/(public)/_layout.tsx file
and implement the layout component. Additionally, review all route layout files
including (protected), (public)/(auth), and (common) to ensure they properly
enforce access control by using router.push, redirect, or
authClient.useSession() as needed.
1 participant
User description
@gorhom/bottom-sheetfor bottom sheet functionality.@rn-primitives/dropdown-menufor dropdown menu implementation.package.jsonto include new dependencies.HeaderUsercomponent to manage user session display and login.PR Type
Enhancement
Description
Restructured app routing with protected/public layouts
Added authentication state management with redirects
Integrated bottom sheet and dropdown menu components
Created responsive header with user session display
Diagram Walkthrough
File Walkthrough
Summary by CodeRabbit
New Features
Bug Fixes
Chores
Style