nandi.uk
This repository has no description
Merge branch 'development'
author
pdelfan
date
(May 27, 2026, 12:35 PM -0700)
commit
6e5246eb
6e5246eb899bf24860b4e7951cd3869ea114be18
parent
a41a7a7a
a41a7a7a4bb6a64300959b184412076b92437c27
+91
-58
+54
-32
src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
+54
-32
src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
···
1
-
import { AspectRatio, Card, Center, Grid, Text, Image } from '@mantine/core';
1
+
import {
2
+
AspectRatio,
3
+
Card,
4
+
Center,
5
+
Group,
6
+
Text,
7
+
Image,
8
+
Box,
9
+
} from '@mantine/core';
10
+
import { useScroller } from '@mantine/hooks';
2
11
import useCollection from '../../lib/queries/useCollection';
3
12
import { useState } from 'react';
4
13
···
7
16
handle: string;
8
17
}
9
18
19
+
const CARD_WIDTH = 130;
20
+
10
21
export default function CollectionCardPreview(props: Props) {
22
+
const scroller = useScroller();
11
23
const [imageError, setImageError] = useState(false);
12
24
13
25
const { data } = useCollection({
14
26
rkey: props.rkey,
15
27
handle: props.handle,
16
-
limit: 4,
28
+
limit: 6,
17
29
});
18
30
19
31
const cards = data?.pages.flatMap((col) => col.urlCards) ?? [];
···
21
33
if (cards.length === 0) return null;
22
34
23
35
return (
24
-
<Grid gap={'xs'}>
25
-
{cards.map((c) => (
26
-
<Grid.Col key={c.id} span={3}>
27
-
{c.cardContent.imageUrl && !imageError ? (
28
-
<AspectRatio ratio={16 / 9}>
29
-
<Image
30
-
src={c.cardContent.imageUrl}
31
-
alt={`${c.cardContent.url} social preview image`}
32
-
radius={'md'}
33
-
mih={45}
34
-
w={'100%'}
35
-
onError={() => setImageError(true)}
36
-
/>
37
-
</AspectRatio>
38
-
) : (
39
-
<AspectRatio ratio={16 / 9}>
40
-
<Card p={'xs'} radius={'md'} mih={45} w={'100%'} withBorder>
41
-
<Center my={'auto'}>
42
-
<Text fz={8} fw={500} lineClamp={2}>
43
-
{c.cardContent.title ??
44
-
c.cardContent.description ??
45
-
c.cardContent.url}
46
-
</Text>
47
-
</Center>
48
-
</Card>
49
-
</AspectRatio>
50
-
)}
51
-
</Grid.Col>
52
-
))}
53
-
</Grid>
36
+
<Box
37
+
ref={scroller.ref}
38
+
{...scroller.dragHandlers}
39
+
style={{
40
+
overflowX: 'auto',
41
+
scrollbarWidth: 'none',
42
+
msOverflowStyle: 'none',
43
+
}}
44
+
>
45
+
<Group gap={'xs'} grow={cards.length > 2} wrap="nowrap">
46
+
{cards.map((c) => (
47
+
<Box key={c.id} w={CARD_WIDTH} miw={CARD_WIDTH}>
48
+
{c.cardContent.imageUrl && !imageError ? (
49
+
<AspectRatio ratio={16 / 9}>
50
+
<Image
51
+
src={c.cardContent.imageUrl}
52
+
alt={`${c.cardContent.url} social preview image`}
53
+
radius={'md'}
54
+
fit="cover"
55
+
draggable={false}
56
+
onError={() => setImageError(true)}
57
+
/>
58
+
</AspectRatio>
59
+
) : (
60
+
<AspectRatio ratio={16 / 9}>
61
+
<Card p={'xs'} radius={'md'} withBorder>
62
+
<Center my={'auto'}>
63
+
<Text fz={8} fw={500} lineClamp={2}>
64
+
{c.cardContent.title ??
65
+
c.cardContent.description ??
66
+
c.cardContent.url}
67
+
</Text>
68
+
</Center>
69
+
</Card>
70
+
</AspectRatio>
71
+
)}
72
+
</Box>
73
+
))}
74
+
</Group>
75
+
</Box>
54
76
);
55
77
}
+20
-10
src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
+20
-10
src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
···
1
-
import { AspectRatio, Grid, GridCol, Skeleton } from '@mantine/core';
1
+
import { AspectRatio, Box, Group, Skeleton } from '@mantine/core';
2
+
3
+
const CARD_WIDTH = 130;
2
4
3
5
export default function CollectionCardPreviewSkeleton() {
4
6
return (
5
-
<Grid gap={'xs'}>
6
-
{Array.from({ length: 4 }).map((_, i) => (
7
-
<GridCol key={i} span={3}>
8
-
<AspectRatio ratio={16 / 9}>
9
-
<Skeleton radius={'md'} h={45} w={'100%'} />
10
-
</AspectRatio>
11
-
</GridCol>
12
-
))}
13
-
</Grid>
7
+
<Box
8
+
style={{
9
+
overflowX: 'auto',
10
+
scrollbarWidth: 'none',
11
+
msOverflowStyle: 'none',
12
+
}}
13
+
>
14
+
<Group gap={'xs'} grow wrap="nowrap">
15
+
{Array.from({ length: 4 }).map((_, i) => (
16
+
<Box key={i} w={CARD_WIDTH} miw={CARD_WIDTH}>
17
+
<AspectRatio ratio={16 / 9}>
18
+
<Skeleton radius={'md'} />
19
+
</AspectRatio>
20
+
</Box>
21
+
))}
22
+
</Group>
23
+
</Box>
14
24
);
15
25
}
+13
-12
src/webapp/features/home/components/recentCollections/RecentCollections.tsx
+13
-12
src/webapp/features/home/components/recentCollections/RecentCollections.tsx
···
180
180
<Title order={2}>Collections</Title>
181
181
</Group>
182
182
<Group gap="xs">
183
-
{filter === 'mine' && (
184
-
<ActionIcon
185
-
variant="light"
186
-
color="blue"
187
-
size={38}
188
-
radius={'xl'}
189
-
onClick={() => setShowCollectionDrawer(true)}
190
-
aria-label="Create collection"
191
-
>
192
-
<FiPlus size={18} />
193
-
</ActionIcon>
194
-
)}
183
+
<ActionIcon
184
+
variant="light"
185
+
color="blue"
186
+
size={38}
187
+
radius={'xl'}
188
+
onClick={() => setShowCollectionDrawer(true)}
189
+
aria-label="Create collection"
190
+
>
191
+
<FiPlus size={18} />
192
+
</ActionIcon>
195
193
<LinkButton variant="light" color="blue" href={viewAllHref}>
196
194
View all
197
195
</LinkButton>
···
203
201
variant={filter === 'mine' ? 'filled' : 'light'}
204
202
color="gray"
205
203
size="xs"
204
+
radius={'md'}
206
205
onClick={() => setFilter('mine')}
207
206
>
208
207
My Collections
···
211
210
variant={filter === 'following' ? 'filled' : 'light'}
212
211
color="gray"
213
212
size="xs"
213
+
radius={'md'}
214
214
onClick={() => setFilter('following')}
215
215
>
216
216
Following
···
219
219
variant={filter === 'contributed' ? 'filled' : 'light'}
220
220
color="gray"
221
221
size="xs"
222
+
radius={'md'}
222
223
onClick={() => setFilter('contributed')}
223
224
>
224
225
Contributed to
+3
-3
src/webapp/features/home/components/recentCollections/Skeleton.RecentCollections.tsx
+3
-3
src/webapp/features/home/components/recentCollections/Skeleton.RecentCollections.tsx
···
17
17
</Group>
18
18
19
19
<Group gap="xs">
20
-
<Skeleton w={110} h={30} radius={'xl'} />
21
-
<Skeleton w={82} h={30} radius={'xl'} />
22
-
<Skeleton w={109} h={30} radius={'xl'} />
20
+
<Skeleton w={110} h={30} radius={'md'} />
21
+
<Skeleton w={82} h={30} radius={'md'} />
22
+
<Skeleton w={109} h={30} radius={'md'} />
23
23
</Group>
24
24
25
25
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs">
+1
-1
src/webapp/next-env.d.ts
+1
-1
src/webapp/next-env.d.ts
···
1
1
/// <reference types="next" />
2
2
/// <reference types="next/image-types/global" />
3
-
import "./.next/types/routes.d.ts";
3
+
import "./.next/dev/types/routes.d.ts";
4
4
5
5
// NOTE: This file should not be edited
6
6
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.