feat: Add projects list to sidebar

apps/dashboard/app/(app)/apis/_components/api-list-client.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { EmptyComponentSpacer } from "@/components/empty-component-spacer";
+import { LoadMoreFooter } from "@/components/virtual-table/components/loading-indicator";
 import { trpc } from "@/lib/trpc/client";
 import { BookBookmark } from "@unkey/icons";
 import { Button, Empty } from "@unkey/ui";
@@ -53,11 +54,7 @@ export const ApiListClient = () => {
     }
   }, [error, router]);
 
-  const loadMore = () => {
-    if (hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  };
+  const totalCount = apisData?.pages[0]?.total || 0;
 
   return (
     <div className="flex flex-col">
@@ -79,26 +76,27 @@ export const ApiListClient = () => {
             ))}
           </div>
 
-          <div className="flex flex-col items-center justify-center mt-8 space-y-4 pb-8">
-            <div className="text-center text-sm text-accent-11">
-              Showing {apiList.length} of {apisData?.pages[0]?.total || 0} APIs
-            </div>
-
-            {!isSearching && hasNextPage && (
-              <Button onClick={loadMore} disabled={isFetchingNextPage} size="md">
-                {isFetchingNextPage ? (
-                  <div className="flex items-center space-x-2">
-                    <div className="animate-spin h-4 w-4 border-2 border-gray-7 border-t-transparent rounded-full" />
-                    <span>Loading...</span>
-                  </div>
-                ) : (
-                  <div className="flex items-center space-x-2">
-                    <span>Load more</span>
-                  </div>
-                )}
-              </Button>
-            )}
-          </div>
+          {!isSearching && (
+            <LoadMoreFooter
+              onLoadMore={fetchNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              totalVisible={apiList.length}
+              totalCount={totalCount}
+              itemLabel="APIs"
+              buttonText="Load more APIs"
+              hasMore={hasNextPage}
+              hide={!hasNextPage && apiList.length === totalCount}
+              countInfoText={
+                <div className="flex gap-2">
+                  <span>Viewing</span>
+                  <span className="text-accent-12">{apiList.length}</span>
+                  <span>of</span>
+                  <span className="text-grayA-12">{totalCount}</span>
+                  <span>APIs</span>
+                </div>
+              }
+            />
+          )}
         </>
       ) : (
         <EmptyComponentSpacer>

apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx

@@ -1,5 +1,7 @@
 "use client";
+
 import { EmptyComponentSpacer } from "@/components/empty-component-spacer";
+import { LoadMoreFooter } from "@/components/virtual-table/components/loading-indicator";
 import { trpc } from "@/lib/trpc/client";
 import { Button, CopyButton, Empty } from "@unkey/ui";
 import { BookOpen } from "lucide-react";
@@ -25,6 +27,9 @@ export const RatelimitClient = () => {
     isLoading,
     error,
     isError,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
   } = trpc.ratelimit.namespace.query.useInfiniteQuery(
     { limit: 10 },
     {
@@ -45,8 +50,10 @@ export const RatelimitClient = () => {
     setNamespaces(allNamespaces);
   }, [allNamespaces]);
 
+  const totalCount = namespacesData?.pages[0]?.total || 0;
+
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col relative">
       <RatelimitListControls setNamespaces={setNamespaces} initialNamespaces={allNamespaces} />
       <RatelimitListControlCloud />
 
@@ -66,11 +73,33 @@ export const RatelimitClient = () => {
           ))}
         </div>
       ) : namespaces.length > 0 ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 md:gap-5 w-full p-5">
-          {namespaces.map((namespace) => (
-            <NamespaceCard namespace={namespace} key={namespace.id} />
-          ))}
-        </div>
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 md:gap-5 w-full p-5">
+            {namespaces.map((namespace) => (
+              <NamespaceCard namespace={namespace} key={namespace.id} />
+            ))}
+          </div>
+
+          <LoadMoreFooter
+            onLoadMore={fetchNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            totalVisible={namespaces.length}
+            totalCount={totalCount}
+            itemLabel="namespaces"
+            buttonText="Load more namespaces"
+            hasMore={hasNextPage}
+            hide={!hasNextPage && namespaces.length === totalCount}
+            countInfoText={
+              <div className="flex gap-2">
+                <span>Viewing</span>
+                <span className="text-accent-12">{namespaces.length}</span>
+                <span>of</span>
+                <span className="text-grayA-12">{totalCount}</span>
+                <span>namespaces</span>
+              </div>
+            }
+          />
+        </>
       ) : (
         <EmptyComponentSpacer>
           <Empty className="max-w-2xl mx-auto">

apps/dashboard/components/navigation/sidebar/app-sidebar/components/nav-items/flat-nav-item.tsx

@@ -2,18 +2,12 @@ import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
 import { useDelayLoader } from "@/hooks/use-delay-loader";
 import { useRouter } from "next/navigation";
 import { useTransition } from "react";
-import type { NavItem } from "../../../workspace-navigations";
+import type { NavProps } from ".";
 import { NavLink } from "../nav-link";
 import { AnimatedLoadingSpinner } from "./animated-loading-spinner";
 import { getButtonStyles } from "./utils";
 
-export const FlatNavItem = ({
-  item,
-  onLoadMore,
-}: {
-  item: NavItem & { loadMoreAction?: boolean };
-  onLoadMore?: () => void;
-}) => {
+export const FlatNavItem = ({ item, onLoadMore }: NavProps) => {
   const [isPending, startTransition] = useTransition();
   const showLoader = useDelayLoader(isPending);
   const router = useRouter();
@@ -23,7 +17,7 @@ export const FlatNavItem = ({
 
   const handleClick = () => {
     if (isLoadMoreButton && onLoadMore) {
-      onLoadMore();
+      onLoadMore(item);
       return;
     }
 

apps/dashboard/components/navigation/sidebar/app-sidebar/components/nav-items/index.tsx

@@ -2,16 +2,14 @@ import type { NavItem } from "../../../workspace-navigations";
 import { FlatNavItem } from "./flat-nav-item";
 import { NestedNavItem } from "./nested-nav-item";
 
-export const NavItems = ({
-  item,
-  onLoadMore,
-}: {
+export type NavProps = {
   item: NavItem & {
     items?: (NavItem & { loadMoreAction?: boolean })[];
     loadMoreAction?: boolean;
   };
-  onLoadMore?: () => void;
-}) => {
+  onLoadMore?: (item: NavItem) => void;
+};
+export const NavItems = ({ item, onLoadMore }: NavProps) => {
   if (!item.items || item.items.length === 0) {
     return <FlatNavItem item={item} onLoadMore={onLoadMore} />;
   }

apps/dashboard/components/navigation/sidebar/app-sidebar/components/nav-items/nested-nav-item.tsx

@@ -12,6 +12,7 @@ import { CaretRight } from "@unkey/icons";
 import { usePathname, useRouter } from "next/navigation";
 import { useLayoutEffect, useState, useTransition } from "react";
 import slugify from "slugify";
+import type { NavProps } from ".";
 import type { NavItem } from "../../../workspace-navigations";
 import { NavLink } from "../nav-link";
 import { AnimatedLoadingSpinner } from "./animated-loading-spinner";
@@ -23,9 +24,7 @@ export const NestedNavItem = ({
   depth = 0,
   maxDepth = 1,
   isSubItem = false,
-}: {
-  item: NavItem;
-  onLoadMore?: () => void;
+}: NavProps & {
   depth?: number;
   maxDepth?: number;
   isSubItem?: boolean;
@@ -54,13 +53,15 @@ export const NestedNavItem = ({
 
     setIsChildrenOpen(!!hasMatchingChild);
 
-    const itemPath = `/${slugify(item.label, {
-      lower: true,
-      replacement: "-",
-    })}`;
+    if (typeof item.label === "string") {
+      const itemPath = `/${slugify(item.label, {
+        lower: true,
+        replacement: "-",
+      })}`;
 
-    if (pathname.startsWith(itemPath)) {
-      setIsOpen(true);
+      if (pathname.startsWith(itemPath)) {
+        setIsOpen(true);
+      }
     }
   }, [pathname, item.items, item.label, hasChildren]);
 
@@ -97,7 +98,7 @@ export const NestedNavItem = ({
     // If this subitem has children and is not at max depth, render it as another NestedNavItem
     if (hasChildren && depth < maxDepth) {
       return (
-        <SidebarMenuSubItem key={subItem.label ?? index}>
+        <SidebarMenuSubItem key={subItem.label?.toString() ?? index}>
           <NestedNavItem
             item={subItem}
             onLoadMore={onLoadMore}
@@ -112,7 +113,7 @@ export const NestedNavItem = ({
     // Otherwise render as a regular sub-item
     const handleSubItemClick = () => {
       if (isLoadMoreButton && onLoadMore) {
-        onLoadMore();
+        onLoadMore(subItem);
         return;
       }
 
@@ -140,7 +141,7 @@ export const NestedNavItem = ({
     };
 
     return (
-      <SidebarMenuSubItem key={subItem.label ?? index}>
+      <SidebarMenuSubItem key={subItem.label?.toString() ?? index}>
         <NavLink
           href={subItem.href}
           external={subItem.external}

apps/dashboard/components/navigation/sidebar/app-sidebar/hooks/use-api-navigation.tsx

@@ -92,8 +92,7 @@ export const useApiNavigation = (baseNavItems: NavItem[]) => {
       if (hasNextPage) {
         apisItem.items?.push({
           icon: () => null,
-          href: "#load-more",
-          //@ts-expect-error will fix that later
+          href: "#load-more-apis",
           label: <div className="font-normal decoration-dotted underline ">More</div>,
           active: false,
           loadMoreAction: true,

apps/dashboard/components/navigation/sidebar/app-sidebar/hooks/use-projects-navigation.tsx

@@ -0,0 +1,74 @@
+"use client";
+import type { NavItem } from "@/components/navigation/sidebar/workspace-navigations";
+import { trpc } from "@/lib/trpc/client";
+import { useSelectedLayoutSegments } from "next/navigation";
+import { useMemo } from "react";
+
+export const useProjectNavigation = (baseNavItems: NavItem[]) => {
+  const segments = useSelectedLayoutSegments() ?? [];
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    trpc.deploy.project.list.useInfiniteQuery(
+      { query: [] },
+      {
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+      },
+    );
+
+  const projectNavItems = useMemo(() => {
+    if (!data?.pages) {
+      return [];
+    }
+    return data.pages.flatMap((page) =>
+      page.projects.map((project) => {
+        const currentProjectActive = segments.at(0) === "projects" && segments.at(1) === project.id;
+
+        const projectNavItem: NavItem = {
+          href: `/projects/${project.id}`,
+          icon: null,
+          label: project.name,
+          active: currentProjectActive,
+          showSubItems: true,
+        };
+
+        return projectNavItem;
+      }),
+    );
+  }, [data?.pages, segments]);
+
+  const enhancedNavItems = useMemo(() => {
+    const items = [...baseNavItems];
+    const projectsItemIndex = items.findIndex((item) => item.href === "/projects");
+
+    if (projectsItemIndex !== -1) {
+      const projectsItem = { ...items[projectsItemIndex] };
+      projectsItem.showSubItems = true;
+      projectsItem.items = [...(projectsItem.items || []), ...projectNavItems];
+
+      if (hasNextPage) {
+        projectsItem.items?.push({
+          icon: () => null,
+          href: "#load-more-projects",
+          label: <div className="font-normal decoration-dotted underline">More</div>,
+          active: false,
+          loadMoreAction: true,
+        });
+      }
+
+      items[projectsItemIndex] = projectsItem;
+    }
+
+    return items;
+  }, [baseNavItems, projectNavItems, hasNextPage]);
+
+  const loadMore = () => {
+    if (!isFetchingNextPage && hasNextPage) {
+      fetchNextPage();
+    }
+  };
+
+  return {
+    enhancedNavItems,
+    isLoading,
+    loadMore,
+  };
+};

apps/dashboard/components/navigation/sidebar/app-sidebar/hooks/use-ratelimit-navigation.tsx

@@ -94,7 +94,7 @@ export const useRatelimitNavigation = (baseNavItems: NavItem[]) => {
         ratelimitsItem.items?.push({
           icon: () => null,
           href: "#load-more-ratelimits",
-          label: "More",
+          label: <div className="font-normal decoration-dotted underline ">More</div>,
           active: false,
           loadMoreAction: true,
         });