Improved color filter

mixins/AnimeGrid.pixy

@@ -1,12 +1,15 @@
-component AnimeGrid(animeList []*arn.Anime, user *arn.User)
+component AnimeGrid(animes []*arn.Anime, user *arn.User)
-	.anime-grid
+	#load-more-target.anime-grid
-		each anime in animeList
+		AnimeGridScrollable(animes, user)
-			.anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(anime.ID)))
-				a.ajax(href="/anime/" + toString(anime.ID))
-					img.anime-grid-image.lazy(data-src=anime.ImageLink("medium"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Romaji)
-					.anime-grid-title
-						.anime-grid-title-text= anime.Title.ByUser(user)
 
-				if user != nil && !user.AnimeList().Contains(anime.ID)
+component AnimeGridScrollable(animes []*arn.Anime, user *arn.User)
-					button.anime-grid-add-button.action(data-action="addAnimeToCollection", data-trigger="click", data-api="/api/animelist/" + user.ID, data-anime-id=anime.ID)
+	each anime in animes
-						RawIcon("plus")
+		.anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(anime.ID)))
+			a.ajax(href="/anime/" + toString(anime.ID))
+				img.anime-grid-image.lazy(data-src=anime.ImageLink("medium"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Romaji)
+				.anime-grid-title
+					.anime-grid-title-text= anime.Title.ByUser(user)
+			
+			if user != nil && !user.AnimeList().Contains(anime.ID)
+				button.anime-grid-add-button.action(data-action="addAnimeToCollection", data-trigger="click", data-api="/api/animelist/" + user.ID, data-anime-id=anime.ID)
+					RawIcon("plus")

pages/explore/explorecolor/explorecolor.go

@@ -9,17 +9,45 @@ import (
 	"github.com/animenotifier/arn"
 	"github.com/animenotifier/notify.moe/components"
 	"github.com/animenotifier/notify.moe/utils"
+	"github.com/animenotifier/notify.moe/utils/infinitescroll"
+)
+
+const (
+	animeFirstLoad = 50
+	animePerScroll = 20
 )
 
 // AnimeByAverageColor returns all anime with an image in the given color.
 func AnimeByAverageColor(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
 	color := ctx.Get("color")
-	animes := filterAnimeByColor(color)
+	index, _ := ctx.GetInt("index")
 
-	arn.SortAnimeByQuality(animes)
+	allAnimes := filterAnimeByColor(color)
+	arn.SortAnimeByQuality(allAnimes)
 
-	return ctx.HTML(components.ExploreColor(animes, color, user))
+	// Slice the part that we need
+	animes := allAnimes[index:]
+	maxLength := animeFirstLoad
+
+	if index > 0 {
+		maxLength = animePerScroll
+	}
+
+	if len(animes) > maxLength {
+		animes = animes[:maxLength]
+	}
+
+	// Next index
+	nextIndex := infinitescroll.NextIndex(ctx, len(allAnimes), maxLength, index)
+
+	// In case we're scrolling, send animes only (without the page frame)
+	if index > 0 {
+		return ctx.HTML(components.AnimeGridScrollable(animes, user))
+	}
+
+	// Otherwise, send the full page
+	return ctx.HTML(components.ExploreColor(animes, nextIndex, len(allAnimes), color, user))
 }
 
 func filterAnimeByColor(colorText string) []*arn.Anime {

pages/explore/explorecolor/explorecolor.pixy

@@ -1,4 +1,4 @@
-component ExploreColor(animes []*arn.Anime, color string, user *arn.User)
+component ExploreColor(animes []*arn.Anime, nextIndex int, totalCount int, color string, user *arn.User)
 	h1.page-title Explore anime by color
 
 	for saturation := 0.75; saturation >= 0.25; saturation -= 0.25
@@ -7,12 +7,16 @@ component ExploreColor(animes []*arn.Anime, color string, user *arn.User)
 				a.tab.color-stripe.action(href=fmt.Sprintf("/explore/color/hsl:%.3f,%.2f,0.5/anime", hue, saturation), data-action="diff", data-trigger="click", data-color=fmt.Sprintf("hsl(%.0f, %.0f%%, 50%%)", hue * 360, saturation * 100))
 
 	.explore-anime
-		if len(animes) == 0
+		if totalCount == 0
 			if color == "any"
 				p.no-data.mountable Please choose a color.
 			else
 				p.no-data.mountable No anime found for the given color.
 		else
-			p.text-center.mountable= strconv.Itoa(len(animes)) + " anime."
+			p.text-center.mountable= strconv.Itoa(totalCount) + " anime."
 
 			AnimeGrid(animes, user)
+	
+	if nextIndex != -1
+		.buttons
+			LoadMore(nextIndex)

pages/explore/explorecolor/explorecolor.scarlet

@@ -4,8 +4,9 @@
 	margin-bottom 0
 
 .color-stripe
-	width 2%
+	width 4%
-	height 2rem
+	max-width 3rem
+	height 3rem
 	padding 0
 	border 1px solid transparent
 

pages/index.go

@@ -77,6 +77,7 @@ func Configure(app *aero.Application) {
 	l.Page("/explore", explore.Get)
 	l.Page("/explore/anime/:year/:status/:type", explore.Filter)
 	l.Page("/explore/color/:color/anime", explorecolor.AnimeByAverageColor)
+	l.Page("/explore/color/:color/anime/from/:index", explorecolor.AnimeByAverageColor)
 	l.Page("/login", login.Get)
 	l.Page("/api", apiview.Get)
 	// l.Ajax("/dashboard", dashboard.Get)