cosmik.network
A social knowledge tool for researchers built on ATProto
fix: feed activity theme colour
+9
src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.module.css
+9
src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.module.css
+17
-23
src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
+17
-23
src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
···
1
-
'use client';
2
-
3
import {
4
Anchor,
5
Avatar,
6
Card,
7
Group,
8
Menu,
9
ScrollArea,
10
Stack,
11
Text,
···
13
import { FeedItem, Collection } from '@/api-client';
14
import { Fragment } from 'react';
15
import Link from 'next/link';
16
import { getRelativeTime } from '@/lib/utils/time';
17
import { getRecordKey } from '@/lib/utils/atproto';
18
import { sanitizeText } from '@/lib/utils/text';
19
-
import { useColorScheme } from '@mantine/hooks';
20
-
import { BiCollection } from 'react-icons/bi';
21
22
interface Props {
23
user: FeedItem['user'];
···
26
}
27
28
export default function FeedActivityStatus(props: Props) {
29
-
const colorScheme = useColorScheme();
30
const MAX_DISPLAYED = 2;
31
const time = getRelativeTime(props.createdAt.toString());
32
const relativeCreatedDate = time === 'just now' ? `Now` : `${time} ago`;
···
41
const remainingCount = collections.length - MAX_DISPLAYED;
42
43
return (
44
-
<Text fw={500} c={'gray'}>
45
-
<Anchor
46
-
component={Link}
47
-
href={`/profile/${props.user.handle}`}
48
-
c="dark"
49
-
fw={600}
50
-
>
51
{sanitizeText(props.user.name)}
52
-
</Anchor>{' '}
53
{collections.length === 0 ? (
54
-
'added to library'
55
) : (
56
<Fragment>
57
-
added to{' '}
58
{displayedCollections.map(
59
(collection: Collection, index: number) => (
60
<span key={collection.id}>
···
70
</span>
71
),
72
)}
73
-
{remainingCount > 0 && ' and '}
74
{remainingCount > 0 && (
75
<Menu shadow="sm">
76
-
<Menu.Target>
77
<Text
78
fw={600}
79
c={'blue'}
···
83
{remainingCount} other collection
84
{remainingCount > 1 ? 's' : ''}
85
</Text>
86
-
</Menu.Target>
87
-
<Menu.Dropdown maw={380}>
88
<ScrollArea.Autosize mah={150} type="auto">
89
{remainingCollections.map((c) => (
90
-
<Menu.Item
91
key={c.id}
92
component={Link}
93
href={`/profile/${c.author.handle}/collections/${getRecordKey(c.uri!)}`}
···
96
fw={600}
97
>
98
{c.name}
99
-
</Menu.Item>
100
))}
101
</ScrollArea.Autosize>
102
-
</Menu.Dropdown>
103
</Menu>
104
)}
105
</Fragment>
···
112
};
113
114
return (
115
-
<Card p={0} bg={colorScheme === 'dark' ? 'dark.4' : 'gray.1'} radius={'lg'}>
116
<Stack gap={'xs'}>
117
<Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
118
<Avatar
···
1
import {
2
Anchor,
3
Avatar,
4
Card,
5
Group,
6
Menu,
7
+
MenuDropdown,
8
+
MenuItem,
9
+
MenuTarget,
10
ScrollArea,
11
Stack,
12
Text,
···
14
import { FeedItem, Collection } from '@/api-client';
15
import { Fragment } from 'react';
16
import Link from 'next/link';
17
+
import styles from './FeedActivityStatus.module.css';
18
import { getRelativeTime } from '@/lib/utils/time';
19
import { getRecordKey } from '@/lib/utils/atproto';
20
import { sanitizeText } from '@/lib/utils/text';
21
22
interface Props {
23
user: FeedItem['user'];
···
26
}
27
28
export default function FeedActivityStatus(props: Props) {
29
const MAX_DISPLAYED = 2;
30
const time = getRelativeTime(props.createdAt.toString());
31
const relativeCreatedDate = time === 'just now' ? `Now` : `${time} ago`;
···
40
const remainingCount = collections.length - MAX_DISPLAYED;
41
42
return (
43
+
<Text fw={500}>
44
+
<Text component={Link} href={`/profile/${props.user.handle}`} fw={600}>
45
{sanitizeText(props.user.name)}
46
+
</Text>{' '}
47
{collections.length === 0 ? (
48
+
<Text span>added to library</Text>
49
) : (
50
<Fragment>
51
+
<Text span>added to </Text>
52
{displayedCollections.map(
53
(collection: Collection, index: number) => (
54
<span key={collection.id}>
···
64
</span>
65
),
66
)}
67
+
{remainingCount > 0 && <Text span>{' and '}</Text>}
68
{remainingCount > 0 && (
69
<Menu shadow="sm">
70
+
<MenuTarget>
71
<Text
72
fw={600}
73
c={'blue'}
···
77
{remainingCount} other collection
78
{remainingCount > 1 ? 's' : ''}
79
</Text>
80
+
</MenuTarget>
81
+
<MenuDropdown maw={380}>
82
<ScrollArea.Autosize mah={150} type="auto">
83
{remainingCollections.map((c) => (
84
+
<MenuItem
85
key={c.id}
86
component={Link}
87
href={`/profile/${c.author.handle}/collections/${getRecordKey(c.uri!)}`}
···
90
fw={600}
91
>
92
{c.name}
93
+
</MenuItem>
94
))}
95
</ScrollArea.Autosize>
96
+
</MenuDropdown>
97
</Menu>
98
)}
99
</Fragment>
···
106
};
107
108
return (
109
+
<Card p={0} className={styles.root} radius={'lg'}>
110
<Stack gap={'xs'}>
111
<Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
112
<Avatar
+3
-11
src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
+3
-11
src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
···
1
-
'use client';
2
-
3
import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
4
-
import { Avatar, Card, Group, Paper, Skeleton, Stack } from '@mantine/core';
5
-
import { useColorScheme } from '@mantine/hooks';
6
7
export default function FeedItemSkeleton() {
8
-
const colorScheme = useColorScheme();
9
-
10
return (
11
<Stack gap={'xs'} align="stretch">
12
{/* Feed activity status*/}
13
-
<Card
14
-
p={0}
15
-
bg={colorScheme === 'dark' ? 'dark.4' : 'gray.1'}
16
-
radius={'lg'}
17
-
>
18
<Stack gap={'xs'} align="stretch" w={'100%'}>
19
<Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
20
<Avatar />
···
1
import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
2
+
import { Avatar, Card, Group, Skeleton, Stack } from '@mantine/core';
3
+
import styles from '../feedActivityStatus/FeedActivityStatus.module.css';
4
5
export default function FeedItemSkeleton() {
6
return (
7
<Stack gap={'xs'} align="stretch">
8
{/* Feed activity status*/}
9
+
<Card p={0} className={styles.root} radius={'lg'}>
10
<Stack gap={'xs'} align="stretch" w={'100%'}>
11
<Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
12
<Avatar />
+2
-2
src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+2
-2
src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx