feat(web/actionModal): fully implemented

core/webroutes/history/search.ts

@@ -131,17 +131,27 @@ export default async function HistorySearch(ctx: AuthedCtx) {
     const actions = chain.value();
     const hasReachedEnd = actions.length <= DEFAULT_LIMIT;
     const currTs = now();
-    const processedActions: HistoryTableActionType[] = actions.slice(0, DEFAULT_LIMIT).map((a) => {
+    const processedActions = actions.slice(0, DEFAULT_LIMIT).map((a) => {
+        let banExpiration;
+        if (a.type === 'ban'){
+            if(a.expiration === false){
+                banExpiration = 'permanent' as const;
+            } else if (typeof a.expiration === 'number' && a.expiration < currTs){
+                banExpiration = 'expired' as const;
+            } else {
+                banExpiration = 'active' as const;
+            }
+        }
         return {
             id: a.id,
             type: a.type,
             playerName: a.playerName,
             author: a.author,
             reason: a.reason,
             timestamp: a.timestamp,
-            isExpired: typeof a.expiration === 'number' && a.expiration < currTs,
             isRevoked: !!a.revocation.timestamp,
-        };
+            banExpiration,
+        } satisfies HistoryTableActionType;
     });
 
     return sendTypedResp({

docs/dev_notes.md

@@ -28,11 +28,11 @@
         - prune players/hwids (from master actions -> clean database)
 - [x] open master actions in the correct tab
 - [x] NEW PAGE: History
-- [ ] Create modal for history actions with full details
+- [x] Create modal for history actions with full details
     - [x] finish up modal info tab
     - [x] try to add player name to title
     - [x] fix modal padding (good enough)
-    - [ ] modify HistoryTab -> HistoryItem to open the action modal on item click, remove revoke/perms logic
+    - [x] modify HistoryTab -> HistoryItem to open the action modal on item click, remove revoke/perms logic
 - [ ] fix(console): fix extra line break on term.write
 - [ ] Migrate `/database/` routes to `/history` (update panel, nui, web!)
 - [ ] Add StatisticsManager tracking for players/actions search duration (QuantileArray)

panel/src/layout/ActionModal/ActionIdsTab.tsx

@@ -31,7 +31,7 @@ function IdsBlock({ title, emptyMessage, ids, isSmaller }: IdsBlockProps) {
     }
     const hasIdsAvailable = Array.isArray(ids) && ids.length;
 
-    return <div className="mb-1 md:mb-4 p-1">
+    return <div className="mb-1 md:mb-4">
         <div className="flex justify-between items-center pb-1">
             <h3 className="text-xl">{title}</h3>
             {/* {hasCopiedIds ? (

panel/src/layout/ActionModal/ActionInfoTab.tsx

@@ -91,7 +91,7 @@ export default function ActionInfoTab({ action, serverTime, tsFetch }: ActionInf
         openPlayerModal({ license: linkedPlayer });
     }
 
-    return <div className="mb-1 md:mb-4 p-1">
+    return <div className="mb-1 md:mb-4">
         <dl className="pb-2">
             <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
                 <dt className="text-sm font-medium leading-6 text-muted-foreground">Date/Time</dt>

panel/src/layout/ActionModal/ActionModifyTab.tsx

@@ -46,7 +46,7 @@ export default function ActionModifyTab({ action, refreshModalData }: ActionModi
             ? `Revoke ${upperCasedType}`
             : 'Revoke (no permission)';
     return (
-        <div className="flex flex-col gap-4 p-1 mb-1 md:mb-4">
+        <div className="flex flex-col gap-4 mb-1 md:mb-4">
             <div className="space-y-2">
                 <h3 className="text-xl">Revoke {upperCasedType}</h3>
                 <p className="text-muted-foreground text-sm">

panel/src/layout/PlayerModal/PlayerHistoryTab.tsx

@@ -1,29 +1,17 @@
-import { Button } from "@/components/ui/button";
-import { useAdminPerms } from "@/hooks/auth";
 import { cn, tsToLocaleDateTime } from "@/lib/utils";
 import { PlayerHistoryItem } from "@shared/playerApiTypes";
-import { useBackendApi } from "@/hooks/fetch";
-import { GenericApiOkResp } from "@shared/genericApiTypes";
 import InlineCode from "@/components/InlineCode";
 import { useOpenActionModal } from "@/hooks/actionModal";
 import ModalCentralMessage from "@/components/ModalCentralMessage";
 
 
 type HistoryItemProps = {
     action: PlayerHistoryItem,
-    permsDisableWarn: boolean,
-    permsDisableBan: boolean,
     serverTime: number,
-    doRevokeAction: (actionId: string) => void,
+    modalOpener: (actionId: string) => void,
 }
 
-function HistoryItem({ action, permsDisableWarn, permsDisableBan, serverTime, doRevokeAction }: HistoryItemProps) {
-    const isRevokeDisabled = (
-        !!action.revokedBy ||
-        (action.type === 'warn' && permsDisableWarn) ||
-        (action.type === 'ban' && permsDisableBan)
-    );
-
+function HistoryItem({ action, serverTime, modalOpener }: HistoryItemProps) {
     let footerNote, borderColorClass, actionMessage;
     if (action.type === 'ban') {
         borderColorClass = 'border-destructive';
@@ -42,7 +30,13 @@ function HistoryItem({ action, permsDisableWarn, permsDisableBan, serverTime, do
     }
 
     return (
-        <div className={cn('pl-2 border-l-4 hover:bg-muted rounded-r-sm bg-muted/30', borderColorClass)}>
+        <div
+            onClick={() => { modalOpener(action.id) }}
+            className={cn(
+                'pl-2 border-l-4 hover:bg-muted rounded-r-sm bg-muted/30 cursor-pointer',
+                borderColorClass
+            )}
+        >
             <div className="flex w-full justify-between">
                 <strong className="text-sm text-muted-foreground">{actionMessage}</strong>
                 <small className="text-right text-2xs space-x-1">
@@ -53,12 +47,6 @@ function HistoryItem({ action, permsDisableWarn, permsDisableBan, serverTime, do
                     >
                         {tsToLocaleDateTime(action.ts, 'medium', 'short')}
                     </span>
-                    <Button
-                        variant="outline"
-                        size='inline'
-                        disabled={isRevokeDisabled}
-                        onClick={() => { doRevokeAction(action.id) }}
-                    >Revoke</Button>
                 </small>
             </div>
             <span className="text-sm">{action.reason}</span>
@@ -75,35 +63,16 @@ type PlayerHistoryTabProps = {
 }
 
 export default function PlayerHistoryTab({ actionHistory, serverTime, refreshModalData }: PlayerHistoryTabProps) {
-    const { hasPerm } = useAdminPerms();
-    const hasWarnPerm = hasPerm('players.warn');
-    const hasBanPerm = hasPerm('players.ban');
     const openActionModal = useOpenActionModal();
-    const revokeActionApi = useBackendApi<GenericApiOkResp>({
-        method: 'POST',
-        path: `/database/revoke_action`,
-    });
 
     if (!actionHistory.length) {
         return <ModalCentralMessage>
             No bans/warns found.
         </ModalCentralMessage>;
     }
 
-    const doRevokeAction = (actionId: string) => {
+    const doOpenActionModal = (actionId: string) => {
         openActionModal(actionId);
-        // revokeActionApi({
-        //     data: { actionId },
-        //     toastLoadingMessage: 'Revoking action...',
-        //     genericHandler: {
-        //         successMsg: 'Action revoked.',
-        //     },
-        //     success: (data) => {
-        //         if ('success' in data) {
-        //             refreshModalData();
-        //         }
-        //     },
-        // });
     }
 
     const reversedActionHistory = [...actionHistory].reverse();
@@ -112,10 +81,8 @@ export default function PlayerHistoryTab({ actionHistory, serverTime, refreshMod
             <HistoryItem
                 key={action.id}
                 action={action}
-                permsDisableWarn={!hasWarnPerm}
-                permsDisableBan={!hasBanPerm}
                 serverTime={serverTime}
-                doRevokeAction={doRevokeAction}
+                modalOpener={doOpenActionModal}
             />
         ))}
     </div>;

panel/src/pages/History/HistoryTable.tsx

@@ -4,7 +4,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import TxAnchor from '@/components/TxAnchor';
 import { cn, tsToLocaleDateTime } from '@/lib/utils';
 import { TableBody, TableCell, TableHeader, TableRow } from "@/components/ui/table";
-import { Loader2Icon, GavelIcon, AlertTriangleIcon, Undo2Icon, AlarmClockCheckIcon } from 'lucide-react';
+import { Loader2Icon, GavelIcon, AlertTriangleIcon, Undo2Icon, AlarmClockCheckIcon, TimerOffIcon, TimerIcon } from 'lucide-react';
 import { useBackendApi } from '@/hooks/fetch';
 import { HistoryTableActionType, HistoryTableSearchResp, HistoryTableSearchType, HistoryTableSortingType } from '@shared/historyApiTypes';
 import { useOpenActionModal } from '@/hooks/actionModal';
@@ -47,8 +47,12 @@ function HistoryRow({ action, modalOpener }: HistoryRowProps) {
     let statusIcon: React.ReactNode;
     if (action.isRevoked) {
         statusIcon = <Undo2Icon className='size-4' />;
-    } else if (action.isExpired) {
-        statusIcon = <AlarmClockCheckIcon className='size-4' />;
+    } else if (action.banExpiration) {
+        if (action.banExpiration === 'permanent') {
+            statusIcon = <TimerOffIcon className='size-4' />;
+        } else if (action.banExpiration === 'active') {
+            statusIcon = <TimerIcon className='size-4' />;
+        }
     }
 
     return (

shared/historyApiTypes.ts

@@ -43,8 +43,8 @@ export type HistoryTableActionType = {
     author: string;
     reason: string;
     timestamp: number;
-    isExpired: boolean;
     isRevoked: boolean;
+    banExpiration?: 'expired' | 'active' | 'permanent';
 }
 
 export type HistoryTableSearchResp = {