refactor: optimize BlogFeed and adhere to layout primitives in ContentCard

[google-labs-jules]

This pull request resolves issues raised during the principal engineer audit and automated AI reviews on PR #3831. It includes performance optimizations to the BlogFeed and styling corrections to ContentCard to better align with the project's architectural guidelines for layout primitives.

Changes:

• Organized imports in BlogFeed.tsx and wrapped the featuredPosts and mainFeedPosts filtering logic in useMemo to eliminate unnecessary computations during every component re-render.
• Replaced the usage of raw Tailwind layout classes (like className="overflow-hidden") in ContentCard.tsx with proper design system layout primitives (overflow="hidden", aspect="video", surface="alt" on <Box> and <BaseCard>).
• Verified that FolioGrid correctly applies a 1-column layout on mobile devices (base: 1) to prevent horizontal layout overflow.

These changes ensure stability, performance, and adherence to established style conventions.

---

PR created automatically by Jules for task 879453924489035675 started by @arii

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[github-actions]

🚀 Deployment Details (Last updated: Jul 19, 2026, 7:00 PM PST)

🚀 Pushed to gh-pages; publish in progress

• Preview URL: https://arii.github.io/tech-dancer/feature/blog-directory-scannability-and-layout-6386545577436537631-879453924489035675/
• Preview Dashboard: https://arii.github.io/tech-dancer/previews/index.html
• Commit SHA: 802f58f
• Marker File: verify here

[github-actions]

🐙 GitHub Models Code Review

Powered by GitHub Models

Reviewing: PR #3868

Model: gpt-4o-mini

Code Review Feedback

[ARCHITECTURE] Review

Review of Pull Request Changes

Summary of Changes

This pull request refactors the BlogFeed and ContentCard components to optimize performance and adhere to layout primitives. Key changes include:

• Use of useMemo for filtering posts in BlogFeed.
• Replacement of raw Tailwind CSS classes with design system primitives in ContentCard.

Findings

1. Use of Raw Tailwind Classes

   • File: src/components/ui/ContentCard.tsx
   • Line: 48
   • Snippet: className="overflow-hidden"
   • Issue: The use of raw Tailwind CSS class className="overflow-hidden" is a violation of the architectural guidelines that mandate the use of layout primitives. This should be replaced with the overflow prop.
   • Status: open
   • Confidence: high
   • Counterexample: The previous implementation used className which is not allowed. The new implementation correctly uses overflow="hidden" but should have been consistent throughout.
   • Fix Summary: Ensure all layout properties are applied using the design system primitives.

2. Use of Raw Tailwind Classes

   • File: src/components/ui/ContentCard.tsx
   • Line: 49
   • Snippet: className="aspect-video bg-surface-alt border-b border-line overflow-hidden"
   • Issue: The use of raw Tailwind CSS classes for layout and styling is prohibited. The aspect-video, bg-surface-alt, and border-b border-line should be replaced with appropriate props from the design system.
   • Status: open
   • Confidence: high
   • Counterexample: The previous implementation used raw Tailwind classes which are not compliant with the design system. The new implementation should utilize the design system's aspect, surface, and border props.
   • Fix Summary: Replace with aspect="video", surface="alt", and border="b".

3. Performance Optimization with useMemo

   • File: src/features/journal/BlogFeed.tsx
   • Line: 5
   • Snippet: const featuredPosts = useMemo(() => posts.filter(post => post.featured === true), [posts]);
   • Issue: The use of useMemo here is appropriate and improves performance by memoizing the filtered posts. This is a positive change.
   • Status: open
   • Confidence: high
   • Counterexample: Previous implementation filtered posts directly without memoization, leading to unnecessary computations on re-renders.
   • Fix Summary: This change optimizes performance by preventing unnecessary recalculations.

4. Performance Optimization with useMemo

   • File: src/features/journal/BlogFeed.tsx
   • Line: 9
   • Snippet: const mainFeedPosts = useMemo(() => isInitialView ? posts.filter(post => !post.featured) : posts, [isInitialView, posts]);
   • Issue: Similar to the previous finding, this use of useMemo is beneficial for performance and adheres to best practices.
   • Status: open
   • Confidence: high
   • Counterexample: The previous implementation recalculated mainFeedPosts on every render, which is inefficient.
   • Fix Summary: This change effectively reduces unnecessary re-computation.

Conclusion

The pull request introduces significant improvements in performance and adherence to architectural guidelines, particularly with the use of useMemo. However, there are still violations regarding the use of raw Tailwind CSS classes that need to be addressed.

Final Verdict

Findings JSON

#### [PERFORMANCE] Review
### Review of Pull Request Changes

#### Summary of Changes
This pull request includes optimizations to the `BlogFeed` component by utilizing `useMemo` for filtering posts, and it refactors the `ContentCard` component to use layout primitives instead of raw Tailwind classes.

### Findings

1. **Use of `useMemo` in `BlogFeed`**
   - **Snippet**: 
     ```javascript
     const featuredPosts = useMemo(() =>
       posts.filter(post => post.featured === true),
     [posts]);
     ```
   - **Issue**: The use of `useMemo` here is appropriate as it prevents unnecessary recomputation of `featuredPosts` on every render. This is a positive change that enhances performance.
   - **Status**: Open
   - **Confidence**: High

2. **Use of `useMemo` for `mainFeedPosts`**
   - **Snippet**: 
     ```javascript
     const mainFeedPosts = useMemo(() =>
       isInitialView
         ? posts.filter(post => !post.featured)
         : posts,
     [isInitialView, posts]);
     ```
   - **Issue**: Similar to the previous finding, this use of `useMemo` is justified as it optimizes performance by memoizing the result based on dependencies. This is a beneficial change.
   - **Status**: Open
   - **Confidence**: High

3. **Refactoring of `ContentCard` to Use Layout Primitives**
   - **Snippet**: 
     ```javascript
     <BaseCard
       as={MotionArticle}
       direction="col"
       height="full"
       to={`${basePath}/${slug}`}
       ariaLabel={`Read article: ${title}`}
       overflow="hidden"
       {...motionProps}
     >
     ```
   - **Issue**: The change from using `className="overflow-hidden"` to `overflow="hidden"` adheres to the design system and is a positive refactor. This aligns with the architectural guidelines for layout primitives.
   - **Status**: Open
   - **Confidence**: High

4. **Use of Raw Tailwind Classes in `ContentCard`**
   - **Snippet**: 
     ```javascript
     <Box width="full" className="aspect-video bg-surface-alt border-b border-line overflow-hidden">
     ```
   - **Issue**: The use of `className="aspect-video bg-surface-alt border-b border-line"` is a violation of the design system guidelines, as raw Tailwind layout classes are banned in app layers. This should be refactored to use the appropriate layout primitives.
   - **Status**: Open
   - **Confidence**: High
   - **Suggested Fix**: Replace with:
     ```javascript
     <Box width="full" aspect="video" surface="alt" border="b" overflow="hidden">
     ```

5. **Potential Redundant Renders**
   - **Snippet**: 
     ```javascript
     const isInitialView = activeCategory === 'All' && !searchTerm;
     ```
   - **Issue**: The `isInitialView` variable is derived from props that may change frequently. If `activeCategory` or `searchTerm` changes, it could lead to unnecessary re-renders. Consider memoizing this value if it is used in multiple places.
   - **Status**: Open
   - **Confidence**: Medium

### Conclusion
The changes made in this pull request generally improve performance and adhere to the design system. However, there is a violation regarding the use of raw Tailwind classes in the `ContentCard` component that needs to be addressed. Overall, the optimizations using `useMemo` are well-implemented and beneficial.

### Final Verdict

#### [SECURITY] Review
Upon reviewing the provided pull request, I have identified the following issues and observations related to security, particularly concerning untrusted input paths, as well as adherence to the OWASP Top 10 principles.

### Findings:

1. **Potential Untrusted Input Path**:
   - **File**: `src/components/ui/ContentCard.tsx`
   - **Line**: `to={`${basePath}/${slug}`}`
   - **Snippet**: `to={`${basePath}/${slug}`}`
   - **Issue**: The `basePath` and `slug` variables are being concatenated to form a URL path. If either of these values can be influenced by user input, this could lead to an open redirect vulnerability or other security issues.
   - **Status**: open
   - **Confidence**: high
   - **Counterexample**: If `basePath` is set to a user-controlled value (e.g., `/user-input`), and `slug` is also user-controlled (e.g., `../../malicious`), it could redirect to an unintended location.
   - **Fix Summary**: Ensure that both `basePath` and `slug` are validated and sanitized before use. Consider using a library or method to validate that these values conform to expected patterns (e.g., regex validation).

### Summary of Security Concerns:
- The primary concern revolves around the potential for untrusted input paths in the `ContentCard` component. The concatenation of `basePath` and `slug` without validation could expose the application to security vulnerabilities.

### Recommendations:
- Implement input validation and sanitization for `basePath` and `slug` to ensure they do not contain harmful or unexpected values.
- Consider using a library like `validator.js` to help with sanitization and validation of URL components.

### Conclusion:
The changes made in this pull request improve the performance and adherence to design guidelines, but the introduction of potential untrusted input paths requires immediate attention to ensure the security of the application.

```json

#### [STYLE] Review
The changes in this pull request introduce several improvements to the `BlogFeed` and `ContentCard` components. Below is a detailed review based on the provided diff and the established visual and design guidelines.

### Findings

1. **Use of Design Tokens in ContentCard**
   - **Snippet**: 
     ```tsx
     -      className="overflow-hidden"
     +      overflow="hidden"
     ```
   - **Issue**: The change from a raw Tailwind class to a design token is a positive improvement, aligning with the project's architectural guidelines for layout primitives.
   - **Status**: Approved
   - **Confidence**: High

2. **Use of Design Tokens in Box Component**
   - **Snippet**: 
     ```tsx
     -        <Box width="full" className="aspect-video bg-surface-alt border-b border-line overflow-hidden">
     +        <Box width="full" aspect="video" surface="alt" border="b" overflow="hidden">
     ```
   - **Issue**: This change correctly replaces raw Tailwind classes with design tokens, which enhances maintainability and consistency with the design system.
   - **Status**: Approved
   - **Confidence**: High

3. **Performance Optimization with useMemo**
   - **Snippet**: 
     ```tsx
     -  const featuredPosts = posts.filter(post => post.featured === true);
     +  const featuredPosts = useMemo(() =>
     +    posts.filter(post => post.featured === true),
     +  [posts]);
     ```
   - **Issue**: Wrapping the filtering logic in `useMemo` optimizes performance by preventing unnecessary recalculations on re-renders. This is a good practice for performance enhancement.
   - **Status**: Approved
   - **Confidence**: High

4. **Main Feed Posts Optimization**
   - **Snippet**: 
     ```tsx
     -  const mainFeedPosts = isInitialView
     -    ? posts.filter(post => !post.featured)
     -    : posts;
     +  const mainFeedPosts = useMemo(() =>
     +    isInitialView
     +      ? posts.filter(post => !post.featured)
     +      : posts,
     +  [isInitialView, posts]);
     ```
   - **Issue**: Similar to the previous point, this change improves performance by memoizing the computation of `mainFeedPosts`. This is a positive change.
   - **Status**: Approved
   - **Confidence**: High

5. **General Code Readability and Consistency**
   - The changes made improve the overall readability and maintainability of the code. The use of design tokens and memoization enhances clarity and performance, which is in line with best practices.

### Summary
The pull request successfully addresses the issues raised during the audit by optimizing the `BlogFeed` component and adhering to the layout primitives in `ContentCard`. The changes enhance performance, maintainability, and consistency with the design system.

### Final Verdict
All changes are positive and align with the project's guidelines. There are no blocking issues or concerns.

```json

---
*Generated by github-models-code-review*

[arii]

PR Review: #3868

Context

• Last Commit Tracked (SHA): 802f58f

Audit Checklist

For EVERY changed file, verify against these standards. Mark as - [x] when verified.

• Dead abstractions: No new class, context, or hook that a simpler primitive handles.
• Unnecessary indirection: No layer of wrapping where a direct function call suffices.
• Responsibility creep: Component does not take on state/logic belonging in parent/hook.
• Import bloat: No unnecessary import React from 'react' (React 17+).
• Token compliance: Uses established design tokens (no raw Tailwind values or inline styles).
• Audit ratio: If > 100 lines added, identified at least 10 lines to refactor/remove.

CI Log Triage

(Populated if CI failures detected)

• Failed Checks:

• Deployment Impact Analysis

• Detected Errors:
  None detected by parser.

• Root Cause Analysis:

• Visual snapshots failed due to layout shifts, likely intended due to the refactoring of Tailwind utility classes into primitive props in ContentCard.

• Remediation Steps:

• Manually review the changed Playwright snapshots to confirm they reflect the desired base: 1 constraint and ContentCard adjustments. Approve snapshots if expected.

• Dead abstractions: N/A.

• Unnecessary indirection: Used useMemo correctly for computations.

• Responsibility creep: N/A.

• Import bloat: No unnecessary imports found.

• Token compliance: Correctly refactored raw tailwind utility classes (className="overflow-hidden", aspect-video bg-surface-alt border-b border-line) to strict layout primitive props (overflow="hidden", aspect="video", surface="alt", border="b").

• Audit ratio: N/A.

• The refactor properly resolves layout primitive violations and improves React rendering performance by memoizing feed posts.

• Failing CI Checks: Deployment Impact Analysis (Visual tests) failed, likely from intended layout shifts. This must be confirmed and resolved before approval.

Not Approved