zudoku 0.0.0-f2a195f → 0.0.0-f2c28ed

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

@@ -1,24 +1,25 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
+import { deepEqual } from "fast-equals";
 import { ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { NavLink } from "react-router-dom";
+import { memo, useEffect, useState } from "react";
+import { NavLink, useLocation, useMatch } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
-import { joinPath } from "../../util/joinPath.js";
-import { useTopNavigationItem } from "../context/ZudokuContext.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
 
-export const SidebarCategory = ({
+const SidebarCategoryInner = ({
   category,
-  level,
+  onRequestClose,
 }: {
   category: SidebarItemCategory;
-  level: number;
+  onRequestClose?: () => void;
 }) => {
-  const topNavItem = useTopNavigationItem();
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
+  const location = useLocation();
 
   const isCollapsible = category.collapsible ?? true;
   const isCollapsed = category.collapsed ?? true;
@@ -26,6 +27,7 @@ export const SidebarCategory = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
+  const isActive = useMatch(category.link?.id ?? "");
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -36,83 +38,90 @@ export const SidebarCategory = ({
   }, [isCategoryOpen]);
 
   const ToggleButton = isCollapsible && (
-    <button
-      type="button"
+    <Button
       onClick={(e) => {
         e.preventDefault();
         setOpen((prev) => !prev);
         setHasInteracted(true);
       }}
+      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))]"
     >
       <ChevronRightIcon
         size={16}
         className={cn(
           hasInteracted && "transition",
-          "shrink-0 group-data-[state=open]:rotate-90",
+          "shrink-0 group-data-[state=open]:rotate-90 rtl:rotate-180",
         )}
       />
-    </button>
+    </Button>
   );
 
+  const icon = category.icon && (
+    <category.icon
+      size={16}
+      className={cn("align-[-0.125em] ", isActive && "text-primary")}
+    />
+  );
+
+  const styles = navigationListItem({
+    className: [
+      "group text-start font-medium",
+      isCollapsible || typeof category.link !== "undefined"
+        ? "cursor-pointer"
+        : "cursor-default hover:bg-transparent",
+    ],
+  });
+
   return (
     <Collapsible.Root
-      className={cn("flex flex-col", level === 0 && "-mx-[--padding-nav-item]")}
+      className="flex flex-col"
       defaultOpen={isDefaultOpen}
       open={open}
       onOpenChange={() => setOpen(true)}
     >
       <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
-        <div
-          className={cn(
-            "text-start",
-            navigationListItem({ isActive: false, isTopLevel: level === 0 }),
-            isCollapsible
-              ? "cursor-pointer"
-              : "cursor-default hover:bg-transparent",
-          )}
-        >
-          {category.icon && (
-            <category.icon
-              size={16}
-              className="align-[-0.125em] -translate-x-1"
-            />
-          )}
-          {category.link?.type === "doc" ? (
-            <NavLink
-              to={joinPath(topNavItem?.id, category.link.id)}
-              className="flex-1"
-              onClick={() => setHasInteracted(true)}
-            >
-              {({ isActive }) => (
-                <div
-                  className={cn(
-                    "flex items-center gap-2 justify-between w-full",
-                    isActive
-                      ? "text-primary font-medium"
-                      : "text-foreground/80",
-                  )}
-                >
-                  <div className="truncate">{category.label}</div>
-                  {ToggleButton}
-                </div>
-              )}
-            </NavLink>
-          ) : (
+        {category.link?.type === "doc" ? (
+          <NavLink
+            to={{
+              pathname: joinUrl(category.link.id),
+              search: location.search,
+            }}
+            className={styles}
+            onClick={() => {
+              setHasInteracted(true);
+              // if it is the current path and closed then open it because there's no path change to trigger the open
+              if (isActive && !open) {
+                setOpen(true);
+              }
+            }}
+          >
+            {icon}
+            <div className="flex items-center gap-2 justify-between w-full text-foreground/80 group-aria-[current='page']:text-primary">
+              <div className="truncate">{category.label}</div>
+              {ToggleButton}
+            </div>
+          </NavLink>
+        ) : (
+          <div onClick={() => 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>
               {ToggleButton}
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </Collapsible.Trigger>
       <Collapsible.Content
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
-          "ms-[calc(var(--padding-nav-item)*1.125)]",
+          category.items.length === 0 && "hidden",
+          "ms-6 my-1",
         )}
       >
-        <ul className="mt-1 border-l ps-2">
+        <ul className="relative after:absolute after:-start-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
           {category.items.map((item) => (
             <SidebarItem
               key={
@@ -120,7 +129,7 @@ export const SidebarCategory = ({
                 ("href" in item ? item.href : "") +
                 item.label
               }
-              level={level + 1}
+              onRequestClose={onRequestClose}
               item={item}
             />
           ))}
@@ -129,3 +138,7 @@ export const SidebarCategory = ({
     </Collapsible.Root>
   );
 };
+
+export const SidebarCategory = memo(SidebarCategoryInner, deepEqual);
+
+SidebarCategory.displayName = "SidebarCategory";

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

@@ -1,31 +1,33 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router-dom";
+import { NavLink, useLocation } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { cn } from "../../util/cn.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
-import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
+  "flex items-center gap-2 px-[--padding-nav-item] my-0.5 py-1.5 rounded-lg hover:bg-accent tabular-nums",
   {
     variants: {
-      isTopLevel: {
-        true: "font-semibold",
-      },
       isActive: {
-        true: "text-primary font-medium",
+        true: "bg-accent font-medium",
         false: "text-foreground/80",
       },
       isMuted: {
         true: "text-foreground/30",
         false: "",
       },
+      isPending: {
+        true: "bg-accent animate-pulse",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isActive: false,
     },
   },
 );
@@ -34,31 +36,33 @@ export const DATA_ANCHOR_ATTR = "data-anchor";
 
 export const SidebarItem = ({
   item,
-  level = 0,
+  onRequestClose,
 }: {
   item: SidebarItemType;
-  basePath?: string;
-  level?: number;
+  onRequestClose?: () => void;
 }) => {
-  const topNavItem = useTopNavigationItem();
+  const location = useLocation();
   const { activeAnchor } = useViewportAnchor();
-  const [searchParams] = useSearchParams();
 
   switch (item.type) {
     case "category":
-      return <SidebarCategory category={item} level={level} />;
+      return (
+        <SidebarCategory category={item} onRequestClose={onRequestClose} />
+      );
     case "doc":
       return (
         <NavLink
-          className={({ isActive }) =>
-            navigationListItem({ isActive, isTopLevel: level === 0 })
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
           }
-          to={joinPath(topNavItem?.id, item.id)}
+          to={joinUrl(item.id)}
+          onClick={onRequestClose}
+          end
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
-              <span className="truncate" title={item.label}>
+              <span className="truncate flex-1" title={item.label}>
                 {item.label}
               </span>
               <SidebarBadge {...item.badge} />
@@ -69,17 +73,19 @@ export const SidebarItem = ({
         </NavLink>
       );
     case "link":
-      return item.href.startsWith("#") ? (
+      return !item.href.startsWith("http") ? (
         <AnchorLink
-          to={{ hash: item.href, search: searchParams.toString() }}
-          {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
-          className={cn(
-            "flex gap-2.5 justify-between",
-            level === 0 && "-mx-[--padding-nav-item]",
-            navigationListItem({
-              isActive: item.href.slice(1) === activeAnchor,
-            }),
-          )}
+          to={{
+            pathname: item.href.split("#")[0],
+            hash: item.href.split("#")[1],
+            search: location.search,
+          }}
+          {...{ [DATA_ANCHOR_ATTR]: item.href.split("#")[1] }}
+          className={navigationListItem({
+            isActive: item.href === [location.pathname, activeAnchor].join("#"),
+            className: item.badge?.placement !== "start" && "justify-between",
+          })}
+          onClick={onRequestClose}
         >
           {item.badge ? (
             <>
@@ -92,37 +98,18 @@ export const SidebarItem = ({
             <span className="break-all">{item.label}</span>
           )}
         </AnchorLink>
-      ) : !item.href.startsWith("http") ? (
-        <NavLink
-          className={cn("flex gap-2.5 justify-between", navigationListItem())}
-          to={item.href}
-        >
-          {item.badge ? (
-            <>
-              <span className="truncate" title={item.label}>
-                {item.label}
-              </span>
-              <SidebarBadge {...item.badge} />
-            </>
-          ) : (
-            <span className="break-all">{item.label}</span>
-          )}
-        </NavLink>
       ) : (
         <a
-          className={cn(
-            navigationListItem({ isTopLevel: level === 0 }),
-            "block",
-          )}
+          className={navigationListItem()}
           href={item.href}
           target="_blank"
           rel="noopener noreferrer"
+          onClick={onRequestClose}
         >
           <span className="whitespace-normal">{item.label}</span>
           {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
           <span className="whitespace-nowrap">
-            &nbsp;
-            <ExternalLinkIcon className="inline ml-1" size={12} />
+            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
           </span>
         </a>
       );

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

@@ -1,26 +1,46 @@
-import { forwardRef, type PropsWithChildren } from "react";
+import { useEffect, useRef, type PropsWithChildren } from "react";
 import { cn } from "../../util/cn.js";
+import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { PoweredByZudoku } from "./PoweredByZudoku.js";
 
-export const SidebarWrapper = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
->(({ children, className, pushMainContent }, ref) => (
-  <nav
-    // this data attribute is used in `Layout.tsx` to determine if side navigation
-    // is present for the current page so the main content is pushed to the right
-    // it's also important to set `peer` class here.
-    // maybe this could be simplified by adjusting the layout
-    data-navigation={String(pushMainContent)}
-    className={cn(
-      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
-      "px-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
-      "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
-      className,
-    )}
-    ref={ref}
-  >
-    {children}
-  </nav>
-));
+export const SidebarWrapper = ({
+  children,
+  className,
+}: PropsWithChildren<{
+  className?: string;
+}>) => {
+  const { options } = useZudoku();
+  const navRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const active = navRef.current?.querySelector('[aria-current="page"]');
+    scrollIntoViewIfNeeded(active ?? null);
+  }, []);
+
+  return (
+    <div className="grid sticky top-[--header-height] lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r">
+      <nav
+        ref={navRef}
+        className={cn(
+          "hidden max-w-[calc(var(--side-nav-width)+var(--padding-nav-item))] lg:flex scrollbar flex-col overflow-y-auto shrink-0 text-sm pe-3 ps-4 lg:ps-8",
+          "-mx-[--padding-nav-item] pb-[8vh] pt-[--padding-content-top] scroll-pt-2 gap-1",
+          // Revert the padding/margin on the first child
+          "-mt-2.5",
+          className,
+        )}
+        style={{
+          maskImage: `linear-gradient(180deg, transparent 1%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 90%, transparent 99%)`,
+        }}
+      >
+        {children}
+      </nav>
+
+      <div className="bg-background border-t p-2 mx-5  gap-2 items-center mt-2 drop-shadow-[0_-3px_1px_rgba(0,0,0,0.015)] hidden lg:[&:has(>_:nth-child(1):last-child)]:flex">
+        {options.page?.showPoweredBy !== false && <PoweredByZudoku />}
+      </div>
+    </div>
+  );
+};
 
 SidebarWrapper.displayName = "SidebarWrapper";

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

@@ -0,0 +1,126 @@
+import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
+import { ListTreeIcon } from "lucide-react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PropsWithChildren,
+} from "react";
+import { cn } from "../../util/cn.js";
+import { AnchorLink } from "../AnchorLink.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
+
+const DATA_ANCHOR_ATTR = "data-active";
+
+const TocItem = ({
+  item,
+  children,
+  className,
+  isActive,
+}: PropsWithChildren<{
+  item: TocEntry;
+  isActive: boolean;
+  className?: string;
+}>) => {
+  return (
+    <li className={cn("truncate", className)} title={item.value}>
+      <AnchorLink
+        to={`#${item.id}`}
+        {...{ [DATA_ANCHOR_ATTR]: item.id }}
+        className={cn(
+          isActive
+            ? "text-primary"
+            : "hover:text-accent-foreground text-muted-foreground",
+        )}
+      >
+        {item.value}
+      </AnchorLink>
+      {children}
+    </li>
+  );
+};
+
+export const Toc = ({ entries }: { entries: TocEntry[] }) => {
+  const { activeAnchor } = useViewportAnchor();
+  const listWrapperRef = useRef<HTMLUListElement>(null);
+  const paintedOnce = useRef(false);
+  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({
+    top: 0,
+    opacity: 0,
+  });
+
+  // synchronize active anchor indicator with the scroll position
+  useEffect(() => {
+    if (!listWrapperRef.current) return;
+
+    const activeElement = listWrapperRef.current.querySelector(
+      `[${DATA_ANCHOR_ATTR}='${activeAnchor}']`,
+    );
+
+    if (!activeElement) {
+      setIndicatorStyles({ top: 0, opacity: 0 });
+      return;
+    }
+
+    const topParent = listWrapperRef.current.getBoundingClientRect().top;
+    const topElement = activeElement.getBoundingClientRect().top;
+
+    setIndicatorStyles({
+      opacity: 1,
+      top: `${topElement - topParent}px`,
+    });
+
+    if (paintedOnce.current) return;
+
+    // after all is painted, the indicator should animate
+    requestIdleCallback(() => {
+      paintedOnce.current = true;
+    });
+  }, [activeAnchor]);
+
+  return (
+    <aside className="sticky scrollbar top-8 lg:top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
+      <div className="flex items-center gap-2 font-medium mb-2">
+        <ListTreeIcon size={16} />
+        On this page
+      </div>
+      <div className="relative ms-2 ps-4">
+        <div className="absolute inset-0 end-auto bg-border w-[2px]" />
+        <div
+          className={cn(
+            "absolute -start-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
+            paintedOnce.current &&
+              "ease-out [transition:top_150ms,opacity_325ms]",
+          )}
+          style={indicatorStyle}
+        />
+        <ul
+          ref={listWrapperRef}
+          className="relative font-medium list-none space-y-2"
+        >
+          {entries.map((item) => (
+            <TocItem
+              isActive={item.id === activeAnchor}
+              key={item.id}
+              item={item}
+              className="ps-0"
+            >
+              {item.children && (
+                <ul className="list-none ps-4 pt-2 space-y-2">
+                  {item.children.map((child) => (
+                    <TocItem
+                      item={child}
+                      isActive={child.id === activeAnchor}
+                      key={child.id}
+                    />
+                  ))}
+                </ul>
+              )}
+            </TocItem>
+          ))}
+        </ul>
+      </div>
+    </aside>
+  );
+};

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 132 100"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M80.092 2.963A4.66 4.66 0 0 1 84.449 0h34.049c6.325 0 10.835 6.135 8.948 12.172L116.653 46.71a4.688 4.688 0 0 1-4.474 3.29H75c-5.178 0-7.813 4.687-9.375 9.374-1.288 3.864-11.07 28.963-14.467 37.662A4.66 4.66 0 0 1 46.801 100H12.75c-6.324 0-10.834-6.134-8.947-12.171l10.793-34.54A4.688 4.688 0 0 1 19.071 50H56.25c5.178 0 7.813-4.687 9.375-9.375 1.288-3.864 11.07-28.962 14.467-37.662Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M83.54 57.813a7.813 7.813 0 0 0-7.316 5.07L63.888 95.777c-.766 2.043.744 4.222 2.926 4.222h36.828c5.211 0 9.875-3.232 11.704-8.11l8.821-23.522c1.915-5.107-1.861-10.555-7.315-10.555H83.539ZM29.17 0a12.5 12.5 0 0 0-11.704 8.111l-8.82 23.521c-1.915 5.107 1.86 10.556 7.315 10.556h33.312a7.813 7.813 0 0 0 7.316-5.07L68.924 4.223C69.691 2.18 68.18 0 65.998 0H29.17Z"
+    />
+  </svg>
+);
+
+ZudokuLogo.displayName = "ZudokuLogo";
+
+export default ZudokuLogo;

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

@@ -0,0 +1,14 @@
+import type * as React from "react";
+
+const ZuploLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 66"
+    fill="none"
+    {...props}
+  >
+    <path d="M55.331 43.537H32.527l24.295-24.343a1.642 1.642 0 0 0-1.157-2.802H17.07V.239h42.336a16.407 16.407 0 0 1 8.81 2.438 16.471 16.471 0 0 1 6.147 6.775 16.037 16.037 0 0 1-3.167 18.201L55.331 43.535v.002Z" />
+    <path d="M20.695 21.888H43.5L19.204 46.23a1.643 1.643 0 0 0 1.158 2.802h38.595v16.153H16.621a16.406 16.406 0 0 1-8.81-2.438 16.471 16.471 0 0 1-6.147-6.775 16.038 16.038 0 0 1 3.167-18.201L20.695 21.89v-.002Z" />
+  </svg>
+);
+export default ZuploLogo;

package/src/lib/components/navigation/utils.ts

@@ -1,10 +1,10 @@
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import type {
   SidebarItem,
   SidebarItemCategory,
 } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";
-import { useTopNavigationItem, useZudoku } from "../context/ZudokuContext.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
 
 export type TraverseCallback<T> = (
   item: SidebarItem,
@@ -42,15 +42,12 @@ export const traverseSidebarItem = <T>(
 
 export const useCurrentItem = () => {
   const location = useLocation();
-  const topNavItem = useTopNavigationItem();
-  const { sidebars } = useZudoku();
-  const currentSidebar = topNavItem?.id ? sidebars[topNavItem.id] : [];
+  const nav = useCurrentNavigation();
+
+  const currentSidebar = nav.sidebar;
 
   return traverseSidebar(currentSidebar, (item) => {
-    if (
-      item.type === "doc" &&
-      joinPath(topNavItem?.id, item.id) === location.pathname
-    ) {
+    if (item.type === "doc" && joinPath(item.id) === location.pathname) {
       return item;
     }
   });
@@ -58,18 +55,17 @@ export const useCurrentItem = () => {
 
 export const useIsCategoryOpen = (category: SidebarItemCategory) => {
   const location = useLocation();
-  const topNavItem = useTopNavigationItem();
 
   return traverseSidebarItem(category, (item) => {
     if (item.type === "category" && item.link) {
-      const categoryLinkPath = joinPath(topNavItem?.id, item.link.id);
+      const categoryLinkPath = joinPath(item.link.id);
       if (categoryLinkPath === location.pathname) {
         return true;
       }
     }
 
     if (item.type === "doc") {
-      const docPath = joinPath(topNavItem?.id, item.id);
+      const docPath = joinPath(item.id);
       if (docPath === location.pathname) {
         return true;
       }
@@ -82,9 +78,8 @@ export const usePrevNext = (): {
   next?: { label: string; id: string };
 } => {
   const currentId = useLocation().pathname;
-  const { sidebars } = useZudoku();
-  const topNavItem = useTopNavigationItem();
-  const currentSidebar = topNavItem?.id ? sidebars[topNavItem.id] : [];
+  const nav = useCurrentNavigation();
+  const currentSidebar = nav.sidebar;
 
   let prev;
   let next;
@@ -94,9 +89,9 @@ export const usePrevNext = (): {
   traverseSidebar(currentSidebar, (item) => {
     const itemId =
       item.type === "doc"
-        ? joinPath(topNavItem?.id, item.id)
+        ? joinPath(item.id)
         : item.type === "category" && item.link
-          ? joinPath(topNavItem?.id, item.link.id)
+          ? joinPath(item.link.id)
           : undefined;
 
     if (!itemId) return;