Add gallery view toggle for Good Websites #2190
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add ViewToggle component with list/gallery toggle buttons - Create GoodWebsiteGalleryItem with thumbnail and hover overlay showing name + URL - Add ghost-light variant to LikeButton for use on dark backgrounds - Update GoodWebsitesPageClient to support switching between list and gallery views https://claude.ai/code/session_01Y1GhJD7tUatVfNzsfYn1i8
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Use next-themes for shader color switching (CSS vars unsupported) - Add stricter URL validation with trim() check - Restructure LikeButton variant styles to avoid !important - Persist view mode preference with Jotai atomWithStorage - Update Notion schemas with new fields Co-Authored-By: Claude Opus 4.5 <[email protected]>
Use ! modifier to override Button's ghost hover styles, ensuring the black background is visible on gallery card hover. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Removes duplicate code between GoodWebsiteGalleryItem and PreviewCard by extracting the PlaceholderShader component and imageCache Set into shared modules. This ensures images cached via hover previews in list view are recognized when switching to gallery view. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Adds previewImageDark field throughout the data layer to support theme-aware preview images. Updates Notion schema definitions and passes dark variant to PreviewCard components. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Added a gallery view option to the Good Websites page, allowing users to toggle between list and gallery layouts. This provides a more visual way to browse websites with preview images.
Key Changes
GoodWebsiteGalleryItemcomponent: Displays websites as cards with preview images, hover overlays showing name/URL, and integrated like buttonsViewTogglecomponent: Toggle control to switch between list and gallery views, available on both desktop and mobileGoodWebsitesPageClient: Integrated view mode state management and conditional rendering of list vs gallery layoutsLikeButton: Addedghost-lightvariant for use on image overlays with semi-transparent stylingImplementation Details
https://claude.ai/code/session_01Y1GhJD7tUatVfNzsfYn1i8