nandi.uk
This repository has no description
Merge branch 'development'
author
pdelfan
date
(May 27, 2026, 1:13 PM -0700)
commit
d51096fc
d51096fc025fbc501d06459ad9dc6d22a3e31224
parent
6e5246eb
6e5246eb899bf24860b4e7951cd3869ea114be18
+23
-34
+13
-26
src/webapp/features/home/components/discoverOnSemble/DiscoverOnSemble.tsx
+13
-26
src/webapp/features/home/components/discoverOnSemble/DiscoverOnSemble.tsx
···
4
4
import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
5
5
import SimilarUrlCard from '@/features/semble/components/similarUrlCard/SimilarUrlCard';
6
6
import useSimilarCards from '@/features/semble/lib/queries/useSimilarCards';
7
-
import { useNavbarContext } from '@/providers/navbar';
8
-
import { Divider, Grid, Group, Stack, Text, Title } from '@mantine/core';
9
-
import { Fragment } from 'react';
7
+
import { Box, Group, Scroller, Stack, Text, Title } from '@mantine/core';
10
8
import { MdOutlineEmojiNature } from 'react-icons/md';
11
-
import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
12
9
import { LinkButton } from '@/components/link/MantineLink';
13
10
14
11
export default function DiscoverOnSemble() {
15
-
const { desktopOpened } = useNavbarContext();
16
-
const { settings } = useUserSettings();
17
12
const { data: profile } = useMyProfile();
18
13
const { data: myCardsData } = useMyCards({ limit: 8 });
19
14
const { data: similarCardsData } = useSimilarCards({
20
15
url:
21
16
myCardsData.pages[0].cards[0]?.url ??
22
17
`https://bsky.app/profile/${profile?.handle}`,
18
+
limit: 6,
23
19
});
24
20
const cards = similarCardsData.pages.flatMap((page) => page.urls) ?? [];
25
21
···
43
39
</Group>
44
40
45
41
{cards.length > 0 ? (
46
-
<Grid gap={settings.cardView === 'list' ? 0 : 'xs'}>
47
-
{cards.slice(0, 3).map((item, i) => (
48
-
<Fragment key={i}>
49
-
{settings.cardView === 'list' && i > 0 && (
50
-
<Grid.Col span={12}>
51
-
<Divider />
52
-
</Grid.Col>
53
-
)}
54
-
<Grid.Col
55
-
span={{
56
-
base: 12,
57
-
xs:
58
-
settings.cardView !== 'grid' ? 12 : desktopOpened ? 12 : 6,
59
-
sm: settings.cardView !== 'grid' ? 12 : desktopOpened ? 6 : 4,
60
-
md: settings.cardView !== 'grid' ? 12 : 4,
61
-
}}
42
+
<Scroller scrollAmount={320}>
43
+
<Group wrap="nowrap" align="stretch" gap="xs">
44
+
{cards.slice(0, 10).map((item, i) => (
45
+
<Box
46
+
key={i}
47
+
w={300}
48
+
style={{ flexShrink: 0, whiteSpace: 'normal' }}
62
49
>
63
50
<SimilarUrlCard urlView={item} />
64
-
</Grid.Col>
65
-
</Fragment>
66
-
))}
67
-
</Grid>
51
+
</Box>
52
+
))}
53
+
</Group>
54
+
</Scroller>
68
55
) : (
69
56
<Stack align="center" gap="xs">
70
57
<Text fz="h3" fw={600} c="gray">
+10
-8
src/webapp/features/home/components/discoverOnSemble/Skeleton.DiscoverOnSemble.tsx
+10
-8
src/webapp/features/home/components/discoverOnSemble/Skeleton.DiscoverOnSemble.tsx
···
1
-
import { Grid, GridCol, Group, Stack, Title, Text } from '@mantine/core';
1
+
import { Box, Group, Scroller, Stack, Title, Text } from '@mantine/core';
2
2
import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
3
3
import { MdOutlineEmojiNature } from 'react-icons/md';
4
4
import { LinkButton } from '@/components/link/MantineLink';
···
21
21
</LinkButton>
22
22
</Group>
23
23
24
-
<Grid gap="xs">
25
-
{Array.from({ length: 3 }).map((_, i) => (
26
-
<GridCol key={i} span={{ base: 12, sm: 4 }}>
27
-
<UrlCardSkeleton />
28
-
</GridCol>
29
-
))}
30
-
</Grid>
24
+
<Scroller scrollAmount={320}>
25
+
<Group wrap="nowrap" align="stretch" gap="xs">
26
+
{Array.from({ length: 6 }).map((_, i) => (
27
+
<Box key={i} w={300} style={{ flexShrink: 0 }}>
28
+
<UrlCardSkeleton />
29
+
</Box>
30
+
))}
31
+
</Group>
32
+
</Scroller>
31
33
</Stack>
32
34
);
33
35
}