mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
Merge pull request #145 from simoleo89/feat/mod-tools-redesign
feat(mod-tools): complete redesign + i18n + correctness fixes
This commit is contained in:
DuckieTM
@@ -98,6 +98,148 @@
|
||||
"catalog.prefix.price.amount": "5 Credits",
|
||||
"catalog.prefix.purchased": "? Purchased!",
|
||||
"catalog.prefix.purchase": "Purchase",
|
||||
"modtools.userinfo.title": "User Info: %username%",
|
||||
"modtools.userinfo.userName": "Name",
|
||||
"modtools.userinfo.cfhCount": "CFHs",
|
||||
"modtools.userinfo.abusiveCfhCount": "Abusive CFHs",
|
||||
"modtools.userinfo.cautionCount": "Cautions",
|
||||
"modtools.userinfo.banCount": "Bans",
|
||||
"modtools.userinfo.lastSanctionTime": "Last Sanction",
|
||||
"modtools.userinfo.tradingLockCount": "Trade Locks",
|
||||
"modtools.userinfo.tradingExpiryDate": "Lock Expires",
|
||||
"modtools.userinfo.minutesSinceLastLogin": "Last Login",
|
||||
"modtools.userinfo.lastPurchaseDate": "Last Purchase",
|
||||
"modtools.userinfo.primaryEmailAddress": "Email",
|
||||
"modtools.userinfo.identityRelatedBanCount": "Banned Accs",
|
||||
"modtools.userinfo.registrationAgeInMinutes": "Registered",
|
||||
"modtools.userinfo.userClassification": "Rank",
|
||||
"modtools.window.title": "Mod Tools",
|
||||
"modtools.window.tools.room": "Room Tool",
|
||||
"modtools.window.tools.chatlog": "Chatlog Tool",
|
||||
"modtools.window.tools.report": "Report Tool",
|
||||
"modtools.window.select.user": "Select a user",
|
||||
"modtools.window.no.room": "Enter a room first",
|
||||
"modtools.window.user.in_room": "Still in this room",
|
||||
"modtools.window.user.left_room": "No longer in this room",
|
||||
"modtools.window.user.clear": "Clear selection",
|
||||
"modtools.window.tickets.open": "%count% open ticket",
|
||||
"modtools.window.tickets.open.many": "%count% open tickets",
|
||||
"modtools.window.section.room": "Room",
|
||||
"modtools.window.section.user": "User",
|
||||
"modtools.window.section.reports": "Reports",
|
||||
"modtools.window.user.open_info": "Open Info",
|
||||
"modtools.userinfo.refresh": "Refresh user info",
|
||||
"modtools.userinfo.presence.in_room": "In room",
|
||||
"modtools.userinfo.presence.in_room.title": "In the room you are observing",
|
||||
"modtools.userinfo.presence.online": "Online",
|
||||
"modtools.userinfo.presence.online.title": "Online on the hotel",
|
||||
"modtools.userinfo.presence.offline": "Offline",
|
||||
"modtools.userinfo.presence.offline.title": "Offline at panel open",
|
||||
"modtools.userinfo.section.account": "Account",
|
||||
"modtools.userinfo.section.activity": "Activity",
|
||||
"modtools.userinfo.section.sanctions": "Sanctions",
|
||||
"modtools.userinfo.section.trading": "Trading",
|
||||
"modtools.userinfo.button.room.chat": "Room Chat",
|
||||
"modtools.userinfo.button.send.message": "Send Message",
|
||||
"modtools.userinfo.button.room.visits": "Room Visits",
|
||||
"modtools.userinfo.button.mod.action": "Mod Action",
|
||||
"modtools.userinfo.stat.cfh": "CFH",
|
||||
"modtools.userinfo.stat.cautions": "Cautions",
|
||||
"modtools.userinfo.stat.bans": "Bans",
|
||||
"modtools.userinfo.stat.trade.locks": "Trade locks",
|
||||
"modtools.roominfo.title": "Room Info",
|
||||
"modtools.roominfo.refresh": "Refresh room info",
|
||||
"modtools.roominfo.loading": "Loading…",
|
||||
"modtools.roominfo.owner.here": "Owner here",
|
||||
"modtools.roominfo.owner.away": "Owner away",
|
||||
"modtools.roominfo.owner.title.here": "The room owner is currently inside",
|
||||
"modtools.roominfo.owner.title.away": "The room owner is NOT inside",
|
||||
"modtools.roominfo.stat.users": "Users",
|
||||
"modtools.roominfo.stat.owner": "Owner",
|
||||
"modtools.roominfo.owner.open": "Open %username%'s info",
|
||||
"modtools.roominfo.button.visit": "Visit Room",
|
||||
"modtools.roominfo.button.chatlog": "Chatlog",
|
||||
"modtools.roominfo.moderate.title": "Moderate room",
|
||||
"modtools.roominfo.moderate.kick": "Kick everyone out",
|
||||
"modtools.roominfo.moderate.doorbell": "Enable the doorbell",
|
||||
"modtools.roominfo.moderate.rename": "Change room name",
|
||||
"modtools.roominfo.moderate.message.placeholder": "Mandatory message to deliver with the action…",
|
||||
"modtools.roominfo.moderate.send.caution": "Send Caution",
|
||||
"modtools.roominfo.moderate.send.alert": "Send Alert",
|
||||
"modtools.user.message.title": "Send Message",
|
||||
"modtools.user.message.recipient": "Message to",
|
||||
"modtools.user.message.label": "Message",
|
||||
"modtools.user.message.placeholder": "Write something useful — the user will see it as a moderator message.",
|
||||
"modtools.user.message.empty": "Empty",
|
||||
"modtools.user.message.chars": "%count% chars",
|
||||
"modtools.user.message.send": "Send Message",
|
||||
"modtools.user.modaction.title": "Mod Action: %username%",
|
||||
"modtools.user.modaction.sanctioning": "Sanctioning",
|
||||
"modtools.user.modaction.step.topic": "1. CFH Topic",
|
||||
"modtools.user.modaction.step.topic.placeholder": "Select a topic…",
|
||||
"modtools.user.modaction.step.sanction": "2. Sanction",
|
||||
"modtools.user.modaction.step.sanction.placeholder": "Select a sanction…",
|
||||
"modtools.user.modaction.step.message": "3. Custom message",
|
||||
"modtools.user.modaction.step.message.optional": "(optional — overrides default)",
|
||||
"modtools.user.modaction.message.placeholder": "Leave empty to use the default topic message",
|
||||
"modtools.user.modaction.preview": "Preview",
|
||||
"modtools.user.modaction.button.default": "Default Sanction",
|
||||
"modtools.user.modaction.button.apply": "Apply Sanction",
|
||||
"modtools.user.modaction.error.no.topic": "You must select a CFH topic",
|
||||
"modtools.user.modaction.error.no.action": "You must select a CFH topic and Sanction",
|
||||
"modtools.user.modaction.error.no.permission": "You do not have permission to do this",
|
||||
"modtools.user.modaction.error.no.message": "Please write a message to user",
|
||||
"modtools.user.modaction.error.no.permission.alert": "You have insufficient permissions",
|
||||
"modtools.user.visits.title": "User Visits",
|
||||
"modtools.user.visits.recent": "Recent visited rooms",
|
||||
"modtools.user.visits.entries.one": "%count% entry",
|
||||
"modtools.user.visits.entries.many": "%count% entries",
|
||||
"modtools.user.visits.empty": "No recent visits",
|
||||
"modtools.user.visits.time": "Time",
|
||||
"modtools.user.visits.room": "Room name",
|
||||
"modtools.user.visits.action": "Action",
|
||||
"modtools.user.visits.visit": "Visit",
|
||||
"modtools.user.visits.visit.title": "Visit room",
|
||||
"modtools.user.chatlog.title": "User Chatlog",
|
||||
"modtools.user.chatlog.title.with": "User Chatlog: %username%",
|
||||
"modtools.user.chatlog.loading": "Loading chatlog…",
|
||||
"modtools.room.chatlog.title": "Room Chatlog",
|
||||
"modtools.chatlog.column.time": "Time",
|
||||
"modtools.chatlog.column.user": "User",
|
||||
"modtools.chatlog.column.message": "Message",
|
||||
"modtools.chatlog.empty": "No messages",
|
||||
"modtools.chatlog.visit": "Visit",
|
||||
"modtools.chatlog.tools": "Tools",
|
||||
"modtools.tickets.title": "Tickets",
|
||||
"modtools.tickets.tab.open": "Open",
|
||||
"modtools.tickets.tab.mine": "Mine",
|
||||
"modtools.tickets.tab.picked": "All picked",
|
||||
"modtools.tickets.column.type": "Type",
|
||||
"modtools.tickets.column.reported": "Reported",
|
||||
"modtools.tickets.column.opened": "Opened",
|
||||
"modtools.tickets.column.picker": "Picker",
|
||||
"modtools.tickets.empty.open": "No open issues",
|
||||
"modtools.tickets.empty.mine": "No issues picked by you",
|
||||
"modtools.tickets.empty.picked": "No picked issues",
|
||||
"modtools.tickets.action.pick": "Pick",
|
||||
"modtools.tickets.action.handle": "Handle",
|
||||
"modtools.tickets.action.release": "Release",
|
||||
"modtools.tickets.issue.title": "Resolving issue #%issueId%",
|
||||
"modtools.tickets.issue.label": "Issue #%issueId%",
|
||||
"modtools.tickets.issue.details": "Details",
|
||||
"modtools.tickets.issue.field.source": "Source",
|
||||
"modtools.tickets.issue.field.category": "Category",
|
||||
"modtools.tickets.issue.field.description": "Description",
|
||||
"modtools.tickets.issue.field.caller": "Caller",
|
||||
"modtools.tickets.issue.field.reported": "Reported",
|
||||
"modtools.tickets.issue.chatlog.view": "View chatlog",
|
||||
"modtools.tickets.issue.chatlog.close": "Close chatlog",
|
||||
"modtools.tickets.issue.resolve.heading": "Resolve as",
|
||||
"modtools.tickets.issue.resolve.resolved": "Resolved",
|
||||
"modtools.tickets.issue.resolve.useless": "Useless",
|
||||
"modtools.tickets.issue.resolve.abusive": "Abusive",
|
||||
"modtools.tickets.issue.release": "Release back to queue",
|
||||
"modtools.tickets.cfh.chatlog.title": "Issue #%issueId% Chatlog",
|
||||
"groupforum.list.tab.most_active": "Most active threads",
|
||||
"groupforum.list.tab.my_forums": "My group forums",
|
||||
"groupforum.list.no_forums": "There are no forums",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { AddLinkEventTracker, CreateLinkEvent, ILinkEventTracker, RemoveLinkEventTracker, RoomEngineEvent, RoomId, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
import { FaTimes, FaUserSlash } from 'react-icons/fa';
|
||||
import { GetRoomSession, ISelectedUser, LocalizeText } from '../../api';
|
||||
import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
|
||||
import { useModTools, useNitroEvent, useObjectSelectedEvent, useRoomUserListSnapshot } from '../../hooks';
|
||||
@@ -134,63 +134,82 @@ export const ModToolsView: FC<{}> = props =>
|
||||
return () => RemoveLinkEventTracker(linkTracker);
|
||||
}, [ openRoomInfo, closeRoomInfo, toggleRoomInfo, openRoomChatlog, closeRoomChatlog, toggleRoomChatlog, openUserInfo, closeUserInfo, toggleUserInfo, openUserChatlog, closeUserChatlog, toggleUserChatlog ]);
|
||||
|
||||
const isRoomInfoOpen = currentRoomId > 0 && openRooms.includes(currentRoomId);
|
||||
const isRoomChatlogOpen = currentRoomId > 0 && openRoomChatlogs.includes(currentRoomId);
|
||||
const isInRoom = currentRoomId > 0;
|
||||
const isRoomInfoOpen = isInRoom && openRooms.includes(currentRoomId);
|
||||
const isRoomChatlogOpen = isInRoom && openRoomChatlogs.includes(currentRoomId);
|
||||
const isUserInfoOpen = selectedUser && openUserInfos.includes(selectedUser.userId);
|
||||
const noRoomHint = LocalizeText('mod.tools.no.room') || 'Enter a room first';
|
||||
const noRoomHint = LocalizeText('modtools.window.no.room');
|
||||
|
||||
return (
|
||||
<>
|
||||
{ isVisible &&
|
||||
<NitroCardView className="nitro-mod-tools min-w-[220px]" theme="primary-slim" uniqueKey="mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } >
|
||||
<NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
|
||||
<NitroCardView className="nitro-mod-tools min-w-[240px] max-w-[260px]" theme="primary-slim" uniqueKey="mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } >
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.window.title') } onCloseClick={ event => setIsVisible(false) } />
|
||||
<NitroCardContentView className="text-black" gap={ 2 }>
|
||||
<Button active={ isRoomInfoOpen } disabled={ (currentRoomId <= 0) } gap={ 2 } justifyContent="start" title={ (currentRoomId <= 0) ? noRoomHint : undefined } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-info/${ currentRoomId }`) }>
|
||||
<div className="nitro-icon icon-small-room shrink-0" />
|
||||
<span className="grow text-start">Room Tool</span>
|
||||
</Button>
|
||||
<Button active={ isRoomChatlogOpen } disabled={ (currentRoomId <= 0) } gap={ 2 } innerRef={ elementRef } justifyContent="start" title={ (currentRoomId <= 0) ? noRoomHint : undefined } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-chatlog/${ currentRoomId }`) }>
|
||||
<div className="nitro-icon icon-chat-history shrink-0" />
|
||||
<span className="grow text-start">Chatlog Tool</span>
|
||||
</Button>
|
||||
<Button active={ !!isUserInfoOpen } disabled={ !selectedUser } gap={ 2 } justifyContent="start" onClick={ () => selectedUser && CreateLinkEvent(`mod-tools/toggle-user-info/${ selectedUser.userId }`) }>
|
||||
<div className="nitro-icon icon-user shrink-0" />
|
||||
{/* Room tools */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-[.6rem] uppercase tracking-wide opacity-60 font-semibold pl-1">{ LocalizeText('modtools.window.section.room') }</div>
|
||||
<Button active={ isRoomInfoOpen } disabled={ !isInRoom } gap={ 2 } justifyContent="start" title={ !isInRoom ? noRoomHint : undefined } onClick={ () => CreateLinkEvent(`mod-tools/toggle-room-info/${ currentRoomId }`) }>
|
||||
<div className="nitro-icon icon-small-room shrink-0" />
|
||||
<span className="grow text-start">{ LocalizeText('modtools.window.tools.room') }</span>
|
||||
</Button>
|
||||
<Button active={ isRoomChatlogOpen } disabled={ !isInRoom } gap={ 2 } innerRef={ elementRef } justifyContent="start" title={ !isInRoom ? noRoomHint : undefined } onClick={ () => CreateLinkEvent(`mod-tools/toggle-room-chatlog/${ currentRoomId }`) }>
|
||||
<div className="nitro-icon icon-chat-history shrink-0" />
|
||||
<span className="grow text-start">{ LocalizeText('modtools.window.tools.chatlog') }</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Selected user */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-[.6rem] uppercase tracking-wide opacity-60 font-semibold pl-1">{ LocalizeText('modtools.window.section.user') }</div>
|
||||
{ selectedUser
|
||||
? (
|
||||
<>
|
||||
<span className="truncate grow text-start">{ selectedUser.username }</span>
|
||||
<span
|
||||
aria-label={ isSelectedUserPresent ? 'In room' : 'Left room' }
|
||||
className={ `inline-block w-2 h-2 rounded-full shrink-0 ${ isSelectedUserPresent ? 'bg-emerald-500' : 'bg-zinc-400' }` }
|
||||
title={ isSelectedUserPresent ? 'Still in this room' : 'No longer in this room' }
|
||||
/>
|
||||
<span
|
||||
className="inline-flex items-center justify-center w-4 h-4 rounded text-xs text-zinc-500 hover:text-rose-600 hover:bg-rose-100 shrink-0"
|
||||
onClick={ event =>
|
||||
{
|
||||
event.stopPropagation();
|
||||
setSelectedUser(null);
|
||||
} }
|
||||
role="button"
|
||||
tabIndex={ 0 }
|
||||
title="Clear selection">
|
||||
<FaTimes />
|
||||
</span>
|
||||
</>
|
||||
<div className={ `flex flex-col gap-1.5 rounded p-1.5 border ${ isSelectedUserPresent ? 'bg-gradient-to-r from-emerald-50 to-transparent border-emerald-100' : 'bg-gradient-to-r from-zinc-50 to-transparent border-zinc-200' }` }>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={ `inline-block w-2 h-2 rounded-full shrink-0 ${ isSelectedUserPresent ? 'bg-emerald-500' : 'bg-zinc-400' }` }
|
||||
title={ isSelectedUserPresent ? LocalizeText('modtools.window.user.in_room') : LocalizeText('modtools.window.user.left_room') }
|
||||
aria-label={ isSelectedUserPresent ? LocalizeText('modtools.userinfo.presence.in_room') : LocalizeText('modtools.window.user.left_room') } />
|
||||
<span className="truncate grow text-start text-sm font-semibold leading-tight">{ selectedUser.username }</span>
|
||||
<button
|
||||
className="inline-flex items-center justify-center w-5 h-5 rounded text-zinc-500 hover:text-rose-600 hover:bg-rose-100 shrink-0 transition-colors"
|
||||
onClick={ event =>
|
||||
{
|
||||
event.stopPropagation();
|
||||
setSelectedUser(null);
|
||||
} }
|
||||
title={ LocalizeText('modtools.window.user.clear') }>
|
||||
<FaTimes size={ 10 } />
|
||||
</button>
|
||||
</div>
|
||||
<Button active={ !!isUserInfoOpen } gap={ 2 } justifyContent="start" onClick={ () => CreateLinkEvent(`mod-tools/toggle-user-info/${ selectedUser.userId }`) }>
|
||||
<div className="nitro-icon icon-user shrink-0" />
|
||||
<span className="grow text-start">{ LocalizeText('modtools.window.user.open_info') }</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div className="flex items-center gap-2 rounded p-2 border border-dashed border-zinc-300 bg-zinc-50/50 opacity-70">
|
||||
<FaUserSlash className="text-zinc-400 shrink-0" size={ 14 } />
|
||||
<span className="text-xs italic">{ LocalizeText('modtools.window.select.user') }</span>
|
||||
</div>
|
||||
)
|
||||
: <span className="opacity-50 italic grow text-start">Select a user</span>
|
||||
}
|
||||
</Button>
|
||||
<Button active={ isTicketsVisible } gap={ 2 } justifyContent="start" onClick={ () => setIsTicketsVisible(prevValue => !prevValue) }>
|
||||
<div className="nitro-icon icon-tickets shrink-0" />
|
||||
<span className="grow text-start">Report Tool</span>
|
||||
{ (openTicketsCount > 0) &&
|
||||
<span
|
||||
className="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded-full bg-rose-500 text-white text-xs font-semibold shrink-0"
|
||||
title={ `${ openTicketsCount } open ticket${ openTicketsCount === 1 ? '' : 's' }` }>
|
||||
{ openTicketsCount > 99 ? '99+' : openTicketsCount }
|
||||
</span> }
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Reports */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-[.6rem] uppercase tracking-wide opacity-60 font-semibold pl-1">{ LocalizeText('modtools.window.section.reports') }</div>
|
||||
<Button active={ isTicketsVisible } gap={ 2 } justifyContent="start" onClick={ () => setIsTicketsVisible(prevValue => !prevValue) }>
|
||||
<div className="nitro-icon icon-tickets shrink-0" />
|
||||
<span className="grow text-start">{ LocalizeText('modtools.window.tools.report') }</span>
|
||||
{ (openTicketsCount > 0) &&
|
||||
<span
|
||||
className="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 rounded-full bg-rose-500 text-white text-xs font-semibold shrink-0 [box-shadow:0_0_0_2px_rgba(244,63,94,.25)]"
|
||||
title={ LocalizeText(openTicketsCount === 1 ? 'modtools.window.tickets.open' : 'modtools.window.tickets.open.many', [ 'count' ], [ openTicketsCount.toString() ]) }>
|
||||
{ openTicketsCount > 99 ? '99+' : openTicketsCount }
|
||||
</span> }
|
||||
</Button>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView> }
|
||||
{ (openRooms.length > 0) && openRooms.map(roomId => <ModToolsRoomView key={ roomId } roomId={ roomId } onCloseClick={ () => CreateLinkEvent(`mod-tools/close-room-info/${ roomId }`) } />) }
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { ChatRecordData, CreateLinkEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useMemo } from 'react';
|
||||
import { TryVisitRoom } from '../../../../api';
|
||||
import { Button, Column, Flex, Grid, InfiniteScroll, Text } from '../../../../common';
|
||||
import { FaCommentDots, FaDoorOpen, FaSignInAlt, FaTools } from 'react-icons/fa';
|
||||
import { LocalizeText, TryVisitRoom } from '../../../../api';
|
||||
import { Column, InfiniteScroll } from '../../../../common';
|
||||
import { useModTools } from '../../../../hooks';
|
||||
import { ChatlogRecord } from './ChatlogRecord';
|
||||
|
||||
@@ -43,46 +44,61 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
|
||||
return results;
|
||||
}, [ records ]);
|
||||
|
||||
const RoomInfo = (props: { roomId: number, roomName: string }) =>
|
||||
{
|
||||
return (
|
||||
<Flex alignItems="center" className="bg-muted rounded p-2" gap={ 2 } justifyContent="between">
|
||||
<Text bold truncate>{ props.roomName }</Text>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<Button size="sm" onClick={ event => TryVisitRoom(props.roomId) }>Visit</Button>
|
||||
<Button size="sm" onClick={ event => openRoomInfo(props.roomId) }>Room Tools</Button>
|
||||
</div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
const totalMessages = useMemo(
|
||||
() => allRecords.filter(r => !r.isRoomInfo).length,
|
||||
[ allRecords ]
|
||||
);
|
||||
|
||||
const RoomInfo = (props: { roomId: number, roomName: string }) => (
|
||||
<div className="flex items-center gap-2 bg-gradient-to-r from-sky-50 to-transparent rounded p-2 border border-sky-100 my-1">
|
||||
<FaDoorOpen className="text-sky-600 shrink-0" size={ 14 } />
|
||||
<div className="font-semibold leading-tight grow truncate">{ props.roomName }</div>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<button
|
||||
className="inline-flex items-center gap-1 px-2 py-1 rounded text-xs bg-white border border-sky-200 text-sky-700 hover:bg-sky-100 transition-colors"
|
||||
onClick={ () => TryVisitRoom(props.roomId) }>
|
||||
<FaSignInAlt size={ 10 } /> { LocalizeText('modtools.chatlog.visit') }
|
||||
</button>
|
||||
<button
|
||||
className="inline-flex items-center gap-1 px-2 py-1 rounded text-xs bg-white border border-sky-200 text-sky-700 hover:bg-sky-100 transition-colors"
|
||||
onClick={ () => openRoomInfo(props.roomId) }>
|
||||
<FaTools size={ 10 } /> { LocalizeText('modtools.chatlog.tools') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const isEmpty = !records || records.length === 0 || totalMessages === 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Column fit gap={ 0 } overflow="hidden">
|
||||
<Column gap={ 2 }>
|
||||
<Grid className="text-black font-bold border-bottom pb-1 text-[11px] uppercase opacity-60 tracking-wider" gap={ 1 }>
|
||||
<div className="col-span-2">Time</div>
|
||||
<div className="col-span-3">User</div>
|
||||
<div className="col-span-7">Message</div>
|
||||
</Grid>
|
||||
</Column>
|
||||
{ (records && (records.length > 0)) &&
|
||||
<InfiniteScroll rowRender={ (row: ChatlogRecord) =>
|
||||
{
|
||||
return (
|
||||
<>
|
||||
{ row.isRoomInfo &&
|
||||
<RoomInfo roomId={ row.roomId } roomName={ row.roomName } /> }
|
||||
{ !row.isRoomInfo &&
|
||||
<Grid alignItems="center" className="log-entry py-1.5 border-bottom even:bg-black/[0.03]" fullHeight={ false } gap={ 1 }>
|
||||
<Text className="col-span-2 opacity-60 text-[11px]">{ row.timestamp }</Text>
|
||||
<Text bold pointer underline className="col-span-3" onClick={ event => CreateLinkEvent(`mod-tools/open-user-info/${ row.habboId }`) }>{ row.username }</Text>
|
||||
<Text textBreak wrap className="col-span-7">{ row.message }</Text>
|
||||
</Grid> }
|
||||
</>
|
||||
);
|
||||
} } rows={ allRecords } /> }
|
||||
</Column>
|
||||
</>
|
||||
<Column fit gap={ 0 } overflow="hidden">
|
||||
{/* Column headers */}
|
||||
<div className="grid grid-cols-[60px_120px_1fr] gap-2 text-[.7rem] uppercase tracking-wide opacity-60 font-semibold border-b border-zinc-200 pb-1 px-1">
|
||||
<div>{ LocalizeText('modtools.chatlog.column.time') }</div>
|
||||
<div>{ LocalizeText('modtools.chatlog.column.user') }</div>
|
||||
<div>{ LocalizeText('modtools.chatlog.column.message') }</div>
|
||||
</div>
|
||||
{ isEmpty
|
||||
? <div className="flex flex-col items-center justify-center gap-1 py-6 opacity-50 text-sm">
|
||||
<FaCommentDots size={ 22 } />
|
||||
<span>{ LocalizeText('modtools.chatlog.empty') }</span>
|
||||
</div>
|
||||
: <InfiniteScroll rowRender={ (row: ChatlogRecord) =>
|
||||
{
|
||||
if(row.isRoomInfo) return <RoomInfo roomId={ row.roomId } roomName={ row.roomName } />;
|
||||
|
||||
return (
|
||||
<div className={ `grid grid-cols-[60px_120px_1fr] gap-2 items-start px-1 py-1.5 text-sm border-b border-zinc-100 even:bg-black/[0.02] hover:bg-sky-50/50 transition-colors ${ row.hasHighlighting ? 'bg-amber-50/60' : '' }` }>
|
||||
<span className="font-mono text-[.7rem] opacity-70 tabular-nums whitespace-nowrap">{ row.timestamp }</span>
|
||||
<button
|
||||
className="text-left font-semibold text-sky-700 hover:text-sky-900 hover:underline truncate"
|
||||
onClick={ () => CreateLinkEvent(`mod-tools/open-user-info/${ row.habboId }`) }>
|
||||
{ row.username }
|
||||
</button>
|
||||
<span className="break-words">{ row.message }</span>
|
||||
</div>
|
||||
);
|
||||
} } rows={ allRecords } /> }
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { ChatRecordData, GetRoomChatlogMessageComposer, RoomChatlogEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC } from 'react';
|
||||
import { useNitroQuery } from '../../../../api/nitro-query';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FaSpinner } from 'react-icons/fa';
|
||||
import { LocalizeText, SendMessageComposer } from '../../../../api';
|
||||
import { DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useMessageEvent } from '../../../../hooks';
|
||||
import { ChatlogView } from '../chatlog/ChatlogView';
|
||||
|
||||
interface ModToolsChatlogViewProps
|
||||
@@ -13,24 +15,32 @@ interface ModToolsChatlogViewProps
|
||||
export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
|
||||
{
|
||||
const { roomId = null, onCloseClick = null } = props;
|
||||
const [ roomChatlog, setRoomChatlog ] = useState<ChatRecordData>(null);
|
||||
|
||||
const { data: roomChatlog } = useNitroQuery<RoomChatlogEvent, ChatRecordData>({
|
||||
key: [ 'nitro', 'mod-tools', 'room-chatlog', roomId ],
|
||||
request: () => new GetRoomChatlogMessageComposer(roomId),
|
||||
parser: RoomChatlogEvent,
|
||||
accept: e => e.getParser()?.data.roomId === roomId,
|
||||
select: e => e.getParser().data,
|
||||
enabled: roomId !== null
|
||||
useMessageEvent<RoomChatlogEvent>(RoomChatlogEvent, event =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
if(!parser || parser.data.roomId !== roomId) return;
|
||||
|
||||
setRoomChatlog(parser.data);
|
||||
});
|
||||
|
||||
if(!roomChatlog) return null;
|
||||
useEffect(() =>
|
||||
{
|
||||
SendMessageComposer(new GetRoomChatlogMessageComposer(roomId));
|
||||
}, [ roomId ]);
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-mod-tools-chatlog min-w-[400px] max-h-[500px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ 'Room Chatlog' } onCloseClick={ onCloseClick } />
|
||||
<NitroCardContentView className="text-black" overflow="auto">
|
||||
{ roomChatlog &&
|
||||
<ChatlogView records={ [ roomChatlog ] } /> }
|
||||
<NitroCardView className="nitro-mod-tools-chatlog min-w-[460px] max-w-[520px] max-h-[500px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.room.chatlog.title') } onCloseClick={ onCloseClick } />
|
||||
<NitroCardContentView className="text-black" gap={ 1 } overflow="auto">
|
||||
{ roomChatlog
|
||||
? <ChatlogView records={ [ roomChatlog ] } />
|
||||
: <div className="flex flex-col items-center justify-center gap-2 py-8 opacity-50 text-sm">
|
||||
<FaSpinner className="animate-spin" size={ 22 } />
|
||||
<span>{ LocalizeText('modtools.user.chatlog.loading') }</span>
|
||||
</div> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { CreateLinkEvent, GetModeratorRoomInfoMessageComposer, ModerateRoomMessageComposer, ModeratorActionMessageComposer, ModeratorRoomInfoEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { SendMessageComposer, TryVisitRoom } from '../../../../api';
|
||||
import { Button, Column, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
|
||||
import { FaBullhorn, FaCommentDots, FaDoorOpen, FaExclamationTriangle, FaSignInAlt, FaSync, FaUserShield, FaUsers } from 'react-icons/fa';
|
||||
import { LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../../api';
|
||||
import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
|
||||
import { useMessageEvent } from '../../../../hooks';
|
||||
|
||||
interface ModToolsRoomViewProps
|
||||
@@ -25,7 +26,9 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
|
||||
const [ changeRoomName, setChangeRoomName ] = useState(false);
|
||||
const [ message, setMessage ] = useState('');
|
||||
|
||||
const handleClick = (action: string, value?: string) =>
|
||||
const refresh = () => SendMessageComposer(new GetModeratorRoomInfoMessageComposer(roomId));
|
||||
|
||||
const handleClick = (action: string) =>
|
||||
{
|
||||
if(!action) return;
|
||||
|
||||
@@ -66,55 +69,102 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
|
||||
|
||||
SendMessageComposer(new GetModeratorRoomInfoMessageComposer(roomId));
|
||||
setInfoRequested(true);
|
||||
}, [ roomId, infoRequested, setInfoRequested ]);
|
||||
}, [ roomId, infoRequested ]);
|
||||
|
||||
const isLoaded = loadedRoomId !== null;
|
||||
const hasMessage = message.trim().length > 0;
|
||||
const ownerPillClass = ownerInRoom
|
||||
? 'bg-emerald-100 text-emerald-700 border-emerald-200'
|
||||
: 'bg-zinc-100 text-zinc-600 border-zinc-200';
|
||||
const ownerDotClass = ownerInRoom ? 'bg-emerald-500' : 'bg-zinc-400';
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-mod-tools-room min-w-[280px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ 'Room Info' } onCloseClick={ event => onCloseClick() } />
|
||||
<NitroCardView className="nitro-mod-tools-room min-w-[400px] max-w-[460px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.roominfo.title') } onCloseClick={ () => onCloseClick() } />
|
||||
<NitroCardContentView className="text-black" gap={ 2 }>
|
||||
{ name &&
|
||||
<div className="bg-muted rounded px-2 py-1.5 text-center">
|
||||
<Text bold truncate>{ name }</Text>
|
||||
{/* Identity header */}
|
||||
<div className="flex items-center gap-2 bg-gradient-to-r from-sky-50 to-transparent rounded p-2 border border-sky-100">
|
||||
<FaDoorOpen className="text-sky-600 shrink-0" size={ 16 } />
|
||||
<div className="flex flex-col grow min-w-0">
|
||||
<Text bold className="truncate text-base leading-tight">{ name || LocalizeText('modtools.roominfo.loading') }</Text>
|
||||
<Text className="opacity-60 text-xs truncate">#{ roomId }</Text>
|
||||
</div>
|
||||
}
|
||||
<div className="flex gap-2">
|
||||
<Column grow gap={ 1 }>
|
||||
<div className="flex items-center gap-1">
|
||||
<Text bold className="opacity-60 shrink-0">Owner:</Text>
|
||||
<Text bold pointer truncate underline onClick={ () => CreateLinkEvent(`mod-tools/open-user-info/${ ownerId }`) }>{ ownerName }</Text>
|
||||
<span
|
||||
className={ `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border ${ ownerPillClass }` }
|
||||
title={ ownerInRoom ? LocalizeText('modtools.roominfo.owner.title.here') : LocalizeText('modtools.roominfo.owner.title.away') }>
|
||||
<span className={ `inline-block w-2 h-2 rounded-full ${ ownerDotClass }` } />
|
||||
{ ownerInRoom ? LocalizeText('modtools.roominfo.owner.here') : LocalizeText('modtools.roominfo.owner.away') }
|
||||
</span>
|
||||
<button
|
||||
className="inline-flex items-center justify-center w-7 h-7 rounded text-zinc-500 hover:text-sky-700 hover:bg-sky-100 transition-colors shrink-0"
|
||||
onClick={ refresh }
|
||||
title={ LocalizeText('modtools.roominfo.refresh') }>
|
||||
<FaSync size={ 12 } />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stat strip */}
|
||||
<div className="flex gap-1.5">
|
||||
<div className="flex flex-col items-center justify-center px-2 py-1.5 rounded border bg-sky-50 border-sky-200 text-sky-700 grow min-w-0">
|
||||
<div className="flex items-center gap-1.5 text-[.7rem] uppercase tracking-wide opacity-70">
|
||||
<FaUsers size={ 10 } /><span>{ LocalizeText('modtools.roominfo.stat.users') }</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Text bold className="opacity-60 shrink-0">Users in room:</Text>
|
||||
<Text>{ usersInRoom }</Text>
|
||||
<div className="text-lg font-semibold tabular-nums leading-tight">{ usersInRoom }</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center px-2 py-1.5 rounded border bg-zinc-50 border-zinc-200 text-zinc-700 grow min-w-0">
|
||||
<div className="flex items-center gap-1.5 text-[.7rem] uppercase tracking-wide opacity-70">
|
||||
<FaUserShield size={ 10 } /><span>{ LocalizeText('modtools.roominfo.stat.owner') }</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Text bold className="opacity-60 shrink-0">Owner here:</Text>
|
||||
<Text className={ ownerInRoom ? 'text-green-700' : 'text-red-700' }>{ ownerInRoom ? 'Yes' : 'No' }</Text>
|
||||
<div
|
||||
className="text-sm font-semibold leading-tight truncate max-w-full underline cursor-pointer hover:text-sky-700"
|
||||
onClick={ () => ownerId && CreateLinkEvent(`mod-tools/open-user-info/${ ownerId }`) }
|
||||
title={ ownerName ? LocalizeText('modtools.roominfo.owner.open', [ 'username' ], [ ownerName ]) : '' }>
|
||||
{ ownerName || '-' }
|
||||
</div>
|
||||
</Column>
|
||||
<div className="flex flex-col gap-1 shrink-0">
|
||||
<Button onClick={ event => TryVisitRoom(roomId) }>Visit Room</Button>
|
||||
<Button onClick={ event => CreateLinkEvent(`mod-tools/open-room-chatlog/${ roomId }`) }>Chatlog</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Column className="bg-muted rounded p-2" gap={ 1 }>
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
{/* Quick actions */}
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
<Button gap={ 1 } variant="secondary" onClick={ () => TryVisitRoom(roomId) }>
|
||||
<FaSignInAlt size={ 12 } /> { LocalizeText('modtools.roominfo.button.visit') }
|
||||
</Button>
|
||||
<Button gap={ 1 } variant="secondary" onClick={ () => CreateLinkEvent(`mod-tools/open-room-chatlog/${ roomId }`) }>
|
||||
<FaCommentDots size={ 12 } /> { LocalizeText('modtools.roominfo.button.chatlog') }
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Moderate panel */}
|
||||
<div className="flex flex-col gap-1.5 bg-amber-50 border border-amber-200 rounded p-2">
|
||||
<div className="flex items-center gap-1.5 text-[.7rem] uppercase tracking-wide font-semibold text-amber-800">
|
||||
<FaExclamationTriangle size={ 10 } /> { LocalizeText('modtools.roominfo.moderate.title') }
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input checked={ kickUsers } className="form-check-input" type="checkbox" onChange={ event => setKickUsers(event.target.checked) } />
|
||||
<Text small>Kick everyone out</Text>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{ LocalizeText('modtools.roominfo.moderate.kick') }</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input checked={ lockRoom } className="form-check-input" type="checkbox" onChange={ event => setLockRoom(event.target.checked) } />
|
||||
<Text small>Enable the doorbell</Text>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{ LocalizeText('modtools.roominfo.moderate.doorbell') }</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input checked={ changeRoomName } className="form-check-input" type="checkbox" onChange={ event => setChangeRoomName(event.target.checked) } />
|
||||
<Text small>Change room name</Text>
|
||||
<span>{ LocalizeText('modtools.roominfo.moderate.rename') }</span>
|
||||
</label>
|
||||
<textarea
|
||||
className="min-h-[60px] px-2 py-1.5 rounded text-sm border border-amber-300 bg-white/70 focus:outline-none focus:ring-2 focus:ring-amber-400"
|
||||
placeholder={ LocalizeText('modtools.roominfo.moderate.message.placeholder') }
|
||||
value={ message }
|
||||
onChange={ event => setMessage(event.target.value) }
|
||||
/>
|
||||
<div className="flex gap-1.5">
|
||||
<Button className="grow" disabled={ !hasMessage || !isLoaded } gap={ 1 } variant="danger" onClick={ () => handleClick('send_message') }>
|
||||
<FaBullhorn size={ 12 } /> { LocalizeText('modtools.roominfo.moderate.send.caution') }
|
||||
</Button>
|
||||
<Button className="grow" disabled={ !hasMessage || !isLoaded } gap={ 1 } variant="warning" onClick={ () => handleClick('alert_only') }>
|
||||
<FaExclamationTriangle size={ 12 } /> { LocalizeText('modtools.roominfo.moderate.send.alert') }
|
||||
</Button>
|
||||
</div>
|
||||
</Column>
|
||||
<textarea className="min-h-[60px] px-2 py-1.5 rounded text-sm border border-black/10" placeholder="Type a mandatory message..." value={ message } onChange={ event => setMessage(event.target.value) }></textarea>
|
||||
<div className="flex gap-2">
|
||||
<Button className="grow" variant="danger" onClick={ event => handleClick('send_message') }>Send Caution</Button>
|
||||
<Button className="grow" onClick={ event => handleClick('alert_only') }>Send Alert</Button>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { CfhChatlogData, CfhChatlogEvent, GetCfhChatlogMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC } from 'react';
|
||||
import { useNitroQuery } from '../../../../api/nitro-query';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FaSpinner } from 'react-icons/fa';
|
||||
import { LocalizeText, SendMessageComposer } from '../../../../api';
|
||||
import { DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useMessageEvent } from '../../../../hooks';
|
||||
import { ChatlogView } from '../chatlog/ChatlogView';
|
||||
|
||||
interface CfhChatlogViewProps
|
||||
@@ -13,21 +15,32 @@ interface CfhChatlogViewProps
|
||||
export const CfhChatlogView: FC<CfhChatlogViewProps> = props =>
|
||||
{
|
||||
const { onCloseClick = null, issueId = null } = props;
|
||||
const [ chatlogData, setChatlogData ] = useState<CfhChatlogData>(null);
|
||||
|
||||
const { data: chatlogData } = useNitroQuery<CfhChatlogEvent, CfhChatlogData>({
|
||||
key: [ 'nitro', 'mod-tools', 'cfh-chatlog', issueId ],
|
||||
request: () => new GetCfhChatlogMessageComposer(issueId),
|
||||
parser: CfhChatlogEvent,
|
||||
accept: e => e.getParser()?.data.issueId === issueId,
|
||||
select: e => e.getParser().data,
|
||||
enabled: issueId !== null
|
||||
useMessageEvent<CfhChatlogEvent>(CfhChatlogEvent, event =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
if(!parser || parser.data.issueId !== issueId) return;
|
||||
|
||||
setChatlogData(parser.data);
|
||||
});
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
SendMessageComposer(new GetCfhChatlogMessageComposer(issueId));
|
||||
}, [ issueId ]);
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim">
|
||||
<NitroCardHeaderView headerText={ 'Issue Chatlog' } onCloseClick={ onCloseClick } />
|
||||
<NitroCardContentView className="text-black">
|
||||
{ chatlogData && <ChatlogView records={ [ chatlogData.chatRecord ] } /> }
|
||||
<NitroCardView className="nitro-mod-tools-chatlog min-w-[460px] max-w-[520px] max-h-[500px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.tickets.cfh.chatlog.title', [ 'issueId' ], [ issueId.toString() ]) } onCloseClick={ onCloseClick } />
|
||||
<NitroCardContentView className="text-black" gap={ 1 }>
|
||||
{ chatlogData
|
||||
? <ChatlogView records={ [ chatlogData.chatRecord ] } />
|
||||
: <div className="flex flex-col items-center justify-center gap-2 py-8 opacity-50 text-sm">
|
||||
<FaSpinner className="animate-spin" size={ 22 } />
|
||||
<span>{ LocalizeText('modtools.user.chatlog.loading') }</span>
|
||||
</div> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { CloseIssuesMessageComposer, ReleaseIssuesMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useState } from 'react';
|
||||
import { FaBan, FaCheck, FaCommentDots, FaExternalLinkAlt, FaSignOutAlt, FaTrashAlt } from 'react-icons/fa';
|
||||
import { GetIssueCategoryName, LocalizeText, SendMessageComposer } from '../../../../api';
|
||||
import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
|
||||
import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useModTools } from '../../../../hooks';
|
||||
import { CfhChatlogView } from './CfhChatlogView';
|
||||
|
||||
@@ -11,76 +12,102 @@ interface IssueInfoViewProps
|
||||
onIssueInfoClosed(issueId: number): void;
|
||||
}
|
||||
|
||||
const Field: FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
|
||||
<>
|
||||
<dt className="opacity-60 whitespace-nowrap">{ label }</dt>
|
||||
<dd className="m-0 break-words font-medium">{ children || <span className="opacity-40">-</span> }</dd>
|
||||
</>
|
||||
);
|
||||
|
||||
export const ModToolsIssueInfoView: FC<IssueInfoViewProps> = props =>
|
||||
{
|
||||
const { issueId = null, onIssueInfoClosed = null } = props;
|
||||
const [ cfhChatlogOpen, setcfhChatlogOpen ] = useState(false);
|
||||
const [ cfhChatlogOpen, setCfhChatlogOpen ] = useState(false);
|
||||
const { tickets = [], openUserInfo = null } = useModTools();
|
||||
const ticket = tickets.find(issue => (issue.issueId === issueId));
|
||||
|
||||
const releaseIssue = (issueId: number) =>
|
||||
const releaseIssue = () =>
|
||||
{
|
||||
SendMessageComposer(new ReleaseIssuesMessageComposer([ issueId ]));
|
||||
|
||||
onIssueInfoClosed(issueId);
|
||||
};
|
||||
|
||||
const closeIssue = (resolutionType: number) =>
|
||||
{
|
||||
SendMessageComposer(new CloseIssuesMessageComposer([ issueId ], resolutionType));
|
||||
|
||||
onIssueInfoClosed(issueId);
|
||||
};
|
||||
|
||||
if(!ticket) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<NitroCardView className="nitro-mod-tools-handle-issue" theme="primary-slim">
|
||||
<NitroCardHeaderView headerText={ 'Resolving issue ' + issueId } onCloseClick={ () => onIssueInfoClosed(issueId) } />
|
||||
<NitroCardContentView className="text-black">
|
||||
<Text fontSize={ 4 }>Issue Information</Text>
|
||||
<Grid overflow="auto">
|
||||
<Column size={ 8 }>
|
||||
<table className="table table-striped table-sm table-text-small text-black m-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<td>{ GetIssueCategoryName(ticket.categoryId) }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<td className="text-break">{ LocalizeText('help.cfh.topic.' + ticket.reportedCategoryId) }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<td className="text-break">{ ticket.message }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Caller</th>
|
||||
<td>
|
||||
<Text bold pointer underline onClick={ event => openUserInfo(ticket.reporterUserId) }>{ ticket.reporterUserName }</Text>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Reported User</th>
|
||||
<td>
|
||||
<Text bold pointer underline onClick={ event => openUserInfo(ticket.reportedUserId) }>{ ticket.reportedUserName }</Text>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Column>
|
||||
<Column gap={ 1 } size={ 4 }>
|
||||
<Button variant="secondary" onClick={ () => setcfhChatlogOpen(!cfhChatlogOpen) }>Chatlog</Button>
|
||||
<Button onClick={ event => closeIssue(CloseIssuesMessageComposer.RESOLUTION_USELESS) }>Close as useless</Button>
|
||||
<Button variant="danger" onClick={ event => closeIssue(CloseIssuesMessageComposer.RESOLUTION_ABUSIVE) }>Close as abusive</Button>
|
||||
<Button variant="success" onClick={ event => closeIssue(CloseIssuesMessageComposer.RESOLUTION_RESOLVED) }>Close as resolved</Button>
|
||||
<Button variant="secondary" onClick={ event => releaseIssue(issueId) } >Release</Button>
|
||||
</Column>
|
||||
</Grid>
|
||||
<NitroCardView className="nitro-mod-tools-handle-issue min-w-[440px] max-w-[500px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.tickets.issue.title', [ 'issueId' ], [ issueId.toString() ]) } onCloseClick={ () => onIssueInfoClosed(issueId) } />
|
||||
<NitroCardContentView className="text-black" gap={ 2 }>
|
||||
{/* Issue header */}
|
||||
<div className="flex items-center gap-2 bg-gradient-to-r from-amber-50 to-transparent rounded p-2 border border-amber-100">
|
||||
<FaCommentDots className="text-amber-600 shrink-0" size={ 16 } />
|
||||
<div className="flex flex-col grow min-w-0">
|
||||
<div className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">{ LocalizeText('modtools.tickets.issue.label', [ 'issueId' ], [ issueId.toString() ]) }</div>
|
||||
<div className="font-semibold leading-tight truncate">{ GetIssueCategoryName(ticket.categoryId) }</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border bg-white border-amber-200 text-amber-800">
|
||||
{ LocalizeText('help.cfh.topic.' + ticket.reportedCategoryId) }
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold border-b border-zinc-200 pb-1 mb-0.5">{ LocalizeText('modtools.tickets.issue.details') }</div>
|
||||
<dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[.8rem] m-0">
|
||||
<Field label={ LocalizeText('modtools.tickets.issue.field.source') }>{ GetIssueCategoryName(ticket.categoryId) }</Field>
|
||||
<Field label={ LocalizeText('modtools.tickets.issue.field.category') }>{ LocalizeText('help.cfh.topic.' + ticket.reportedCategoryId) }</Field>
|
||||
<Field label={ LocalizeText('modtools.tickets.issue.field.description') }>{ ticket.message }</Field>
|
||||
<Field label={ LocalizeText('modtools.tickets.issue.field.caller') }>
|
||||
<button
|
||||
className="font-semibold text-sky-700 hover:text-sky-900 hover:underline inline-flex items-center gap-1"
|
||||
onClick={ () => openUserInfo(ticket.reporterUserId) }>
|
||||
{ ticket.reporterUserName } <FaExternalLinkAlt size={ 8 } className="opacity-60" />
|
||||
</button>
|
||||
</Field>
|
||||
<Field label={ LocalizeText('modtools.tickets.issue.field.reported') }>
|
||||
<button
|
||||
className="font-semibold text-sky-700 hover:text-sky-900 hover:underline inline-flex items-center gap-1"
|
||||
onClick={ () => openUserInfo(ticket.reportedUserId) }>
|
||||
{ ticket.reportedUserName } <FaExternalLinkAlt size={ 8 } className="opacity-60" />
|
||||
</button>
|
||||
</Field>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* Tools */}
|
||||
<Button gap={ 1 } variant="secondary" onClick={ () => setCfhChatlogOpen(prev => !prev) }>
|
||||
<FaCommentDots size={ 12 } /> { cfhChatlogOpen ? LocalizeText('modtools.tickets.issue.chatlog.close') : LocalizeText('modtools.tickets.issue.chatlog.view') }
|
||||
</Button>
|
||||
|
||||
{/* Resolution buttons */}
|
||||
<div className="flex flex-col gap-1.5 pt-1 border-t border-zinc-200">
|
||||
<div className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">{ LocalizeText('modtools.tickets.issue.resolve.heading') }</div>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
<Button gap={ 1 } variant="success" onClick={ () => closeIssue(CloseIssuesMessageComposer.RESOLUTION_RESOLVED) }>
|
||||
<FaCheck size={ 11 } /> { LocalizeText('modtools.tickets.issue.resolve.resolved') }
|
||||
</Button>
|
||||
<Button gap={ 1 } variant="dark" onClick={ () => closeIssue(CloseIssuesMessageComposer.RESOLUTION_USELESS) }>
|
||||
<FaTrashAlt size={ 11 } /> { LocalizeText('modtools.tickets.issue.resolve.useless') }
|
||||
</Button>
|
||||
<Button gap={ 1 } variant="danger" onClick={ () => closeIssue(CloseIssuesMessageComposer.RESOLUTION_ABUSIVE) }>
|
||||
<FaBan size={ 11 } /> { LocalizeText('modtools.tickets.issue.resolve.abusive') }
|
||||
</Button>
|
||||
</div>
|
||||
<Button gap={ 1 } variant="secondary" onClick={ releaseIssue }>
|
||||
<FaSignOutAlt size={ 12 } /> { LocalizeText('modtools.tickets.issue.release') }
|
||||
</Button>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
{ cfhChatlogOpen &&
|
||||
<CfhChatlogView issueId={ issueId } onCloseClick={ () => setcfhChatlogOpen(false) }/> }
|
||||
<CfhChatlogView issueId={ issueId } onCloseClick={ () => setCfhChatlogOpen(false) } /> }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { IssueMessageData, ReleaseIssuesMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useRef } from 'react';
|
||||
import { SendMessageComposer } from '../../../../api';
|
||||
import { Button, Column, Grid } from '../../../../common';
|
||||
import { FaClock, FaInbox, FaSignOutAlt, FaTools, FaUser } from 'react-icons/fa';
|
||||
import { GetIssueCategoryName, LocalizeText, SendMessageComposer } from '../../../../api';
|
||||
|
||||
interface ModToolsMyIssuesTabViewProps
|
||||
{
|
||||
@@ -24,35 +24,45 @@ export const ModToolsMyIssuesTabView: FC<ModToolsMyIssuesTabViewProps> = props =
|
||||
setTimeout(() => pendingReleasesRef.current.delete(issueId), 2000);
|
||||
};
|
||||
|
||||
const isEmpty = !myIssues || myIssues.length === 0;
|
||||
|
||||
return (
|
||||
<Column gap={ 0 } overflow="hidden">
|
||||
<Column gap={ 2 }>
|
||||
<Grid className="text-black font-bold border-bottom pb-1" gap={ 1 }>
|
||||
<div className="col-span-2">Type</div>
|
||||
<div className="col-span-3">Room/Player</div>
|
||||
<div className="col-span-3">Opened</div>
|
||||
<div className="col-span-2"></div>
|
||||
<div className="col-span-2"></div>
|
||||
</Grid>
|
||||
</Column>
|
||||
<Column className="striped-children" gap={ 0 } overflow="auto">
|
||||
{ myIssues && (myIssues.length > 0) && myIssues.map(issue =>
|
||||
{
|
||||
return (
|
||||
<Grid key={ issue.issueId } alignItems="center" className="text-black py-1 border-bottom" gap={ 1 }>
|
||||
<div className="col-span-2">{ issue.categoryId }</div>
|
||||
<div className="col-span-3">{ issue.reportedUserName }</div>
|
||||
<div className="col-span-3">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</div>
|
||||
<div className="col-span-2">
|
||||
<Button variant="primary" onClick={ event => handleIssue(issue.issueId) }>Handle</Button>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<Button variant="danger" onClick={ () => releaseIssue(issue.issueId) }>Release</Button>
|
||||
</div>
|
||||
</Grid>
|
||||
);
|
||||
}) }
|
||||
</Column>
|
||||
</Column>
|
||||
<div className="flex flex-col gap-1 overflow-hidden">
|
||||
<div className="grid grid-cols-[100px_1fr_100px_90px_90px] gap-2 text-[.7rem] uppercase tracking-wide opacity-60 font-semibold border-b border-zinc-200 pb-1 px-1">
|
||||
<div>{ LocalizeText('modtools.tickets.column.type') }</div>
|
||||
<div className="flex items-center gap-1"><FaUser size={ 10 } /> { LocalizeText('modtools.tickets.column.reported') }</div>
|
||||
<div className="flex items-center gap-1"><FaClock size={ 10 } /> { LocalizeText('modtools.tickets.column.opened') }</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
{ isEmpty
|
||||
? <div className="flex flex-col items-center justify-center gap-1 py-8 opacity-50 text-sm">
|
||||
<FaInbox size={ 22 } />
|
||||
<span>{ LocalizeText('modtools.tickets.empty.mine') }</span>
|
||||
</div>
|
||||
: <div className="flex flex-col overflow-auto">
|
||||
{ myIssues.map(issue => (
|
||||
<div key={ issue.issueId } className="grid grid-cols-[100px_1fr_100px_90px_90px] gap-2 items-center px-1 py-1.5 text-sm border-b border-zinc-100 even:bg-black/[0.02] hover:bg-sky-50/50 transition-colors">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border bg-sky-50 text-sky-800 border-sky-200 w-fit">
|
||||
{ GetIssueCategoryName(issue.categoryId) }
|
||||
</span>
|
||||
<span className="font-medium truncate">{ issue.reportedUserName }</span>
|
||||
<span className="font-mono text-[.75rem] opacity-70 tabular-nums">
|
||||
{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }
|
||||
</span>
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-1 px-2 py-1 rounded text-xs font-medium bg-sky-600 text-white hover:bg-sky-700 transition-colors"
|
||||
onClick={ () => handleIssue(issue.issueId) }>
|
||||
<FaTools size={ 10 } /> { LocalizeText('modtools.tickets.action.handle') }
|
||||
</button>
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-1 px-2 py-1 rounded text-xs font-medium bg-rose-600 text-white hover:bg-rose-700 transition-colors"
|
||||
onClick={ () => releaseIssue(issue.issueId) }>
|
||||
<FaSignOutAlt size={ 10 } /> { LocalizeText('modtools.tickets.action.release') }
|
||||
</button>
|
||||
</div>
|
||||
)) }
|
||||
</div> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { IssueMessageData, PickIssuesMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useRef } from 'react';
|
||||
import { SendMessageComposer } from '../../../../api';
|
||||
import { Button, Column, Grid } from '../../../../common';
|
||||
import { FaClock, FaHandPointer, FaInbox, FaUser } from 'react-icons/fa';
|
||||
import { GetIssueCategoryName, LocalizeText, SendMessageComposer } from '../../../../api';
|
||||
|
||||
interface ModToolsOpenIssuesTabViewProps
|
||||
{
|
||||
@@ -23,31 +23,39 @@ export const ModToolsOpenIssuesTabView: FC<ModToolsOpenIssuesTabViewProps> = pro
|
||||
setTimeout(() => pendingPicksRef.current.delete(issueId), 2000);
|
||||
};
|
||||
|
||||
const isEmpty = !openIssues || openIssues.length === 0;
|
||||
|
||||
return (
|
||||
<Column gap={ 0 } overflow="hidden">
|
||||
<Column gap={ 2 }>
|
||||
<Grid className="text-black font-bold border-bottom pb-1" gap={ 1 }>
|
||||
<div className="col-span-2">Type</div>
|
||||
<div className="col-span-3">Room/Player</div>
|
||||
<div className="col-span-4">Opened</div>
|
||||
<div className="col-span-3"></div>
|
||||
</Grid>
|
||||
</Column>
|
||||
<Column className="striped-children" gap={ 0 } overflow="auto">
|
||||
{ openIssues && (openIssues.length > 0) && openIssues.map(issue =>
|
||||
{
|
||||
return (
|
||||
<Grid key={ issue.issueId } alignItems="center" className="text-black py-1 border-bottom" gap={ 1 }>
|
||||
<div className="col-span-2">{ issue.categoryId }</div>
|
||||
<div className="col-span-3">{ issue.reportedUserName }</div>
|
||||
<div className="col-span-4">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</div>
|
||||
<div className="col-span-3">
|
||||
<Button variant="success" onClick={ () => pickIssue(issue.issueId) }>Pick Issue</Button>
|
||||
</div>
|
||||
</Grid>
|
||||
);
|
||||
}) }
|
||||
</Column>
|
||||
</Column>
|
||||
<div className="flex flex-col gap-1 overflow-hidden">
|
||||
<div className="grid grid-cols-[100px_1fr_100px_100px] gap-2 text-[.7rem] uppercase tracking-wide opacity-60 font-semibold border-b border-zinc-200 pb-1 px-1">
|
||||
<div>{ LocalizeText('modtools.tickets.column.type') }</div>
|
||||
<div className="flex items-center gap-1"><FaUser size={ 10 } /> { LocalizeText('modtools.tickets.column.reported') }</div>
|
||||
<div className="flex items-center gap-1"><FaClock size={ 10 } /> { LocalizeText('modtools.tickets.column.opened') }</div>
|
||||
<div></div>
|
||||
</div>
|
||||
{ isEmpty
|
||||
? <div className="flex flex-col items-center justify-center gap-1 py-8 opacity-50 text-sm">
|
||||
<FaInbox size={ 22 } />
|
||||
<span>{ LocalizeText('modtools.tickets.empty.open') }</span>
|
||||
</div>
|
||||
: <div className="flex flex-col overflow-auto">
|
||||
{ openIssues.map(issue => (
|
||||
<div key={ issue.issueId } className="grid grid-cols-[100px_1fr_100px_100px] gap-2 items-center px-1 py-1.5 text-sm border-b border-zinc-100 even:bg-black/[0.02] hover:bg-amber-50/50 transition-colors">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border bg-amber-50 text-amber-800 border-amber-200 w-fit">
|
||||
{ GetIssueCategoryName(issue.categoryId) }
|
||||
</span>
|
||||
<span className="font-medium truncate">{ issue.reportedUserName }</span>
|
||||
<span className="font-mono text-[.75rem] opacity-70 tabular-nums">
|
||||
{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }
|
||||
</span>
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-1 px-2 py-1 rounded text-xs font-medium bg-emerald-600 text-white hover:bg-emerald-700 transition-colors"
|
||||
onClick={ () => pickIssue(issue.issueId) }>
|
||||
<FaHandPointer size={ 10 } /> { LocalizeText('modtools.tickets.action.pick') }
|
||||
</button>
|
||||
</div>
|
||||
)) }
|
||||
</div> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { IssueMessageData } from '@nitrots/nitro-renderer';
|
||||
import { FC } from 'react';
|
||||
import { Column, Grid } from '../../../../common';
|
||||
import { FaClock, FaInbox, FaUser, FaUserShield } from 'react-icons/fa';
|
||||
import { GetIssueCategoryName, LocalizeText } from '../../../../api';
|
||||
|
||||
interface ModToolsPickedIssuesTabViewProps
|
||||
{
|
||||
@@ -10,30 +11,35 @@ interface ModToolsPickedIssuesTabViewProps
|
||||
export const ModToolsPickedIssuesTabView: FC<ModToolsPickedIssuesTabViewProps> = props =>
|
||||
{
|
||||
const { pickedIssues = null } = props;
|
||||
const isEmpty = !pickedIssues || pickedIssues.length === 0;
|
||||
|
||||
return (
|
||||
<Column gap={ 0 } overflow="hidden">
|
||||
<Column gap={ 2 }>
|
||||
<Grid className="text-black font-bold border-bottom pb-1" gap={ 1 }>
|
||||
<div className="col-span-2">Type</div>
|
||||
<div className="col-span-3">Room/Player</div>
|
||||
<div className="col-span-4">Opened</div>
|
||||
<div className="col-span-3">Picker</div>
|
||||
</Grid>
|
||||
</Column>
|
||||
<Column className="striped-children" gap={ 0 } overflow="auto">
|
||||
{ pickedIssues && (pickedIssues.length > 0) && pickedIssues.map(issue =>
|
||||
{
|
||||
return (
|
||||
<Grid key={ issue.issueId } alignItems="center" className="text-black py-1 border-bottom" gap={ 1 }>
|
||||
<div className="col-span-2">{ issue.categoryId }</div>
|
||||
<div className="col-span-3">{ issue.reportedUserName }</div>
|
||||
<div className="col-span-4">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</div>
|
||||
<div className="col-span-3">{ issue.pickerUserName }</div>
|
||||
</Grid>
|
||||
);
|
||||
}) }
|
||||
</Column>
|
||||
</Column>
|
||||
<div className="flex flex-col gap-1 overflow-hidden">
|
||||
<div className="grid grid-cols-[100px_1fr_100px_120px] gap-2 text-[.7rem] uppercase tracking-wide opacity-60 font-semibold border-b border-zinc-200 pb-1 px-1">
|
||||
<div>{ LocalizeText('modtools.tickets.column.type') }</div>
|
||||
<div className="flex items-center gap-1"><FaUser size={ 10 } /> { LocalizeText('modtools.tickets.column.reported') }</div>
|
||||
<div className="flex items-center gap-1"><FaClock size={ 10 } /> { LocalizeText('modtools.tickets.column.opened') }</div>
|
||||
<div className="flex items-center gap-1"><FaUserShield size={ 10 } /> { LocalizeText('modtools.tickets.column.picker') }</div>
|
||||
</div>
|
||||
{ isEmpty
|
||||
? <div className="flex flex-col items-center justify-center gap-1 py-8 opacity-50 text-sm">
|
||||
<FaInbox size={ 22 } />
|
||||
<span>{ LocalizeText('modtools.tickets.empty.picked') }</span>
|
||||
</div>
|
||||
: <div className="flex flex-col overflow-auto">
|
||||
{ pickedIssues.map(issue => (
|
||||
<div key={ issue.issueId } className="grid grid-cols-[100px_1fr_100px_120px] gap-2 items-center px-1 py-1.5 text-sm border-b border-zinc-100 even:bg-black/[0.02]">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border bg-zinc-50 text-zinc-700 border-zinc-200 w-fit">
|
||||
{ GetIssueCategoryName(issue.categoryId) }
|
||||
</span>
|
||||
<span className="font-medium truncate">{ issue.reportedUserName }</span>
|
||||
<span className="font-mono text-[.75rem] opacity-70 tabular-nums">
|
||||
{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }
|
||||
</span>
|
||||
<span className="truncate font-medium opacity-80">{ issue.pickerUserName }</span>
|
||||
</div>
|
||||
)) }
|
||||
</div> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { GetSessionDataManager, IssueMessageData } from '@nitrots/nitro-renderer';
|
||||
import { FC, useState } from 'react';
|
||||
import { FC, useMemo, useState } from 'react';
|
||||
import { FaCheckSquare, FaListUl, FaUserCheck } from 'react-icons/fa';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../common';
|
||||
import { useModTools } from '../../../../hooks';
|
||||
import { ModToolsIssueInfoView } from './ModToolsIssueInfoView';
|
||||
@@ -12,11 +14,30 @@ interface ModToolsTicketsViewProps
|
||||
onCloseClick: () => void;
|
||||
}
|
||||
|
||||
const TABS: string[] = [
|
||||
'Open Issues',
|
||||
'My Issues',
|
||||
'Picked Issues'
|
||||
];
|
||||
interface TabBadgeProps
|
||||
{
|
||||
label: string;
|
||||
count: number;
|
||||
icon: React.ReactNode;
|
||||
tone: 'amber' | 'sky' | 'zinc';
|
||||
}
|
||||
|
||||
const TONE_MAP: Record<TabBadgeProps['tone'], string> = {
|
||||
amber: 'bg-amber-500 text-white',
|
||||
sky: 'bg-sky-500 text-white',
|
||||
zinc: 'bg-zinc-400 text-white'
|
||||
};
|
||||
|
||||
const TabLabel: FC<TabBadgeProps> = ({ label, count, icon, tone }) => (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="opacity-80">{ icon }</span>
|
||||
<span>{ label }</span>
|
||||
{ count > 0 &&
|
||||
<span className={ `inline-flex items-center justify-center min-w-[1.25rem] h-4 px-1 rounded-full text-[10px] font-semibold ${ TONE_MAP[tone] }` }>
|
||||
{ count > 99 ? '99+' : count }
|
||||
</span> }
|
||||
</span>
|
||||
);
|
||||
|
||||
export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
|
||||
{
|
||||
@@ -25,9 +46,15 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
|
||||
const [ issueInfoWindows, setIssueInfoWindows ] = useState<number[]>([]);
|
||||
const { tickets = [] } = useModTools();
|
||||
|
||||
const openIssues = tickets.filter(issue => issue.state === IssueMessageData.STATE_OPEN);
|
||||
const myIssues = tickets.filter(issue => (issue.state === IssueMessageData.STATE_PICKED) && (issue.pickerUserId === GetSessionDataManager().userId));
|
||||
const pickedIssues = tickets.filter(issue => issue.state === IssueMessageData.STATE_PICKED);
|
||||
const { openIssues, myIssues, pickedIssues } = useMemo(() =>
|
||||
{
|
||||
const ownId = GetSessionDataManager()?.userId;
|
||||
return {
|
||||
openIssues: tickets.filter(issue => issue.state === IssueMessageData.STATE_OPEN),
|
||||
myIssues: tickets.filter(issue => (issue.state === IssueMessageData.STATE_PICKED) && (issue.pickerUserId === ownId)),
|
||||
pickedIssues: tickets.filter(issue => issue.state === IssueMessageData.STATE_PICKED)
|
||||
};
|
||||
}, [ tickets ]);
|
||||
|
||||
const closeIssue = (issueId: number) =>
|
||||
{
|
||||
@@ -56,32 +83,34 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
|
||||
});
|
||||
};
|
||||
|
||||
const CurrentTabComponent = () =>
|
||||
const renderTab = () =>
|
||||
{
|
||||
switch(currentTab)
|
||||
{
|
||||
case 0: return <ModToolsOpenIssuesTabView openIssues={ openIssues }/>;
|
||||
case 1: return <ModToolsMyIssuesTabView handleIssue={ handleIssue } myIssues={ myIssues }/>;
|
||||
case 2: return <ModToolsPickedIssuesTabView pickedIssues={ pickedIssues }/>;
|
||||
case 0: return <ModToolsOpenIssuesTabView openIssues={ openIssues } />;
|
||||
case 1: return <ModToolsMyIssuesTabView handleIssue={ handleIssue } myIssues={ myIssues } />;
|
||||
case 2: return <ModToolsPickedIssuesTabView pickedIssues={ pickedIssues } />;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<NitroCardView className="nitro-mod-tools-tickets">
|
||||
<NitroCardHeaderView headerText={ 'Tickets' } onCloseClick={ onCloseClick } />
|
||||
<NitroCardView className="nitro-mod-tools-tickets min-w-[520px] max-w-[640px] max-h-[520px]">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.tickets.title') } onCloseClick={ onCloseClick } />
|
||||
<NitroCardTabsView>
|
||||
{ TABS.map((tab, index) =>
|
||||
{
|
||||
return (<NitroCardTabsItemView key={ index } isActive={ (currentTab === index) } onClick={ event => setCurrentTab(index) }>
|
||||
{ tab }
|
||||
</NitroCardTabsItemView>);
|
||||
}) }
|
||||
<NitroCardTabsItemView isActive={ currentTab === 0 } onClick={ () => setCurrentTab(0) }>
|
||||
<TabLabel label={ LocalizeText('modtools.tickets.tab.open') } count={ openIssues.length } icon={ <FaListUl size={ 10 } /> } tone="amber" />
|
||||
</NitroCardTabsItemView>
|
||||
<NitroCardTabsItemView isActive={ currentTab === 1 } onClick={ () => setCurrentTab(1) }>
|
||||
<TabLabel label={ LocalizeText('modtools.tickets.tab.mine') } count={ myIssues.length } icon={ <FaUserCheck size={ 10 } /> } tone="sky" />
|
||||
</NitroCardTabsItemView>
|
||||
<NitroCardTabsItemView isActive={ currentTab === 2 } onClick={ () => setCurrentTab(2) }>
|
||||
<TabLabel label={ LocalizeText('modtools.tickets.tab.picked') } count={ pickedIssues.length } icon={ <FaCheckSquare size={ 10 } /> } tone="zinc" />
|
||||
</NitroCardTabsItemView>
|
||||
</NitroCardTabsView>
|
||||
<NitroCardContentView gap={ 1 }>
|
||||
<CurrentTabComponent />
|
||||
{ renderTab() }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
{ issueInfoWindows && (issueInfoWindows.length > 0) && issueInfoWindows.map(issueId => <ModToolsIssueInfoView key={ issueId } issueId={ issueId } onIssueInfoClosed={ closeIssue } />) }
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ChatRecordData, GetUserChatlogMessageComposer, UserChatlogEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { SendMessageComposer } from '../../../../api';
|
||||
import { FaSpinner } from 'react-icons/fa';
|
||||
import { LocalizeText, SendMessageComposer } from '../../../../api';
|
||||
import { DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useMessageEvent } from '../../../../hooks';
|
||||
import { ChatlogView } from '../chatlog/ChatlogView';
|
||||
@@ -33,11 +34,15 @@ export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =
|
||||
}, [ userId ]);
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ `User Chatlog: ${ username || '' }` } onCloseClick={ onCloseClick } />
|
||||
<NitroCardContentView className="text-black h-full">
|
||||
{ userChatlog &&
|
||||
<ChatlogView records={ userChatlog } /> }
|
||||
<NitroCardView className="nitro-mod-tools-chatlog min-w-[460px] max-w-[520px] max-h-[500px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ username ? LocalizeText('modtools.user.chatlog.title.with', [ 'username' ], [ username ]) : LocalizeText('modtools.user.chatlog.title') } onCloseClick={ onCloseClick } />
|
||||
<NitroCardContentView className="text-black h-full" gap={ 1 }>
|
||||
{ userChatlog
|
||||
? <ChatlogView records={ userChatlog } />
|
||||
: <div className="flex flex-col items-center justify-center gap-2 py-8 opacity-50 text-sm">
|
||||
<FaSpinner className="animate-spin" size={ 22 } />
|
||||
<span>{ LocalizeText('modtools.user.chatlog.loading') }</span>
|
||||
</div> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { CallForHelpTopicData, DefaultSanctionMessageComposer, ModAlertMessageComposer, ModBanMessageComposer, ModKickMessageComposer, ModMessageMessageComposer, ModMuteMessageComposer, ModTradingLockMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useMemo, useRef, useState } from 'react';
|
||||
import { FaBan, FaBolt, FaEnvelope, FaExclamationTriangle, FaGavel, FaUserSlash, FaVolumeMute } from 'react-icons/fa';
|
||||
import { ISelectedUser, LocalizeText, ModActionDefinition, NotificationAlertType, SendMessageComposer } from '../../../../api';
|
||||
import { Button, DraggableWindowPosition, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
|
||||
import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useModTools, useNotification } from '../../../../hooks';
|
||||
|
||||
interface ModToolsUserModActionViewProps
|
||||
@@ -25,6 +26,24 @@ const MOD_ACTION_DEFINITIONS = [
|
||||
new ModActionDefinition(105, 'Message', ModActionDefinition.MESSAGE, 0, 0),
|
||||
];
|
||||
|
||||
const ACTION_ICONS: Record<number, React.ReactNode> = {
|
||||
[ModActionDefinition.ALERT]: <FaExclamationTriangle size={ 10 } />,
|
||||
[ModActionDefinition.MUTE]: <FaVolumeMute size={ 10 } />,
|
||||
[ModActionDefinition.BAN]: <FaBan size={ 10 } />,
|
||||
[ModActionDefinition.KICK]: <FaUserSlash size={ 10 } />,
|
||||
[ModActionDefinition.TRADE_LOCK]: <FaGavel size={ 10 } />,
|
||||
[ModActionDefinition.MESSAGE]: <FaEnvelope size={ 10 } />,
|
||||
};
|
||||
|
||||
const ACTION_TONE: Record<number, string> = {
|
||||
[ModActionDefinition.ALERT]: 'bg-amber-100 text-amber-800 border-amber-200',
|
||||
[ModActionDefinition.MUTE]: 'bg-sky-100 text-sky-800 border-sky-200',
|
||||
[ModActionDefinition.BAN]: 'bg-rose-100 text-rose-800 border-rose-200',
|
||||
[ModActionDefinition.KICK]: 'bg-orange-100 text-orange-800 border-orange-200',
|
||||
[ModActionDefinition.TRADE_LOCK]: 'bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200',
|
||||
[ModActionDefinition.MESSAGE]: 'bg-zinc-100 text-zinc-800 border-zinc-200',
|
||||
};
|
||||
|
||||
export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = props =>
|
||||
{
|
||||
const { user = null, onCloseClick = null } = props;
|
||||
@@ -50,26 +69,20 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
|
||||
return values;
|
||||
}, [ cfhCategories ]);
|
||||
|
||||
const sendAlert = (message: string) => simpleAlert(message, NotificationAlertType.DEFAULT, null, null, 'Error');
|
||||
const sendAlert = (m: string) => simpleAlert(m, NotificationAlertType.DEFAULT, null, null, 'Error');
|
||||
|
||||
const sendDefaultSanction = () =>
|
||||
{
|
||||
if(isSendingRef.current) return;
|
||||
|
||||
let errorMessage: string = null;
|
||||
|
||||
const category = topics[selectedTopic];
|
||||
|
||||
if(selectedTopic === -1) errorMessage = 'You must select a CFH topic';
|
||||
|
||||
if(errorMessage) return sendAlert(errorMessage);
|
||||
if(selectedTopic === -1) return sendAlert(LocalizeText('modtools.user.modaction.error.no.topic'));
|
||||
|
||||
const messageOrDefault = (message.trim().length === 0) ? LocalizeText(`help.cfh.topic.${ category.id }`) : message;
|
||||
|
||||
isSendingRef.current = true;
|
||||
|
||||
SendMessageComposer(new DefaultSanctionMessageComposer(user.userId, selectedTopic, messageOrDefault));
|
||||
|
||||
onCloseClick();
|
||||
};
|
||||
|
||||
@@ -78,34 +91,22 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
|
||||
if(isSendingRef.current) return;
|
||||
|
||||
let errorMessage: string = null;
|
||||
|
||||
const category = topics[selectedTopic];
|
||||
const sanction = MOD_ACTION_DEFINITIONS[selectedAction];
|
||||
|
||||
if((selectedTopic === -1) || (selectedAction === -1)) errorMessage = 'You must select a CFH topic and Sanction';
|
||||
else if(!settings || !settings.cfhPermission) errorMessage = 'You do not have permission to do this';
|
||||
else if(!category) errorMessage = 'You must select a CFH topic';
|
||||
else if(!sanction) errorMessage = 'You must select a sanction';
|
||||
if((selectedTopic === -1) || (selectedAction === -1)) errorMessage = LocalizeText('modtools.user.modaction.error.no.action');
|
||||
else if(!settings || !settings.cfhPermission) errorMessage = LocalizeText('modtools.user.modaction.error.no.permission');
|
||||
else if(!category) errorMessage = LocalizeText('modtools.user.modaction.error.no.topic');
|
||||
else if(!sanction) errorMessage = LocalizeText('modtools.user.modaction.error.no.action');
|
||||
|
||||
if(errorMessage)
|
||||
{
|
||||
sendAlert(errorMessage);
|
||||
|
||||
return;
|
||||
}
|
||||
if(errorMessage) return sendAlert(errorMessage);
|
||||
|
||||
const messageOrDefault = (message.trim().length === 0) ? LocalizeText(`help.cfh.topic.${ category.id }`) : message;
|
||||
|
||||
switch(sanction.actionType)
|
||||
{
|
||||
case ModActionDefinition.ALERT: {
|
||||
if(!settings.alertPermission)
|
||||
{
|
||||
sendAlert('You have insufficient permissions');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if(!settings.alertPermission) return sendAlert(LocalizeText('modtools.user.modaction.error.no.permission.alert'));
|
||||
SendMessageComposer(new ModAlertMessageComposer(user.userId, messageOrDefault, category.id));
|
||||
break;
|
||||
}
|
||||
@@ -113,72 +114,108 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
|
||||
SendMessageComposer(new ModMuteMessageComposer(user.userId, messageOrDefault, category.id));
|
||||
break;
|
||||
case ModActionDefinition.BAN: {
|
||||
if(!settings.banPermission)
|
||||
{
|
||||
sendAlert('You have insufficient permissions');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if(!settings.banPermission) return sendAlert(LocalizeText('modtools.user.modaction.error.no.permission.alert'));
|
||||
SendMessageComposer(new ModBanMessageComposer(user.userId, messageOrDefault, category.id, selectedAction, (sanction.actionId === 106)));
|
||||
break;
|
||||
}
|
||||
case ModActionDefinition.KICK: {
|
||||
if(!settings.kickPermission)
|
||||
{
|
||||
sendAlert('You have insufficient permissions');
|
||||
return;
|
||||
}
|
||||
|
||||
if(!settings.kickPermission) return sendAlert(LocalizeText('modtools.user.modaction.error.no.permission.alert'));
|
||||
SendMessageComposer(new ModKickMessageComposer(user.userId, messageOrDefault, category.id));
|
||||
break;
|
||||
}
|
||||
case ModActionDefinition.TRADE_LOCK: {
|
||||
const numSeconds = (sanction.actionLengthHours * 60);
|
||||
|
||||
SendMessageComposer(new ModTradingLockMessageComposer(user.userId, messageOrDefault, numSeconds, category.id));
|
||||
break;
|
||||
}
|
||||
case ModActionDefinition.MESSAGE: {
|
||||
if(message.trim().length === 0)
|
||||
{
|
||||
sendAlert('Please write a message to user');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if(message.trim().length === 0) return sendAlert(LocalizeText('modtools.user.modaction.error.no.message'));
|
||||
SendMessageComposer(new ModMessageMessageComposer(user.userId, message, category.id));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
isSendingRef.current = true;
|
||||
|
||||
onCloseClick();
|
||||
};
|
||||
|
||||
if(!user) return null;
|
||||
|
||||
const selectedSanction = selectedAction >= 0 ? MOD_ACTION_DEFINITIONS[selectedAction] : null;
|
||||
const selectedTopicName = selectedTopic >= 0 && topics[selectedTopic] ? LocalizeText('help.cfh.topic.' + topics[selectedTopic].id) : null;
|
||||
const sanctionTone = selectedSanction ? ACTION_TONE[selectedSanction.actionType] : '';
|
||||
const sanctionIcon = selectedSanction ? ACTION_ICONS[selectedSanction.actionType] : null;
|
||||
const canSubmit = (selectedTopic !== -1);
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-mod-tools-user-action" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ 'Mod Action: ' + (user ? user.username : '') } onCloseClick={ () => onCloseClick() } />
|
||||
<NitroCardContentView className="text-black">
|
||||
<select className="form-select form-select-sm" value={ selectedTopic } onChange={ event => setSelectedTopic(parseInt(event.target.value)) }>
|
||||
<option disabled value={ -1 }>CFH Topic</option>
|
||||
{ topics.map((topic, index) => <option key={ index } value={ index }>{ LocalizeText('help.cfh.topic.' + topic.id) }</option>) }
|
||||
</select>
|
||||
<select className="form-select form-select-sm" value={ selectedAction } onChange={ event => setSelectedAction(parseInt(event.target.value)) }>
|
||||
<option disabled value={ -1 }>Sanction Type</option>
|
||||
{ MOD_ACTION_DEFINITIONS.map((action, index) => <option key={ index } value={ index }>{ action.name }</option>) }
|
||||
</select>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text small>Optional message type, overrides default</Text>
|
||||
<textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem]" value={ message } onChange={ event => setMessage(event.target.value) } />
|
||||
<NitroCardView className="nitro-mod-tools-user-action min-w-[420px] max-w-[460px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.user.modaction.title', [ 'username' ], [ user.username ]) } onCloseClick={ () => onCloseClick() } />
|
||||
<NitroCardContentView className="text-black" gap={ 2 }>
|
||||
{/* Target header */}
|
||||
<div className="flex items-center gap-2 bg-gradient-to-r from-rose-50 to-transparent rounded p-2 border border-rose-100">
|
||||
<FaGavel className="text-rose-600 shrink-0" size={ 16 } />
|
||||
<div className="flex flex-col grow min-w-0">
|
||||
<div className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">{ LocalizeText('modtools.user.modaction.sanctioning') }</div>
|
||||
<div className="font-semibold leading-tight truncate">{ user.username }</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CFH topic */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">{ LocalizeText('modtools.user.modaction.step.topic') }</label>
|
||||
<select className="form-select form-select-sm" value={ selectedTopic } onChange={ event => setSelectedTopic(parseInt(event.target.value)) }>
|
||||
<option disabled value={ -1 }>{ LocalizeText('modtools.user.modaction.step.topic.placeholder') }</option>
|
||||
{ topics.map((topic, index) => <option key={ index } value={ index }>{ LocalizeText('help.cfh.topic.' + topic.id) }</option>) }
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Sanction type */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">{ LocalizeText('modtools.user.modaction.step.sanction') }</label>
|
||||
<select className="form-select form-select-sm" value={ selectedAction } onChange={ event => setSelectedAction(parseInt(event.target.value)) }>
|
||||
<option disabled value={ -1 }>{ LocalizeText('modtools.user.modaction.step.sanction.placeholder') }</option>
|
||||
{ MOD_ACTION_DEFINITIONS.map((action, index) => <option key={ index } value={ index }>{ action.name }</option>) }
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">
|
||||
{ LocalizeText('modtools.user.modaction.step.message') } <span className="opacity-50 normal-case font-normal">{ LocalizeText('modtools.user.modaction.step.message.optional') }</span>
|
||||
</label>
|
||||
<textarea
|
||||
className="min-h-[60px] px-2 py-1.5 rounded text-sm border border-zinc-300 focus:outline-none focus:ring-2 focus:ring-rose-300"
|
||||
placeholder={ LocalizeText('modtools.user.modaction.message.placeholder') }
|
||||
value={ message }
|
||||
onChange={ event => setMessage(event.target.value) }
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{ (selectedSanction || selectedTopicName) &&
|
||||
<div className="flex flex-col gap-1 bg-zinc-50 border border-zinc-200 rounded p-2">
|
||||
<div className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">{ LocalizeText('modtools.user.modaction.preview') }</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{ selectedTopicName &&
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border bg-white border-zinc-200">
|
||||
{ selectedTopicName }
|
||||
</span> }
|
||||
{ selectedSanction &&
|
||||
<span className={ `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${ sanctionTone }` }>
|
||||
{ sanctionIcon } { selectedSanction.name }
|
||||
</span> }
|
||||
</div>
|
||||
</div> }
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex gap-1.5 pt-1 border-t border-zinc-200">
|
||||
<Button className="grow" disabled={ !canSubmit } gap={ 1 } variant="primary" onClick={ sendDefaultSanction }>
|
||||
<FaBolt size={ 12 } /> { LocalizeText('modtools.user.modaction.button.default') }
|
||||
</Button>
|
||||
<Button className="grow" disabled={ !canSubmit || selectedAction === -1 } gap={ 1 } variant="success" onClick={ sendSanction }>
|
||||
<FaGavel size={ 12 } /> { LocalizeText('modtools.user.modaction.button.apply') }
|
||||
</Button>
|
||||
</div>
|
||||
<Flex gap={ 1 } justifyContent="between">
|
||||
<Button variant="primary" onClick={ sendDefaultSanction }>Default Sanction</Button>
|
||||
<Button variant="success" onClick={ sendSanction }>Sanction</Button>
|
||||
</Flex>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { GetRoomVisitsMessageComposer, RoomVisitsData, RoomVisitsEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { SendMessageComposer, TryVisitRoom } from '../../../../api';
|
||||
import { Column, DraggableWindowPosition, Grid, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
|
||||
import { FaClock, FaDoorOpen, FaSignInAlt } from 'react-icons/fa';
|
||||
import { LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../../api';
|
||||
import { DraggableWindowPosition, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useMessageEvent } from '../../../../hooks';
|
||||
|
||||
interface ModToolsUserRoomVisitsViewProps
|
||||
@@ -31,29 +32,55 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
|
||||
|
||||
if(!userId) return null;
|
||||
|
||||
const rows = roomVisitData?.rooms ?? [];
|
||||
const isEmpty = rows.length === 0;
|
||||
|
||||
const countLabel = rows.length === 1
|
||||
? LocalizeText('modtools.user.visits.entries.one', [ 'count' ], [ rows.length.toString() ])
|
||||
: LocalizeText('modtools.user.visits.entries.many', [ 'count' ], [ rows.length.toString() ]);
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-mod-tools-user-visits" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ 'User Visits' } onCloseClick={ onCloseClick } />
|
||||
<NitroCardView className="nitro-mod-tools-user-visits min-w-[400px] max-w-[460px] max-h-[460px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.user.visits.title') } onCloseClick={ onCloseClick } />
|
||||
<NitroCardContentView className="text-black" gap={ 1 }>
|
||||
<Column fullHeight gap={ 0 } overflow="hidden">
|
||||
<Column gap={ 2 }>
|
||||
<Grid className="text-black font-bold border-bottom pb-1" gap={ 1 }>
|
||||
<div className="col-span-2">Time</div>
|
||||
<div className="col-span-7">Room name</div>
|
||||
<div className="col-span-3">Visit</div>
|
||||
</Grid>
|
||||
</Column>
|
||||
<InfiniteScroll rowRender={ row =>
|
||||
{
|
||||
return (
|
||||
<Grid alignItems="center" className="text-black py-1 border-bottom" fullHeight={ false } gap={ 1 }>
|
||||
<Text className="col-span-2">{ row.enterHour.toString().padStart(2, '0') }: { row.enterMinute.toString().padStart(2, '0') }</Text>
|
||||
<Text className="col-span-7">{ row.roomName }</Text>
|
||||
<Text bold pointer underline className="col-span-3" variant="primary" onClick={ event => TryVisitRoom(row.roomId) }>Visit Room</Text>
|
||||
</Grid>
|
||||
);
|
||||
} } rows={ roomVisitData?.rooms ?? [] } />
|
||||
</Column>
|
||||
{/* Header strip */}
|
||||
<div className="flex items-center gap-2 bg-gradient-to-r from-sky-50 to-transparent rounded p-2 border border-sky-100">
|
||||
<FaDoorOpen className="text-sky-600 shrink-0" size={ 14 } />
|
||||
<div className="text-sm font-semibold leading-tight grow">{ LocalizeText('modtools.user.visits.recent') }</div>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border bg-white border-zinc-200">
|
||||
{ countLabel }
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Table head */}
|
||||
<div className="grid grid-cols-[60px_1fr_80px] gap-2 text-[.7rem] uppercase tracking-wide opacity-60 font-semibold border-b border-zinc-200 pb-1 px-1">
|
||||
<div className="flex items-center gap-1"><FaClock size={ 10 } /> { LocalizeText('modtools.user.visits.time') }</div>
|
||||
<div>{ LocalizeText('modtools.user.visits.room') }</div>
|
||||
<div className="text-right">{ LocalizeText('modtools.user.visits.action') }</div>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
{ isEmpty
|
||||
? <div className="flex flex-col items-center justify-center gap-1 py-6 opacity-50 text-sm">
|
||||
<FaDoorOpen size={ 22 } />
|
||||
<span>{ LocalizeText('modtools.user.visits.empty') }</span>
|
||||
</div>
|
||||
: <div className="flex flex-col grow min-h-0 overflow-hidden">
|
||||
<InfiniteScroll rowRender={ row => (
|
||||
<div className="grid grid-cols-[60px_1fr_80px] gap-2 items-center px-1 py-1.5 text-sm border-b border-zinc-100 even:bg-black/[0.02] hover:bg-sky-50 transition-colors">
|
||||
<span className="font-mono text-[.75rem] opacity-70 tabular-nums">
|
||||
{ row.enterHour.toString().padStart(2, '0') }:{ row.enterMinute.toString().padStart(2, '0') }
|
||||
</span>
|
||||
<span className="truncate font-medium">{ row.roomName }</span>
|
||||
<button
|
||||
className="inline-flex items-center justify-end gap-1 text-sky-700 hover:text-sky-900 hover:underline text-xs"
|
||||
onClick={ () => TryVisitRoom(row.roomId) }
|
||||
title={ LocalizeText('modtools.user.visits.visit.title') }>
|
||||
<FaSignInAlt size={ 10 } /> { LocalizeText('modtools.user.visits.visit') }
|
||||
</button>
|
||||
</div>
|
||||
) } rows={ rows } />
|
||||
</div> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { ModMessageMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useState } from 'react';
|
||||
import { ISelectedUser, SendMessageComposer } from '../../../../api';
|
||||
import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
|
||||
import { FaEnvelope, FaPaperPlane, FaUser } from 'react-icons/fa';
|
||||
import { ISelectedUser, LocalizeText, SendMessageComposer } from '../../../../api';
|
||||
import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useNotification } from '../../../../hooks';
|
||||
|
||||
interface ModToolsUserSendMessageViewProps
|
||||
@@ -18,27 +19,55 @@ export const ModToolsUserSendMessageView: FC<ModToolsUserSendMessageViewProps> =
|
||||
|
||||
if(!user) return null;
|
||||
|
||||
const trimmed = message.trim();
|
||||
const canSend = trimmed.length > 0;
|
||||
|
||||
const sendMessage = () =>
|
||||
{
|
||||
if(message.trim().length === 0)
|
||||
if(!canSend)
|
||||
{
|
||||
simpleAlert('Please write a message to user.', null, null, null, 'Error', null);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
SendMessageComposer(new ModMessageMessageComposer(user.userId, message, -999));
|
||||
|
||||
onCloseClick();
|
||||
};
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-mod-tools-user-message" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ 'Send Message' } onCloseClick={ () => onCloseClick() } />
|
||||
<NitroCardContentView className="text-black">
|
||||
<Text>Message To: { user.username }</Text>
|
||||
<textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem]" value={ message } onChange={ event => setMessage(event.target.value) }></textarea>
|
||||
<Button fullWidth onClick={ sendMessage }>Send message</Button>
|
||||
<NitroCardView className="nitro-mod-tools-user-message min-w-[360px] max-w-[420px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.user.message.title') } onCloseClick={ () => onCloseClick() } />
|
||||
<NitroCardContentView className="text-black" gap={ 2 }>
|
||||
{/* Recipient header */}
|
||||
<div className="flex items-center gap-2 bg-gradient-to-r from-sky-50 to-transparent rounded p-2 border border-sky-100">
|
||||
<FaEnvelope className="text-sky-600 shrink-0" size={ 16 } />
|
||||
<div className="flex flex-col grow min-w-0">
|
||||
<div className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">{ LocalizeText('modtools.user.message.recipient') }</div>
|
||||
<div className="flex items-center gap-1.5 font-semibold leading-tight truncate">
|
||||
<FaUser className="opacity-60" size={ 11 } />
|
||||
<span className="truncate">{ user.username }</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold">{ LocalizeText('modtools.user.message.label') }</label>
|
||||
<textarea
|
||||
autoFocus
|
||||
className="min-h-[100px] px-2 py-1.5 rounded text-sm border border-zinc-300 focus:outline-none focus:ring-2 focus:ring-sky-300"
|
||||
placeholder={ LocalizeText('modtools.user.message.placeholder') }
|
||||
value={ message }
|
||||
onChange={ event => setMessage(event.target.value) }
|
||||
/>
|
||||
<div className="flex justify-between text-xs opacity-60">
|
||||
<span>{ canSend ? LocalizeText('modtools.user.message.chars', [ 'count' ], [ trimmed.length.toString() ]) : LocalizeText('modtools.user.message.empty') }</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button disabled={ !canSend } fullWidth gap={ 1 } variant="primary" onClick={ sendMessage }>
|
||||
<FaPaperPlane size={ 12 } /> { LocalizeText('modtools.user.message.send') }
|
||||
</Button>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { CreateLinkEvent, GetModeratorUserInfoMessageComposer, ModeratorUserInfoData, ModeratorUserInfoEvent } from '@nitrots/nitro-renderer';
|
||||
import { CreateLinkEvent, GetModeratorUserInfoMessageComposer, ModeratorActionResultMessageEvent, ModeratorUserInfoData, ModeratorUserInfoEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useMemo, useState } from 'react';
|
||||
import { FaBan, FaCommentDots, FaDoorOpen, FaEnvelope, FaExchangeAlt, FaExclamationTriangle, FaGavel, FaSync } from 'react-icons/fa';
|
||||
import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../../../api';
|
||||
import { Button, Column, DraggableWindowPosition, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useMessageEvent } from '../../../../hooks';
|
||||
import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
|
||||
import { useMessageEvent, useRoomUserListSnapshot } from '../../../../hooks';
|
||||
import { ModToolsUserModActionView } from './ModToolsUserModActionView';
|
||||
import { ModToolsUserRoomVisitsView } from './ModToolsUserRoomVisitsView';
|
||||
import { ModToolsUserSendMessageView } from './ModToolsUserSendMessageView';
|
||||
@@ -13,6 +14,52 @@ interface ModToolsUserViewProps
|
||||
onCloseClick: () => void;
|
||||
}
|
||||
|
||||
interface StatCardProps
|
||||
{
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: number | string;
|
||||
tone?: 'neutral' | 'warn' | 'danger';
|
||||
}
|
||||
|
||||
const StatCard: FC<StatCardProps> = ({ icon, label, value, tone = 'neutral' }) =>
|
||||
{
|
||||
const numericValue = typeof value === 'number' ? value : parseInt(value as string, 10);
|
||||
const isElevated = !Number.isNaN(numericValue) && numericValue > 0;
|
||||
const toneClasses = (() =>
|
||||
{
|
||||
if(tone === 'danger' && isElevated) return 'bg-rose-50 border-rose-200 text-rose-700';
|
||||
if(tone === 'warn' && isElevated) return 'bg-amber-50 border-amber-200 text-amber-700';
|
||||
return 'bg-zinc-50 border-zinc-200 text-zinc-700';
|
||||
})();
|
||||
|
||||
return (
|
||||
<div className={ `flex flex-col items-center justify-center px-2 py-1.5 rounded border ${ toneClasses } grow min-w-0` }>
|
||||
<div className="flex items-center gap-1.5 text-[.7rem] uppercase tracking-wide opacity-70">
|
||||
<span className="shrink-0">{ icon }</span>
|
||||
<span className="truncate">{ label }</span>
|
||||
</div>
|
||||
<div className="text-lg font-semibold tabular-nums leading-tight">{ value }</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Section: FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-[.7rem] uppercase tracking-wide opacity-60 font-semibold border-b border-zinc-200 pb-1 mb-0.5">{ title }</div>
|
||||
<dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[.8rem] m-0">
|
||||
{ children }
|
||||
</dl>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Field: FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
|
||||
<>
|
||||
<dt className="opacity-60 whitespace-nowrap">{ label }</dt>
|
||||
<dd className="m-0 break-words font-medium">{ (value || value === 0) ? value : <span className="opacity-40">-</span> }</dd>
|
||||
</>
|
||||
);
|
||||
|
||||
export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
|
||||
{
|
||||
const { onCloseClick = null, userId = null } = props;
|
||||
@@ -20,71 +67,33 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
|
||||
const [ sendMessageVisible, setSendMessageVisible ] = useState(false);
|
||||
const [ modActionVisible, setModActionVisible ] = useState(false);
|
||||
const [ roomVisitsVisible, setRoomVisitsVisible ] = useState(false);
|
||||
// Reactive presence: if the target user is currently in the room
|
||||
// we're observing, they're online — irrespective of what the
|
||||
// one-shot ModeratorUserInfoData.online said when the panel opened.
|
||||
const roomUserList = useRoomUserListSnapshot();
|
||||
const isPresentInCurrentRoom = useMemo(
|
||||
() => roomUserList.some(user => user && (user.webID === userId)),
|
||||
[ roomUserList, userId ]
|
||||
);
|
||||
const isOnline = isPresentInCurrentRoom || !!(userInfo && userInfo.online);
|
||||
const presenceLabel = isPresentInCurrentRoom
|
||||
? LocalizeText('modtools.userinfo.presence.in_room')
|
||||
: (isOnline ? LocalizeText('modtools.userinfo.presence.online') : LocalizeText('modtools.userinfo.presence.offline'));
|
||||
const presenceTitle = isPresentInCurrentRoom
|
||||
? LocalizeText('modtools.userinfo.presence.in_room.title')
|
||||
: (isOnline ? LocalizeText('modtools.userinfo.presence.online.title') : LocalizeText('modtools.userinfo.presence.offline.title'));
|
||||
const presencePillClass = isPresentInCurrentRoom
|
||||
? 'bg-emerald-100 text-emerald-700 border-emerald-200'
|
||||
: isOnline
|
||||
? 'bg-sky-100 text-sky-700 border-sky-200'
|
||||
: 'bg-zinc-100 text-zinc-600 border-zinc-200';
|
||||
const presenceDotClass = isPresentInCurrentRoom
|
||||
? 'bg-emerald-500'
|
||||
: isOnline
|
||||
? 'bg-sky-500'
|
||||
: 'bg-zinc-400';
|
||||
|
||||
const userProperties = useMemo(() =>
|
||||
{
|
||||
if(!userInfo) return null;
|
||||
|
||||
return [
|
||||
{
|
||||
localeKey: 'modtools.userinfo.userName',
|
||||
value: userInfo.userName,
|
||||
showOnline: true
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.cfhCount',
|
||||
value: userInfo.cfhCount.toString()
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.abusiveCfhCount',
|
||||
value: userInfo.abusiveCfhCount.toString()
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.cautionCount',
|
||||
value: userInfo.cautionCount.toString()
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.banCount',
|
||||
value: userInfo.banCount.toString()
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.lastSanctionTime',
|
||||
value: userInfo.lastSanctionTime
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.tradingLockCount',
|
||||
value: userInfo.tradingLockCount.toString()
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.tradingExpiryDate',
|
||||
value: userInfo.tradingExpiryDate
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.minutesSinceLastLogin',
|
||||
value: FriendlyTime.format(userInfo.minutesSinceLastLogin * 60, '.ago', 2)
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.lastPurchaseDate',
|
||||
value: userInfo.lastPurchaseDate
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.primaryEmailAddress',
|
||||
value: userInfo.primaryEmailAddress
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.identityRelatedBanCount',
|
||||
value: userInfo.identityRelatedBanCount.toString()
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.registrationAgeInMinutes',
|
||||
value: FriendlyTime.format(userInfo.registrationAgeInMinutes * 60, '.ago', 2)
|
||||
},
|
||||
{
|
||||
localeKey: 'modtools.userinfo.userClassification',
|
||||
value: userInfo.userClassification
|
||||
}
|
||||
];
|
||||
}, [ userInfo ]);
|
||||
const refresh = () => SendMessageComposer(new GetModeratorUserInfoMessageComposer(userId));
|
||||
|
||||
useMessageEvent<ModeratorUserInfoEvent>(ModeratorUserInfoEvent, event =>
|
||||
{
|
||||
@@ -95,6 +104,19 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
|
||||
setUserInfo(parser.data);
|
||||
});
|
||||
|
||||
// Refresh counters (cfhCount / banCount / cautionCount /
|
||||
// lastSanctionTime) after the moderator applies a sanction on THIS
|
||||
// user — otherwise the table stays frozen on the values at panel
|
||||
// open. Parser carries userId so we can filter precisely.
|
||||
useMessageEvent<ModeratorActionResultMessageEvent>(ModeratorActionResultMessageEvent, event =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
if(!parser || !parser.success || parser.userId !== userId) return;
|
||||
|
||||
refresh();
|
||||
});
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
SendMessageComposer(new GetModeratorUserInfoMessageComposer(userId));
|
||||
@@ -104,45 +126,73 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
|
||||
|
||||
return (
|
||||
<>
|
||||
<NitroCardView className="nitro-mod-tools-user" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardView className="nitro-mod-tools-user min-w-[420px] max-w-[480px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ () => onCloseClick() } />
|
||||
<NitroCardContentView className="text-black">
|
||||
<Grid overflow="hidden">
|
||||
<Column overflow="auto" size={ 8 }>
|
||||
<table className="table table-striped table-sm table-text-small text-black m-0">
|
||||
<tbody>
|
||||
{ userProperties.map( (property, index) =>
|
||||
{
|
||||
<NitroCardContentView className="text-black" gap={ 2 }>
|
||||
{/* Identity header: name + presence pill + manual refresh */}
|
||||
<div className="flex items-center gap-2 bg-gradient-to-r from-sky-50 to-transparent rounded p-2 border border-sky-100">
|
||||
<div className="flex flex-col grow min-w-0">
|
||||
<Text bold className="truncate text-base leading-tight">{ userInfo.userName }</Text>
|
||||
<Text className="opacity-60 text-xs truncate">ID #{ userInfo.userId }{ userInfo.userClassification ? ` · ${ userInfo.userClassification }` : '' }</Text>
|
||||
</div>
|
||||
<span
|
||||
className={ `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border ${ presencePillClass }` }
|
||||
title={ presenceTitle }>
|
||||
<span className={ `inline-block w-2 h-2 rounded-full ${ presenceDotClass }` } />
|
||||
{ presenceLabel }
|
||||
</span>
|
||||
<button
|
||||
className="inline-flex items-center justify-center w-7 h-7 rounded text-zinc-500 hover:text-sky-700 hover:bg-sky-100 transition-colors shrink-0"
|
||||
onClick={ refresh }
|
||||
title={ LocalizeText('modtools.userinfo.refresh') }>
|
||||
<FaSync size={ 12 } />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<tr key={ index }>
|
||||
<th scope="row">{ LocalizeText(property.localeKey) }</th>
|
||||
<td>
|
||||
{ property.value }
|
||||
{ property.showOnline &&
|
||||
<i className={ `icon icon-pf-${ userInfo.online ? 'online' : 'offline' } ms-2` } /> }
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}) }
|
||||
</tbody>
|
||||
</table>
|
||||
</Column>
|
||||
<Column gap={ 1 } size={ 4 }>
|
||||
<Button onClick={ event => CreateLinkEvent(`mod-tools/open-user-chatlog/${ userId }`) }>
|
||||
Room Chat
|
||||
</Button>
|
||||
<Button onClick={ event => setSendMessageVisible(!sendMessageVisible) }>
|
||||
Send Message
|
||||
</Button>
|
||||
<Button onClick={ event => setRoomVisitsVisible(!roomVisitsVisible) }>
|
||||
Room Visits
|
||||
</Button>
|
||||
<Button onClick={ event => setModActionVisible(!modActionVisible) }>
|
||||
Mod Action
|
||||
</Button>
|
||||
</Column>
|
||||
</Grid>
|
||||
{/* Moderation stat strip */}
|
||||
<div className="flex gap-1.5">
|
||||
<StatCard icon={ <FaExclamationTriangle size={ 10 } /> } label={ LocalizeText('modtools.userinfo.stat.cfh') } tone="warn" value={ userInfo.cfhCount } />
|
||||
<StatCard icon={ <FaGavel size={ 10 } /> } label={ LocalizeText('modtools.userinfo.stat.cautions') } tone="warn" value={ userInfo.cautionCount } />
|
||||
<StatCard icon={ <FaBan size={ 10 } /> } label={ LocalizeText('modtools.userinfo.stat.bans') } tone="danger" value={ userInfo.banCount } />
|
||||
<StatCard icon={ <FaExchangeAlt size={ 10 } /> } label={ LocalizeText('modtools.userinfo.stat.trade.locks') } tone="danger" value={ userInfo.tradingLockCount } />
|
||||
</div>
|
||||
|
||||
{/* Body sections */}
|
||||
<div className="flex flex-col gap-2 max-h-[300px] overflow-auto pr-1">
|
||||
<Section title={ LocalizeText('modtools.userinfo.section.account') }>
|
||||
<Field label={ LocalizeText('modtools.userinfo.primaryEmailAddress') } value={ userInfo.primaryEmailAddress } />
|
||||
<Field label={ LocalizeText('modtools.userinfo.registrationAgeInMinutes') } value={ FriendlyTime.format(userInfo.registrationAgeInMinutes * 60, '.ago', 2) } />
|
||||
<Field label={ LocalizeText('modtools.userinfo.userClassification') } value={ userInfo.userClassification } />
|
||||
</Section>
|
||||
<Section title={ LocalizeText('modtools.userinfo.section.activity') }>
|
||||
<Field label={ LocalizeText('modtools.userinfo.minutesSinceLastLogin') } value={ FriendlyTime.format(userInfo.minutesSinceLastLogin * 60, '.ago', 2) } />
|
||||
<Field label={ LocalizeText('modtools.userinfo.lastPurchaseDate') } value={ userInfo.lastPurchaseDate } />
|
||||
</Section>
|
||||
<Section title={ LocalizeText('modtools.userinfo.section.sanctions') }>
|
||||
<Field label={ LocalizeText('modtools.userinfo.abusiveCfhCount') } value={ userInfo.abusiveCfhCount } />
|
||||
<Field label={ LocalizeText('modtools.userinfo.lastSanctionTime') } value={ userInfo.lastSanctionTime } />
|
||||
<Field label={ LocalizeText('modtools.userinfo.identityRelatedBanCount') } value={ userInfo.identityRelatedBanCount } />
|
||||
</Section>
|
||||
<Section title={ LocalizeText('modtools.userinfo.section.trading') }>
|
||||
<Field label={ LocalizeText('modtools.userinfo.tradingExpiryDate') } value={ userInfo.tradingExpiryDate } />
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
{/* Action bar */}
|
||||
<div className="grid grid-cols-2 gap-1.5 pt-1 border-t border-zinc-200">
|
||||
<Button gap={ 1 } variant="secondary" onClick={ () => CreateLinkEvent(`mod-tools/open-user-chatlog/${ userId }`) }>
|
||||
<FaCommentDots size={ 12 } /> { LocalizeText('modtools.userinfo.button.room.chat') }
|
||||
</Button>
|
||||
<Button gap={ 1 } variant="secondary" onClick={ () => setSendMessageVisible(prev => !prev) }>
|
||||
<FaEnvelope size={ 12 } /> { LocalizeText('modtools.userinfo.button.send.message') }
|
||||
</Button>
|
||||
<Button gap={ 1 } variant="secondary" onClick={ () => setRoomVisitsVisible(prev => !prev) }>
|
||||
<FaDoorOpen size={ 12 } /> { LocalizeText('modtools.userinfo.button.room.visits') }
|
||||
</Button>
|
||||
<Button gap={ 1 } variant="danger" onClick={ () => setModActionVisible(prev => !prev) }>
|
||||
<FaGavel size={ 12 } /> { LocalizeText('modtools.userinfo.button.mod.action') }
|
||||
</Button>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
{ sendMessageVisible &&
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { CreateLinkEvent, Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait, YouTubeRoomSettingsEvent } from '@nitrots/nitro-renderer';
|
||||
import { AnimatePresence, motion, Variants } from 'framer-motion';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FC, useEffect, useMemo, useState } from 'react';
|
||||
import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
|
||||
import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
|
||||
import { useAchievements, useFriends, useHasPermission, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo, useWiredTools } from '../../hooks';
|
||||
import { useAchievements, useFriends, useHasPermission, useInventoryUnseenTracker, useMessageEvent, useMessenger, useModTools, useNitroEvent, useSessionInfo, useWiredTools } from '../../hooks';
|
||||
import { ToolbarItemView } from './ToolbarItemView';
|
||||
import { ToolbarMeView } from './ToolbarMeView';
|
||||
import { YouTubePlayerView } from './YouTubePlayerView';
|
||||
@@ -50,6 +50,14 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
const { iconState = MessengerIconState.HIDDEN } = useMessenger();
|
||||
const { openMonitor, showToolbarButton } = useWiredTools();
|
||||
const isMod = useHasPermission('acc_supporttool');
|
||||
// Surface the open-ticket count on the toolbar ModTools button so a
|
||||
// new CFH pings the mod even when the launcher itself is closed.
|
||||
// useBetween-shared state — no extra subscription cost.
|
||||
const { tickets = [] } = useModTools();
|
||||
const openTicketsCount = useMemo(
|
||||
() => isMod ? tickets.filter(ticket => ticket && (ticket.state === 1)).length : 0,
|
||||
[ isMod, tickets ]
|
||||
);
|
||||
const isVisible = (isToolbarOpen || !isInRoom);
|
||||
const visibilityVariant = isVisible ? 'visible' : 'hidden';
|
||||
|
||||
@@ -260,8 +268,10 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<motion.div variants={ itemVariants } className="relative">
|
||||
<ToolbarItemView icon="modtools" onClick={ () => CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
|
||||
{ (openTicketsCount > 0) &&
|
||||
<LayoutItemCountView count={ openTicketsCount } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
|
||||
</motion.div> }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
@@ -370,8 +380,10 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<motion.div variants={ itemVariants } className="relative">
|
||||
<ToolbarItemView icon="modtools" onClick={ () => CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
|
||||
{ (openTicketsCount > 0) &&
|
||||
<LayoutItemCountView count={ openTicketsCount } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
|
||||
</motion.div> }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
|
||||
Reference in New Issue
Block a user