Added hide anime in my collection button

mixins/AnimeGrid.pixy

@@ -1,7 +1,7 @@
 component AnimeGrid(animeList []*arn.Anime, user *arn.User)
 	.anime-grid
 		each anime in animeList
-			.anime-grid-cell
+			.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.Image("medium"), data-webp="true", alt=anime.Title.Romaji)
 					.anime-grid-title

pages/explore/explore.pixy

@@ -2,9 +2,11 @@ component ExploreAnime(animeList []*arn.Anime, year string, status string, typ s
 	ExploreFilters(year, status, typ)
 
 	.corner-buttons-hide-on-mobile
-		a.button.ajax(href="/genres")
+		button.action(data-trigger="click", data-action="hideAddedAnime", title="Hide anime in my collection")
-			Icon("clone")
+			RawIcon("eye-slash")
-			span View genres
+		
+		a.button.ajax(href="/genres", title="View genres")
+			RawIcon("clone")
 
 	h1.page-title Explore
 

pages/genre/genre.pixy

@@ -1,3 +1,8 @@
 component Genre(genre string, animes []*arn.Anime, user *arn.User)
 	h1(title=toString(len(animes)) + " anime")= strings.Title(genre)
+
+	.corner-buttons-hide-on-mobile
+		button.action(data-trigger="click", data-action="hideAddedAnime", title="Hide anime in my collection")
+			RawIcon("eye-slash")
+
 	AnimeGrid(animes, user)

scripts/Actions/Explore.ts

@@ -1,4 +1,5 @@
 import { AnimeNotifier } from "../AnimeNotifier"
+import { findAll } from "scripts/Utils";
 
 // Filter anime on explore page
 export function filterAnime(arn: AnimeNotifier, input: HTMLInputElement) {
@@ -7,4 +8,13 @@ export function filterAnime(arn: AnimeNotifier, input: HTMLInputElement) {
 	let type = arn.app.find("filter-type") as HTMLSelectElement
 
 	arn.app.load(`/explore/anime/${year.value}/${status.value}/${type.value}`)
+}
+
+// Hides anime that are already in your list.
+export function hideAddedAnime() {
+	for(let anime of findAll("anime-grid-cell")) {
+		if(anime.dataset.added === "true") {
+			anime.classList.toggle("anime-grid-cell-hide")
+		}
+	}
 }

styles/anime-grid.scarlet

@@ -5,6 +5,7 @@
 	grid-cell
 	saturate-up
 	shadow-up
+	default-transition
 
 	:hover
 		.anime-grid-title,
@@ -17,6 +18,9 @@
 		height 100px
 		margin 0.3rem
 
+.anime-grid-cell-hide
+	opacity 0.05
+
 .anime-grid-image
 	grid-image
 

styles/corner-buttons.scarlet

@@ -5,6 +5,10 @@
 .corner-buttons-hide-on-mobile
 	display none
 
+	button,
+	.button
+		margin 0 0.25rem
+
 > 600px
 	.corner-buttons,
 	.corner-buttons-hide-on-mobile