zudoku 0.0.0-f9d5b02 → 0.0.0-fa903e7

package/src/lib/authentication/providers/openid.tsx

@@ -107,7 +107,10 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
-    sessionStorage.setItem("token-state", JSON.stringify(tokens));
+
+    useAuthState.setState({
+      providerData: tokens,
+    });
   }
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
@@ -194,14 +197,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
-    const tokenState = sessionStorage.getItem("token-state");
-    if (!tokenState) {
+    const { providerData } = useAuthState.getState();
+    if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
+    const tokenState = providerData as TokenState;
 
-    const state = JSON.parse(tokenState) as TokenState;
-    if (state.expiresOn < new Date()) {
-      if (!state.refreshToken) {
+    if (tokenState.expiresOn < new Date()) {
+      if (!tokenState.refreshToken) {
         await this.signIn();
         return "";
       }
@@ -209,7 +212,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       const request = await oauth.refreshTokenGrantRequest(
         as,
         this.client,
-        state.refreshToken,
+        tokenState.refreshToken,
       );
       const response = await oauth.processRefreshTokenResponse(
         as,
@@ -225,7 +228,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
       return response.access_token.toString();
     } else {
-      return state.accessToken;
+      return tokenState.accessToken;
     }
   }
 
@@ -234,8 +237,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       isAuthenticated: false,
       isPending: false,
       profile: undefined,
+      providerData: undefined,
     });
-    sessionStorage.clear();
 
     const as = await this.getAuthServer();
 
@@ -342,32 +345,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       profile,
     });
 
-    sessionStorage.setItem(
-      "profile-state",
-      JSON.stringify(useAuthState.getState().profile),
-    );
-
     const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
     sessionStorage.removeItem("redirect-to");
     return redirectTo;
   };
 
-  pageLoad(): void {
-    const profileState = sessionStorage.getItem("profile-state");
-    if (profileState) {
-      try {
-        const profile = JSON.parse(profileState);
-        useAuthState.setState({
-          isAuthenticated: true,
-          isPending: false,
-          profile,
-        });
-      } catch (err) {
-        logger.error("Error parsing auth state", err);
-      }
-    }
-  }
-
   getAuthenticationPlugin() {
     // TODO: This API is a bit messy, we need to refactor auth plugins/providers
     // to remove the extra layers of abstraction.

package/src/lib/authentication/state.ts

@@ -1,24 +1,58 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import { shared } from "./use-broadcast/shared.js";
+import { create, type Mutate, type StoreApi } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 
-export interface AuthState {
+export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
   isPending: boolean;
-  profile?: UserProfile;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
 }
 
-export const useAuthState = create<AuthState>(
-  shared(
-    (_) => ({
+export class Authentication {
+  async setLoggedIn(isLoggedIn: boolean) {}
+  async setProfile() {}
+  async setPersistentProviderData() {}
+}
+
+export type StoreWithPersist<T> = Mutate<
+  StoreApi<T>,
+  [["zustand/persist", unknown]]
+>;
+
+export const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
+  const storageEventCallback = (e: StorageEvent) => {
+    if (e.key === store.persist.getOptions().name && e.newValue) {
+      void store.persist.rehydrate();
+    }
+  };
+
+  window.addEventListener("storage", storageEventCallback);
+
+  return () => {
+    window.removeEventListener("storage", storageEventCallback);
+  };
+};
+
+export const useAuthState = create<AuthState>()(
+  persist(
+    (state) => ({
       isAuthenticated: false,
       isPending: false,
-      profile: undefined,
+      profile: null,
+      providerData: null,
     }),
-    { name: "auth-state" },
+    {
+      name: "auth-state",
+      storage: createJSONStorage(() => localStorage),
+      // partialize: (s) => ({ state: s }),
+    },
   ),
 );
 
+if (typeof window !== "undefined") {
+  withStorageDOMEvents(useAuthState);
+}
+
 export interface UserProfile {
   sub: string;
   email: string | undefined;

package/src/lib/components/Bootstrap.tsx

@@ -4,7 +4,7 @@ import {
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
-import { StrictMode, useMemo } from "react";
+import { StrictMode } from "react";
 import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
   type createStaticRouter,
@@ -13,29 +13,36 @@ import {
 } from "react-router-dom/server.js";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
+
 const Bootstrap = ({
   router,
   hydrate = false,
 }: {
   hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
-}) => {
-  const queryClient = useMemo(() => new QueryClient(), []);
-
-  return (
-    <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
-          <HelmetProvider>
-            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-              <RouterProvider router={router} />
-            </StaggeredRenderContext.Provider>
-          </HelmetProvider>
-        </HydrationBoundary>
-      </QueryClientProvider>
-    </StrictMode>
-  );
-};
+}) => (
+  <StrictMode>
+    <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>
+);
 
 const BootstrapStatic = ({
   router,

package/src/lib/components/Header.tsx

@@ -41,7 +41,12 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
     </DropdownMenuSub>
   ) : (
     <Link to={item.path ?? ""}>
-      <DropdownMenuItem key={item.label}>{item.label}</DropdownMenuItem>
+      <DropdownMenuItem key={item.label} className="flex gap-2">
+        {item.icon && (
+          <item.icon size={16} strokeWidth={1} absoluteStrokeWidth />
+        )}
+        {item.label}
+      </DropdownMenuItem>
     </Link>
   );
 };
@@ -55,7 +60,7 @@ export const Header = memo(function HeaderInner() {
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
-    .map((i) => <RecursiveMenu key={i.label} item={i} />);
+    .sort((i) => i.weight ?? 0);
 
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
@@ -82,7 +87,6 @@ export const Header = memo(function HeaderInner() {
                       loading="lazy"
                     />
                     <img
-                      data-hide-on-theme="light"
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
@@ -93,7 +97,7 @@ export const Header = memo(function HeaderInner() {
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className="h-10"
+                      className="h-10 hidden dark:block"
                       loading="lazy"
                     />
                   </>
@@ -121,17 +125,46 @@ export const Header = memo(function HeaderInner() {
                       Login
                     </Button>
                   ) : (
-                    accountItems.length > 0 && (
+                    Object.values(accountItems).length > 0 && (
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <Button variant="ghost">
-                            {profile?.email ? `${profile.email}` : "My Account"}
+                            {profile?.name ? `${profile.name}` : "My Account"}
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className="w-56">
-                          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                          <DropdownMenuSeparator />
-                          {accountItems}
+                          <DropdownMenuLabel>
+                            {profile?.name ? `${profile.name}` : "My Account"}
+                            {profile?.email && (
+                              <div className="font-normal text-muted-foreground">
+                                {profile.email}
+                              </div>
+                            )}
+                          </DropdownMenuLabel>
+                          {accountItems.filter((i) => i.category === "top")
+                            .length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter((i) => i.category === "top")
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
+                          {accountItems.filter(
+                            (i) => !i.category || i.category === "middle",
+                          ).length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter(
+                              (i) => !i.category || i.category === "middle",
+                            )
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
+                          {accountItems.filter((i) => i.category === "bottom")
+                            .length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter((i) => i.category === "bottom")
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
                         </DropdownMenuContent>
                       </DropdownMenu>
                     )

package/src/lib/components/Layout.tsx

@@ -1,7 +1,8 @@
 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 { useSpinDelay } from "spin-delay";
 import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
@@ -13,6 +14,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();
@@ -25,7 +32,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   useEffect(() => {
     // Initialize the authentication plugin
-    authentication?.pageLoad?.();
+    authentication?.onPageLoad?.();
   }, [authentication]);
 
   useEffect(() => {
@@ -36,6 +43,13 @@ 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);
+  const showSpinner = useSpinDelay(isNavigating, {
+    delay: 300,
+    minDuration: 500,
+  });
+
   return (
     <>
       {import.meta.env.MODE === "standalone" && (
@@ -52,41 +66,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>
+        {showSpinner ? (
+          <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,11 +1,9 @@
 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,
@@ -13,14 +11,19 @@ import {
 import { useZudoku } from "./context/ZudokuContext.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem } from "./TopNavigation.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} />
@@ -42,19 +45,9 @@ export const MobileTopNavigation = () => {
           </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/SyntaxHighlight.tsx

@@ -56,14 +56,15 @@ export const SyntaxHighlight = ({
   language = "plain",
   ...props
 }: SyntaxHighlightProps) => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
   if (!props.code) {
     return null;
   }
 
-  const highlightTheme = theme === "dark" ? themes.vsDark : themes.github;
+  const highlightTheme =
+    resolvedTheme === "dark" ? themes.vsDark : themes.github;
 
   // hardcoded values from the themes to avoid color flash in SSR
   const themeColorClasses =

package/src/lib/components/ThemeSwitch.tsx

@@ -4,18 +4,20 @@ import { Button } from "zudoku/ui/Button.js";
 import { ClientOnly } from "./ClientOnly.js";
 
 export const ThemeSwitch = () => {
-  const { theme, setTheme } = useTheme();
-  const ThemeIcon = theme === "dark" ? MoonStarIcon : SunIcon;
+  const { resolvedTheme, setTheme } = useTheme();
+  const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
 
   return (
     <ClientOnly>
       <Button
         variant="ghost"
         aria-label={
-          theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+          resolvedTheme === "dark"
+            ? "Switch to light mode"
+            : "Switch to dark mode"
         }
         className="p-2.5 -m-2.5 rounded-full"
-        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
       >
         <ThemeIcon size={18} />
       </Button>

package/src/lib/components/TopNavigation.tsx

@@ -1,8 +1,9 @@
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
-import { Link } from "react-router-dom";
+import { NavLink, useNavigation } from "react-router-dom";
 import { TopNavigationItem } from "../../config/validators/validate.js";
 import { useAuth } from "../authentication/hook.js";
+import { ZudokuError } from "../util/invariant.js";
 import { joinPath } from "../util/joinPath.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { traverseSidebar } from "./navigation/utils.js";
@@ -42,10 +43,16 @@ export const TopNavigation = () => {
   );
 };
 
-const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
+export const TopNavItem = ({
+  id,
+  label,
+  default: defaultLink,
+}: TopNavigationItem) => {
   const { sidebars } = useZudoku();
-  const nav = useCurrentNavigation();
   const currentSidebar = sidebars[id];
+  const currentNav = useCurrentNavigation();
+  const isNavigating = Boolean(useNavigation().location);
+  const isActive = currentNav.topNavItem?.id === id && !isNavigating;
 
   // TODO: This is a bit of a hack to get the first link in the sidebar
   // We should really process this when we load the config so we can validate
@@ -60,25 +67,26 @@ const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
       : joinPath(id));
 
   if (!first) {
-    throw new Error(
-      `No links found in top navigation for top navigation '${id}'. Check that the sidebar isn't empty or that a default link set.`,
-    );
+    throw new ZudokuError("Page not found.", {
+      developerHint: `No links found in top navigation for '${id}'. Check that the sidebar isn't empty or that a default link is set.`,
+    });
   }
 
-  // Manually set the active sidebar based on our logic of what is active
-  const isActive = nav.topNavItem?.id === id;
-
   return (
-    <Link
-      className={cx(
-        "block py-3.5 font-medium -mb-px border-b-2",
-        isActive
-          ? "border-primary text-foreground"
-          : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-      )}
+    // We don't use isActive here because it has to be inside the sidebar,
+    // the top nav id doesn't necessarily start with the sidebar id
+    <NavLink
+      className={({ isPending }) =>
+        cx(
+          "block lg:py-3.5 font-medium -mb-px border-b-2",
+          isActive || isPending
+            ? "border-primary text-foreground"
+            : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
+        )
+      }
       to={first}
     >
       {label}
-    </Link>
+    </NavLink>
   );
 };

package/src/lib/core/plugins.ts

@@ -1,3 +1,4 @@
+import type { LucideProps } from "lucide-react";
 import { type ReactElement } from "react";
 import { type RouteObject } from "react-router-dom";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
@@ -36,7 +37,14 @@ export interface ProfileMenuPlugin {
 export type ProfileNavigationItem = {
   label: string;
   path?: string;
+  weight?: number;
+  category?: "top" | "middle" | "bottom";
   children?: ProfileNavigationItem[];
+  icon?: React.ComponentType<
+    LucideProps & {
+      [key: string]: any;
+    }
+  >;
 };
 
 export interface CommonPlugin {