feat: url cards as content preview with rich details

[MaheshtheDev]

Improved memory detail UI with better document icons and layout and Added dark mode support to the Chrome extension button

What changed?

• Enhanced the WebsiteCard component with an onOpenDetails prop
• Improved the MemoryDetail component with:
  • Better layout for document headers and source links
  • Enhanced content scrolling with proper height constraints
  • Improved spacing and padding in various sections
• Added favicon support to document icons, showing website favicons for webpage documents
• Fixed document type detection for webpages and URLs
• Added dark mode support to the Chrome extension button component with appropriate color classes

Screen Recording 2025-10-03 at 11.34.01 PM.mov (uploaded via Graphite)

[MaheshtheDev]

• feat: url cards as content preview with rich details #452 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add the label Main to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	supermemory-app	a063f1e	Oct 04 2025, 06:41 AM

[claude]

Code Review - PR #452: URL Cards with Rich Details

Thank you for this contribution! Overall this PR improves the user experience with dark mode support and enhanced UI elements.

Strengths

1. Dark Mode Support - Comprehensive dark mode classes added with proper design tokens
2. Code Quality - Fixed typo primay-foreground to primary-foreground and clean component structure
3. UX Improvements - Favicon support enhances visual recognition with better layout and scrolling

Issues and Suggestions

1. Security Concern - External Image Loading (apps/web/lib/document-icon.tsx:46-56)

The FaviconIcon component loads favicons from Google service which could have privacy implications. Consider implementing a server-side proxy cache favicons or use a self-hosted service.

2. Missing Error Handling (apps/web/lib/document-icon.tsx:19-26)

The getFaviconUrl function silently returns empty string on error. Consider logging errors using Sentry and add error tracking to monitor malformed URLs.

3. Performance Consideration (apps/web/lib/document-icon.tsx:28-57)

The FaviconIcon uses useState which could cause unnecessary re-renders in list views. Consider memoizing with React.memo() and use useCallback for the onError handler.

4. Accessibility Issue (apps/web/lib/document-icon.tsx:44-56)

The favicon img has generic alt text. Use more descriptive alt text including the domain name.

5. Inconsistent Spacing (apps/web/components/memories-utils/memory-detail.tsx:286)

Line 286 adds both padding AND margin which is unusual. Please verify this is intentional.

6. Type Safety (apps/web/lib/document-icon.tsx:59-64)

Consider using union types for type and source parameters instead of generic strings.

7. Button Capitalization (apps/web/components/memories-utils/memory-detail.tsx:174)

The button text visit source is lowercase. Consider changing to Visit Source for consistency.

Critical Issues

Missing Test Coverage

No tests were found for any modified components. Please add:

1. Unit tests for getFaviconUrl function
2. Component tests for FaviconIcon error states
3. Integration tests for WebsiteCard with onOpenDetails prop
4. Dark mode rendering tests

Conclusion

This PR delivers valuable UI improvements but needs:

1. Test coverage (critical)
2. Security/privacy review for external image loading
3. Performance optimizations for list rendering

Recommendation: Request changes for test coverage and favicon security review before merging.

Review generated by Claude Code