zudoku 0.0.0-f42e3678 → 0.0.0-f46233e4

package/src/lib/components/LanguageIcon.tsx

@@ -0,0 +1,181 @@
+import {
+  type ComponentType,
+  type LazyExoticComponent,
+  lazy,
+  Suspense,
+  type SVGProps,
+} from "react";
+
+type Language = {
+  pattern: RegExp;
+  icon: LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>;
+  width?: number;
+};
+
+const Languages: Record<string, Language> = {
+  typescript: {
+    pattern: /^(ts|typescript)$/,
+    icon: lazy(() => import("../assets/language-icons/typescript.js")),
+    width: 15,
+  },
+  javascript: {
+    pattern: /^(js|javascript)$/,
+    icon: lazy(() => import("../assets/language-icons/javascript.js")),
+  },
+  react: {
+    pattern: /^(react|tsx|jsx)$/,
+    icon: lazy(() => import("../assets/language-icons/react.js")),
+    width: 22,
+  },
+  markdown: {
+    pattern: /^(md|markdown)$/,
+    icon: lazy(() => import("../assets/language-icons/markdown.js")),
+    width: 22,
+  },
+  mdx: {
+    pattern: /^mdx$/,
+    icon: lazy(() => import("../assets/language-icons/mdx.js")),
+    width: 28,
+  },
+  java: {
+    pattern: /^(java)$/,
+    icon: lazy(() => import("../assets/language-icons/java.js")),
+    width: 22,
+  },
+  json: {
+    pattern: /^jsonc?$/,
+    icon: lazy(() => import("../assets/language-icons/json.js")),
+  },
+  yaml: {
+    pattern: /^yaml$/,
+    icon: lazy(() => import("../assets/language-icons/yaml.js")),
+  },
+  toml: {
+    pattern: /^toml$/,
+    icon: lazy(() => import("../assets/language-icons/toml.js")),
+  },
+  shell: {
+    pattern: /^(shell|bash|sh|zsh|term|terminal|ansi)$/,
+    icon: lazy(() => import("../assets/language-icons/shell.js")),
+  },
+  python: {
+    pattern: /^(py|python)$/,
+    icon: lazy(() => import("../assets/language-icons/python.js")),
+  },
+  csharp: {
+    pattern: /^(cs|csharp|vb)$/,
+    icon: lazy(() => import("../assets/language-icons/csharp.js")),
+    width: 20,
+  },
+  rust: {
+    pattern: /^(rs|rust)$/,
+    icon: lazy(() => import("../assets/language-icons/rust.js")),
+    width: 20,
+  },
+  ruby: {
+    pattern: /^(rb|ruby)$/,
+    icon: lazy(() => import("../assets/language-icons/ruby.js")),
+  },
+  php: {
+    pattern: /^php$/,
+    icon: lazy(() => import("../assets/language-icons/php.js")),
+    width: 24,
+  },
+  html: {
+    pattern: /^html?$/,
+    icon: lazy(() => import("../assets/language-icons/html.js")),
+    width: 15,
+  },
+  css: {
+    pattern: /^css$/,
+    icon: lazy(() => import("../assets/language-icons/css.js")),
+  },
+  objectivec: {
+    pattern: /^(objc|objectivec)$/,
+    icon: lazy(() => import("../assets/language-icons/objectivec.js")),
+    width: 16,
+  },
+  swift: {
+    pattern: /^swift$/,
+    icon: lazy(() => import("../assets/language-icons/swift.js")),
+  },
+  go: {
+    pattern: /^go$/,
+    icon: lazy(() => import("../assets/language-icons/go.js")),
+    width: 28,
+  },
+  xml: {
+    pattern: /^xml$/,
+    icon: lazy(() => import("../assets/language-icons/xml.js")),
+  },
+  kotlin: {
+    pattern: /^(kt|kotlin)$/,
+    icon: lazy(() => import("../assets/language-icons/kotlin.js")),
+    width: 14,
+  },
+  graphql: {
+    pattern: /^(gql|graphql)$/,
+    icon: lazy(() => import("../assets/language-icons/graphql.js")),
+  },
+  zig: {
+    pattern: /^zig$/,
+    icon: lazy(() => import("../assets/language-icons/zig.js")),
+    width: 28,
+  },
+  scala: {
+    pattern: /^scala$/,
+    icon: lazy(() => import("../assets/language-icons/scala.js")),
+    width: 18,
+  },
+  dart: {
+    pattern: /^dart$/,
+    icon: lazy(() => import("../assets/language-icons/dart.js")),
+    width: 20,
+  },
+  ocaml: {
+    pattern: /^ocaml$/,
+    icon: lazy(() => import("../assets/language-icons/ocaml.js")),
+    width: 20,
+  },
+  c: {
+    pattern: /^c$/,
+    icon: lazy(() => import("../assets/language-icons/c.js")),
+    width: 20,
+  },
+  cpp: {
+    pattern: /^(cpp|c\+\+)$/,
+    icon: lazy(() => import("../assets/language-icons/cpp.js")),
+    width: 20,
+  },
+  commonlisp: {
+    pattern: /^(clisp|common-lisp|lisp|cl|commonlisp)$/,
+    icon: lazy(() => import("../assets/language-icons/commonlisp.js")),
+    width: 18,
+  },
+  elixir: {
+    pattern: /^elixir$/,
+    icon: lazy(() => import("../assets/language-icons/elixir.js")),
+    width: 18,
+  },
+  powershell: {
+    pattern: /^(pshell|powershell|ps1)$/,
+    icon: lazy(() => import("../assets/language-icons/powershell.js")),
+    width: 18,
+  },
+};
+
+export const LanguageIcon = ({ language }: { language?: string }) => {
+  if (!language) return null;
+
+  const Lang = Object.values(Languages).find((l) => l.pattern.test(language));
+
+  if (!Lang) return null;
+
+  const size = Lang.width ?? 18;
+
+  return (
+    <Suspense fallback={<div style={{ width: size, height: "1em" }} />}>
+      <Lang.icon className="h-auto" style={{ width: size }} />
+    </Suspense>
+  );
+};

package/src/lib/components/Layout.tsx

@@ -1,8 +1,6 @@
-import { Helmet } from "@zudoku/react-helmet-async";
-import { Suspense, useEffect, type ReactNode } from "react";
-import { Outlet, useLocation } from "react-router";
+import { type ReactNode, Suspense, useEffect } from "react";
+import { Outlet } from "react-router";
 import { cn } from "../util/cn.js";
-import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -19,8 +17,7 @@ const LoadingFallback = () => (
 );
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
-  const { meta, authentication, options } = useZudoku();
-  const location = useLocation();
+  const { authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
@@ -32,22 +29,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
-      <Helmet titleTemplate={meta?.title}>
-        {options.canonicalUrlOrigin && (
-          <link
-            rel="canonical"
-            href={joinUrl(
-              options.canonicalUrlOrigin,
-              options.basePath,
-              location.pathname,
-            )}
-          />
-        )}
-        {meta?.description && (
-          <meta name="description" content={meta.description} />
-        )}
-        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
-      </Helmet>
       <Slot.Target name="layout-before-head" />
       <Header />
       <Slot.Target name="layout-after-head" />

package/src/lib/components/Markdown.tsx

@@ -23,9 +23,12 @@ export const Markdown = memo(
     const rehypePlugins = useMemo(
       () => [
         rehypeRaw,
-        ...createConfiguredShikiRehypePlugins(syntaxHighlighting?.themes),
+        ...createConfiguredShikiRehypePlugins(
+          syntaxHighlighting?.themes,
+          syntaxHighlighting?.highlighter,
+        ),
       ],
-      [syntaxHighlighting?.themes],
+      [syntaxHighlighting?.themes, syntaxHighlighting?.highlighter],
     );
 
     const mdComponents = useMemo(

package/src/lib/components/Meta.tsx

@@ -0,0 +1,45 @@
+import { Helmet } from "@zudoku/react-helmet-async";
+import type { PropsWithChildren } from "react";
+import { useLocation } from "react-router";
+import { joinUrl } from "../util/joinUrl.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const Meta = ({ children }: PropsWithChildren) => {
+  const { meta, options } = useZudoku();
+  const location = useLocation();
+
+  return (
+    <>
+      <Helmet titleTemplate={meta?.title} defaultTitle={meta?.defaultTitle}>
+        {options.canonicalUrlOrigin && (
+          <link
+            rel="canonical"
+            href={joinUrl(
+              options.canonicalUrlOrigin,
+              options.basePath,
+              location.pathname,
+            )}
+          />
+        )}
+        {meta?.description && (
+          <meta name="description" content={meta.description} />
+        )}
+        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
+        {meta?.generator && <meta name="generator" content={meta.generator} />}
+        {meta?.applicationName && (
+          <meta name="application-name" content={meta.applicationName} />
+        )}
+        {meta?.referrer && <meta name="referrer" content={meta.referrer} />}
+        {meta?.keywords && meta.keywords.length > 0 && (
+          <meta name="keywords" content={meta.keywords.join(", ")} />
+        )}
+        {meta?.authors?.map((author) => (
+          <meta key={author} name="author" content={author} />
+        ))}
+        {meta?.creator && <meta name="creator" content={meta.creator} />}
+        {meta?.publisher && <meta name="publisher" content={meta.publisher} />}
+      </Helmet>
+      {children}
+    </>
+  );
+};

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { MenuIcon } from "lucide-react";
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import {
@@ -12,7 +12,7 @@ import {
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
-import { isHiddenItem } from "./navigation/utils.js";
+import { shouldShowItem } from "./navigation/utils.js";
 import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
 import { Slot } from "./Slot.js";
@@ -28,7 +28,7 @@ export const MobileTopNavigation = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const accountItems = getProfileMenuItems();
-  const filteredItems = navigation.filter(isHiddenItem(authState, context));
+  const filteredItems = navigation.filter(shouldShowItem(authState, context));
 
   return (
     <Drawer
@@ -72,16 +72,14 @@ export const MobileTopNavigation = () => {
                     </li>
                   ) : (
                     Object.values(getProfileMenuItems()).length > 0 && (
-                      <Fragment>
-                        <li>
-                          {profile?.name ? `${profile.name}` : "My Account"}
-                          {profile?.email && (
-                            <div className="font-normal text-muted-foreground">
-                              {profile.email}
-                            </div>
-                          )}
-                        </li>
-                      </Fragment>
+                      <li>
+                        {profile?.name ? `${profile.name}` : "My Account"}
+                        {profile?.email && (
+                          <div className="font-normal text-muted-foreground">
+                            {profile.email}
+                          </div>
+                        )}
+                      </li>
                     )
                   )}
                 </ClientOnly>

package/src/lib/components/PathRenderer.tsx

@@ -22,7 +22,7 @@ export const PathRenderer = ({
     matches.forEach((match) => {
       const [originalValue, name] = match;
       if (!name) return;
-      const startIndex = match.index!;
+      const startIndex = match.index;
 
       if (startIndex > lastIndex) {
         elements.push(
@@ -50,7 +50,7 @@ export const PathRenderer = ({
     }
 
     return (
-      // eslint-disable-next-line react/no-array-index-key
+      // biome-ignore lint/suspicious/noArrayIndexKey: index should be stable
       <Fragment key={`${part}-${i}`}>
         {elements}
         {i < arr.length - 1 && "/"}

package/src/lib/components/Search.tsx

@@ -28,7 +28,7 @@ export const Search = ({ className }: { className?: string }) => {
     return () => {
       window.removeEventListener("keydown", onKeyDown);
     };
-  }, [isOpen, setIsOpen]);
+  }, [isOpen]);
 
   const searchPlugin = ctx.plugins.find(isSearchPlugin);
 

package/src/lib/components/Slot.test.tsx

@@ -1,18 +1,18 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   act,
+  type RenderResult,
   screen,
   render as testRender,
-  type RenderResult,
 } from "@testing-library/react";
 import type { PropsWithChildren, ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
 import { ZudokuContext } from "../core/ZudokuContext.js";
-import { Slot } from "./Slot.js";
 import { SlotProvider } from "./context/SlotProvider.js";
 import { ZudokuProvider } from "./context/ZudokuProvider.js";
+import { Slot } from "./Slot.js";
 
 /**
  * @vitest-environment happy-dom
@@ -196,12 +196,10 @@ describe("Slot", () => {
       expect(screen.getByText("Source content")).toBeInTheDocument();
 
       rerender(
-        <>
-          <Slot.Target
-            name="footer-after"
-            fallback={<div>Fallback content</div>}
-          />
-        </>,
+        <Slot.Target
+          name="footer-after"
+          fallback={<div>Fallback content</div>}
+        />,
       );
 
       expect(screen.getByText("Fallback content")).toBeInTheDocument();
@@ -374,11 +372,13 @@ describe("Slot", () => {
       await render(
         <>
           {manySlots.map((name) => (
+            // biome-ignore lint/suspicious/noExplicitAny: Allow any type
             <Slot.Source key={name} name={name as any}>
               <div>Content {name}</div>
             </Slot.Source>
           ))}
           {manySlots.map((name) => (
+            // biome-ignore lint/suspicious/noExplicitAny: Allow any type
             <Slot.Target key={name} name={name as any} />
           ))}
         </>,

package/src/lib/components/Slot.tsx

@@ -1,8 +1,8 @@
-import { useId, useLayoutEffect, type ReactNode } from "react";
+import { type ReactNode, useId, useLayoutEffect } from "react";
 import {
+  type SlotType,
   useRenderSlot,
   useSlotContext,
-  type SlotType,
 } from "./context/SlotProvider.js";
 
 // This is to augment the type of the Slot component with custom slot names

package/src/lib/components/TopNavigation.tsx

@@ -2,18 +2,18 @@ import { cx } from "class-variance-authority";
 import { deepEqual } from "fast-equals";
 import { Suspense } from "react";
 import { NavLink, type NavLinkProps } from "react-router";
-import { type NavigationItem } from "../../config/validators/NavigationSchema.js";
+import type { NavigationItem } from "../../config/validators/NavigationSchema.js";
 import { useAuth } from "../authentication/hook.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { isHiddenItem, traverseNavigationItem } from "./navigation/utils.js";
+import { shouldShowItem, traverseNavigationItem } from "./navigation/utils.js";
 import { Slot } from "./Slot.js";
 
 export const TopNavigation = () => {
   const context = useZudoku();
   const { navigation } = context;
   const auth = useAuth();
-  const filteredItems = navigation.filter(isHiddenItem(auth, context));
+  const filteredItems = navigation.filter(shouldShowItem(auth, context));
 
   if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;

package/src/lib/components/Zudoku.tsx

@@ -66,7 +66,7 @@ const ZudokoInner = memo(
     const queryClient = useQueryClient();
 
     useEffect(() => {
-      if (didNavigate) {
+      if (didNavigate || !navigation.location) {
         return;
       }
       setDidNavigate(true);
@@ -78,7 +78,7 @@ const ZudokoInner = memo(
       ?.flatMap((plugin) =>
         hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
       )
-      // eslint-disable-next-line react/no-array-index-key
+      // biome-ignore lint/suspicious/noArrayIndexKey: No other key is available
       .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
 
     return (

package/src/lib/components/context/ComponentsContext.tsx

@@ -1,8 +1,8 @@
 import {
-  createContext,
-  useContext,
   type ComponentProps,
   type ComponentType,
+  createContext,
+  useContext,
 } from "react";
 import { Header } from "../Header.js";
 

package/src/lib/components/context/RouterEventsEmitter.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useLocation, type Location } from "react-router";
+import { type Location, useLocation } from "react-router";
 import { useZudoku } from "./ZudokuContext.js";
 
 export const RouterEventsEmitter = () => {

package/src/lib/components/context/SlotProvider.tsx

@@ -1,17 +1,17 @@
 import {
+  type ComponentType,
   createContext,
   Fragment,
+  type PropsWithChildren,
+  type ReactNode,
   use,
   useMemo,
   useRef,
-  type ComponentType,
-  type PropsWithChildren,
-  type ReactNode,
 } from "react";
 import { createStore, useStore } from "zustand";
 import {
-  useExposedProps,
   type ExposedComponentProps,
+  useExposedProps,
 } from "../../util/useExposedProps.js";
 
 export type SlotType = ReactNode | ComponentType<ExposedComponentProps>;

package/src/lib/components/context/ViewportAnchorContext.tsx

@@ -1,12 +1,12 @@
 import {
   createContext,
+  type PropsWithChildren,
   use,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  type PropsWithChildren,
 } from "react";
 
 type AnchorContextType = {
@@ -128,7 +128,7 @@ export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
 
   const value = useMemo(
     () => ({ activeAnchor, setActiveAnchor, ...observeFns }),
-    [activeAnchor, setActiveAnchor, observeFns],
+    [activeAnchor, observeFns],
   );
 
   return (

package/src/lib/components/context/ZudokuContext.ts

@@ -1,10 +1,11 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect } from "react";
 import { matchPath, useLocation } from "react-router";
-import { type NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import { useAuthState } from "../../authentication/state.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import { CACHE_KEYS } from "../cache.js";
+import { CACHE_KEYS, useCache } from "../cache.js";
 import { traverseNavigation } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
@@ -23,6 +24,14 @@ export const useZudoku = () => {
 
 export const useApiIdentities = () => {
   const { getApiIdentities } = useZudoku();
+  const { isAuthenticated } = useAuthState();
+  const { invalidateCache } = useCache();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      invalidateCache("API_IDENTITIES");
+    }
+  }, [isAuthenticated, invalidateCache]);
 
   return useQuery({
     queryFn: getApiIdentities,
@@ -39,7 +48,7 @@ const getItemPath = (item: NavigationItem) => {
     case "link":
       return item.to;
     case "custom-page":
-      return item.path;
+      return joinUrl(item.path);
     default:
       return undefined;
   }

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { NO_DEHYDRATE } from "../cache.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 

package/src/lib/components/index.ts

@@ -3,46 +3,30 @@ import { Helmet } from "@zudoku/react-helmet-async";
 import { useTheme as useThemeImport } from "next-themes";
 import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
-import { RouteGuard as RouteGuardImport } from "../core/RouteGuard.js";
-import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
-import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
 import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
-import {
-  Bootstrap as BootstrapImport,
-  BootstrapStatic as BootstrapStaticImport,
-} from "./Bootstrap.js";
-import { BuildCheck as BuildCheckImport } from "./BuildCheck.js";
+import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import {
   CACHE_KEYS as CACHE_KEYS_IMPORT,
   useCache as useCacheImport,
 } from "./cache.js";
-import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
-import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Slot as SlotImport } from "./Slot.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
-import { StatusPage as StatusPageImport } from "./StatusPage.js";
 import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 
-export const Layout = /*@__PURE__*/ LayoutImport;
-export const RouterError = /*@__PURE__*/ RouterErrorImport;
-export const ServerError = /*@__PURE__*/ ServerErrorImport;
-export const Bootstrap = /*@__PURE__*/ BootstrapImport;
-export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
-export const RouteGuard = /*@__PURE__*/ RouteGuardImport;
 export const Head = /*@__PURE__*/ Helmet;
-export const StatusPage = /*@__PURE__*/ StatusPageImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const Markdown = /*@__PURE__*/ MarkdownImport;
 export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
-export const BuildCheck = /*@__PURE__*/ BuildCheckImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 export const Typography = /*@__PURE__*/ TypographyImport;
+export const Slot = /*@__PURE__*/ SlotImport;
 
 /** @deprecated Import from `zudoku/hooks` instead */
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

package/src/lib/components/navigation/NavigationCategory.tsx

@@ -46,7 +46,7 @@ const NavigationCategoryInner = ({
       }}
       variant="ghost"
       size="icon"
-      className="size-6 hover:bg-[hsl(from_hsl(var(--accent))_h_s_calc(l-5))] hover:dark:bg-[hsl(from_hsl(var(--accent))_h_s_calc(l+5))]"
+      className="size-6 hover:bg-[hsl(from_var(--accent)_h_s_calc(l+6*var(--dark)))]"
     >
       <ChevronRightIcon
         size={16}
@@ -104,7 +104,14 @@ const NavigationCategoryInner = ({
             </div>
           </NavLink>
         ) : (
-          <div onClick={() => setHasInteracted(true)} className={styles}>
+          // biome-ignore lint/a11y/noStaticElementInteractions: This is only to track if the user has interacted
+          <div
+            onClick={() => setHasInteracted(true)}
+            onKeyUp={(e) => {
+              if (e.key === "Enter" || e.key === " ") setHasInteracted(true);
+            }}
+            className={styles}
+          >
             {icon}
             <div className="flex items-center justify-between w-full">
               <div className="flex gap-2 truncate w-full">{category.label}</div>