@arch-cadre/panel 1.0.6 → 1.0.9

package/src/ui/components/app-sidebar.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+import { Logo } from "@arch-cadre/ui/brand/logo";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@arch-cadre/ui/components/collapsible";
+import { ScrollArea } from "@arch-cadre/ui/components/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from "@arch-cadre/ui/components/sidebar";
+import { cn } from "@arch-cadre/ui/lib/utils";
+import { Icon } from "@iconify/react";
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { AppUser } from "./app-user.js";
+
+export type SidebarItem = {
+  id?: string;
+  title: string;
+  url: string;
+  icon?: string;
+  items?: SidebarItem[];
+};
+
+export type SidebarGroupType = {
+  title: string;
+  items: SidebarItem[];
+};
+
+export function AppSidebar({
+  isMain,
+  data,
+  ...props
+}: React.ComponentProps<typeof Sidebar> & {
+  isMain: boolean;
+  data: SidebarGroupType[];
+}) {
+  const { open, setOpenMobile, isMobile } = useSidebar();
+  const { t } = useTranslation();
+
+  const pathname = usePathname();
+  // state to track if scrolled
+  const [scrolled, setScrolledState] = useState(false);
+
+  // for exact path matching
+  const matchPath = (path: string) => {
+    return path === pathname;
+  };
+
+  // for parent paths
+  const matchPaths = (path: string) => {
+    return path === pathname || (path.length > 1 && pathname.startsWith(path));
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <useExhaustiveDependencies>
+  useEffect(() => {
+    // close sidebar if mobile and route changed
+    if (isMobile && open) {
+      setOpenMobile(false);
+    }
+  }, [pathname]);
+
+  // handle scroll to add shadow to header/footer
+  const setScrolled = (e: React.UIEvent<HTMLDivElement>) => {
+    const scrollTop = e.currentTarget.scrollTop;
+
+    if (scrollTop > 20) {
+      setScrolledState(true);
+    } else {
+      setScrolledState(false);
+    }
+  };
+
+  return (
+    <Sidebar className="lg:border-r-0!" collapsible="offcanvas" {...props}>
+      <SidebarHeader className="hidden md:flex h-[var(--header-height)] py-0">
+        <div className="flex shrink-0 items-center px-4 h-[var(--header-height)] w-[var(--sidebar-width)] ">
+          <Link href="/kryo" className="items-center flex">
+            <Logo className="h-auto w-[134px]" aria-hidden={true} />
+          </Link>
+        </div>
+      </SidebarHeader>
+
+      <SidebarHeader
+        className={cn(
+          "px-2",
+          scrolled
+            ? "border-b border-border/50 shadow-[0_20px_20px_0px_rgb(246_246_246/90%)]"
+            : "",
+        )}
+      >
+        {isMain ? null : (
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <Link href="/kryo">
+                <span className="size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground">
+                  <Icon className="size-4" icon="solar:arrow-left-broken" />
+                </span>
+                <span>{t("Back to Dashboard")}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        )}
+      </SidebarHeader>
+
+      <SidebarContent>
+        <ScrollArea
+          orientation="vertical"
+          className="h-full"
+          onScroll={(e) => setScrolled(e)}
+        >
+          {/* {isMain && (
+            <SidebarGroup className="group-data-[collapsible=icon]:hidden py-0">
+              <SidebarGroupLabel>General</SidebarGroupLabel>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton
+                    asChild
+                    isActive={matchPaths("/dashboard")}
+                    tooltip={t("sidebar.dashboard")}
+                  >
+                    <Link href="/dashboard">
+                      <span className="size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground">
+                        <Icon className="size-4" icon="solar:home-2-broken" />
+                      </span>
+                      <span>{t("sidebar.dashboard")}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroup>
+          )} */}
+
+          {data.map((group) => (
+            <SidebarGroup
+              key={group.title}
+              className="group-data-[collapsible=icon]:hidden py-0"
+            >
+              <SidebarGroupLabel>{t(group.title as any)}</SidebarGroupLabel>
+
+              {group.items.map((item) => (
+                <SidebarMenu key={item.url}>
+                  {item.items && item.items.length > 0 ? (
+                    <Collapsible
+                      key={item.url}
+                      asChild
+                      defaultOpen={matchPaths(item.url)}
+                      className="group/collapsible"
+                    >
+                      <SidebarMenuItem>
+                        <CollapsibleTrigger asChild>
+                          <SidebarMenuButton
+                            className="squircle"
+                            isActive={matchPaths(item.url)}
+                            tooltip={t(item.title as any)}
+                          >
+                            <span className="size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground">
+                              {item.icon && (
+                                <Icon
+                                  className="size-4"
+                                  icon={item.icon as string}
+                                />
+                              )}
+                            </span>
+
+                            <span>{t(item.title as any)}</span>
+
+                            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                          </SidebarMenuButton>
+                        </CollapsibleTrigger>
+
+                        <CollapsibleContent>
+                          <SidebarMenuSub>
+                            {item.items?.map((subItem) => (
+                              <SidebarMenuSubItem key={subItem.url}>
+                                <SidebarMenuSubButton
+                                  isActive={matchPath(subItem.url)}
+                                  asChild
+                                >
+                                  <Link href={subItem.url}>
+                                    <span>{t(subItem.title as any)}</span>
+                                  </Link>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            ))}
+                          </SidebarMenuSub>
+                        </CollapsibleContent>
+                      </SidebarMenuItem>
+                    </Collapsible>
+                  ) : (
+                    <SidebarMenuItem key={item.url}>
+                      <SidebarMenuButton
+                        className="squircle"
+                        asChild
+                        isActive={matchPath(item.url)}
+                      >
+                        <Link href={item.url}>
+                          <span className="size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground">
+                            {item.icon && (
+                              <Icon
+                                className="size-4"
+                                icon={item.icon as string}
+                              />
+                            )}
+                          </span>
+
+                          <span>{t(item.title as any)}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  )}
+                </SidebarMenu>
+              ))}
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+
+      <SidebarFooter
+        className={cn(
+          "px-2",
+          scrolled
+            ? "border-t border-border/50 shadow-[0_-20px_20px_0px_rgb(246_246_246/90%)]"
+            : "",
+        )}
+      >
+        <AppUser />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/src/ui/components/app-user.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+import { ExtensionPointClient } from "@arch-cadre/modules";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@arch-cadre/ui/components/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@arch-cadre/ui/components/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@arch-cadre/ui/components/sidebar";
+import { useIsMobile } from "@arch-cadre/ui/hooks/use-mobile";
+import { useUser } from "@arch-cadre/ui/hooks/use-user";
+import { cn } from "@arch-cadre/ui/lib/utils";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { toast } from "sonner";
+import { logoutAction } from "../../actions/index.js";
+
+export function AppUser() {
+  const { user, isLoading } = useUser();
+  const isMobile = useIsMobile();
+  const { t } = useTranslation();
+
+  if (!user) {
+    return;
+  }
+
+  const handleSignOut = async () => {
+    toast.promise(
+      async () => {
+        await logoutAction();
+      },
+      {
+        loading: t("Please wait..."),
+        success: t("Logout successful!"),
+        error: t("error_occurred"),
+      },
+    );
+  };
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild={true}>
+            <SidebarMenuButton
+              size="lg"
+              className={cn(
+                isLoading && "opacity-50",
+                "cursor-pointer squircle data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+              )}
+            >
+              <Avatar className="h-8 w-8 rounded-full">
+                <AvatarImage src={user.image ?? undefined} alt={user.name} />
+                <AvatarFallback className="rounded-full">
+                  {user.name.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              {/*<ChevronsUpDown className="ml-auto size-4" />*/}
+              <Icon
+                icon="solar:menu-dots-broken"
+                aria-hidden="true"
+                className="mr-1 size-4 rotate-90"
+              />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="squircle w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "top"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-full">
+                  <AvatarImage src={user.image ?? undefined} alt={user.name} />
+                  <AvatarFallback className="rounded-full">
+                    {user.name.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+
+            <ExtensionPointClient module="panel" point="app-user:extra-link" />
+
+            <DropdownMenuSeparator />
+
+            <button
+              type="button"
+              onClick={() => {
+                handleSignOut();
+              }}
+              className="w-full"
+            >
+              <DropdownMenuItem className="cursor-pointer">
+                <Icon icon="solar:logout-broken" />
+                {t("Logout")}
+              </DropdownMenuItem>
+            </button>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/ui/components/breadcrumb-slot.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@arch-cadre/ui/components/breadcrumb";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@arch-cadre/ui/components/tooltip";
+import Image from "next/image";
+import Link from "next/link";
+import * as React from "react";
+
+export default function BreadcrumbSlot() {
+  const { t } = useTranslation();
+
+  return (
+    <Breadcrumb className="hidden sm:block">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Link href="/kryo">
+                <Image
+                  width={16}
+                  height={16}
+                  src="/favicon.svg"
+                  alt="logo"
+                  className="size-4"
+                  aria-hidden={true}
+                />
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("Back to Dashboard")}</p>
+            </TooltipContent>
+          </Tooltip>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>&bull;</BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>{t("Dashboard")}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}