Introduce active link status in more places

src/admin/AdminInfoNav.tsx

@@ -7,7 +7,7 @@ import ClearCacheButton from '@/admin/ClearCacheButton';
 import { usePathname } from 'next/navigation';
 import { useAppState } from '@/state/AppState';
 import InsightsIndicatorDot from './insights/InsightsIndicatorDot';
-import LinkWithLoaderBadge from '@/components/LinkWithLoaderBadge';
+import LinkWithLoaderBackground from '@/components/LinkWithLoaderBackground';
 
 const ADMIN_INFO_PAGES = [{
   title: 'App Insights',
@@ -43,11 +43,11 @@ export default function AdminInfoPage({
     <div className="flex items-center gap-4 min-h-9">
       <div className={clsx(
         'grow -translate-x-1',
-        'flex items-center gap-3',
+        'flex items-center gap-1.5 md:gap-3',
       )}>
         {pages
           .map(({ title, titleShort, path }) =>
-            <LinkWithLoaderBadge
+            <LinkWithLoaderBackground
               key={path}
               href={path}
               className={clsx(
@@ -57,7 +57,7 @@ export default function AdminInfoPage({
                     ? 'font-medium'
                     : 'text-dim'
                   : undefined,
-                'hover:text-main',
+                'hover:text-main active:text-dim',
               )}
             >
               <ResponsiveText shortText={titleShort}>
@@ -69,7 +69,7 @@ export default function AdminInfoPage({
                   top={4}
                   right={-2}
                 />}
-            </LinkWithLoaderBadge>)}
+            </LinkWithLoaderBackground>)}
       </div>
       <ClearCacheButton />
     </div>

src/admin/AdminNavClient.tsx

@@ -19,7 +19,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { FaRegClock } from 'react-icons/fa';
 import AdminAppInfoIcon from './AdminAppInfoIcon';
 import AdminInfoNav from './AdminInfoNav';
-import LinkWithLoaderBadge from '@/components/LinkWithLoaderBadge';
+import LinkWithLoaderBackground from '@/components/LinkWithLoaderBackground';
 import MaskedScroll from '@/components/MaskedScroll';
 
 // Updates from past 5 minutes considered recent
@@ -75,28 +75,31 @@ export default function AdminNavClient({
               direction="horizontal"
             >
               {items.map(({ label, href, count }) =>
-                <LinkWithLoaderBadge
+                <LinkWithLoaderBackground
                   key={label}
                   href={href}
                   className={clsx(
                     'flex gap-0.5',
                     checkPathPrefix(pathname, href) ? 'font-bold' : 'text-dim',
-                    'hover:text-main',
+                    'hover:text-main active:text-medium',
                   )}
                   prefetch={false}
                 >
                   <span>{label}</span>
                   {count > 0 &&
                     <span>({count})</span>}
-                </LinkWithLoaderBadge>)}
+                </LinkWithLoaderBackground>)}
             </MaskedScroll>
             <LinkWithIconLoader
               href={includeInsights
                 ? PATH_ADMIN_INSIGHTS
                 : PATH_ADMIN_CONFIGURATION}
-              className={isPathAdminInfo(pathname)
-                ? 'font-bold'
-                : 'text-dim'}
+              className={clsx(
+                isPathAdminInfo(pathname)
+                  ? 'font-bold'
+                  : 'text-dim',
+                'hover:text-main active:text-dim',
+              )}
               icon={<AdminAppInfoIcon />}
               loader={<Spinner className="translate-y-[-0.75px]" />}
             />

src/components/LinkWithLoaderBackground.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx/lite';
 import { ComponentProps } from 'react';
 import LinkWithStatus from './LinkWithStatus';
 
-export default function LinkWithLoaderBadge({
+export default function LinkWithLoaderBackground({
   className,
   loadingClassName,
   offsetPadding,

src/components/RepoLink.tsx

@@ -15,7 +15,7 @@ export default function RepoLink() {
         className={clsx(
           'flex items-center gap-0.5',
           'text-main hover:text-main',
-          'hover:underline',
+          'hover:text-medium active:text-dim',
         )}
       >
         <BiLogoGithub

src/components/primitives/EntityLink.tsx

@@ -89,6 +89,9 @@ export default function EntityLink({
         className={clsx(
           'peer',
           'inline-flex items-center gap-2 max-w-full truncate',
+          classForContrast(),
+          href && !badged && 'hover:text-gray-900 dark:hover:text-gray-100',
+          href && !badged && 'active:text-medium!',
         )}
         isLoading={isLoading}
         setIsLoading={setIsLoading}
@@ -101,10 +104,6 @@ export default function EntityLink({
           title,
           type,
           uppercase,
-          className: clsx(
-            classForContrast(),
-            href && !badged && 'hover:text-gray-900 dark:hover:text-gray-100',
-          ),
           classNameIcon: clsx('text-dim', classNameIcon),
           debug,
         }}>

src/photo/PhotoLink.tsx

@@ -9,7 +9,7 @@ import { pathForPhoto } from '@/app/paths';
 import { clsx } from 'clsx/lite';
 import LinkWithStatus from '@/components/LinkWithStatus';
 import Spinner from '@/components/Spinner';
-import LinkWithLoaderBadge from '@/components/LinkWithLoaderBadge';
+import LinkWithLoaderBackground from '@/components/LinkWithLoaderBackground';
 
 export default function PhotoLink({
   photo,
@@ -63,12 +63,12 @@ export default function PhotoLink({
             </>}
           </>}
         </LinkWithStatus>
-        : <LinkWithLoaderBadge
+        : <LinkWithLoaderBackground
           {...linkProps}
           offsetPadding
         >
           {children}
-        </LinkWithLoaderBadge>
+        </LinkWithLoaderBackground>
       : <span className={clsx(
         'text-gray-300 dark:text-gray-700 cursor-default',
         className,