nandi.uk
This repository has no description
feat: semble collections filter
author
pdelfan
date
(Apr 14, 2026, 2:11 PM -0700)
commit
a0b610da
a0b610da68af178de5f86bcc09080baace2f4c78
parent
94844281
94844281e4b147f0ce2cb073b15ae42f0dd94766
+60
-24
+1
-1
src/webapp/features/collections/lib/queries/useSembleCollectionts.tsx
+1
-1
src/webapp/features/collections/lib/queries/useSembleCollectionts.tsx
···
14
14
const limit = props?.limit ?? 16;
15
15
16
16
const collections = useSuspenseInfiniteQuery({
17
-
queryKey: collectionKeys.bySembleUrl(props.url),
17
+
queryKey: [...collectionKeys.bySembleUrl(props.url), props.sortBy],
18
18
initialPageParam: 1,
19
19
queryFn: ({ pageParam = 1 }) => {
20
20
return getCollectionsForUrl(props.url, {
+54
-22
src/webapp/features/semble/containers/sembleCollectionsContainer/SembleCollectionsContainer.tsx
+54
-22
src/webapp/features/semble/containers/sembleCollectionsContainer/SembleCollectionsContainer.tsx
···
2
2
3
3
import useSembleCollections from '@/features/collections/lib/queries/useSembleCollectionts';
4
4
import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
5
-
import { SimpleGrid } from '@mantine/core';
5
+
import { Group, SimpleGrid, Stack } from '@mantine/core';
6
6
import SembleCollectionsError from './Error.SembleCollectionsContainer';
7
7
import CollectionCard from '@/features/collections/components/collectionCard/CollectionCard';
8
8
import SembleEmptyTab from '../../components/sembleEmptyTab/SembleEmptyTab';
9
9
import { BiCollection } from 'react-icons/bi';
10
10
import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
11
+
import {
12
+
CollectionFiltersRoot,
13
+
CollectionFiltersSortSelect,
14
+
CollectionFiltersViewToggle,
15
+
} from '@/features/collections/components/collectionFilters/CollectionFilters';
16
+
import { CollectionSortField } from '@semble/types';
17
+
import { useSearchParams } from 'next/navigation';
11
18
12
19
interface Props {
13
20
url: string;
14
21
}
15
22
16
23
export default function SembleCollectionsContainer(props: Props) {
24
+
const searchParams = useSearchParams();
25
+
const sortBy =
26
+
(searchParams.get('collectionSort') as CollectionSortField) ??
27
+
CollectionSortField.UPDATED_AT;
28
+
17
29
const {
18
30
data,
19
31
error,
···
21
33
hasNextPage,
22
34
isFetchingNextPage,
23
35
isPending,
24
-
} = useSembleCollections({ url: props.url });
36
+
} = useSembleCollections({ url: props.url, sortBy });
25
37
26
38
const { settings } = useUserSettings();
27
39
const allCollections =
···
32
44
}
33
45
34
46
if (allCollections.length === 0) {
35
-
return <SembleEmptyTab message="No collections" icon={BiCollection} />;
47
+
return (
48
+
<Stack>
49
+
<Group>
50
+
<CollectionFiltersRoot>
51
+
<CollectionFiltersSortSelect />
52
+
<CollectionFiltersViewToggle />
53
+
</CollectionFiltersRoot>
54
+
</Group>
55
+
56
+
<SembleEmptyTab message="No collections" icon={BiCollection} />
57
+
</Stack>
58
+
);
36
59
}
37
60
38
61
return (
39
-
<InfiniteScroll
40
-
dataLength={allCollections.length}
41
-
hasMore={!!hasNextPage}
42
-
isInitialLoading={isPending}
43
-
isLoading={isFetchingNextPage}
44
-
loadMore={fetchNextPage}
45
-
>
46
-
<SimpleGrid
47
-
cols={
48
-
settings.collectionView !== 'grid'
49
-
? { base: 1 }
50
-
: { base: 1, sm: 2, lg: 4 }
51
-
}
52
-
spacing="xs"
62
+
<Stack>
63
+
<Group>
64
+
<CollectionFiltersRoot>
65
+
<CollectionFiltersSortSelect />
66
+
<CollectionFiltersViewToggle />
67
+
</CollectionFiltersRoot>
68
+
</Group>
69
+
70
+
<InfiniteScroll
71
+
dataLength={allCollections.length}
72
+
hasMore={!!hasNextPage}
73
+
isInitialLoading={isPending}
74
+
isLoading={isFetchingNextPage}
75
+
loadMore={fetchNextPage}
53
76
>
54
-
{allCollections.map((col) => (
55
-
<CollectionCard key={col.uri} collection={col} showAuthor />
56
-
))}
57
-
</SimpleGrid>
58
-
</InfiniteScroll>
77
+
<SimpleGrid
78
+
cols={
79
+
settings.collectionView !== 'grid'
80
+
? { base: 1 }
81
+
: { base: 1, sm: 2, lg: 4 }
82
+
}
83
+
spacing="xs"
84
+
>
85
+
{allCollections.map((col) => (
86
+
<CollectionCard key={col.uri} collection={col} showAuthor />
87
+
))}
88
+
</SimpleGrid>
89
+
</InfiniteScroll>
90
+
</Stack>
59
91
);
60
92
}
+5
-1
src/webapp/features/semble/containers/sembleCollectionsContainer/Skeleton.SembleCollectionsContainer.tsx
+5
-1
src/webapp/features/semble/containers/sembleCollectionsContainer/Skeleton.SembleCollectionsContainer.tsx
···
1
-
import { SimpleGrid, Stack } from '@mantine/core';
1
+
import { Group, SimpleGrid, Skeleton, Stack } from '@mantine/core';
2
2
import CollectionCardSkeleton from '@/features/collections/components/collectionCard/Skeleton.CollectionCard';
3
3
4
4
export default function SembleCollectionsContainerSkeleton() {
5
5
return (
6
6
<Stack>
7
+
<Group gap={'xs'}>
8
+
<Skeleton w={96} h={36} radius={'xl'} />
9
+
</Group>
10
+
7
11
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs">
8
12
{Array.from({ length: 4 }).map((_, i) => (
9
13
<CollectionCardSkeleton key={i} />