+
+ );
+ }
+
// Skip server-not-found check for verify-email/verify/replay pages (needed for email verification flow)
- if (publicSettings?.serverExists === false && !location.startsWith('/verify-email') && !location.startsWith('/verify/') && !location.startsWith('/replay')) {
+ if (publicSettings?.serverExists === false && !isAlwaysReachablePath(location)) {
return (
Unable to reach the server
++ We couldn't load this page right now. This is usually temporary — please check your connection and try again. +
+ +
{isImage(item.fileType) ? (
@@ -184,13 +204,39 @@ export function EvidenceUpload({
{!readonly && (
-
+
+
+
+
+
+
+ {t('upload.deleteEvidenceTitle', 'Delete evidence?')}
+
+ {t('upload.deleteEvidenceConfirm', { name: item.fileName, defaultValue: 'This will permanently remove "{{name}}". This action cannot be undone.' })}
+
+
+
+ {t('common.cancel')}
+ handleDeleteEvidence(item)}
+ className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+ >
+ {t('common.delete')}
+
+
+
+
)}
diff --git a/client/src/components/MediaUpload.tsx b/client/src/components/MediaUpload.tsx
index 9044b16..83dbcb0 100644
--- a/client/src/components/MediaUpload.tsx
+++ b/client/src/components/MediaUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
import { Upload, X, FileText, Image, Video, File, Loader2, Check, AlertCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '@modl-gg/shared-web/components/ui/button';
@@ -19,7 +19,7 @@ interface MediaUploadProps {
maxFiles?: number;
acceptedTypes?: string[];
maxSizeBytes?: number;
- metadata?: Record
{isImage(attachment.fileType) && isTrustedCdnUrl(attachment.url) ? (
@@ -265,14 +306,52 @@ export function TicketAttachments({
{!readonly && (
-
+ publicMode ? (
+
+ ) : (
+
+
+
+
+
+
+ {t('upload.deleteAttachmentTitle', 'Delete attachment?')}
+
+ {t('upload.deleteAttachmentConfirm', { name: attachment.fileName, defaultValue: 'This will permanently remove "{{name}}". This action cannot be undone.' })}
+
+
+
+ {t('common.cancel')}
+ handleDeleteAttachment(attachment)}
+ className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+ >
+ {t('common.delete')}
+
+
+
+
+ )
)}
diff --git a/client/src/components/dashboard/AssignedTicketUpdatesSection.tsx b/client/src/components/dashboard/AssignedTicketUpdatesSection.tsx
index 5c7400a..47dc3f3 100644
--- a/client/src/components/dashboard/AssignedTicketUpdatesSection.tsx
+++ b/client/src/components/dashboard/AssignedTicketUpdatesSection.tsx
@@ -7,6 +7,7 @@ import { useLocation } from 'wouter';
import { formatTimeAgo } from '@/utils/date-utils';
import { stripMarkdown } from '@/utils/markdown-utils';
import { useTranslation } from 'react-i18next';
+import { StatusBadge } from '@/components/ui/status-badge';
const INITIAL_VISIBLE = 2;
const LOAD_MORE_COUNT = 2;
@@ -113,7 +114,7 @@ export function AssignedTicketUpdatesSection({
{updates.slice(0, visibleCount).map((update) => (
handleTicketClick(update.ticketId)}
>
@@ -169,16 +151,6 @@ export function RecentPunishmentsSection({ punishments, loading }: RecentPunishm
@@ -121,26 +122,23 @@ export function AssignedTicketUpdatesSection({
{update.ticketTitle}
{update.isStaffReply ? t('dashboard.assignedTickets.staff') : t('dashboard.assignedTickets.player')}
-
+
diff --git a/client/src/components/dashboard/DashboardAlertsSection.tsx b/client/src/components/dashboard/DashboardAlertsSection.tsx
new file mode 100644
index 0000000..fbc05d0
--- /dev/null
+++ b/client/src/components/dashboard/DashboardAlertsSection.tsx
@@ -0,0 +1,76 @@
+import { StatusBanner } from '@modl-gg/shared-web/components/ui/status-banner';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import type { SystemAlert, SystemAlertSeverity } from '@/hooks/use-data';
+
+interface DashboardAlertsSectionProps {
+ alerts?: SystemAlert[];
+}
+
+type AlertBannerVariant = 'info' | 'warning' | 'error';
+
+const severityVariant: Record = {
+ BASIC: 'info',
+ WARNING: 'warning',
+ CRITICAL: 'error',
+};
+
+function normalizeSeverity(severity: unknown): string | null {
+ if (typeof severity !== 'string' || severity.trim().length === 0) {
+ return null;
+ }
+
+ return severity.trim();
+}
+
+function isKnownSeverity(severity: string): severity is SystemAlertSeverity {
+ return severity === 'BASIC' || severity === 'WARNING' || severity === 'CRITICAL';
+}
+
+function getSeverityVariant(severity: unknown): AlertBannerVariant {
+ const normalizedSeverity = normalizeSeverity(severity);
+ if (!normalizedSeverity || !isKnownSeverity(normalizedSeverity)) {
+ return 'info';
+ }
+
+ return severityVariant[normalizedSeverity];
+}
+
+function getSeverityTitle(severity: unknown, t: ReturnType['t']) {
+ const normalizedSeverity = normalizeSeverity(severity);
+
+ if (!normalizedSeverity) {
+ return t('dashboard.alerts.unknownSeverity', { severity: t('dashboard.alerts.unknownSeverityValue') });
+ }
+
+ if (isKnownSeverity(normalizedSeverity)) {
+ return t(`dashboard.alerts.levels.${normalizedSeverity}`);
+ }
+
+ return t('dashboard.alerts.unknownSeverity', { severity: normalizedSeverity });
+}
+
+export function DashboardAlertsSection({ alerts = [] }: DashboardAlertsSectionProps) {
+ const { t } = useTranslation();
+
+ if (alerts.length === 0) {
+ return null;
+ }
+
+ return (
+
@@ -125,8 +107,8 @@ export function RecentPunishmentsSection({ punishments, loading }: RecentPunishm
)}
{!punishment.active && (
-
- EXPIRED
+
+ {t('status.inactive')}
)}
@@ -156,7 +138,7 @@ export function RecentPunishmentsSection({ punishments, loading }: RecentPunishm
{punishment.playerName}
- {punishment.type || t('dashboard.recentPunishments.punishment')} {t('dashboard.recentPunishments.by')} {punishment.issuerName || t('search.unknown')}
+ {punishment.type || t('dashboard.recentPunishments.punishment')} {t('dashboard.recentPunishments.by', { issuer: punishment.issuerName || t('search.unknown') })}
-
-
+
+ {alerts.map((alert) => (
+
+
+ ))}
+
+ );
+}
diff --git a/client/src/components/dashboard/RecentPunishmentsSection.tsx b/client/src/components/dashboard/RecentPunishmentsSection.tsx
index cf1b2d4..072d1f6 100644
--- a/client/src/components/dashboard/RecentPunishmentsSection.tsx
+++ b/client/src/components/dashboard/RecentPunishmentsSection.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@modl-gg/shared-web/components/ui/card';
import { Badge } from '@modl-gg/shared-web/components/ui/badge';
import { Button } from '@modl-gg/shared-web/components/ui/button';
-import { Shield, Clock, User, AlertTriangle, ChevronDown, ChevronUp } from 'lucide-react';
+import { Shield, User, AlertTriangle, ChevronDown, ChevronUp } from 'lucide-react';
import { usePlayerWindow } from '@/contexts/PlayerWindowContext';
import { formatTimeAgo } from '@/utils/date-utils';
import { useTranslation } from 'react-i18next';
@@ -13,7 +13,6 @@ export interface RecentPunishment {
playerName: string;
playerUuid: string;
reason: string;
- duration?: string | number;
issuerName: string;
issued: string | Date;
active: boolean;
@@ -43,23 +42,6 @@ export function RecentPunishmentsSection({ punishments, loading }: RecentPunishm
setExpandedPunishments(newExpanded);
};
- const formatDuration = (duration?: string | number) => {
- if (!duration) return t('dashboard.recentPunishments.permanent');
-
- // Convert to string if it's a number
- const durationStr = String(duration);
-
- // Parse duration like "30d", "2h", "1w"
- const match = durationStr.match(/^(\d+)([dhm])$/);
- if (!match) return durationStr;
-
- const [, amount, unit] = match;
- const unitNames = { d: 'day', h: 'hour', m: 'minute' };
- const unitName = unitNames[unit as keyof typeof unitNames];
-
- return `${amount} ${unitName}${parseInt(amount) > 1 ? 's' : ''}`;
- };
-
if (loading) {
return (
+ {alert.message}
+
+ {punishment.reason || t('dashboard.recentPunishments.noReason')}
- {punishment.duration && ( -
- {t('dashboard.recentPunishments.duration')}
-
- )}
-
-
- {ticket.title}
{ticket.priority && (
-
+
{ticket.priority.toUpperCase()}
-
+
)}
{ticket.status && (
-
+
{ticket.status.replace('_', ' ').toUpperCase()}
-
+
)}
{
handleTicketClick(update.ticketId);
}}
@@ -138,26 +139,23 @@ export function TicketSubscriptionsSection({
{update.ticketTitle}
{update.isStaffReply ? t('dashboard.subscriptions.staff') : t('dashboard.subscriptions.player')}
-
+
@@ -170,6 +168,7 @@ export function TicketSubscriptionsSection({
handleUnsubscribe(update.ticketId, update.ticketTitle);
}}
title="Unsubscribe"
+ aria-label="Unsubscribe"
>
= ({ name, description, articles, slug }) => {
return (
);
diff --git a/client/src/components/player-replays-list.tsx b/client/src/components/player-replays-list.tsx
new file mode 100644
index 0000000..45664d5
--- /dev/null
+++ b/client/src/components/player-replays-list.tsx
@@ -0,0 +1,127 @@
+import { Loader2, Play, TriangleAlert } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Badge } from '@modl-gg/shared-web/components/ui/badge';
+import { Button } from '@modl-gg/shared-web/components/ui/button';
+import { usePlayerReplays } from '@/hooks/use-data';
+import { formatDateWithTime } from '@/utils/date-utils';
+import { formatFileSize } from '@/utils/file-utils';
+
+interface PlayerReplaysListProps {
+ playerId: string;
+}
+
+const isRawReplayId = (replayReference: string) => (
+ !replayReference.includes('://')
+ && !replayReference.includes('/')
+ && !replayReference.includes('?')
+ && !replayReference.includes('#')
+);
+
+const getReplayIdFromReference = (replayUrl?: string) => {
+ const replayReference = replayUrl?.trim();
+ if (!replayReference) {
+ return '';
+ }
+
+ if (isRawReplayId(replayReference)) {
+ return replayReference;
+ }
+
+ try {
+ const parsedReplayUrl = new URL(replayReference, window.location.origin);
+ return parsedReplayUrl.searchParams.get('id') || '';
+ } catch {
+ return '';
+ }
+};
+
+const getReplayId = (replay: { replayId?: string; replayUrl?: string; matchSource?: string }) => {
+ if (replay.matchSource === 'TICKET_FALLBACK') {
+ return getReplayIdFromReference(replay.replayUrl) || replay.replayId || '';
+ }
+
+ return replay.replayId || getReplayIdFromReference(replay.replayUrl);
+};
+
+const PlayerReplaysList = ({ playerId }: PlayerReplaysListProps) => {
+ const { t } = useTranslation();
+ const { data: replays, isLoading, error } = usePlayerReplays(playerId);
+
+ if (isLoading) {
+ return (
+
-
-
+
-
);
diff --git a/client/src/components/layout/MobileNavbar.tsx b/client/src/components/layout/MobileNavbar.tsx
index af3503a..8b0af52 100644
--- a/client/src/components/layout/MobileNavbar.tsx
+++ b/client/src/components/layout/MobileNavbar.tsx
@@ -7,10 +7,20 @@ import {
AlertCircle,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
+import { useIsFetching } from '@tanstack/react-query';
+import { usePermissions, PERMISSIONS } from '@/hooks/use-permissions';
+import { useAuth } from '@/hooks/use-auth';
const MobileNavbar = () => {
const { t } = useTranslation();
const [location, navigate] = useLocation();
+ const { hasPermission } = usePermissions();
+ const { user } = useAuth();
+
+ // Mirror Sidebar's loading-flash guard so permission-gated items don't appear
+ // before the user's permissions have loaded.
+ const fetchingCount = useIsFetching({ queryKey: ['userPermissions', user?.role] });
+ const permissionsLoading = fetchingCount > 0;
const isActive = (path: string) => {
return location === path
@@ -18,7 +28,7 @@ const MobileNavbar = () => {
: "text-muted-foreground";
};
- const navItems = [
+ const allNavItems = [
{
icon: {name}
- {description &&{description}
} +{name}
+ {description &&{description}
} {articles && articles.length > 0 ? (-
{articles.map(article => (
- - + {article.title} ))}
No articles in this category yet.
+No articles in this category yet.
)}
- {
- // Close this specific window
- closePlayerWindow(playerId);
-
- // Update URL parameters - we keep other players in the URL
- const url = new URL(window.location.href);
- url.searchParams.delete("player");
-
- // If we have other windows open, add the first one to the URL
- const remainingPlayers = Object.keys(playerWindows).filter(
- (id) => id !== playerId,
- );
- if (remainingPlayers.length > 0) {
- url.searchParams.set("player", remainingPlayers[0]);
- }
-
- window.history.pushState({}, "", url.toString());
- }}
- />
- ))}
+
)}
- {/* Render multiple player windows with offset positioning */}
- {Object.entries(playerWindows).map(([playerId, isOpen], index) => (
-
{navItems.map((item, index) => (
void;
onRefresh?: () => void;
isRefreshing?: boolean;
@@ -30,6 +31,7 @@ const ResizableWindow = ({
isOpen,
initialPosition = { x: '50%', y: '50%' },
initialSize = { width: 600, height: 500 },
+ minSize = { width: 300, height: 200 },
onClose,
onRefresh,
isRefreshing,
@@ -38,75 +40,87 @@ const ResizableWindow = ({
const windowRef = useRef(null);
const headerRef = useRef(null);
const minimizedHeaderRef = useRef(null);
+ const initialPositionRef = useRef(initialPosition);
const [isDragging, setIsDragging] = useState(false);
const [position, setPosition] = useState(initialPosition);
const [size, setSize] = useState(initialSize);
+ const positionRef = useRef(position);
+ const sizeRef = useRef(size);
const [isMaximized, setIsMaximized] = useState(false);
const [isMinimized, setIsMinimized] = useState(false);
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
- const [windowOffset, setWindowOffset] = useState({ x: 0, y: 0 });
const [windowBeforeMinimize, setWindowBeforeMinimize] = useState<{
position: WindowPosition;
size: { width: number; height: number };
}>({ position: initialPosition, size: initialSize });
const [isInitialized, setIsInitialized] = useState(false);
+ useEffect(() => {
+ positionRef.current = position;
+ }, [position]);
+
+ useEffect(() => {
+ sizeRef.current = size;
+ }, [size]);
+
// Initialize position once
useEffect(() => {
if (!isOpen || !windowRef.current || isInitialized) return;
-
-// Use the global last known window configuration for player windows
+
+ const initial = initialPositionRef.current;
+
+ // Use the global last known window configuration for player windows
if (id.startsWith('player-')) {
- // Apply the size from the last window
+ // Apply the size from the last window
setSize(lastPlayerWindowConfig.size);
-
+
// Stagger the position slightly for multiple windows
const offset = 20;
const totalOpen = document.querySelectorAll('.resizable-window').length - 1;
-
- if (typeof lastPlayerWindowConfig.position.x === 'number' &&
+
+ if (typeof lastPlayerWindowConfig.position.x === 'number' &&
typeof lastPlayerWindowConfig.position.y === 'number') {
- setPosition({
+ setPosition({
x: lastPlayerWindowConfig.position.x + (offset * totalOpen),
y: lastPlayerWindowConfig.position.y + (offset * totalOpen)
});
} else {
setPosition(lastPlayerWindowConfig.position);
}
-
+
setIsInitialized(true);
}
// Center the window if initial position is percentage based
- if (typeof initialPosition.x === 'string' && initialPosition.x.includes('%')) {
+ if (typeof initial.x === 'string' && initial.x.includes('%')) {
const windowWidth = windowRef.current.offsetWidth;
const windowHeight = windowRef.current.offsetHeight;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
-
+
// Safe parsing of percentage values
let xPercent = 0.5; // Default to 50%
let yPercent = 0.5; // Default to 50%
-
- if (typeof initialPosition.x === 'string') {
- const parsedX = parseFloat(initialPosition.x);
+
+ if (typeof initial.x === 'string') {
+ const parsedX = parseFloat(initial.x);
if (!isNaN(parsedX)) {
xPercent = parsedX / 100;
}
}
-
- if (typeof initialPosition.y === 'string') {
- const parsedY = parseFloat(initialPosition.y);
+
+ if (typeof initial.y === 'string') {
+ const parsedY = parseFloat(initial.y);
if (!isNaN(parsedY)) {
yPercent = parsedY / 100;
}
}
-
+
const xPos = viewportWidth * xPercent - windowWidth * xPercent;
const yPos = viewportHeight * yPercent - windowHeight * yPercent;
-
+
setPosition({ x: xPos, y: yPos });
setIsInitialized(true);
-
+
// Store this as the last known configuration if it's a player window
if (id.startsWith('player-')) {
// Update the global config
@@ -114,7 +128,7 @@ const ResizableWindow = ({
lastPlayerWindowConfig.position = { x: xPos, y: yPos };
}
}
- }, [isOpen, initialPosition, isInitialized, id]);
+ }, [isOpen, isInitialized, id]);
// Handle dragging
useEffect(() => {
@@ -138,14 +152,14 @@ const ResizableWindow = ({
const handleMouseUp = () => {
setIsDragging(false);
-
+
// Save position for new windows
if (id.startsWith('player-')) {
- // Update the global window state
- lastPlayerWindowConfig.size = size;
+ // Update the global window state using freshest values via refs
+ lastPlayerWindowConfig.size = sizeRef.current;
lastPlayerWindowConfig.position = {
- x: typeof position.x === 'number' ? position.x : 0,
- y: typeof position.y === 'number' ? position.y : 0
+ x: typeof positionRef.current.x === 'number' ? positionRef.current.x : 0,
+ y: typeof positionRef.current.y === 'number' ? positionRef.current.y : 0
};
}
};
@@ -159,7 +173,7 @@ const ResizableWindow = ({
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
- }, [isDragging, dragStart]);
+ }, [isDragging, dragStart, id]);
const handleMouseDown = (e: React.MouseEvent) => {
if (!windowRef.current) return;
@@ -172,29 +186,6 @@ const ResizableWindow = ({
});
};
- const handleMaximize = () => {
- if (isMinimized) {
- // If minimized, restore to normal first
- handleMinimize();
- }
-
- if (isMaximized) {
- // Restore
- setIsMaximized(false);
- setPosition({ x: windowOffset.x, y: windowOffset.y });
- setSize(initialSize);
- } else {
- // Maximize
- setIsMaximized(true);
- setWindowOffset({
- x: typeof position.x === 'number' ? position.x : 0,
- y: typeof position.y === 'number' ? position.y : 0
- });
- setPosition({ x: 0, y: 0 });
- setSize({ width: window.innerWidth, height: window.innerHeight });
- }
- };
-
const handleMinimize = () => {
if (isMinimized) {
// Restore from minimized state
@@ -260,14 +251,14 @@ const ResizableWindow = ({
const handleMouseMove = (moveEvent: MouseEvent) => {
// Handle right side resizing
if (direction.includes('right')) {
- const newWidth = Math.max(300, startWidth + (moveEvent.clientX - startX));
+ const newWidth = Math.max(minSize.width, startWidth + (moveEvent.clientX - startX));
setSize(prev => ({ ...prev, width: newWidth }));
}
-
+
// Handle left side resizing
if (direction.includes('left')) {
const deltaX = startX - moveEvent.clientX;
- if (startWidth + deltaX >= 300) {
+ if (startWidth + deltaX >= minSize.width) {
setSize(prev => ({ ...prev, width: startWidth + deltaX }));
setPosition(prev => ({
...prev,
@@ -278,14 +269,14 @@ const ResizableWindow = ({
// Handle bottom side resizing
if (direction.includes('bottom')) {
- const newHeight = Math.max(200, startHeight + (moveEvent.clientY - startY));
+ const newHeight = Math.max(minSize.height, startHeight + (moveEvent.clientY - startY));
setSize(prev => ({ ...prev, height: newHeight }));
}
-
+
// Handle top side resizing
if (direction.includes('top')) {
const deltaY = startY - moveEvent.clientY;
- if (startHeight + deltaY >= 200) {
+ if (startHeight + deltaY >= minSize.height) {
setSize(prev => ({ ...prev, height: startHeight + deltaY }));
setPosition(prev => ({
...prev,
diff --git a/client/src/components/layout/Sidebar.tsx b/client/src/components/layout/Sidebar.tsx
index c4e9d6e..cdaa825 100644
--- a/client/src/components/layout/Sidebar.tsx
+++ b/client/src/components/layout/Sidebar.tsx
@@ -1,7 +1,7 @@
import { useLocation } from "wouter";
import { cn } from "@/lib/utils";
import { useSidebar } from "@/hooks/use-sidebar";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import {
Home,
@@ -19,35 +19,57 @@ import {
import { Button } from "@modl-gg/shared-web/components/ui/button";
import { Input } from "@modl-gg/shared-web/components/ui/input";
import { useDashboard } from "@/contexts/DashboardContext";
-import PlayerWindow from "../../components/windows/PlayerWindow";
+import { usePlayerWindow } from "@/contexts/PlayerWindowContext";
import serverLogo from "../../assets/server-logo.png";
import { usePublicSettings } from "@/hooks/use-public-settings";
import { usePunishmentLookup } from "@/hooks/use-player-lookup";
import { usePermissions, PERMISSIONS } from "@/hooks/use-permissions";
import { useAuth } from "@/hooks/use-auth";
import { usePlayerSearch } from "@/hooks/use-data";
-import { useQuery } from '@tanstack/react-query';
+import { useIsFetching } from '@tanstack/react-query';
import { queryClient } from "@/lib/queryClient";
-import { apiFetch } from "@/lib/api";
+import { protoFetch } from "@/lib/proto-fetch";
+import { toNum } from "@/lib/proto-ui";
+import {
+ DashboardRecentTicketsResponseSchema,
+ DashboardRecentPunishmentsResponseSchema,
+} from "@modl-gg/proto/modl/v1/dashboard_pb.ts";
+import { PaginatedTicketsResponseSchema } from "@modl-gg/proto/modl/v1/ticket_pb.ts";
+import { PanelPunishmentTypesResponseSchema } from "@modl-gg/proto/modl/v1/settings_pb.ts";
+
+interface Player {
+ uuid?: string;
+ minecraftUuid?: string;
+ username?: string;
+ status?: string;
+ lastOnline?: string;
+ isOnline?: boolean;
+ online?: boolean;
+ data?: { isOnline?: boolean };
+}
+
+const HOME_ICON = >([]);
@@ -85,52 +107,34 @@ const Sidebar = () => {
// Function to handle player selection and update recent searches
const handlePlayerSelect = (player: Player) => {
const uuid = getPlayerUuid(player);
-
+
if (!uuid) return; // Guard against empty UUID
-
+
// Update recent searches
const timestamp = Date.now();
const existing = recentSearches.filter(s => getPlayerUuid(s.player) !== uuid);
const newSearches = [{player, timestamp}, ...existing].slice(0, 10);
setRecentSearches(newSearches);
-
+
// Save to localStorage
localStorage.setItem('recentPlayerSearches', JSON.stringify(newSearches));
-
+
// Open player window and close lookup
const url = new URL(window.location.href);
url.searchParams.set("player", uuid);
window.history.pushState({}, "", url.toString());
- openPlayerWindow(uuid);
+ openPlayerWindow(uuid, player.username);
closeLookup();
};
- // Track multiple windows with a map of id -> isOpen state
- const [playerWindows, setPlayerWindows] = useState>(
- {},
- );
const closeTimeoutRef = useRef(null);
// Function to open player window when clicked from search
- const openPlayerWindow = (playerId: string) => {
- // Add this window to our tracked windows
- setPlayerWindows((prev) => ({
- ...prev,
- [playerId]: true, // Set this player's window to open
- }));
+ const openPlayerWindow = (playerId: string, username?: string) => {
+ openPlayerWindowFromContext(playerId, username);
openDashboardLookupWindow(); // Also open at dashboard level for tracking
};
- // Function to close a specific player window
- const closePlayerWindow = (playerId: string) => {
- setPlayerWindows((prev) => {
- // Create a new object excluding this player
- const newWindows = { ...prev };
- delete newWindows[playerId];
- return newWindows;
- });
- };
-
const openLookup = () => {
if (!isLookupOpen && !isLookupClosing) {
setIsLookupOpen(true);
@@ -191,14 +195,10 @@ const Sidebar = () => {
const playerIdFromUrl = url.searchParams.get("player");
if (playerIdFromUrl) {
- // Open this player's window
- setPlayerWindows((prev) => ({
- ...prev,
- [playerIdFromUrl]: true,
- }));
+ openPlayerWindowFromContext(playerIdFromUrl);
openDashboardLookupWindow();
}
- }, [openDashboardLookupWindow]);
+ }, [openDashboardLookupWindow, openPlayerWindowFromContext]);
// Clean up any timeouts when component unmounts
useEffect(() => {
@@ -209,48 +209,101 @@ const Sidebar = () => {
};
}, []);
+ // IMPORTANT: prefetch must decode + map identically to the real data hooks
+ // (useRecentTickets/useRecentPunishments/useTickets/usePunishmentTypes), since
+ // react-query keys purely by queryKey. Storing the raw proto-JSON wrapper here
+ // would let a hover-then-navigate serve a wrong-shaped cached value and crash
+ // the consuming page.
const prefetchRouteData = (path: string) => {
- const prefetchFn = async (url: string) => {
- const res = await apiFetch(url);
- if (!res.ok) throw new Error('Prefetch failed');
- return res.json();
- };
-
switch (path) {
case '/panel':
queryClient.prefetchQuery({
queryKey: ['/v1/panel/dashboard/recent-tickets', 3],
- queryFn: () => prefetchFn('/v1/panel/dashboard/recent-tickets?limit=3'),
+ queryFn: async () => {
+ const res = await protoFetch(
+ DashboardRecentTicketsResponseSchema,
+ '/v1/panel/dashboard/recent-tickets?limit=3',
+ );
+ return res.tickets.map((ticket) => ({
+ id: ticket.id,
+ title: ticket.title,
+ initialMessage: ticket.initialMessage,
+ status: ticket.status,
+ priority: ticket.priority,
+ createdAt: new Date(toNum(ticket.createdAt)),
+ playerName: ticket.playerName,
+ type: ticket.type,
+ }));
+ },
staleTime: 2 * 60 * 1000,
});
queryClient.prefetchQuery({
queryKey: ['/v1/panel/dashboard/recent-punishments', 5],
- queryFn: () => prefetchFn('/v1/panel/dashboard/recent-punishments?limit=5'),
+ queryFn: async () => {
+ const res = await protoFetch(
+ DashboardRecentPunishmentsResponseSchema,
+ '/v1/panel/dashboard/recent-punishments?limit=5',
+ );
+ return res.punishments.map((punishment) => ({
+ id: punishment.id,
+ playerName: punishment.playerName,
+ playerUuid: punishment.playerUuid,
+ type: punishment.type,
+ reason: punishment.reason,
+ issuerName: punishment.issuerName,
+ issued: new Date(toNum(punishment.issued)),
+ active: punishment.active,
+ }));
+ },
staleTime: 2 * 60 * 1000,
});
break;
case '/panel/tickets':
queryClient.prefetchQuery({
queryKey: ['/v1/panel/tickets', { page: 1, limit: 10, search: '', status: '', types: [], author: '', labels: [], assignees: [], sort: 'newest' }],
- queryFn: () => prefetchFn('/v1/panel/tickets?page=1&limit=10&sort=newest'),
+ queryFn: async () => {
+ const response = await protoFetch(
+ PaginatedTicketsResponseSchema,
+ '/v1/panel/tickets?page=1&limit=10&sort=newest',
+ );
+ return {
+ tickets: response.tickets.map((item) => ({
+ ...item,
+ date: Number(item.date),
+ lastReply: item.lastReply
+ ? { ...item.lastReply, created: Number(item.lastReply.created) }
+ : undefined,
+ })),
+ pagination: response.pagination
+ ? { ...response.pagination, totalTickets: Number(response.pagination.totalTickets) }
+ : undefined,
+ filters: response.filters,
+ };
+ },
staleTime: 30000,
});
break;
case '/panel/settings':
queryClient.prefetchQuery({
queryKey: ['/v1/panel/settings/punishment-types'],
- queryFn: () => prefetchFn('/v1/panel/settings/punishment-types'),
+ queryFn: async () => {
+ const response = await protoFetch(
+ PanelPunishmentTypesResponseSchema,
+ '/v1/panel/settings/punishment-types',
+ );
+ return response.punishmentTypes;
+ },
staleTime: 5 * 60 * 1000,
});
break;
}
};
- const allNavItems = [
+ const allNavItems = useMemo(() => [
{
name: t('nav.home'),
path: "/panel",
- icon:
@@ -601,9 +645,9 @@ const Sidebar = () => {
{recentSearches
.sort((a, b) => b.timestamp - a.timestamp)
.slice(0, 5)
- .map(({player}, index) => (
+ .map(({player}) => (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (!replays || replays.length === 0) {
+ return (
+
+
+ );
+ }
+
+ return (
+ {t('player.noReplays')}
+
+ {replays.map((replay) => {
+ const replayId = getReplayId(replay);
+ const canOpenReplay = Boolean(replayId)
+ && (replay.matchSource === 'TICKET_FALLBACK' || replay.status === 'COMPLETE');
+
+ return (
+
+ );
+};
+
+export default PlayerReplaysList;
diff --git a/client/src/components/settings/AccountSettings.tsx b/client/src/components/settings/AccountSettings.tsx
index 4cd1996..606ae26 100644
--- a/client/src/components/settings/AccountSettings.tsx
+++ b/client/src/components/settings/AccountSettings.tsx
@@ -1,7 +1,17 @@
import React, { useState, useEffect } from 'react';
-import { LogOut, Monitor, Smartphone } from 'lucide-react';
+import { Loader2, LogOut, Monitor, Smartphone } from 'lucide-react';
import PasskeySettings from './PasskeySettings';
import { Button } from '@modl-gg/shared-web/components/ui/button';
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from '@modl-gg/shared-web/components/ui/alert-dialog';
import { Input } from '@modl-gg/shared-web/components/ui/input';
import { Label } from '@modl-gg/shared-web/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@modl-gg/shared-web/components/ui/select';
@@ -9,6 +19,7 @@ import { useToast } from '@modl-gg/shared-web/hooks/use-toast';
import { useAuth } from '@/hooks/use-auth';
import { useTranslation } from 'react-i18next';
import { apiFetch } from '@/lib/api';
+import { SUPPORTED_LANGUAGES } from '@/lib/languages';
interface AccountSettingsProps {
profileUsername: string;
@@ -51,29 +62,56 @@ function isMobileUserAgent(ua: string): boolean {
return /Android|iPhone|iPad|Mobile/.test(ua);
}
-function SessionsSection({ onSignOutAll }: { onSignOutAll: () => void }) {
+function SessionsSection() {
const { t } = useTranslation();
const { toast } = useToast();
+ const { logout, signOutAllSessions } = useAuth();
const [sessions, setSessions] = useState
+
+ );
+ })}
+
+
+
+
+
+
+
+ {replay.status}
+
+ )}
+ {replay.matchSource && (
+
+ {replay.matchSource}
+
+ )}
+
+
+ {t('player.replayCreated')}: {replay.createdAt ? formatDateWithTime(replay.createdAt) : t('common.unknown')}
+ {t('player.replayMcVersion')}: {replay.mcVersion || t('common.unknown')}
+ {t('player.replaySize')}: {typeof replay.fileSize === 'number' ? formatFileSize(replay.fileSize) : t('common.unknown')}
+ {t('player.replayId')}: {replayId || t('common.unknown')}
+
+ Sessions
+{t('settings.sessions.title')}
Loading…
+{t('settings.sessions.loading')}
+ ) : loadError ? ( +{t('settings.sessions.loadFailed')}
) : sessions.length === 0 ? ( -No active sessions.
+{t('settings.sessions.empty')}
) : (
{sessions.map((s) => {
@@ -105,13 +145,24 @@ function SessionsSection({ onSignOutAll }: { onSignOutAll: () => void }) {
+
{browser} on {os} {s.isCurrent && ( - Current + {t('settings.sessions.current')} )}
{s.ipAddress ?? 'Unknown IP'} · Added {added}
- setEmailCode(e.target.value)}
- placeholder="Enter code"
- className="max-w-[160px]"
- onKeyDown={(e) => { if (e.key === 'Enter') handleConfirmEmailChange(); }}
- />
-
-
+
= ({
}) => {
const ref = useRef(null);
- const [{ handlerId }, drop] = useDrop({
+ const [{ handlerId }, drop] = useDrop({
accept: ItemTypes.ARTICLE,
collect(monitor) {
return {
diff --git a/client/src/components/settings/AssignMinecraftPlayerModal.tsx b/client/src/components/settings/AssignMinecraftPlayerModal.tsx
index 32b8fb5..1a06b9f 100644
--- a/client/src/components/settings/AssignMinecraftPlayerModal.tsx
+++ b/client/src/components/settings/AssignMinecraftPlayerModal.tsx
@@ -29,7 +29,7 @@ const AssignMinecraftPlayerModal: React.FC = ({
staffMember
}) => {
const { t } = useTranslation();
- const [selectedPlayerUuid, setSelectedPlayerUuid] = useState('');
+ const [selectedPlayerUuid, setSelectedPlayerUuid] = useState('');
const [searchQuery, setSearchQuery] = useState('');
const { toast } = useToast();
@@ -41,17 +41,14 @@ const AssignMinecraftPlayerModal: React.FC = ({
const assignedUuids = useMemo(() => {
if (!staff) return [];
return staff
- .filter((member: any) => member.assignedMinecraftUuid)
- .map((member: any) => member.assignedMinecraftUuid);
+ .filter((member) => member.assignedMinecraftUuid)
+ .map((member) => member.assignedMinecraftUuid);
}, [staff]);
// Filter out already assigned players from search results
const availablePlayers = useMemo(() => {
if (!searchResults) return [];
- return searchResults.filter((player: any) => {
- const playerUuid = player.uuid || player.minecraftUuid;
- return !assignedUuids.includes(playerUuid);
- });
+ return searchResults.filter((player) => !assignedUuids.includes(player.uuid));
}, [searchResults, assignedUuids]);
const handleAssign = async () => {
@@ -66,16 +63,13 @@ const AssignMinecraftPlayerModal: React.FC = ({
return;
}
- const selectedPlayer = availablePlayers.find((p: any) => {
- const playerUuid = p.uuid || p.minecraftUuid;
- return playerUuid === selectedPlayerUuid;
- });
+ const selectedPlayer = availablePlayers.find((p) => p.uuid === selectedPlayerUuid);
if (!selectedPlayer) return;
try {
await assignPlayerMutation.mutateAsync({
- username: staffMember.username,
- minecraftUuid: selectedPlayer.uuid || selectedPlayer.minecraftUuid,
+ email: staffMember.email,
+ minecraftUuid: selectedPlayer.uuid,
minecraftUsername: selectedPlayer.username
});
@@ -100,7 +94,7 @@ const AssignMinecraftPlayerModal: React.FC = ({
try {
await assignPlayerMutation.mutateAsync({
- username: staffMember.username,
+ email: staffMember.email,
minecraftUuid: undefined,
minecraftUsername: undefined
});
@@ -207,8 +201,8 @@ const AssignMinecraftPlayerModal: React.FC = ({
@@ -186,13 +196,17 @@ const PunishmentSettings = ({
min={1}
max={20}
step={1}
- onValueChange={values => setStatusThresholds(prev => ({
- ...prev,
- social: {
- ...prev.social,
- medium: values[0]
- }
- }))}
+ onValueChange={values => {
+ const medium = values[0] ?? statusThresholds.social.medium;
+ setStatusThresholds(prev => ({
+ ...prev,
+ social: {
+ ...prev.social,
+ medium,
+ habitual: Math.max(prev.social.habitual, medium + 1)
+ }
+ }));
+ }}
/>
@@ -207,13 +221,16 @@ const PunishmentSettings = ({
min={statusThresholds.social.medium + 1}
max={30}
step={1}
- onValueChange={values => setStatusThresholds(prev => ({
- ...prev,
- social: {
- ...prev.social,
- habitual: values[0]
- }
- }))}
+ onValueChange={values => {
+ const habitual = values[0] ?? statusThresholds.social.habitual;
+ setStatusThresholds(prev => ({
+ ...prev,
+ social: {
+ ...prev.social,
+ habitual
+ }
+ }));
+ }}
/>
@@ -228,13 +245,16 @@ const PunishmentSettings = ({
min={1}
max={60}
step={1}
- onValueChange={values => setStatusThresholds(prev => ({
- ...prev,
- social: {
- ...prev.social,
- pointExpiryMonths: values[0]
- }
- }))}
+ onValueChange={values => {
+ const pointExpiryMonths = values[0] ?? statusThresholds.social.pointExpiryMonths;
+ setStatusThresholds(prev => ({
+ ...prev,
+ social: {
+ ...prev.social,
+ pointExpiryMonths
+ }
+ }));
+ }}
/>
diff --git a/client/src/components/settings/StaffManagementPanel.tsx b/client/src/components/settings/StaffManagementPanel.tsx
index 1776d01..b668985 100644
--- a/client/src/components/settings/StaffManagementPanel.tsx
+++ b/client/src/components/settings/StaffManagementPanel.tsx
@@ -1,14 +1,13 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQueryClient } from '@tanstack/react-query';
-import { useAuth } from '@/hooks/use-auth';
import { usePermissions } from '@/hooks/use-permissions';
import { apiFetch } from '@/lib/api';
import { Button } from '@modl-gg/shared-web/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@modl-gg/shared-web/components/ui/card';
import ChangeRoleModal from './ChangeRoleModal';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@modl-gg/shared-web/components/ui/table';
-import { useStaff, useRoles } from '@/hooks/use-data';
+import { useStaff } from '@/hooks/use-data';
import { Skeleton } from '@modl-gg/shared-web/components/ui/skeleton';
import { MoreHorizontal, RefreshCw, User } from 'lucide-react';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@modl-gg/shared-web/components/ui/dropdown-menu';
@@ -29,18 +28,9 @@ interface StaffMember {
assignedMinecraftUsername?: string;
}
-// Role interface to match the one from StaffRolesCard
-interface Role {
- id: string;
- name: string;
- order?: number;
-}
-
const StaffManagementPanel = () => {
const { t } = useTranslation();
- const { data: staff, isLoading, error, refetch: refetchStaff, isRefetching } = useStaff();
- const { data: rolesData } = useRoles();
- const { user: currentUser } = useAuth();
+ const { data: staff, isLoading, error, refetch: refetchStaff } = useStaff();
const { hasPermission, canModifyUserRole, canRemoveStaffUser, canAssignStaffMinecraftPlayer } = usePermissions();
// Helper function to check if there are any available actions for a staff member
@@ -120,10 +110,10 @@ const StaffManagementPanel = () => {
});
if (!response.ok) {
- const errorData = await response.json().catch(() => ({ message: t('settings.staff.removeStaffFailed') }));
+ const errorData = await response.json().catch(() => ({}));
toast({
title: t('toast.error'),
- description: errorData.message || t('settings.staff.removeStaffFailed'),
+ description: errorData.error || errorData.message || t('settings.staff.removeStaffFailed'),
variant: 'destructive',
});
return;
@@ -149,8 +139,8 @@ const StaffManagementPanel = () => {
method: 'POST',
});
if (!response.ok) {
- const errorData = await response.json().catch(() => ({ message: t('settings.staff.resendInvitationFailed') }));
- throw new Error(errorData.message);
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.error || errorData.message || t('settings.staff.resendInvitationFailed'));
}
toast({
title: t('toast.success'),
diff --git a/client/src/components/settings/StaffRolesCard.tsx b/client/src/components/settings/StaffRolesCard.tsx
index 40735fd..a8244ae 100644
--- a/client/src/components/settings/StaffRolesCard.tsx
+++ b/client/src/components/settings/StaffRolesCard.tsx
@@ -70,6 +70,7 @@ const DEFAULT_PERMISSIONS: Permission[] = [
{ id: 'admin.audit.view.logs', name: 'View Logs', description: 'View audit trail of staff actions', category: 'admin', parentId: 'admin.audit.view' },
// Punishment permissions
+ { id: 'punishment.view', name: 'View Punishments', description: 'View player profiles, punishments, and linked accounts', category: 'punishment', parentId: null },
{ id: 'punishment.modify', name: 'Modify Punishments', description: 'Full control over existing punishments (includes all sub-permissions)', category: 'punishment', parentId: null },
{ id: 'punishment.modify.pardon', name: 'Pardon Punishments', description: 'Pardon punishments and clear associated points', category: 'punishment', parentId: 'punishment.modify' },
{ id: 'punishment.modify.duration', name: 'Modify Duration', description: 'Change punishment duration', category: 'punishment', parentId: 'punishment.modify' },
@@ -177,14 +178,14 @@ const DraggableRoleCard: React.FC
+
)}
+ setEmailCode(e.target.value)}
+ placeholder="Enter code"
+ className="max-w-[160px]"
+ onKeyDown={(e) => { if (e.key === 'Enter') handleConfirmEmailChange(); }}
+ />
+
+
+
+ + {t('settings.emailChangeWarning')} +
@@ -313,10 +399,9 @@ const AccountSettings = ({
@@ -348,7 +433,7 @@ const AccountSettings = ({ {/* MIDDLE: passkeys + sessions */}
{t('settings.staff.foundAvailablePlayers', { count: availablePlayers.length })}
- {availablePlayers.map((player: any) => {
- const playerUuid = player.uuid || player.minecraftUuid;
+ {availablePlayers.map((player) => {
+ const playerUuid = player.uuid;
return (
{t('common.loadingUser')}
;
- }
-
// Update local roles when server data changes
useEffect(() => {
if (effectiveRoles.length > 0) {
@@ -385,6 +385,12 @@ export default function StaffRolesCard() {
}
}, [effectiveRoles]);
+ // Guard placed AFTER all hook declarations so the hook count never changes
+ // between renders (Rules of Hooks).
+ if (!currentUser) {
+ return {t('common.loadingUser')}
;
+ }
+
// Handle drag start
const handleDragStart = () => {
setIsDragInProgress(true);
@@ -403,7 +409,8 @@ export default function StaffRolesCard() {
const moveRole = (dragIndex: number, hoverIndex: number) => {
const newRoles = [...localRoles];
const draggedRole = newRoles[dragIndex];
-
+ if (!draggedRole) return;
+
// Remove the dragged role and insert at new position
newRoles.splice(dragIndex, 1);
newRoles.splice(hoverIndex, 0, draggedRole);
@@ -413,7 +420,7 @@ export default function StaffRolesCard() {
};
// Handle role reordering when drag ends (actual commit)
- const commitRoleReorder = (originalIndex: number, targetIndex: number) => {
+ const commitRoleReorder = (_originalIndex: number, _targetIndex: number) => {
// The localRoles state already reflects the current visual state from hover operations
// We just need to set pending reorder and show confirmation
setPendingReorder([...localRoles]);
@@ -428,11 +435,41 @@ export default function StaffRolesCard() {
// Filter out Super Admin from the reorder request since it should never be reordered
// Super Admin should always stay at order 0, other roles start from order 1
const nonSuperAdminRoles = pendingReorder.filter(role => role.name !== 'Super Admin');
- const roleOrder = nonSuperAdminRoles.map((role, index) => ({
- id: role.id,
- order: index + 1 // Start from 1 since Super Admin is always 0
- }));
-
+
+ let roleOrder: Array<{ id: string; order: number }>;
+ if (isSuperAdmin) {
+ // Super Admin has authority over every role, so it may renumber the
+ // entire non-super-admin hierarchy starting at 1.
+ roleOrder = nonSuperAdminRoles.map((role, index) => ({
+ id: role.id,
+ order: index + 1, // Start from 1 since Super Admin is always 0
+ }));
+ } else {
+ // A non-super-admin performer may only reorder roles STRICTLY below
+ // their own authority. The backend rejects the whole request if any
+ // submitted role is at/above the performer's order, so we must:
+ // (1) only submit roles whose order is greater than the performer's, and
+ // (2) assign new orders that remain strictly greater than performerOrder,
+ // preserving the existing higher-authority roles' positions.
+ const performerOrder = roleOrderMap.get(currentUser.role) ?? 999;
+ const editableRoles = nonSuperAdminRoles.filter(role => {
+ const currentOrder = role.order ?? 999;
+ return currentOrder > performerOrder;
+ });
+ roleOrder = editableRoles.map((role, index) => ({
+ id: role.id,
+ order: performerOrder + 1 + index,
+ }));
+ }
+
+ if (roleOrder.length === 0) {
+ // Nothing the performer is allowed to reorder; treat as a no-op success.
+ setOriginalRoles([...localRoles]);
+ setPendingReorder(null);
+ setShowReorderConfirm(false);
+ return;
+ }
+
const response = await apiFetch('/v1/panel/roles/reorder', {
method: 'POST',
headers: {
@@ -620,9 +657,8 @@ export default function StaffRolesCard() {
const togglePermission = (permissionId: string) => {
if (!canGrantPermission(permissionId)) return;
- const allPerms = permissions.length > 0 ? permissions : DEFAULT_PERMISSIONS;
const isCurrentlyEnabled = roleFormData.permissions.includes(permissionId);
- const childPermissions = allPerms.filter((p: Permission) => p.parentId === permissionId).map((p: Permission) => p.id);
+ const childPermissions = permissionCatalog.filter((p: Permission) => p.parentId === permissionId).map((p: Permission) => p.id);
if (isCurrentlyEnabled) {
// Toggling OFF: remove only the parent, children become individually manageable
@@ -640,7 +676,7 @@ export default function StaffRolesCard() {
};
const getPermissionsByCategory = (category: string) => {
- return permissions.filter((p: Permission) => p.category === category);
+ return permissionCatalog.filter((p: Permission) => p.category === category);
};
const hasPermission = (role: StaffRole, permissionId: string) => {
@@ -885,29 +921,29 @@ export default function StaffRolesCard() {
{/* Delete Confirmation Dialog */}
-
+
+
+
+
{/* Role Reorder Confirmation Dialog */}
- {category.ticketTypes.join(', ')} - {t('settings.tickets.actionsCount', { count: category.actions.length })} + {category.ticketTypes.map((type) => formatTicketTypeLabel(type, t)).join(', ')} - {t('settings.tickets.actionsCount', { count: category.actions.length })}
@@ -922,116 +907,29 @@ const TicketSettings = ({
<>
{/* Add AI Punishment Type Dialog */}
{isAddAIPunishmentDialogOpen && (
-