+3 -2

src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx

View file Reviewed

··· 6 6 import { isMarginUri } from '@/lib/utils/margin'; 7 7 import MarginLogo from '@/components/MarginLogo'; 8 8 import { CollectionAccessType } from '@semble/types'; 9 9 + import { abbreviateNumber } from '@/lib/utils/text'; 9 10 10 11 interface Props { 11 12 name: string; ··· 41 42 rightSection={ 42 43 props.cardCount > 0 ? ( 43 44 <Badge 45 45 + fullWidth 44 46 className={ 45 47 isActive 46 48 ? isOpenCollection ··· 48 50 : styles.badgeActive 49 51 : styles.badge 50 52 } 51 51 - circle 52 53 > 53 53 - {props.cardCount} 54 54 + {abbreviateNumber(props.cardCount)} 54 55 </Badge> 55 56 ) : null 56 57 }

+77 -35

src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx

View file Reviewed

··· 1 1 'use client'; 2 2 3 3 import Link from 'next/link'; 4 4 - import { NavLink, Stack } from '@mantine/core'; 5 5 - import { BiCollection, BiRightArrowAlt } from 'react-icons/bi'; 4 4 + import { ActionIcon, Group, NavLink, Stack, Text } from '@mantine/core'; 5 5 + import { BiRightArrowAlt } from 'react-icons/bi'; 6 6 import CollectionNavItem from '../collectionNavItem/CollectionNavItem'; 7 7 import useMyCollections from '../../lib/queries/useMyCollections'; 8 8 - import { useToggle } from '@mantine/hooks'; 9 8 import CollectionsNavListError from './Error.CollectionsNavList'; 10 9 import CreateCollectionShortcut from '../createCollectionShortcut/CreateCollectionShortcut'; 11 10 import useMyProfile from '@/features/profile/lib/queries/useMyProfile'; 12 11 import { getRecordKey } from '@/lib/utils/atproto'; 13 12 import { useNavbarContext } from '@/providers/navbar'; 13 13 + import useFollowingCollections from '@/features/follows/lib/queries/useFollowingCollections'; 14 14 15 15 export default function CollectionsNavList() { 16 16 const { toggleMobile } = useNavbarContext(); 17 17 const { data, error } = useMyCollections({ limit: 30 }); 18 18 - const { data: profile } = useMyProfile(); 19 19 - const [opened, toggleMenu] = useToggle([true, false]); 18 18 + const { data: profile, error: profileError } = useMyProfile(); 19 19 + const { data: followingCollections, error: errorFollowingCollections } = 20 20 + useFollowingCollections({ identifier: profile.handle, limit: 30 }); 20 21 21 21 - if (error) { 22 22 + if (error || errorFollowingCollections || profileError) { 22 23 return <CollectionsNavListError />; 23 24 } 24 25 25 26 const collections = 26 27 data?.pages.flatMap((page) => page.collections ?? []) ?? []; 27 28 29 29 + const followedCollections = 30 30 + followingCollections?.pages.flatMap((page) => page.collections ?? []) ?? []; 31 31 + 28 32 return ( 29 29 - <NavLink 30 30 - variant="subtle" 31 31 - c="gray" 32 32 - label="Collections" 33 33 - leftSection={<BiCollection size={22} />} 34 34 - opened={opened} 35 35 - onClick={() => toggleMenu()} 36 36 - > 37 37 - <CreateCollectionShortcut /> 33 33 + <Stack gap={'xs'}> 34 34 + <Group justify="space-between"> 35 35 + <Text fw={600} c={'gray'}> 36 36 + Collections 37 37 + </Text> 38 38 39 39 - <NavLink 40 40 - component={Link} 41 41 - href={`/profile/${profile.handle}/collections`} 42 42 - label="View all" 43 43 - variant="subtle" 44 44 - c="blue" 45 45 - leftSection={<BiRightArrowAlt size={25} />} 46 46 - onClick={toggleMobile} 47 47 - /> 39 39 + <Group gap={'xs'}> 40 40 + <ActionIcon 41 41 + component={Link} 42 42 + href={`/profile/${profile.handle}/collections`} 43 43 + variant="light" 44 44 + radius={'xl'} 45 45 + color="blue" 46 46 + onClick={toggleMobile} 47 47 + > 48 48 + <BiRightArrowAlt size={18} /> 49 49 + </ActionIcon> 50 50 + <CreateCollectionShortcut /> 51 51 + </Group> 52 52 + </Group> 48 53 49 54 <Stack gap={0}> 50 50 - {collections.map((collection) => ( 51 51 - <CollectionNavItem 52 52 - key={collection.id} 53 53 - name={collection.name} 54 54 - url={`/profile/${collection.author.handle}/collections/${getRecordKey(collection.uri!!)}`} 55 55 - cardCount={collection.cardCount} 56 56 - accessType={collection.accessType} 57 57 - uri={collection.uri} 58 58 - /> 59 59 - ))} 55 55 + <NavLink label="My Collections" c={'gray'}> 56 56 + <Stack gap={0}> 57 57 + {collections.map((collection) => ( 58 58 + <CollectionNavItem 59 59 + key={collection.id} 60 60 + name={collection.name} 61 61 + url={`/profile/${collection.author.handle}/collections/${getRecordKey(collection.uri!!)}`} 62 62 + cardCount={collection.cardCount} 63 63 + accessType={collection.accessType} 64 64 + uri={collection.uri} 65 65 + /> 66 66 + ))} 67 67 + <NavLink 68 68 + component={Link} 69 69 + href={`/profile/${profile.handle}/collections`} 70 70 + label="View all" 71 71 + variant="subtle" 72 72 + c="blue" 73 73 + leftSection={<BiRightArrowAlt size={25} />} 74 74 + onClick={toggleMobile} 75 75 + /> 76 76 + </Stack> 77 77 + </NavLink> 78 78 + 79 79 + <NavLink label="Following" c={'gray'}> 80 80 + <Stack gap={0}> 81 81 + {followedCollections.map((collection) => ( 82 82 + <CollectionNavItem 83 83 + key={collection.id} 84 84 + name={collection.name} 85 85 + url={`/profile/${collection.author.handle}/collections/${getRecordKey(collection.uri!!)}`} 86 86 + cardCount={collection.cardCount} 87 87 + accessType={collection.accessType} 88 88 + uri={collection.uri} 89 89 + /> 90 90 + ))} 91 91 + <NavLink 92 92 + component={Link} 93 93 + href={`/profile/${profile.handle}/network/collections-following`} 94 94 + label="View all" 95 95 + variant="subtle" 96 96 + c="blue" 97 97 + leftSection={<BiRightArrowAlt size={25} />} 98 98 + onClick={toggleMobile} 99 99 + /> 100 100 + </Stack> 101 101 + </NavLink> 60 102 </Stack> 61 61 - </NavLink> 103 103 + </Stack> 62 104 ); 63 105 }

+8 -8

src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx

View file Reviewed

··· 1 1 - import { NavLink } from '@mantine/core'; 1 1 + import { ActionIcon, Button, NavLink } from '@mantine/core'; 2 2 import { Fragment, useState } from 'react'; 3 3 import { FiPlus } from 'react-icons/fi'; 4 4 import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer'; ··· 8 8 9 9 return ( 10 10 <Fragment> 11 11 - <NavLink 12 12 - component="button" 13 13 - label={'Create'} 14 14 - variant="subtle" 15 15 - c="blue" 16 16 - leftSection={<FiPlus size={25} />} 11 11 + <ActionIcon 12 12 + variant="light" 13 13 + radius={'xl'} 14 14 + color="blue" 17 15 onClick={() => setIsDrawerOpen(true)} 18 18 - /> 16 16 + > 17 17 + <FiPlus size={18} /> 18 18 + </ActionIcon> 19 19 <CreateCollectionDrawer 20 20 isOpen={isDrawerOpen} 21 21 onClose={() => setIsDrawerOpen(false)}