chore: assorted small changes

tabarra · Apr 1, 2024 · 394d72e · 394d72e
1 parent 54e56f0
commit 394d72e
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 8 deletions.
diff --git a/docs/dev_notes.md b/docs/dev_notes.md
@@ -29,7 +29,11 @@
 - [x] open master actions in the correct tab
 - [x] NEW PAGE: History
 - [ ] Create modal for history actions with full details
-    - [] modify HistoryTab -> HistoryItem to open the action modal on item click, remove revoke/perms logic
+    - [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
+- [ ] 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)
 - [ ] fix disallowed intents message

diff --git a/panel/src/hooks/auth.ts b/panel/src/hooks/auth.ts
@@ -7,6 +7,7 @@ import { isGlobalMenuSheetOpenAtom, isPlayerlistSheetOpenAtom, isServerSheetOpen
 import { playerModalOpenAtom } from './playerModal';
 import { globalStatusAtom } from './status';
 import { txToast } from '@/components/TxToaster';
+import { actionModalOpenAtom } from './actionModal';
 
 
 /**
@@ -125,6 +126,7 @@ export const logoutWatcher = atomEffect((get, set) => {
     set(isServerSheetOpenAtom, false);
     set(isPlayerlistSheetOpenAtom, false);
     set(playerModalOpenAtom, false);
+    set(actionModalOpenAtom, false);
     set(globalStatusAtom, null);
     txToast.dismiss(); //making sure we don't have any pending toasts
 

diff --git a/panel/src/layout/ActionModal/ActionIdsTab.tsx b/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>
+    return <div className="mb-1 md:mb-4 p-1">
         <div className="flex justify-between items-center pb-1">
             <h3 className="text-xl">{title}</h3>
             {/* {hasCopiedIds ? (

diff --git a/panel/src/layout/ActionModal/ActionInfoTab.tsx b/panel/src/layout/ActionModal/ActionInfoTab.tsx
@@ -91,7 +91,7 @@ export default function ActionInfoTab({ action, serverTime, tsFetch }: ActionInf
         openPlayerModal({ license: linkedPlayer });
     }
 
-    return <div className="p-1">
+    return <div className="mb-1 md:mb-4 p-1">
         <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>

diff --git a/panel/src/layout/ActionModal/ActionModal.tsx b/panel/src/layout/ActionModal/ActionModal.tsx
@@ -92,6 +92,23 @@ export default function ActionModal() {
         }
     };
 
+    //move to tab up or down
+    const handleTabButtonKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const currentIndex = modalTabs.findIndex((tab) => tab.title === selectedTab);
+            const nextIndex = e.key === 'ArrowUp' ? currentIndex - 1 : currentIndex + 1;
+            const nextTab = modalTabs[nextIndex];
+            if (nextTab) {
+                setSelectedTab(nextTab.title);
+                const nextButton = document.getElementById(`action-modal-tab-${nextTab.title}`);
+                if (nextButton) {
+                    nextButton.focus();
+                }
+            }
+        }
+    }
+
     let pageTitle: JSX.Element;
     if (modalData) {
         const displayName = modalData.action.playerName !== false
@@ -120,7 +137,7 @@ export default function ActionModal() {
         <Dialog open={isModalOpen} onOpenChange={handleOpenClose}>
             <DialogContent
                 className="max-w-2xl h-full sm:h-auto max-h-full p-0 gap-1 sm:gap-4 flex flex-col"
-                onOpenAutoFocus={(e) => e.preventDefault()}
+                // onOpenAutoFocus={(e) => e.preventDefault()}
             >
                 <DialogHeader className="p-4 border-b">
                     <DialogTitle className="tracking-wide line-clamp-1 break-all mr-6">

diff --git a/panel/src/layout/ActionModal/ActionModifyTab.tsx b/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">
+        <div className="flex flex-col gap-4 p-1 mb-1 md:mb-4">
             <div className="space-y-2">
                 <h3 className="text-xl">Revoke {upperCasedType}</h3>
                 <p className="text-muted-foreground text-sm">

diff --git a/panel/src/layout/PlayerModal/PlayerModal.tsx b/panel/src/layout/PlayerModal/PlayerModal.tsx
@@ -93,6 +93,23 @@ export default function PlayerModal() {
         }
     };
 
+    //Move to tab up or down
+    const handleTabButtonKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const currentIndex = modalTabs.findIndex((tab) => tab.title === selectedTab);
+            const nextIndex = e.key === 'ArrowUp' ? currentIndex - 1 : currentIndex + 1;
+            const nextTab = modalTabs[nextIndex];
+            if (nextTab) {
+                setSelectedTab(nextTab.title);
+                const nextButton = document.getElementById(`player-modal-tab-${nextTab.title}`);
+                if (nextButton) {
+                    nextButton.focus();
+                }
+            }
+        }
+    }
+
     let pageTitle: JSX.Element;
     if (modalData) {
         if (modalData.player.netid) {
@@ -117,7 +134,7 @@ export default function PlayerModal() {
         <Dialog open={isModalOpen} onOpenChange={handleOpenClose}>
             <DialogContent
                 className="max-w-2xl h-full sm:h-auto max-h-full p-0 gap-1 sm:gap-4 flex flex-col"
-                onOpenAutoFocus={(e) => e.preventDefault()}
+                // onOpenAutoFocus={(e) => e.preventDefault()}
             >
                 <DialogHeader className="p-4 border-b">
                     <DialogTitle className="tracking-wide line-clamp-1 break-all mr-6">{pageTitle}</DialogTitle>
@@ -127,6 +144,7 @@ export default function PlayerModal() {
                     <div className="flex flex-row md:flex-col gap-1 bg-muted md:bg-transparent p-1 md:p-0 mx-2 md:mx-0 rounded-md">
                         {modalTabs.map((tab) => (
                             <Button
+                                id={`player-modal-tab-${tab.title}`}
                                 key={tab.title}
                                 variant={selectedTab === tab.title ? "secondary" : "ghost"}
                                 className={cn(
@@ -136,6 +154,7 @@ export default function PlayerModal() {
                                     tab.className,
                                 )}
                                 onClick={() => setSelectedTab(tab.title)}
+                                onKeyDown={handleTabButtonKeyDown}
                             >
                                 {tab.icon} {tab.title}
                             </Button>

diff --git a/panel/src/pages/History/HistoryTable.tsx b/panel/src/pages/History/HistoryTable.tsx
@@ -5,7 +5,6 @@ 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 { useOpenPlayerModal } from "@/hooks/playerModal";
 import { useBackendApi } from '@/hooks/fetch';
 import { HistoryTableActionType, HistoryTableSearchResp, HistoryTableSearchType, HistoryTableSortingType } from '@shared/historyApiTypes';
 import { useOpenActionModal } from '@/hooks/actionModal';

diff --git a/panel/src/pages/LiveConsole/LiveConsoleFooter.tsx b/panel/src/pages/LiveConsole/LiveConsoleFooter.tsx
@@ -4,6 +4,7 @@ import { cn, openExternalLink } from "@/lib/utils";
 import { BookMarkedIcon, FileDownIcon, SearchIcon, Trash2Icon } from "lucide-react";
 import { useAdminPerms } from '@/hooks/auth';
 import { useLiveConsoleHistory } from '@/hooks/liveConsole';
+import DynamicNewBadge from '@/components/DynamicNewBadge';
 
 
 type ConsoleFooterButtonProps = {
@@ -29,6 +30,8 @@ function ConsoleFooterButton({ icon: Icon, title, disabled, onClick }: ConsoleFo
             <span className="hidden 2xl:inline ml-1 align-middle">
                 {title}
             </span>
+            {/* FIXME: remove */}
+            {title === 'Saved' && <DynamicNewBadge featName='liveConsoleBookmarks' />}
         </div>
     )
 }

diff --git a/panel/src/pages/TestingPage/TmpToasts.tsx b/panel/src/pages/TestingPage/TmpToasts.tsx
@@ -21,7 +21,7 @@ export default function TmpToasts() {
             msg: 'Simple message **without** markdown\nbut auto line break.',
         });
         txToast.error({
-            title: 'Error: The bot requires the \`GUILD_MEMBERS\` intent:',
+            title: 'Error: The bot requires the `GUILD_MEMBERS` intent:',
             msg: `- Go to the [Discord Dev Portal](https://discord.com/developers/applications)
             - Navigate to \`Bot > Privileged Gateway Intents\`.
             - Enable the \`GUILD_MEMBERS\` intent.