chore: small stuff

tabarra · Mar 31, 2024 · de5bd17 · de5bd17
1 parent 56d5704
commit de5bd17
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 9 deletions.
diff --git a/docs/dev_notes.md b/docs/dev_notes.md
@@ -29,6 +29,7 @@
 - [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
 - [ ] Add StatisticsManager tracking for players/actions search duration (QuantileArray)
 - [ ] fix disallowed intents message
 

diff --git a/panel/src/components/DynamicNewBadge.tsx b/panel/src/components/DynamicNewBadge.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+type DynamicNewBadgeProps = {
+    featName: string;
+    durationDays?: number; //3d default
+};
+
+/**
+ * A dynamic badge that shows "NEW" for the first X days.
+ * NOTE: always on for dev mode to make sure I doesn't forget to remove it.
+ */
+function DynamicNewBadge({ featName, durationDays }: DynamicNewBadgeProps) {
+    const storageKeyName = `dynamicNewBadgeTs-${featName}`;
+    const storedTs = parseInt(localStorage.getItem(storageKeyName) ?? '');
+    if (isNaN(storedTs) || window.txConsts.showAdvanced) {
+        localStorage.setItem(storageKeyName, Date.now().toString());
+    } else {
+        const badgeDuration = (durationDays ?? 3) * 24 * 60 * 60 * 1000;
+
+        if (storedTs + badgeDuration < Date.now()) {
+            return null;
+        }
+    }
+
+    //bg-accent or bg-success?
+    return (
+        <span className='rounded bg-accent text-accent-foreground text-2xs tracking-wider font-semibold px-1 ml-1.5'>NEW</span>
+    );
+}
+
+export default React.memo(DynamicNewBadge);
diff --git a/panel/src/layout/DesktopNavbar.tsx b/panel/src/layout/DesktopNavbar.tsx
@@ -13,6 +13,7 @@ import MainPageLink from '@/components/MainPageLink';
 import { cva } from 'class-variance-authority';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAdminPerms } from '@/hooks/auth';
+import DynamicNewBadge from '@/components/DynamicNewBadge';
 
 const buttonVariants = cva(
     `group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 ring-offset-background  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,
@@ -81,10 +82,14 @@ export default function DesktopHeader() {
                 <NavigationMenuList>
                     <HeaderMenuLink href="/players">
                         Players
+                        {/* FIXME: remove */}
+                        <DynamicNewBadge featName='newPlayersPage' />
                     </HeaderMenuLink>
-                    {/* <HeaderMenuLink href="/history" className='text-accent'>
+                    <HeaderMenuLink href="/history">
                         History
-                    </HeaderMenuLink> */}
+                        {/* FIXME: remove */}
+                        <DynamicNewBadge featName='newHistoryPage' />
+                    </HeaderMenuLink>
                     <HeaderMenuLink href="/whitelist">
                         Whitelist
                     </HeaderMenuLink>

diff --git a/panel/src/layout/PlayerModal/PlayerModal.tsx b/panel/src/layout/PlayerModal/PlayerModal.tsx
@@ -95,9 +95,18 @@ export default function PlayerModal() {
 
     let pageTitle: JSX.Element;
     if (modalData) {
-        pageTitle = <>
-            <span className="text-muted-foreground font-mono">[{modalData.player.netid || 'OFFLINE'}]</span> {modalData.player.displayName}
-        </>;
+        if (modalData.player.netid) {
+            pageTitle = <>
+                <span className="text-success-inline font-mono mr-2">[{modalData.player.netid}]</span>
+                {modalData.player.displayName}
+            </>;
+        } else {
+            pageTitle = <>
+                <span className="text-destructive-inline font-mono mr-2">[OFF]</span>
+                {modalData.player.displayName}
+            </>;
+
+        }
     } else if (modalError) {
         pageTitle = <span className="text-destructive-inline">Error!</span>;
     } else {

diff --git a/panel/src/pages/Players/PlayersSearchBox.tsx b/panel/src/pages/Players/PlayersSearchBox.tsx
@@ -137,7 +137,9 @@ export function PlayerSearchBox({ doSearch, initialState }: PlayerSearchBoxProps
     //It's render time! 🎉
     const selectedSearchType = availableSearchTypes.find((type) => type.value === currSearchType);
     if (!selectedSearchType) throw new Error(`Invalid search type: ${currSearchType}`);
-    const filterBtnMessage = selectedFilters.length ? `${selectedFilters.length} Filters` : 'No filters';
+    const filterBtnMessage = selectedFilters.length
+        ? `${selectedFilters.length} Filter${selectedFilters.length > 1 ? 's' : ''}`
+        : 'No filters';
     return (
         <div className="p-4 mb-2 md:mb-4 md:rounded-xl border border-border bg-card text-card-foreground shadow-sm">
             <div className="flex flex-wrap-reverse gap-2">
@@ -174,13 +176,13 @@ export function PlayerSearchBox({ doSearch, initialState }: PlayerSearchBoxProps
                                     role="combobox"
                                     aria-expanded={isSearchTypeDropdownOpen}
                                     onClick={() => setSearchTypeDropdownOpen(!isSearchTypeDropdownOpen)}
-                                    className="grow xs:w-36 justify-between border-input bg-black/5 dark:bg-black/30 hover:dark:bg-primary"
+                                    className="grow xs:w-38 justify-between border-input bg-black/5 dark:bg-black/30 hover:dark:bg-primary"
                                 >
-                                    {selectedSearchType.label}
+                                    Search by {selectedSearchType.label}
                                     <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                 </Button>
                             </DropdownMenuTrigger>
-                            <DropdownMenuContent className='w-36'>
+                            <DropdownMenuContent className='w-38'>
                                 <DropdownMenuLabel>Search Type</DropdownMenuLabel>
                                 <DropdownMenuSeparator />
                                 <DropdownMenuRadioGroup value={currSearchType} onValueChange={setCurrSearchType}>