fix conflicts

Author: nkdengineer

.claude/agents/code-inline-reviewer.md

@@ -1,4 +1,5 @@
 ---
+
 name: code-inline-reviewer
 description: Reviews code and creates inline comments for specific rule violations.
 tools: Glob, Grep, Read, WebFetch, Bash, Edit, MultiEdit, Write, TodoWrite, WebSearch, BashOutput, KillBash, mcp__github_inline_comment__create_inline_comment
@@ -14,16 +15,32 @@ Your job is to scan through changed files and create **inline comments** for spe
 ## Rules
 
 Each rule includes:
+
 - A unique **Rule ID**
 - **Pass/Fail condition**
 - **Reasoning**: Technical explanation of why the rule is important
 - Examples of good and bad usage
 
 ### [PERF-1] No spread in list item's renderItem
-- **Condition**: When passing data to components in renderItem functions, avoid using spread operators to extend objects. Instead, pass the base object and additional properties as separate props to prevent unnecessary object creation on each render.
+
+- **Condition**: Flag ONLY when ALL of these are true:
+
+  - Code is inside a renderItem function (function passed to FlatList, SectionList, etc.)
+  - A spread operator (...) is used on an object
+  - That object is being passed as a prop to a component
+  - The spread creates a NEW object literal inline
+
+  **DO NOT flag if:**
+
+  - Spread is used outside renderItem
+  - Spread is on an array
+  - Object is created once outside renderItem and reused
+  - Spread is used to clone for local manipulation (not passed as prop)
+
 - **Reasoning**: `renderItem` functions execute for every visible list item on each render. Creating new objects with spread operators forces React to treat each item as changed, preventing reconciliation optimizations and causing unnecessary re-renders of child components.
 
 Good:
+
 ```tsx
 <Component
   item={item}
@@ -33,6 +50,7 @@ Good:
 ```
 
 Bad:
+
 ```tsx
 <Component
   item={{
@@ -46,10 +64,38 @@ Bad:
 ---
 
 ### [PERF-2] Use early returns in array iteration methods
-- **Condition**: When using `.every()`, `.some()`, or similar methods, perform simple checks first with early returns before expensive operations.
+
+- **Condition**: Flag ONLY when ALL of these are true:
+
+  - Using .every(), .some(), .find(), .filter() or similar function
+  - Function contains an "expensive operation" (defined below)
+  - There exists a simple property check that could eliminate items earlier
+  - The simple check is performed AFTER the expensive operation
+
+  **Expensive operations are**:
+
+  - Function calls (except simple getters/property access)
+  - Regular expressions
+  - Object/array iterations
+  - Math calculations beyond basic arithmetic
+
+  **Simple checks are**:
+
+  - Property existence (!obj.prop, obj.prop === undefined)
+  - Boolean checks (obj.isActive)
+  - Primitive comparisons (obj.id === 5)
+  - Type checks (typeof, Array.isArray)
+
+  **DO NOT flag if**:
+
+  - No expensive operations exist
+  - Simple checks are already done first
+  - The expensive operation MUST run for all items (e.g., for side effects)
+
 - **Reasoning**: Expensive operations can be any long-running synchronous tasks (like complex calculations) and should be avoided when simple property checks can eliminate items early. This reduces unnecessary computation and improves iteration performance, especially on large datasets.
 
 Good:
+
 ```ts
 const areAllTransactionsValid = transactions.every((transaction) => {
     if (!transaction.rawData || transaction.amount <= 0) {
@@ -61,6 +107,7 @@ const areAllTransactionsValid = transactions.every((transaction) => {
 ```
 
 Bad:
+
 ```ts
 const areAllTransactionsValid = transactions.every((transaction) => {
     const validation = validateTransaction(transaction);
@@ -71,26 +118,31 @@ const areAllTransactionsValid = transactions.every((transaction) => {
 ---
 
 ### [PERF-3] Use OnyxListItemProvider hooks instead of useOnyx in renderItem
+
 - **Condition**: Components rendered inside `renderItem` functions should use dedicated hooks from `OnyxListItemProvider` instead of individual `useOnyx` calls.
 - **Reasoning**: Individual `useOnyx` calls in renderItem create separate subscriptions for each list item, causing memory overhead and update cascades. `OnyxListItemProvider` hooks provide optimized data access patterns specifically designed for list rendering performance.
 
 Good:
+
 ```tsx
 const personalDetails = usePersonalDetails();
 ```
 
 Bad:
+
 ```tsx
 const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
 ```
 
 ---
 
 ### [PERF-4] Memoize objects and functions passed as props
+
 - **Condition**: Objects and functions passed as props should be properly memoized or simplified to primitive values to prevent unnecessary re-renders.
 - **Reasoning**: React uses referential equality to determine if props changed. New object/function instances on every render trigger unnecessary re-renders of child components, even when the actual data hasn't changed. Memoization preserves referential stability.
 
 Good:
+
 ```tsx
 const reportData = useMemo(() => ({
     reportID: report.reportID,
@@ -102,6 +154,7 @@ return <ReportActionItem report={reportData} />
 ```
 
 Bad:
+
 ```tsx
 const [report] = useOnyx(`ONYXKEYS.COLLECTION.REPORT${iouReport.id}`);
 
@@ -111,10 +164,12 @@ return <ReportActionItem report={report} />
 ---
 
 ### [PERF-5] Use shallow comparisons instead of deep comparisons
+
 - **Condition**: In `React.memo` and similar optimization functions, compare only specific relevant properties instead of using deep equality checks.
 - **Reasoning**: Deep equality checks recursively compare all nested properties, creating performance overhead that often exceeds the re-render cost they aim to prevent. Shallow comparisons of specific relevant properties provide the same optimization benefits with minimal computational cost.
 
 Good:
+
 ```tsx
 memo(ReportActionItem, (prevProps, nextProps) =>
     prevProps.report.type === nextProps.report.type &&
@@ -124,6 +179,7 @@ memo(ReportActionItem, (prevProps, nextProps) =>
 ```
 
 Bad:
+
 ```tsx
 memo(ReportActionItem, (prevProps, nextProps) =>
     deepEqual(prevProps.report, nextProps.report) &&
@@ -134,10 +190,12 @@ memo(ReportActionItem, (prevProps, nextProps) =>
 ---
 
 ### [PERF-6] Use specific properties as hook dependencies
+
 - **Condition**: In `useEffect`, `useMemo`, and `useCallback`, specify individual object properties as dependencies instead of passing entire objects.
 - **Reasoning**: Passing entire objects as dependencies causes hooks to re-execute whenever any property changes, even unrelated ones. Specifying individual properties creates more granular dependency tracking, reducing unnecessary hook executions and improving performance predictability.
 
 Good:
+
 ```tsx
 const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => {
     return {
@@ -149,6 +207,7 @@ const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => {
 ```
 
 Bad:
+
 ```tsx
 const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => {
     return {
@@ -167,20 +226,43 @@ const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => {
    - `path`: Full file path (e.g., "src/components/ReportActionsList.tsx")
    - `line`: Line number where the issue occurs
    - `body`: Concise and actionable description of the violation and fix, following the below Comment Format
+4. **Each comment must reference exactly one Rule ID.**
+5. **Output must consist exclusively of calls to mcp__github_inline_comment__create_inline_comment in the required format.** No other text, Markdown, or prose is allowed.
+6. **If no violations are found, create a comment** (with no quotes, markdown, or additional text):
+   LGTM :feelsgood:. Thank you for your hard work!
+7. **Output LGTM if and only if**:
+   - You examined EVERY line of EVERY changed file
+   - You checked EVERY changed file against ALL rules
+   - You found ZERO violations matching the exact rule criteria
+   - You verified no false negatives by checking each rule systematically
+    If you found even ONE violation or have ANY uncertainty do NOT create LGTM comment - create inline comments instead.
+8. **DO NOT invent new rules, stylistic preferences, or commentary outside the listed rules.**
+9. **DO NOT describe what you are doing, create comments with a summary, explanations, extra content, comments on rules that are NOT violated or ANYTHING ELSE.**
+    Only inline comments regarding rules violations or general comment with LGTM message are allowed.
+    EXCEPTION: If you believe something MIGHT be a Rule violation but are uncertain, err on the side of creating an inline comment with your concern rather than skipping it.
 
 ## Tool Usage Example
-For each violation, call the tool like this:
+
+For each violation, call the mcp__github_inline_comment__create_inline_comment tool like this.
+CRITICAL: **DO NOT** use the Bash tool for inline comments:
+
 ```
 mcp__github_inline_comment__create_inline_comment:
   path: "src/components/ReportActionsList.tsx"
   line: 128
   body: "<Body of the comment according to the Comment Format>"
 ```
 
+If ZERO violations are found, use the Bash tool to create a top-level PR comment.:
+
+```bash
+gh pr comment --body "LGTM :feelsgood:. Thank you for your hard work!"
+```
+
 ## Comment Format
 
 ```
-### ❌ **<Rule ID>**
+### ❌ <Rule ID> [(docs)](https://github.com/Expensify/App/blob/main/.claude/agents/code-inline-reviewer.md#<Rule ID transformed into a URL hash parameter>)
 
 <Reasoning>
 

.github/CODEOWNERS

@@ -6,4 +6,4 @@ src/styles/ @Expensify/design @Expensify/pullerbear
 assets/ @Expensify/design @Expensify/pullerbear
 
 # Philosophy docs are in their early stages and need to be reviewed by Tim to ensure they have consistent formatting and organization
-contributingGuides/philosophies @tgolen
+contributingGuides/philosophies/ @tgolen

.github/actions/javascript/generateHelpPreviewComment/action.yml

@@ -0,0 +1,18 @@
+name: 'Generate ExpensifyHelp Preview Comment'
+description: 'Builds the ExpensifyHelp deployment comment with direct links to updated markdown articles'
+inputs:
+  GITHUB_TOKEN:
+    description: 'GitHub token with access to list pull request files'
+    required: true
+  ROOT_URL:
+    description: 'ExpensifyHelp preview root URL (e.g., https://123.helpdot.pages.dev)'
+    required: true
+  PULL_REQUEST_NUMBER:
+    description: 'Pull request number to inspect.'
+    required: true
+outputs:
+  BODY:
+    description: 'Generated comment body including preview link and updated articles'
+runs:
+  using: 'node20'
+  main: './index.js'

.github/actions/javascript/generateHelpPreviewComment/generateHelpPreviewComment.ts

@@ -0,0 +1,85 @@
+import * as core from '@actions/core';
+import {context, getOctokit} from '@actions/github';
+
+type OctokitClient = ReturnType<typeof getOctokit>;
+
+const DOCS_DIRECTORY_PREFIX = 'docs/';
+const MARKDOWN_EXTENSION = '.md';
+const INCLUDED_STATUSES = new Set(['added', 'modified', 'renamed']);
+
+function normalizeAlias(alias: string): string {
+    return alias.endsWith('/') ? alias : `${alias}/`;
+}
+
+function toRoutePath(filename: string): string {
+    return filename.slice(DOCS_DIRECTORY_PREFIX.length).replace(/\.md$/, '');
+}
+
+async function getUpdatedDocRoutes(octokit: OctokitClient, owner: string, repo: string, prNumber: number): Promise<string[]> {
+    const files = await octokit.paginate(octokit.rest.pulls.listFiles, {
+        owner,
+        repo,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        pull_number: prNumber,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        per_page: 100,
+    });
+
+    const routes = new Set<string>();
+
+    files.forEach((file) => {
+        const filename = file.filename ?? '';
+        const status = file.status ?? '';
+
+        if (!INCLUDED_STATUSES.has(status)) {
+            return;
+        }
+
+        if (!filename.startsWith(DOCS_DIRECTORY_PREFIX) || !filename.endsWith(MARKDOWN_EXTENSION)) {
+            return;
+        }
+
+        routes.add(toRoutePath(filename));
+    });
+
+    return [...routes].sort((a, b) => a.localeCompare(b));
+}
+
+async function run(): Promise<void> {
+    const token = core.getInput('GITHUB_TOKEN', {required: true});
+    const rootURL = core.getInput('ROOT_URL', {required: true}).trim();
+    const pullRequestNumber = core.getInput('PULL_REQUEST_NUMBER', {required: true}).trim();
+
+    const prNumber = Number(pullRequestNumber);
+    if (Number.isNaN(prNumber)) {
+        throw new Error(`Invalid PULL_REQUEST_NUMBER input: ${pullRequestNumber}`);
+    }
+
+    const octokit = getOctokit(token);
+    const {owner, repo} = context.repo;
+
+    const routes = await getUpdatedDocRoutes(octokit, owner, repo, prNumber);
+    const normalizedRootURL = normalizeAlias(rootURL);
+
+    const displayRootURL = normalizedRootURL.replace(/\/$/, '');
+    let body = `A preview of your ExpensifyHelp changes have been deployed to ${displayRootURL} ⚡️`;
+
+    if (routes.length > 0) {
+        const listItems = routes.map((route) => `- [${route}](${normalizedRootURL}${route})`).join('\n');
+        body += `\n\n**Updated articles:**\n${listItems}`;
+    }
+
+    core.setOutput('BODY', body);
+
+    core.startGroup('Updated ExpensifyHelp routes');
+    routes.forEach((route) => console.log(route));
+    core.endGroup();
+
+    console.log(`Generated preview comment with ${routes.length} updated article(s)`);
+}
+
+if (require.main === module) {
+    run();
+}
+
+export default run;