home page sliders + swipe deck filtering + listing engagement stats

[moehdotdev]

this pr introduces horizontal sliders for featured and browse sections, improves swipe deck filtering logic, adds engagement stats to listing pages, and refactors parts of the homepage layout and banners.

horizontal slider component

reusable scrollable slider
introduced a reusable HorizontalSlider component used to display listings in horizontally scrollable rows.

features:

• snap scrolling behavior for cards
• automatic detection of scroll boundaries
• left/right navigation buttons
• gradient edge fades to indicate overflow
• responsive card widths
• smooth scroll to next item instead of fixed pixel scroll

technical details:

• uses ResizeObserver to detect layout changes
• tracks scroll position to enable/disable arrows
• scrolls directly to the next card using data-slider-item markers

result:
featured and browse listings now behave like modern horizontal carousels instead of static grids.

homepage layout improvements

featured and browse sections
replaced grid layouts with horizontal sliders for:

• featured listings
• general browse listings

benefits:

• better mobile usability
• improved visual density
• smoother browsing experience

banner updates
updated homepage banners and added a featured banner asset.

changes:

• introduced Swap-HomePageBannerFeatured.svg
• improved banner overlay gradient
• updated marketing copy for launch messaging
• adjusted banner layout for responsive height handling

result:
homepage feels more dynamic and better communicates early platform status.

swipe deck data improvements

new query: listForDeck
added a dedicated backend query to power the swipe deck.

logic improvements:

• excludes listings owned by the current user
• excludes listings the user has already swiped on
• supports filters for category, location, price range, payment type, and condition
• supports text search
• optional limit for deck size

additional data:

• includes owner name/email for display

result:
the swipe deck now shows only relevant listings and avoids repeating previously swiped items.

empty state improvements

better swipe deck messaging
added contextual messages when no swipe targets are available.

cases handled:

• user not signed in
• only user-owned listings exist
• all listings already swiped
• filters remove all results

additional improvements:

• button to clear filters
• shortcut to switch to browse mode
• visible active filter indicators

result:
users always understand why the deck is empty and how to continue browsing.

listing engagement stats

likes and dislikes display
added engagement counters to the listing detail page.

changes:

• display like and dislike counts near listing metadata
• swipe buttons now show current counts
• counters update based on database values

result:
users can see listing popularity and feedback directly on the product page.

notification clarity improvements

improved actor labeling
updated notification text for swipe interactions.

changes:

• notifications now include both user name and email when available
• fallback to email when name is missing

example:
"John Doe ([john@email.com](mailto:john@email.com)) liked your listing"

result:
clearer identification of who interacted with a listing.

overall impact

this pr improves the browsing and discovery experience by:

• introducing reusable horizontal sliders
• improving swipe deck filtering and relevance
• adding listing engagement visibility
• improving empty state guidance
• refreshing homepage banner presentation

these changes make the homepage more interactive and improve listing discovery across both swipe and browse modes.