mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-13 03:43:50 +02:00
864 lines
38 KiB
JavaScript
864 lines
38 KiB
JavaScript
import Location from '../../components/Location.vue';
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage
|
|
} from '../../components/ui/avatar';
|
|
import { Badge } from '../../components/ui/badge';
|
|
import { Button } from '../../components/ui/button';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
TooltipWrapper
|
|
} from '../../components/ui/tooltip';
|
|
import {
|
|
ArrowUpDown,
|
|
Ban,
|
|
BellOff,
|
|
Check,
|
|
ImageOff,
|
|
Link,
|
|
MessageCircle,
|
|
Reply,
|
|
Tag,
|
|
Trash2,
|
|
X
|
|
} from 'lucide-vue-next';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import { formatDateFilter } from '../../shared/utils';
|
|
import { checkCanInvite } from '../../shared/utils/invite';
|
|
import { i18n } from '../../plugins';
|
|
import {
|
|
useGameStore,
|
|
useInstanceStore,
|
|
useLocationStore,
|
|
useUiStore,
|
|
useUserStore,
|
|
useNotificationStore
|
|
} from '../../stores';
|
|
import { showUserDialog } from '../../coordinators/userCoordinator';
|
|
import { showWorldDialog } from '../../coordinators/worldCoordinator';
|
|
import { showGroupDialog } from '../../coordinators/groupCoordinator';
|
|
|
|
import Emoji from '../../components/Emoji.vue';
|
|
|
|
const { t, te } = i18n.global;
|
|
|
|
const isGroupId = (id) => typeof id === 'string' && id.startsWith('grp_');
|
|
|
|
export const createColumns = ({
|
|
getNotificationCreatedAt,
|
|
getNotificationCreatedAtTs,
|
|
openNotificationLink,
|
|
showFullscreenImageDialog,
|
|
getSmallThumbnailUrl,
|
|
acceptFriendRequestNotification,
|
|
showSendInviteResponseDialog,
|
|
showSendInviteRequestResponseDialog,
|
|
acceptRequestInvite,
|
|
sendNotificationResponse,
|
|
hideNotification,
|
|
hideNotificationPrompt,
|
|
deleteNotificationLog,
|
|
deleteNotificationLogPrompt
|
|
}) => {
|
|
const { showSendBoopDialog } = useUserStore();
|
|
|
|
const { shiftHeld } = storeToRefs(useUiStore());
|
|
const { currentUser } = storeToRefs(useUserStore());
|
|
const { lastLocation } = storeToRefs(useLocationStore());
|
|
const { isGameRunning } = storeToRefs(useGameStore());
|
|
const { isNotificationExpired } = useNotificationStore();
|
|
|
|
const { cachedInstances } = storeToRefs(useInstanceStore());
|
|
|
|
const canInvite = () => {
|
|
const location = lastLocation.value?.location;
|
|
return (
|
|
Boolean(location) && isGameRunning.value && checkCanInvite(location, {
|
|
currentUserId: currentUser.value?.id,
|
|
lastLocationStr: lastLocation.value?.location,
|
|
cachedInstances: cachedInstances.value
|
|
})
|
|
);
|
|
};
|
|
|
|
const getResponseIcon = (response, notificationType) => {
|
|
if (response?.type === 'link') {
|
|
return Link;
|
|
}
|
|
switch (response?.icon) {
|
|
case 'check':
|
|
return Check;
|
|
case 'cancel':
|
|
return X;
|
|
case 'ban':
|
|
return Ban;
|
|
case 'bell-slash':
|
|
return BellOff;
|
|
case 'reply':
|
|
return notificationType === 'boop' ? MessageCircle : Reply;
|
|
default:
|
|
return Tag;
|
|
}
|
|
};
|
|
|
|
return [
|
|
{
|
|
accessorFn: (row) => getNotificationCreatedAtTs(row),
|
|
id: 'created_at',
|
|
size: 120,
|
|
meta: { label: () => t('table.notification.date') },
|
|
header: ({ column }) => (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() =>
|
|
column.toggleSorting(column.getIsSorted() === 'asc')
|
|
}
|
|
>
|
|
{t('table.notification.date')}
|
|
<ArrowUpDown class="ml-1 h-4 w-4" />
|
|
</Button>
|
|
),
|
|
sortingFn: (rowA, rowB, columnId) => {
|
|
const a = rowA.getValue(columnId) ?? 0;
|
|
const b = rowB.getValue(columnId) ?? 0;
|
|
if (a !== b) {
|
|
return a - b;
|
|
}
|
|
|
|
const aId =
|
|
typeof rowA.original?.id === 'string'
|
|
? rowA.original.id
|
|
: '';
|
|
const bId =
|
|
typeof rowB.original?.id === 'string'
|
|
? rowB.original.id
|
|
: '';
|
|
return aId.localeCompare(bId);
|
|
},
|
|
cell: ({ row }) => {
|
|
const createdAt = getNotificationCreatedAt(row.original);
|
|
const shortText = formatDateFilter(createdAt, 'short');
|
|
const longText = formatDateFilter(createdAt, 'long');
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>{shortText}</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">
|
|
<span>{longText}</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'type',
|
|
size: 180,
|
|
header: () => t('table.notification.type'),
|
|
meta: { label: () => t('table.notification.type') },
|
|
cell: ({ row }) => {
|
|
const original = row.original;
|
|
const typeKey = `view.notification.filters.${original.type}`;
|
|
const label = te(typeKey) ? t(typeKey) : original.type;
|
|
|
|
if (original.type === 'invite') {
|
|
return (
|
|
<Badge variant="outline" class="text-muted-foreground">
|
|
{label}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
if (
|
|
original.type === 'group.queueReady' ||
|
|
original.type === 'instance.closed'
|
|
) {
|
|
return (
|
|
<Badge variant="outline" class="text-muted-foreground">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span
|
|
class="cursor-pointer"
|
|
onClick={() =>
|
|
showWorldDialog(original.location)
|
|
}
|
|
>
|
|
{label}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
{original.location ? (
|
|
<Location
|
|
location={original.location}
|
|
hint={original.worldName}
|
|
grouphint={original.groupName}
|
|
link={true}
|
|
/>
|
|
) : null}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
if (original.link) {
|
|
return (
|
|
<Badge variant="outline" class="text-muted-foreground">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span
|
|
class="cursor-pointer"
|
|
onClick={() =>
|
|
openNotificationLink(original.link)
|
|
}
|
|
>
|
|
{label}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>{original.linkText}</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Badge variant="outline" class="text-muted-foreground">
|
|
{label}
|
|
</Badge>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'senderUsername',
|
|
meta: {
|
|
class: 'overflow-hidden',
|
|
label: () => t('table.notification.user')
|
|
},
|
|
size: 150,
|
|
header: () => t('table.notification.user'),
|
|
cell: ({ row }) => {
|
|
const original = row.original;
|
|
if (
|
|
original.senderUserId &&
|
|
!isGroupId(original.senderUserId)
|
|
) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
<span
|
|
class="cursor-pointer block w-full min-w-0 truncate"
|
|
onClick={() =>
|
|
showUserDialog(original.senderUserId)
|
|
}
|
|
>
|
|
{original.senderUsername}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (original.link?.startsWith('user:')) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
<span
|
|
class="cursor-pointer block w-full min-w-0 truncate"
|
|
onClick={() =>
|
|
openNotificationLink(original.link)
|
|
}
|
|
>
|
|
{original.linkText || original.senderUsername}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (
|
|
original.senderUsername &&
|
|
!isGroupId(original.senderUserId)
|
|
) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
{original.senderUsername}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'groupName',
|
|
meta: {
|
|
class: 'overflow-hidden',
|
|
label: () => t('table.notification.group')
|
|
},
|
|
size: 150,
|
|
header: () => t('table.notification.group'),
|
|
cell: ({ row }) => {
|
|
const original = row.original;
|
|
const label =
|
|
original.senderUsername ||
|
|
original.groupName ||
|
|
original.data?.groupName ||
|
|
original.details?.groupName ||
|
|
original.linkText;
|
|
|
|
if (
|
|
original.senderUserId &&
|
|
(original.type === 'groupChange' ||
|
|
isGroupId(original.senderUserId))
|
|
) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
<span
|
|
class="cursor-pointer block w-full min-w-0 truncate"
|
|
onClick={() =>
|
|
showGroupDialog(original.senderUserId)
|
|
}
|
|
>
|
|
{label}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (
|
|
original.type === 'groupChange' &&
|
|
original.senderUsername
|
|
) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
{original.senderUsername}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (original.link?.startsWith('group:')) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
<span
|
|
class="cursor-pointer block w-full min-w-0 truncate"
|
|
onClick={() =>
|
|
openNotificationLink(original.link)
|
|
}
|
|
>
|
|
{original.data?.groupName || label}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (original.link?.startsWith('event:')) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
<span
|
|
class="cursor-pointer block w-full min-w-0 truncate"
|
|
onClick={() =>
|
|
openNotificationLink(original.link)
|
|
}
|
|
>
|
|
{original.data?.groupName ||
|
|
original.groupName ||
|
|
label}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (original.data?.groupName) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
{original.data.groupName}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (original.details?.groupName) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
{original.details.groupName}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (original.groupName) {
|
|
return (
|
|
<span class="table-user-text block w-full min-w-0 truncate">
|
|
{original.groupName}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'photo',
|
|
size: 80,
|
|
header: () => t('table.notification.photo'),
|
|
meta: { label: () => t('table.notification.photo') },
|
|
cell: ({ row }) => {
|
|
const original = row.original;
|
|
if (original.type === 'boop') {
|
|
const imageUrl =
|
|
original.details?.imageUrl || original.imageUrl;
|
|
if (!imageUrl || imageUrl.startsWith('default_')) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Emoji
|
|
class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
|
|
onClick={() => showFullscreenImageDialog(imageUrl)}
|
|
imageUrl={imageUrl}
|
|
size={30}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (original.details?.imageUrl) {
|
|
const detailsUrl = getSmallThumbnailUrl(
|
|
original.details.imageUrl
|
|
);
|
|
return (
|
|
<Avatar
|
|
class="cursor-pointer size-7.5 rounded"
|
|
onClick={() =>
|
|
showFullscreenImageDialog(
|
|
original.details.imageUrl
|
|
)
|
|
}
|
|
>
|
|
<AvatarImage
|
|
src={detailsUrl}
|
|
class="object-cover"
|
|
/>
|
|
<AvatarFallback class="rounded">
|
|
<ImageOff class="size-4 text-muted-foreground" />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|
|
|
|
if (original.imageUrl) {
|
|
const imgUrl = getSmallThumbnailUrl(original.imageUrl);
|
|
return (
|
|
<Avatar
|
|
class="cursor-pointer size-7.5 rounded"
|
|
onClick={() =>
|
|
showFullscreenImageDialog(original.imageUrl)
|
|
}
|
|
>
|
|
<AvatarImage src={imgUrl} class="object-cover" />
|
|
<AvatarFallback class="rounded">
|
|
<ImageOff class="size-4 text-muted-foreground" />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
},
|
|
{
|
|
id: 'message',
|
|
header: () => t('table.notification.message'),
|
|
enableSorting: false,
|
|
meta: {
|
|
class: 'min-w-0 overflow-hidden',
|
|
stretch: true,
|
|
label: () => t('table.notification.message')
|
|
},
|
|
minSize: 100,
|
|
cell: ({ row }) => {
|
|
const original = row.original;
|
|
return (
|
|
<div class="w-full min-w-0">
|
|
{original.type === 'invite' && original.details ? (
|
|
<div class="w-full min-w-0">
|
|
<Location
|
|
location={original.details.worldId}
|
|
hint={original.details.worldName}
|
|
grouphint={original.details.groupName}
|
|
link
|
|
/>
|
|
</div>
|
|
) : null}
|
|
{original.message && original.title ? (
|
|
<TooltipWrapper
|
|
content={`${original.title}, ${original.message}`}
|
|
delayDuration={500}
|
|
>
|
|
<span class="block w-full min-w-0 truncate">
|
|
{`${original.title}, ${original.message}`}
|
|
</span>
|
|
</TooltipWrapper>
|
|
) : null}
|
|
{!original.message && original.title ? (
|
|
<TooltipWrapper
|
|
content={original.title}
|
|
delayDuration={500}
|
|
>
|
|
<span class="block w-full min-w-0 truncate">
|
|
{original.title}
|
|
</span>
|
|
</TooltipWrapper>
|
|
) : null}
|
|
{original.message &&
|
|
!original.title &&
|
|
original.message !==
|
|
`This is a generated invite to ${original.details?.worldName}` ? (
|
|
<TooltipWrapper
|
|
content={original.message}
|
|
delayDuration={500}
|
|
>
|
|
<span class="block w-full min-w-0 truncate">
|
|
{original.message}
|
|
</span>
|
|
</TooltipWrapper>
|
|
) : null}
|
|
{!original.message &&
|
|
original.details?.inviteMessage ? (
|
|
<TooltipWrapper
|
|
content={original.details.inviteMessage}
|
|
delayDuration={500}
|
|
>
|
|
<span class="block w-full min-w-0 truncate">
|
|
{original.details.inviteMessage}
|
|
</span>
|
|
</TooltipWrapper>
|
|
) : null}
|
|
{!original.message &&
|
|
original.details?.requestMessage ? (
|
|
<TooltipWrapper
|
|
content={original.details.requestMessage}
|
|
delayDuration={500}
|
|
>
|
|
<span class="block w-full min-w-0 truncate">
|
|
{original.details.requestMessage}
|
|
</span>
|
|
</TooltipWrapper>
|
|
) : null}
|
|
{!original.message &&
|
|
original.details?.responseMessage ? (
|
|
<TooltipWrapper
|
|
content={original.details.responseMessage}
|
|
delayDuration={500}
|
|
>
|
|
<span class="block w-full min-w-0 truncate">
|
|
{original.details.responseMessage}
|
|
</span>
|
|
</TooltipWrapper>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
id: 'action',
|
|
meta: {
|
|
class: 'text-right',
|
|
label: () => t('table.notification.action')
|
|
},
|
|
size: 120,
|
|
minSize: 120,
|
|
maxSize: 120,
|
|
header: () => t('table.notification.action'),
|
|
enableSorting: false,
|
|
cell: ({ row }) => {
|
|
const original = row.original;
|
|
const hasResponses = Array.isArray(original.responses);
|
|
const showDecline =
|
|
original.type !== 'requestInviteResponse' &&
|
|
original.type !== 'inviteResponse' &&
|
|
original.type !== 'message' &&
|
|
original.type !== 'boop' &&
|
|
original.type !== 'groupChange' &&
|
|
!original.type?.includes('group.') &&
|
|
!original.type?.includes('moderation.') &&
|
|
!original.type?.includes('instance.') &&
|
|
!original.link?.startsWith('economy.');
|
|
const showDeleteLog =
|
|
original.type !== 'friendRequest' &&
|
|
original.type !== 'ignoredFriendRequest';
|
|
|
|
return (
|
|
<div class="flex items-center justify-end gap-2">
|
|
{original.senderUserId !== currentUser.value?.id &&
|
|
!isNotificationExpired(original) ? (
|
|
<span class="inline-flex items-center gap-2">
|
|
{original.type === 'friendRequest' ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
onClick={() =>
|
|
acceptFriendRequestNotification(
|
|
original
|
|
)
|
|
}
|
|
>
|
|
<Check class="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>
|
|
{t(
|
|
'view.notification.actions.accept'
|
|
)}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
|
|
{original.type === 'invite' ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
onClick={() =>
|
|
showSendInviteResponseDialog(
|
|
original
|
|
)
|
|
}
|
|
>
|
|
<MessageCircle class="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>
|
|
{t(
|
|
'view.notification.actions.decline_with_message'
|
|
)}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
|
|
{original.type === 'requestInvite' ? (
|
|
<span class="inline-flex items-center">
|
|
{canInvite() ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
onClick={() =>
|
|
acceptRequestInvite(
|
|
original
|
|
)
|
|
}
|
|
>
|
|
<Check class="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>
|
|
{t(
|
|
'view.notification.actions.invite'
|
|
)}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
onClick={() =>
|
|
showSendInviteRequestResponseDialog(
|
|
original
|
|
)
|
|
}
|
|
>
|
|
<MessageCircle class="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>
|
|
{t(
|
|
'view.notification.actions.decline_with_message'
|
|
)}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</span>
|
|
) : null}
|
|
|
|
{hasResponses
|
|
? original.responses.map((response) => {
|
|
const onClick = () => {
|
|
if (response.type === 'link') {
|
|
openNotificationLink(
|
|
response.data
|
|
);
|
|
return;
|
|
}
|
|
if (
|
|
response.icon === 'reply' &&
|
|
original.type === 'boop'
|
|
) {
|
|
showSendBoopDialog(
|
|
original.senderUserId
|
|
);
|
|
return;
|
|
}
|
|
sendNotificationResponse(
|
|
original.id,
|
|
original.responses,
|
|
response.type
|
|
);
|
|
};
|
|
|
|
const ResponseIcon = getResponseIcon(
|
|
response,
|
|
original.type
|
|
);
|
|
|
|
return (
|
|
<Tooltip
|
|
key={`${response.text}:${response.type}`}
|
|
>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
onClick={onClick}
|
|
>
|
|
<ResponseIcon class="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>
|
|
{response.text}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
})
|
|
: null}
|
|
|
|
{showDecline ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
onClick={() =>
|
|
shiftHeld.value
|
|
? hideNotification(
|
|
original
|
|
)
|
|
: hideNotificationPrompt(
|
|
original
|
|
)
|
|
}
|
|
>
|
|
<X
|
|
class={
|
|
shiftHeld.value
|
|
? 'h-4 w-4 text-red-600'
|
|
: 'h-4 w-4'
|
|
}
|
|
/>
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>
|
|
{t(
|
|
'view.notification.actions.decline'
|
|
)}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
|
|
{original.type === 'group.queueReady' ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
onClick={() =>
|
|
shiftHeld.value
|
|
? deleteNotificationLog(
|
|
original
|
|
)
|
|
: deleteNotificationLogPrompt(
|
|
original
|
|
)
|
|
}
|
|
>
|
|
{shiftHeld.value ? (
|
|
<X class="h-4 w-4 text-red-600" />
|
|
) : (
|
|
<Trash2 class="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>
|
|
{t(
|
|
'view.notification.actions.delete_log'
|
|
)}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
</span>
|
|
) : null}
|
|
{showDeleteLog ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
onClick={() =>
|
|
shiftHeld.value
|
|
? deleteNotificationLog(
|
|
original
|
|
)
|
|
: deleteNotificationLogPrompt(
|
|
original
|
|
)
|
|
}
|
|
>
|
|
{shiftHeld.value ? (
|
|
<X class="h-4 w-4 text-red-600" />
|
|
) : (
|
|
<Trash2 class="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<span>
|
|
{t(
|
|
'view.notification.actions.delete_log'
|
|
)}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
id: 'trailing',
|
|
header: () => null,
|
|
enableSorting: false,
|
|
enableResizing: false,
|
|
size: 5,
|
|
cell: () => null
|
|
}
|
|
];
|
|
};
|