Chino/emld 667 dedicated nft page w filtering

frontend/src/lib/components/atoms/Pagination.svelte

@@ -2,21 +2,26 @@
 	import Icon from '@iconify/svelte';
 
 	export let amountOfItems: number;
-
 	export let pageSize = 6;
-
 	export let pageStart = 0;
 	export let pageEnd = pageSize;
+	export let scrollToTopOnChange: boolean = false;
 
 	$: currentPage = Math.ceil(pageEnd / pageSize);
 
 	const nextPage = () => {
 		pageStart += pageSize;
 		pageEnd += pageSize;
+		if (scrollToTopOnChange) {
+			window.scrollTo(0, 0);
+		}
 	};
 	const prevPage = () => {
 		pageStart -= pageSize;
 		pageEnd -= pageSize;
+		if (scrollToTopOnChange) {
+			window.scrollTo(0, 0);
+		}
 	};
 
 	$: if (amountOfItems <= pageStart) {

frontend/src/lib/features/nft-treasury/components/nfts-list/NFTsList.svelte

@@ -8,9 +8,10 @@
 	export let sortNFTs: boolean = false;
 	export let pageSize = 5;
 	export let clickable = false;
-	export let selectedCollection: string;
+	export let selectedCollection: string | null;
 	export let nftUuidOwnerMap: { [uuid: string]: string } = {};
 	export let selectedNFTIds: string[] = [];
+	export let nftTreasuryPage: boolean = false;
 
 	if (sortNFTs && selectedCollection === 'NFLAllDay') {
 		let tierRating = {
@@ -43,35 +44,64 @@
 	$: currentPageNFTs = filteredNfts.slice(pageStart, pageEnd);
 </script>
 
-<AnimatedSearchBar
-	items={NFTs}
-	bind:filteredItems={filteredNfts}
-	searchTerms={['name', 'serial']}
-	placeholder="Search NFT name or serial..."
-/>
-{#if filteredNfts.length === 0}
+{#if !nftTreasuryPage}
+	<AnimatedSearchBar
+		items={NFTs}
+		bind:filteredItems={filteredNfts}
+		searchTerms={['name', 'serial']}
+		placeholder="Search NFT name or serial..."
+	/>
+{/if}
+{#if currentPageNFTs.length === 0}
 	<p class="small off">
 		<em> Sorry! We didn't find NFTs from this collection. </em>
 	</p>
 {:else}
-	<div class="nfts-grid">
+	<div
+		class:treasury-page={nftTreasuryPage}
+		class:treasury-widget={!nftTreasuryPage}
+		class="nfts-grid"
+	>
 		{#each currentPageNFTs as nft (nft.id)}
 			<NFTCard
 				{nft}
 				{clickable}
 				on:click={() => handleNFTClick(nft.id)}
 				isSelected={selectedNFTIds.includes(nft.id)}
-				{selectedCollection}
 				donatedBy={nftUuidOwnerMap[nft.uuid]}
+				{nftTreasuryPage}
+				{selectedCollection}
 			/>
 		{/each}
 	</div>
-	<Pagination bind:pageStart bind:pageEnd amountOfItems={filteredNfts.length} {pageSize} />
+	<Pagination
+		bind:pageStart
+		bind:pageEnd
+		amountOfItems={filteredNfts.length}
+		{pageSize}
+		scrollToTopOnChange={nftTreasuryPage}
+	/>
 {/if}
 
 <style lang="scss">
 	.nfts-grid {
 		display: grid;
+	}
+	.treasury-page {
+		display: grid;
+		grid-template-columns: repeat(1, 1fr);
+		gap: var(--space-4);
+
+		@include mq('small') {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@include mq('medium') {
+			grid-template-columns: repeat(4, 1fr);
+		}
+	}
+
+	.treasury-widget {
 		grid-gap: var(--space-3);
 		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 	}

frontend/src/lib/features/nft-treasury/components/nfts-list/atoms/CollectionSelector.svelte

@@ -1,28 +1,37 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import { createEventDispatcher } from 'svelte';
 
-	export let selectedCollection: string;
+	export let selectedCollection: string | undefined;
 	export let collectionIdentifiers: string[];
+	export let forExternalPage: boolean = false;
+	export let label: string = 'Collection';
 
 	const dispatch = createEventDispatcher();
 
 	const handleCollectionChange = () => {
 		dispatch('collectionChange', selectedCollection);
 	};
+
+	const redirectToExternalLink = () => {
+		if (selectedCollection) {
+			goto(`${$page.url.origin}/p/${$page.params.projectId}/nft-treasury/${selectedCollection}`);
+		}
+	};
 </script>
 
 <div class="column-1">
-	<label for="collection">Collection</label>
-	<select bind:value={selectedCollection} on:change={handleCollectionChange} name="collection">
-		<option value="" disabled selected hidden>Select one collection...</option>
+	<label for="collection">{label}</label>
+	<select
+		style={!forExternalPage ? `max-width:  250px;` : ''}
+		bind:value={selectedCollection}
+		on:change={forExternalPage ? redirectToExternalLink : handleCollectionChange}
+		name="collection"
+	>
+		<option value={undefined} disabled selected hidden>Select collection...</option>
 		{#each collectionIdentifiers as collection}
 			<option value={collection}>{collection}</option>
 		{/each}
 	</select>
 </div>
-
-<style lang="scss">
-	select {
-		max-width: 250px;
-	}
-</style>

frontend/src/lib/features/nft-treasury/components/nfts-list/atoms/NFTCard.svelte

@@ -2,25 +2,22 @@
 	import UserAvatar from '$components/atoms/user/UserAvatar.svelte';
 	import Image from '$lib/components/Image.svelte';
 	import type { Nft } from '$lib/features/nft-treasury/types/nft.interface';
-	import Icon from '@iconify/svelte';
 	import NFTCardDetails from './NFTCardDetails.svelte';
-	import NBATopShot from './projects/NBATopShot.svelte';
-	import NFLAllDay from './projects/NFLAllDay.svelte';
+	import NBATopShotCard from './projects/NBATopShotCard.svelte';
+	import NFLAllDayCard from './projects/NFLAllDayCard.svelte';
 
 	export let nft: Nft;
 	export let isSelected: boolean;
 	export let clickable: boolean;
-	export let selectedCollection: string;
 	export let donatedBy: string | undefined;
+	export let nftTreasuryPage: boolean = false;
+	export let selectedCollection: string | null = null;
+
+	let resolvedCollectionId = selectedCollection || nft.collectionId;
 
 	let imgSrc = nft.thumbnail.startsWith('ipfs://')
 		? `https://nftstorage.link/ipfs/${nft.thumbnail.slice(7)}`
 		: nft.thumbnail;
-
-	let cardDetailComponents = {
-		NFLAllDay: NFLAllDay,
-		NBATopShot: NBATopShot
-	};
 </script>
 
 <div class="nft-wrapper" class:clickable class:selected={isSelected} on:click>
@@ -30,19 +27,18 @@
 		</div>
 	{/if}
 	<div class="image-wrapper">
-		<Image src={imgSrc} alt="NFT" width="100%" height="120px" />
+		<Image src={imgSrc} alt="NFT" width="100%" height={nftTreasuryPage ? '200px' : '150px'} />
 	</div>
-	<svelte:component
-		this={cardDetailComponents[selectedCollection] || NFTCardDetails}
-		{nft}
-		{donatedBy}
-	/>
+	{#if resolvedCollectionId === 'NBATopShot'}
+		<NBATopShotCard {nft} />
+	{:else if resolvedCollectionId === 'NFLAllDay'}
+		<NFLAllDayCard {nft} />
+	{:else}
+		<NFTCardDetails {nft} />
+	{/if}
 	{#if donatedBy}
 		<div class="donated-by">
-			<p class="xsmall">
-				<!-- <Icon icon="tabler:gift" /> -->
-				Donated by
-			</p>
+			<p class="xsmall">Donated by</p>
 			<UserAvatar
 				address={donatedBy}
 				imageSize="33px"
@@ -67,13 +63,18 @@
 
 		.donated-by {
 			width: 100%;
-			padding: var(--space-1) var(--space-2);
+			padding-inline: var(--space-4);
+			padding-block: var(--space-1) var(--space-4);
+			display: flex;
+			flex-direction: column;
+			gap: var(--space-1);
+
 			p {
-				font-style: italic;
 				display: flex;
 				justify-content: left;
 				align-items: center;
 				gap: var(--space-1);
+				color: var(--clr-text-off);
 			}
 		}
 

frontend/src/lib/features/nft-treasury/components/nfts-list/atoms/NFTCardDetails.svelte

@@ -11,7 +11,7 @@
 <style lang="scss">
 	.content-wrapper {
 		width: 100%;
-		padding: var(--space-4) var(--space-2);
+		padding: var(--space-4) var(--space-4);
 		border-top: 1px solid var(--clr-neutral-badge);
 		flex-grow: 1;
 
@@ -23,6 +23,7 @@
 			-webkit-line-clamp: 1;
 			-webkit-box-orient: vertical;
 			word-break: break-word;
+			text-align: left;
 		}
 	}
 </style>

frontend/src/lib/features/nft-treasury/components/nfts-list/atoms/projects/NBATopShot.svelte → frontend/src/lib/features/nft-treasury/components/nfts-list/atoms/projects/NBATopShotCard.svelte

@@ -18,7 +18,7 @@
 <style lang="scss">
 	.content-wrapper {
 		width: 100%;
-		padding: var(--space-4) var(--space-2);
+		padding: var(--space-4) var(--space-4);
 		border-top: 1px solid var(--clr-neutral-badge);
 		display: flex;
 		flex-direction: column;
@@ -27,6 +27,7 @@
 		.heading {
 			text-align: left;
 			font-size: var(--font-size-2);
+			padding-bottom: var(--space-2);
 		}
 
 		.text {