nandi.uk
This repository has no description
feat: show "save/saved" state on collection header
author
pdelfan
date
(Apr 21, 2026, 3:39 PM -0700)
commit
e4d21a0d
e4d21a0dcca7aac4489a16ec1b00a58c67616cbe
parent
ec71fc1b
ec71fc1bc0cf7b659be9d3a1fba9fe89b0ee0469
+47
-22
+25
-10
src/webapp/features/collections/components/collectionActions/CollectionActions.tsx
+25
-10
src/webapp/features/collections/components/collectionActions/CollectionActions.tsx
···
12
12
import { notifications } from '@mantine/notifications';
13
13
import FollowButton from '@/features/follows/components/followButton/FollowButton';
14
14
import { useWebHaptics } from 'web-haptics/react';
15
-
import { LuLibrary } from 'react-icons/lu';
16
-
import { BiCollection } from 'react-icons/bi';
15
+
import useGetCardFromMyLibrary from '@/features/cards/lib/queries/useGetCardFromMyLibrary';
16
+
import useSembleLibraries from '@/features/semble/lib/queries/useSembleLibraries';
17
+
import { IoMdCheckmark } from 'react-icons/io';
18
+
import { FaRegNoteSticky } from 'react-icons/fa6';
17
19
18
20
interface Props {
19
21
collection: Collection & {
···
41
43
42
44
const collectionPageUrl = `${process.env.NEXT_PUBLIC_APP_URL}/profile/${props.collection.author?.handle}/collections/${props.collection.rkey}`;
43
45
46
+
const cardStatus = useGetCardFromMyLibrary({ url: collectionPageUrl });
47
+
const isInYourLibrary = cardStatus.data.card?.urlInLibrary;
48
+
49
+
const { data: librariesData } = useSembleLibraries({
50
+
url: collectionPageUrl,
51
+
});
52
+
const allLibraries =
53
+
librariesData?.pages.flatMap((page) => page.libraries ?? []) ?? [];
54
+
const urlLibraryCount = allLibraries.length ?? 0;
55
+
44
56
return (
45
57
<Fragment>
46
58
<Group gap={'xs'}>
···
52
64
</ActionIcon>
53
65
</Menu.Target>
54
66
<Menu.Dropdown>
55
-
<Menu.Item
56
-
leftSection={<LuLibrary />}
57
-
onClick={() => setShowSaveToLibraryModal(true)}
58
-
>
59
-
Save to library
60
-
</Menu.Item>
61
67
{canAddCard && (
62
68
<Menu.Item
63
-
leftSection={<BiCollection />}
69
+
leftSection={<FaRegNoteSticky />}
64
70
onClick={() => setShowAddDrawer(true)}
65
71
>
66
72
Add card
67
73
</Menu.Item>
68
74
)}
75
+
<Menu.Item
76
+
leftSection={isInYourLibrary ? <IoMdCheckmark /> : <FiPlus />}
77
+
onClick={() => setShowSaveToLibraryModal(true)}
78
+
>
79
+
{isInYourLibrary ? 'Saved to library' : 'Save to library'}
80
+
</Menu.Item>
69
81
</Menu.Dropdown>
70
82
</Menu>
71
83
)}
···
136
148
isOpen={showSaveToLibraryModal}
137
149
onClose={() => setShowSaveToLibraryModal(false)}
138
150
url={collectionPageUrl}
139
-
urlLibraryCount={0}
151
+
cardId={cardStatus.data.card?.id}
152
+
note={cardStatus.data.card?.note?.text}
153
+
isInYourLibrary={isInYourLibrary}
154
+
urlLibraryCount={urlLibraryCount}
140
155
/>
141
156
142
157
<EditCollectionModal
+11
src/webapp/features/collections/components/collectionActions/Skeleton.CollectionActions.tsx
+11
src/webapp/features/collections/components/collectionActions/Skeleton.CollectionActions.tsx
···
1
+
import { Group, Skeleton } from '@mantine/core';
2
+
3
+
export default function CollectionActionsSkeleton() {
4
+
return (
5
+
<Group gap={'xs'}>
6
+
<Skeleton w={34} h={34} radius={'xl'} />
7
+
<Skeleton w={34} h={34} radius={'xl'} />
8
+
<Skeleton w={34} h={34} radius={'xl'} />
9
+
</Group>
10
+
);
11
+
}
+9
-6
src/webapp/features/collections/components/collectionHeader/CollectionHeader.tsx
+9
-6
src/webapp/features/collections/components/collectionHeader/CollectionHeader.tsx
···
25
25
import { LinkAvatar } from '@/components/link/MantineLink';
26
26
import { isBotAccount } from '@/features/platforms/bluesky/lib/utils/account';
27
27
import BotLabel from '@/features/profile/components/botLabel/BotLabel';
28
+
import CollectionActionsSkeleton from '../collectionActions/Skeleton.CollectionActions';
28
29
29
30
interface Props {
30
31
rkey: string;
···
202
203
</Group>
203
204
</Stack>
204
205
205
-
<CollectionActions
206
-
collection={{
207
-
...collection,
208
-
rkey: props.rkey,
209
-
}}
210
-
/>
206
+
<Suspense fallback={<CollectionActionsSkeleton />}>
207
+
<CollectionActions
208
+
collection={{
209
+
...collection,
210
+
rkey: props.rkey,
211
+
}}
212
+
/>
213
+
</Suspense>
211
214
</Group>
212
215
</Stack>
213
216
</Stack>
+2
-6
src/webapp/features/collections/components/collectionHeader/Skeleton.CollectionHeader.tsx
+2
-6
src/webapp/features/collections/components/collectionHeader/Skeleton.CollectionHeader.tsx
···
1
1
import { Container, Group, Stack, Skeleton, Box } from '@mantine/core';
2
+
import CollectionActionsSkeleton from '../collectionActions/Skeleton.CollectionActions';
2
3
3
4
export default function CollectionHeaderSkeleton() {
4
5
return (
···
57
58
<Skeleton w={'100%'} h={20} />
58
59
</Stack>
59
60
60
-
{/* Actions */}
61
-
<Group gap={'xs'}>
62
-
<Skeleton w={34} h={34} radius={'xl'} />
63
-
<Skeleton w={34} h={34} radius={'xl'} />
64
-
<Skeleton w={34} h={34} radius={'xl'} />
65
-
</Group>
61
+
<CollectionActionsSkeleton />
66
62
</Group>
67
63
</Stack>
68
64
</Stack>