Add app insights to admin menu

src/admin/AdminAppInsightsIcon.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx/lite';
+import { FaInfo } from 'react-icons/fa';
+
+export default function AdminAppInsightsIcon({
+  notification = true,
+}: {
+  notification?: boolean,
+}) {
+  return (
+    <span className="inline-flex relative">
+      <span className={clsx(
+        'size-[16px]',
+        'inline-flex items-center justify-center',
+        'border-[1.5px] border-current rounded-[6px]',
+        'translate-y-[3px]',
+      )}>
+        <FaInfo
+          size={8}
+          aria-label="App Configuration"
+        />
+      </span>
+      {notification && <span className={clsx(
+        'absolute',
+        'top-[0.5px] right-[-2.5px]',
+        'size-2 rounded-full',
+        'bg-blue-500',
+      )} />}
+    </span>
+  );
+}

src/admin/AdminAppMenu.tsx

@@ -1,11 +1,16 @@
 'use client';
 
 import MoreMenu from '@/components/more/MoreMenu';
-import { PATH_ADMIN_CONFIGURATION, PATH_GRID_INFERRED } from '@/app-core/paths';
+import {
+  PATH_ADMIN_CONFIGURATION,
+  PATH_ADMIN_INSIGHTS,
+  PATH_GRID_INFERRED,
+} from '@/app-core/paths';
 import { useAppState } from '@/state/AppState';
 import { BiCog } from 'react-icons/bi';
 import { ImCheckboxUnchecked } from 'react-icons/im';
 import { IoCloseSharp } from 'react-icons/io5';
+import AdminAppInsightsIcon from './AdminAppInsightsIcon';
 
 export default function AdminAppMenu() {
   const {
@@ -18,13 +23,19 @@ export default function AdminAppMenu() {
   return (
     <MoreMenu
       items={[{
-        label: 'App Config',
+        label: 'Insights',
+        icon: <span className="scale-90 translate-y-[-3px]">
+          <AdminAppInsightsIcon />
+        </span>,
+        href: PATH_ADMIN_INSIGHTS,
+      }, {
+        label: 'Configuration',
         icon: <BiCog className="text-[17px]" />,
         href: PATH_ADMIN_CONFIGURATION,
       }, {
         label: isSelecting
           ? 'Exit Select'
-          : 'Select Multiple',
+          : 'Select',
         icon: isSelecting
           ? <IoCloseSharp
             className="text-[18px] translate-y-[-0.5px]"

src/admin/AdminNavClient.tsx

@@ -19,10 +19,8 @@ import { differenceInMinutes } from 'date-fns';
 import { usePathname } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 import { FaRegClock } from 'react-icons/fa';
-import { FaInfo } from 'react-icons/fa';
 import { HiOutlineCog } from 'react-icons/hi';
-
+import AdminAppInsightsIcon from './AdminAppInsightsIcon';
-const DEBUG_INDICATOR_SIZE = true;
 
 // Updates considered recent if they occurred in past 5 minutes
 const areTimesRecent = (dates: Date[]) => dates
@@ -92,31 +90,15 @@ export default function AdminNavClient({
                 </LinkWithStatus>)}
             </div>
             <div className="flex gap-3">
-              <span className="inline-flex relative">
+              <LinkWithLoader
-                <LinkWithLoader
+                href={PATH_ADMIN_INSIGHTS}
-                  href={PATH_ADMIN_INSIGHTS}
+                className={isPathAdminInsights(pathname)
-                  className={isPathAdminInsights(pathname)
+                  ? 'font-bold'
-                    ? 'font-bold'
+                  : 'text-dim'}
-                    : 'text-dim'}
+                loader={<Spinner className="translate-y-[-1px]" />}
-                  loader={<Spinner className="translate-y-[-1px]" />}
+              >
-                >
+                <AdminAppInsightsIcon />
-                  <span className={clsx(
+              </LinkWithLoader>
-                    'size-[16px]',
-                    'inline-flex items-center justify-center',
-                    'border-[1.5px] border-current rounded-[6px]',
-                    'translate-y-[3px]',
-                  )}>
-                    <FaInfo
-                      size={8}
-                      aria-label="App Configuration"
-                    />
-                  </span>
-                </LinkWithLoader>
-                {DEBUG_INDICATOR_SIZE && <span className={clsx(
-                  'absolute top-[0.5px] right-[-2.5px] size-2 rounded-full',
-                  'bg-blue-500',
-                )} />}
-              </span>
               <LinkWithLoader
                 href={PATH_ADMIN_CONFIGURATION}
                 className={isPathAdminConfiguration(pathname)

src/components/primitives/LoaderButton.tsx

@@ -63,7 +63,7 @@ export default function LoaderButton(props: {
     >
       {(icon || isLoading) &&
         <span className={clsx(
-          'min-w-[1.25rem] max-h-5 overflow-hidden',
+          'min-w-[1.25rem] max-h-5',
           styleAs === 'button' ? 'translate-y-[-0.5px]' : 'translate-y-[0.5px]',
           'inline-flex justify-center shrink-0',
         )}>