ByteSnap/channels-seerr
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(blacklist): create blacktag ui badge for blacklist

Browse Source
This commit is contained in:
Ben Beauchamp
2025-01-24 23:29:31 -06:00
parent fa96e31bcb
commit e070a6efb8
3 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Blacklist/index.tsx
View File

@@ -1,3 +1,4 @@
import BlacktagsBadge from '@app/components/BlacktagsBadge';
import Badge from '@app/components/Common/Badge';
import Button from '@app/components/Common/Button';
import CachedImage from '@app/components/Common/CachedImage';
@@ -353,24 +354,33 @@ const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => {
numeric="auto"
/>
),
user: (
<Link href={`/users/${item.user.id}`}>
<span className="group flex items-center truncate">
<CachedImage
type="avatar"
src={item.user.avatar}
alt=""
className="avatar-sm ml-1.5"
width={20}
height={20}
style={{ objectFit: 'cover' }}
/>
<span className="ml-1 truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{item.user.displayName}
user:
item.user != null ? (
<Link href={`/users/${item.user.id}`}>
<span className="group flex items-center truncate">
<CachedImage
type="avatar"
src={item.user.avatar}
alt=""
className="avatar-sm ml-1.5"
width={20}
height={20}
style={{ objectFit: 'cover' }}
/>
<span className="ml-1 truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{item.user.displayName}
</span>
</span>
</Link>
) : item.blacktags ? (
<span className="ml-1">
<BlacktagsBadge data={item} />
</span>
</Link>
),
) : (
<span className="ml-1 truncate text-sm font-semibold">
???
</span>
),
})}
</span>
</div>

42
src/components/BlacklistBlock/index.tsx
View File

@@ -1,3 +1,4 @@
import BlacktagsBadge from '@app/components/BlacktagsBadge';
import Badge from '@app/components/Common/Badge';
import Button from '@app/components/Common/Button';
import LoadingSpinner from '@app/components/Common/LoadingSpinner';
@@ -78,22 +79,33 @@ const BlacklistBlock = ({
<div className="flex items-center justify-between">
<div className="mr-6 min-w-0 flex-1 flex-col items-center text-sm leading-5">
<div className="white mb-1 flex flex-nowrap">
<Tooltip content={intl.formatMessage(messages.blacklistedby)}>
<UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
</Tooltip>
<span className="w-40 truncate md:w-auto">
<Link
href={
data.user.id === user?.id
? '/profile'
: `/users/${data.user.id}`
}
>
<span className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
{data.user.displayName}
{data.user != null ? (
<>
<Tooltip content={intl.formatMessage(messages.blacklistedby)}>
<UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
</Tooltip>
<span className="w-40 truncate md:w-auto">
<Link
href={
data.user.id === user?.id
? '/profile'
: `/users/${data.user.id}`
}
>
<span className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
{data.user.displayName}
</span>
</Link>
</span>
</Link>
</span>
</>
) : data.blacktags != null && data.blacktags != '' ? (
<>
<span className="w-40 truncate md:w-auto">
{intl.formatMessage(messages.blacklistedby)}:&nbsp;
</span>
<BlacktagsBadge data={data} />
</>
) : null}
</div>
</div>
<div className="ml-2 flex flex-shrink-0 flex-wrap">

53
src/components/BlacktagsBadge/index.tsx Normal file
View File

@@ -0,0 +1,53 @@
import Badge from '@app/components/Common/Badge';
import Tooltip from '@app/components/Common/Tooltip';
import { TagIcon } from '@heroicons/react/20/solid';
import type { BlacklistItem } from '@server/interfaces/api/blacklistInterfaces';
import type { Keyword } from '@server/models/common';
import { useEffect, useState } from 'react';
interface BlacktagsBadgeProps {
data: BlacklistItem;
}
const BlacktagsBadge = ({ data }: BlacktagsBadgeProps) => {
const [tagNamesBlacklistedFor, setTagNamesBlacklistedFor] =
useState<string>('Loading...');
useEffect(() => {
if (data.blacktags == null) {
return;
}
const keywordIds = data.blacktags.slice(1, -1).split(',');
Promise.all(
keywordIds.map(async (keywordId) => {
const res = await fetch(`/api/v1/keyword/${keywordId}`);
if (!res.ok) {
return '';
}
const keyword: Keyword = await res.json();
return keyword.name;
})
).then((keywords) => {
setTagNamesBlacklistedFor(keywords.join(', '));
});
}, [data.blacktags]);
return (
<Tooltip
content={tagNamesBlacklistedFor}
tooltipConfig={{ followCursor: false }}
>
<Badge
badgeType="dark"
className="items-center border border-red-500 !text-red-400"
>
<TagIcon className="mr-1 h-4" />
Blacktags
</Badge>
</Tooltip>
);
};
export default BlacktagsBadge;