zudoku 0.0.0-f3858d6 → 0.0.0-f49e3ea

package/src/lib/components/Bootstrap.tsx

@@ -1,5 +1,10 @@
+import {
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
-import { StrictMode } from "react";
+import { StrictMode, useState } from "react";
 import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
   type createStaticRouter,
@@ -15,13 +20,31 @@ const Bootstrap = ({
   hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
 }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 5,
+          },
+        },
+      }),
+  );
+
   return (
     <StrictMode>
-      <HelmetProvider>
-        <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-          <RouterProvider router={router} />
-        </StaggeredRenderContext.Provider>
-      </HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+          <HelmetProvider>
+            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+              <RouterProvider
+                router={router}
+                future={{ v7_startTransition: true }}
+              />
+            </StaggeredRenderContext.Provider>
+          </HelmetProvider>
+        </HydrationBoundary>
+      </QueryClientProvider>
     </StrictMode>
   );
 };
@@ -29,16 +52,20 @@ const Bootstrap = ({
 const BootstrapStatic = ({
   router,
   context,
+  queryClient,
   helmetContext,
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
+  queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;
 }) => (
   <StrictMode>
-    <HelmetProvider context={helmetContext}>
-      <StaticRouterProvider router={router} context={context} />
-    </HelmetProvider>
+    <QueryClientProvider client={queryClient}>
+      <HelmetProvider context={helmetContext}>
+        <StaticRouterProvider router={router} context={context} />
+      </HelmetProvider>
+    </QueryClientProvider>
   </StrictMode>
 );
 

package/src/lib/components/ClientOnly.tsx

@@ -1,13 +1,16 @@
-import { useSyncExternalStore } from "react";
+import { type ReactNode, useSyncExternalStore } from "react";
 
 const noop = () => () => {};
 
-export const ClientOnly = (props: { children: React.ReactNode }) => {
+export const ClientOnly = (props: {
+  children: ReactNode;
+  fallback?: ReactNode;
+}) => {
   const value = useSyncExternalStore(
     noop,
     () => "client",
     () => "server",
   );
 
-  return value === "client" ? props.children : null;
+  return value === "client" ? props.children : props.fallback;
 };

package/src/lib/components/DeveloperHint.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { Callout } from "../ui/Callout.js";
+import { Markdown } from "./Markdown.js";
 
 export const DeveloperHint = ({
   children,
@@ -13,7 +14,11 @@ export const DeveloperHint = ({
   return (
     <Callout type="caution" title="Developer hint" className={className}>
       <div className="flex flex-col gap-2">
-        <div>{children}</div>
+        {typeof children === "string" ? (
+          <Markdown content={children} />
+        ) : (
+          <div>{children}</div>
+        )}
         <small className="italic">
           Note: This hint is only shown in development mode.
         </small>

package/src/lib/components/Header.tsx

@@ -1,9 +1,9 @@
-import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
 import { Link } from "react-router-dom";
+import { Button } from "zudoku/ui/Button.js";
+import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
-import { Button } from "../ui/Button.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,13 +16,14 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
-import { cn } from "../util/cn.js";
+import { joinPath } from "../util/joinPath.js";
 import { Banner } from "./Banner.js";
-import { useTheme } from "./context/ThemeContext.js";
+import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
 import { Search } from "./Search.js";
 import { Slotlet } from "./SlotletProvider.js";
+import { ThemeSwitch } from "./ThemeSwitch.js";
 import { TopNavigation } from "./TopNavigation.js";
 
 const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
@@ -47,7 +48,6 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
 
 export const Header = memo(function HeaderInner() {
   const auth = useAuth();
-  const [isDark, toggleTheme] = useTheme();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const context = useZudoku();
   const { page, plugins } = context;
@@ -57,8 +57,6 @@ export const Header = memo(function HeaderInner() {
     .flatMap((p) => p.getProfileMenuItems(context))
     .map((i) => <RecursiveMenu key={i.label} item={i} />);
 
-  const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
-
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
@@ -73,22 +71,29 @@ export const Header = memo(function HeaderInner() {
                       src={
                         /https?:\/\//.test(page.logo.src.light)
                           ? page.logo.src.light
-                          : import.meta.env.BASE_URL + page.logo.src.light
+                          : joinPath(
+                              import.meta.env.BASE_URL,
+                              page.logo.src.light,
+                            )
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className={cn("h-10", isDark && "hidden")}
+                      className="h-10 dark:hidden"
                       loading="lazy"
                     />
                     <img
+                      data-hide-on-theme="light"
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
-                          : import.meta.env.BASE_URL + page.logo.src.dark
+                          : joinPath(
+                              import.meta.env.BASE_URL,
+                              page.logo.src.dark,
+                            )
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className={cn("h-10", !isDark && "hidden")}
+                      className="h-10"
                       loading="lazy"
                     />
                   </>
@@ -99,44 +104,41 @@ export const Header = memo(function HeaderInner() {
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-2 md:grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full justify-center hidden md:flex ">
+          <div className="grid grid-cols-1 lg:grid-cols-[--sidecar-grid-cols] items-center gap-8">
+            <div className="w-full justify-center hidden lg:flex">
               <Search />
             </div>
 
             <MobileTopNavigation />
             <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
               <Slotlet name="head-navigation-start" />
-              {isAuthEnabled && !isAuthenticated ? (
-                <Button variant="ghost" onClick={() => auth.login()}>
-                  Login
-                </Button>
-              ) : (
-                accountItems.length > 0 && (
-                  <DropdownMenu modal={false}>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost">
-                        {profile?.email ? `${profile.email}` : "My Account"}
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent className="w-56">
-                      <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                      <DropdownMenuSeparator />
-                      {accountItems}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                )
+              {isAuthEnabled && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded h-5 w-24 mr-4" />}
+                >
+                  {!isAuthenticated ? (
+                    <Button variant="ghost" onClick={() => auth.login()}>
+                      Login
+                    </Button>
+                  ) : (
+                    accountItems.length > 0 && (
+                      <DropdownMenu modal={false}>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost">
+                            {profile?.email ? `${profile.email}` : "My Account"}
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-56">
+                          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                          <DropdownMenuSeparator />
+                          {accountItems}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )
+                  )}
+                </ClientOnly>
               )}
-              <button
-                type="button"
-                aria-label={
-                  isDark ? "Switch to light mode" : "Switch to dark mode"
-                }
-                className="cursor-pointer hover:bg-secondary p-2.5 -m-2.5 rounded-full"
-                onClick={toggleTheme}
-              >
-                <ThemeIcon size={18} />
-              </button>
+              <ThemeSwitch />
               <Slotlet name="head-navigation-end" />
             </div>
           </div>

package/src/lib/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { PanelLeftIcon } from "lucide-react";
 import { Suspense, useEffect, useRef, type ReactNode } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useNavigation } from "react-router-dom";
 import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
@@ -13,6 +13,12 @@ import { Sidebar } from "./navigation/Sidebar.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
+const LoadingFallback = () => (
+  <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
+    <Spinner />
+  </main>
+);
+
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
@@ -36,6 +42,9 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     previousLocationPath.current = location.pathname;
   }, [location.pathname, setActiveAnchor]);
 
+  // Page transition is happening: https://reactrouter.com/start/framework/pending-ui#global-pending-navigation
+  const isNavigating = Boolean(useNavigation().location);
+
   return (
     <>
       {import.meta.env.MODE === "standalone" && (
@@ -52,41 +61,39 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Slotlet name="layout-after-head" />
 
       <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
-        <Suspense
-          fallback={
-            <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
-              <Spinner />
-            </main>
-          }
-        >
-          <Drawer direction="left">
-            <Sidebar />
-            <div
-              className={cn(
-                "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
-                "peer-data-[navigation=false]:hidden",
-              )}
-            >
-              <DrawerTrigger className="flex items-center gap-2">
-                <PanelLeftIcon size={16} strokeWidth={1.5} />
-                <span className="text-sm">Menu</span>
-              </DrawerTrigger>
-            </div>
-            <main
-              className={cn(
-                "h-full dark:border-white/10 translate-x-0",
-                "lg:overflow-visible",
-                // This works in tandem with the `SidebarWrapper` component
-                "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
-                "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
-              )}
-            >
-              <Slotlet name="zudoku-before-content" />
-              {children ?? <Outlet />}
-              <Slotlet name="zudoku-after-content" />
-            </main>
-          </Drawer>
-        </Suspense>
+        {isNavigating ? (
+          <LoadingFallback />
+        ) : (
+          <Suspense fallback={<LoadingFallback />}>
+            <Drawer direction="left">
+              <Sidebar />
+              <div
+                className={cn(
+                  "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
+                  "peer-data-[navigation=false]:hidden",
+                )}
+              >
+                <DrawerTrigger className="flex items-center gap-2">
+                  <PanelLeftIcon size={16} strokeWidth={1.5} />
+                  <span className="text-sm">Menu</span>
+                </DrawerTrigger>
+              </div>
+              <main
+                className={cn(
+                  "h-full dark:border-white/10 translate-x-0",
+                  "lg:overflow-visible",
+                  // This works in tandem with the `SidebarWrapper` component
+                  "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
+                  "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
+                )}
+              >
+                <Slotlet name="zudoku-before-content" />
+                {children ?? <Outlet />}
+                <Slotlet name="zudoku-after-content" />
+              </main>
+            </Drawer>
+          </Suspense>
+        )}
       </div>
     </>
   );

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,50 +1,53 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { cx } from "class-variance-authority";
 import { MenuIcon } from "lucide-react";
-import { NavLink } from "react-router-dom";
+import { useState } from "react";
+import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
-  DrawerClose,
   DrawerContent,
   DrawerTitle,
   DrawerTrigger,
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { Search } from "./Search.js";
+import { ThemeSwitch } from "./ThemeSwitch.js";
+import { isHiddenItem, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation } = useZudoku();
+  const { isAuthenticated } = useAuth();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
   return (
-    <Drawer direction="right">
+    <Drawer
+      direction="right"
+      open={drawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
       <div className="flex lg:hidden justify-self-end">
         <DrawerTrigger className="lg:hidden">
           <MenuIcon size={22} />
         </DrawerTrigger>
       </div>
       <DrawerContent
-        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none"
+        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>
           <DrawerTitle>Navigation</DrawerTitle>
         </VisuallyHidden>
-        <Search />
+        <div className="flex p-4">
+          <Search />
+        </div>
         <ul className="flex flex-col items-center gap-4 p-4">
-          {topNavigation.map((item) => (
+          <li>
+            <ThemeSwitch />
+          </li>
+          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
             <li key={item.label}>
-              <NavLink
-                className={({ isActive }) =>
-                  cx(
-                    "block font-medium border-b-2",
-                    isActive
-                      ? "border-primary text-foreground"
-                      : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-                  )
-                }
-                to={item.id}
-              >
-                <DrawerClose>{item.label}</DrawerClose>
-              </NavLink>
+              <button onClick={() => setDrawerOpen(false)}>
+                <TopNavItem {...item} />
+              </button>
             </li>
           ))}
         </ul>

package/src/lib/components/Search.tsx

@@ -39,7 +39,7 @@ export const Search = () => {
       <button
         type="button"
         onClick={() => setIsOpen(true)}
-        className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72"
+        className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-full sm:w-72"
       >
         <div className="flex items-center gap-2 flex-grow">
           <SearchIcon size={14} />

package/src/lib/components/SlotletProvider.tsx

@@ -5,10 +5,17 @@ import React, {
   useContext,
 } from "react";
 import { isValidElementType } from "react-is";
-import { useLocation } from "react-router-dom";
+import {
+  type Location,
+  type NavigateFunction,
+  type Params,
+  type SetURLSearchParams,
+} from "react-router-dom";
+import { useExposedProps } from "../util/useExposedProps.js";
+
 export type Slotlets = Record<
   string,
-  ReactNode | ReactElement | ComponentType<SlotletComponentProps>
+  ReactNode | ReactElement | ComponentType<ExposedComponentProps>
 >;
 
 const SlotletContext = React.createContext<Slotlets | undefined>({});
@@ -27,19 +34,21 @@ export const SlotletProvider = ({
   );
 };
 
-export type SlotletComponentProps = {
+export type ExposedComponentProps = {
   location: Location;
+  navigate: NavigateFunction;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
+  params: Params;
 };
 
 export const Slotlet = ({ name }: { name: string }) => {
   const context = useContext(SlotletContext);
   const componentOrElement = context?.[name];
-  const location = useLocation();
+  const slotletProps = useExposedProps();
 
   if (isValidElementType(componentOrElement)) {
-    return React.createElement(componentOrElement, {
-      location,
-    });
+    return React.createElement(componentOrElement, slotletProps);
   }
 
   return componentOrElement as ReactNode;