stackkit 0.3.5 → 0.3.6

package/modules/auth/better-auth/files/shared/lib/constant/dashboard.ts

@@ -0,0 +1,90 @@
+import type {
+  DashboardSidebarMenuGroup,
+  IconMapKey,
+} from "@/components/dashboard/dashboard-sidebar";
+
+export const ADMIN: DashboardSidebarMenuGroup[] = [
+  {
+    label: "Main",
+    items: [
+      {
+        title: "Dashboard",
+        url: "/dashboard/admin",
+        icon: "LayoutDashboard" as IconMapKey,
+      },
+      {
+        title: "Users",
+        url: "/dashboard/admin/users",
+        icon: "Users" as IconMapKey,
+      },
+      {
+        title: "Content",
+        url: "/dashboard/admin/content",
+        icon: "Package" as IconMapKey,
+      },
+      {
+        title: "Categories",
+        url: "/dashboard/admin/categories",
+        icon: "Tag" as IconMapKey,
+      },
+    ],
+  },
+  {
+    label: "Media",
+    items: [
+      {
+        title: "Images",
+        url: "/dashboard/admin/media/images",
+        icon: "Image" as IconMapKey,
+      },
+      {
+        title: "Videos",
+        url: "/dashboard/admin/media/videos",
+        icon: "Clapperboard" as IconMapKey,
+      },
+    ],
+  },
+  {
+    label: "Security & Support",
+    items: [
+      {
+        title: "Roles & Permissions",
+        url: "/dashboard/admin/roles",
+        icon: "Shield" as IconMapKey,
+      },
+      {
+        title: "Support",
+        url: "/dashboard/admin/support",
+        icon: "LifeBuoy" as IconMapKey,
+      },
+    ],
+  },
+];
+
+export const USER: DashboardSidebarMenuGroup[] = [
+  {
+    label: "Navigation",
+    items: [
+      {
+        title: "Dashboard",
+        url: "/dashboard",
+        icon: "LayoutDashboard" as IconMapKey,
+      },
+      {
+        title: "Activity",
+        url: "/dashboard/activity",
+        icon: "List" as IconMapKey,
+      },
+      {
+        title: "Saved",
+        url: "/dashboard/saved",
+        icon: "Heart" as IconMapKey,
+      },
+    ],
+  },
+];
+
+export const sidebar = {
+  ADMIN,
+  USER,
+};

package/modules/auth/better-auth/files/shared/theme/mode-toggle.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { MoonIcon, SunIcon } from "lucide-react";
+{{#if framework == "nextjs"}}
+import { useTheme } from "next-themes";
+{{else}}
+import { useTheme } from "../hooks/use-theme";
+{{/if}}
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      className="cursor-pointer"
+      aria-label="Toggle theme"
+    >
+      <SunIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+      <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+    </Button>
+  );
+}

package/modules/auth/better-auth/files/shared/ui/shadcn/components/dashboard/dashboard-header.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { ModeToggle } from "../mode-toggle";
+import { Badge } from "../ui/badge";
+
+export default function DashboardHeader({ role }: { role: "USER" | "ADMIN" | undefined }) {
+  const [isOnline, setIsOnline] = useState(
+    typeof window !== "undefined" ? navigator.onLine : true,
+  );
+  const pulse = true;
+  const subtle = true;
+
+  // Online/Offline
+  useEffect(() => {
+    const on = () => setIsOnline(true);
+    const off = () => setIsOnline(false);
+    window.addEventListener("online", on);
+    window.addEventListener("offline", off);
+    return () => {
+      window.removeEventListener("online", on);
+      window.removeEventListener("offline", off);
+    };
+  }, []);
+
+  return (
+    <header className="border-border bg-card/80 supports-backdrop-filter:bg-card/60 sticky top-0 z-40 w-full border-b backdrop-blur">
+      <nav className="mx-auto flex max-w-screen-2xl items-center justify-between gap-4 px-4 py-3">
+        {/* Left */}
+        <div className="flex items-center gap-3">
+          <SidebarTrigger className="cursor-pointer" />
+
+          {/* Divider */}
+          <Separator orientation="vertical" className="mx-1 h-6" />
+
+          {/* System Status */}
+          {role === "ADMIN" && (
+            <Badge
+              variant="secondary"
+              aria-live="polite"
+              aria-atomic="true"
+              className={cn(
+                "inline-flex items-center gap-2 rounded-full px-3.5 py-1.5 text-xs font-semibold shadow-sm ring-1 ring-inset",
+                subtle
+                  ? isOnline
+                    ? "bg-primary/15 text-primary ring-primary/30"
+                    : "bg-destructive/15 text-destructive ring-destructive/30"
+                  : isOnline
+                    ? "bg-primary/10 text-primary ring-primary/25"
+                    : "bg-destructive/10 text-destructive ring-destructive/25",
+                "transition-colors",
+              )}
+              title={`System ${isOnline ? "Online" : "Offline"}`}
+            >
+              {/* Dot + optional ping */}
+              <span className="relative flex h-2.5 w-2.5 items-center justify-center">
+                {pulse && (
+                  <span
+                    className={cn(
+                      "absolute inline-flex h-full w-full animate-ping rounded-full opacity-70",
+                      isOnline ? "bg-primary" : "bg-destructive",
+                    )}
+                  />
+                )}
+                <span
+                  className={cn(
+                    "relative inline-flex h-2.5 w-2.5 rounded-full",
+                    isOnline ? "bg-primary" : "bg-destructive",
+                  )}
+                />
+              </span>
+
+              {/* Text */}
+              <span className="tracking-wide">
+                System{" "}
+                <span className="font-bold">
+                  {isOnline ? "Online" : "Offline"}
+                </span>
+              </span>
+            </Badge>
+          )}
+        </div>
+
+        {/* Right */}
+        <div className="flex items-center gap-3">
+          <ModeToggle />
+        </div>
+      </nav>
+    </header>
+  );
+}

package/modules/auth/better-auth/files/shared/ui/shadcn/components/dashboard/dashboard-sidebar.tsx

@@ -0,0 +1,255 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import {
+  ChevronRight,
+  Clapperboard,
+  Heart,
+  Image,
+  LayoutDashboard,
+  LifeBuoy,
+  List,
+  MoreVertical,
+  Package,
+  Shield,
+  ShoppingCart,
+  Tag,
+  Users,
+} from "lucide-react";
+{{#if framework == "nextjs"}}
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+{{else}}
+import { Link, useLocation } from "react-router";
+{{/if}}
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { useLogoutMutation } from "@/features/auth/queries/auth.mutations";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Separator } from "../ui/separator";
+
+
+const iconMap = {
+  LayoutDashboard,
+  ShoppingCart,
+  Package,
+  Tag,
+  Users,
+  Shield,
+  LifeBuoy,
+  List,
+  Heart,
+  Image,
+  Clapperboard,
+} as const;
+export type IconMapKey = keyof typeof iconMap;
+
+export interface DashboardSidebarMenuItem {
+  title: string;
+  url: string;
+  icon: IconMapKey;
+}
+
+export interface DashboardSidebarMenuGroup {
+  label: string;
+  items: DashboardSidebarMenuItem[];
+}
+
+export interface DashboardSidebarProps {
+  menu: DashboardSidebarMenuItem[] | DashboardSidebarMenuGroup[];
+  user: {
+    id?: string;
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+    role?: string;
+  };
+}
+
+export function DashboardSidebar({ menu = [], user }: DashboardSidebarProps) {
+  {{#if framework == "nextjs"}}
+  const pathname = usePathname();
+  {{else}}
+  const { pathname } = useLocation();
+  {{/if}}
+  const { toggleSidebar } = useSidebar();
+  const { mutate: logout, isPending } = useLogoutMutation();
+
+  const isActive = (url: string) =>
+    url === "/dashboard" ||
+    url === "/dashboard/admin"
+      ? pathname === url
+      : pathname.startsWith(url);
+
+  const groupedMenu = (
+    menu.length > 0 && "items" in menu[0]
+      ? (menu as DashboardSidebarMenuGroup[])
+      : [{ label: "Navigation", items: menu as DashboardSidebarMenuItem[] }]
+  ).filter((group) => group.items.length > 0);
+
+  return (
+    <Sidebar className="bg-linear-to-b from-background to-muted/30 backdrop-blur supports-backdrop-filter:bg-background/80">
+      <SidebarHeader className="px-3 py-2">
+        <div className="flex items-center justify-between">
+          {{#if framework == "nextjs"}}
+          <Link href="/" className="text-lg font-bold">
+            StackKit
+          </Link>
+          {{else}}
+          <Link to="/" className="text-lg font-bold">
+            StackKit
+          </Link>
+          {{/if}}
+          {/* Collapser for small screens */}
+          <button
+            onClick={toggleSidebar}
+            className="rounded-md p-1.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground lg:hidden"
+            aria-label="Toggle sidebar"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      </SidebarHeader>
+
+      <Separator />
+
+      <SidebarContent>
+        {groupedMenu.map((group) => (
+          <SidebarGroup key={group.label}>
+            <SidebarGroupLabel className="text-xs font-medium tracking-wide text-muted-foreground">
+              {group.label}
+            </SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => {
+                  const Icon = iconMap[item.icon] ?? LayoutDashboard;
+                  const active = isActive(item.url);
+                  return (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton
+                        tooltip={item.title}
+                        className={cn(
+                          "hover:bg-muted dark:hover:bg-muted/80",
+                          active && "bg-muted dark:bg-muted/80",
+                        )}
+                      >
+                        {{#if framework == "nextjs"}}
+                        <Link
+                          href={item.url || "#"}
+                          onClick={() => {
+                            if (
+                              typeof window !== "undefined" &&
+                              window.innerWidth < 768
+                            ) {
+                              toggleSidebar();
+                            }
+                          }}
+                        >
+                          <Icon className="h-4 w-4" />
+                          <span>{item.title}</span>
+                        </Link>
+                        {{else}}
+                        <Link
+                          to={item.url || "/"}
+                          onClick={() => {
+                            if (
+                              typeof window !== "undefined" &&
+                              window.innerWidth < 768
+                            ) {
+                              toggleSidebar();
+                            }
+                          }}
+                        >
+                          <Icon className="h-4 w-4" />
+                          <span>{item.title}</span>
+                        </Link>
+                        {{/if}}
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+
+      <Separator className="mt-auto" />
+
+      <SidebarFooter className="border-t bg-muted/40 p-3">
+        <DropdownMenu>
+          <DropdownMenuTrigger className="flex w-full items-center justify-between gap-3 rounded-lg px-2 py-1.5 text-left hover:bg-muted">
+            <span className="flex items-center gap-3">
+              <span className="relative">
+                <Avatar className="h-9 w-9">
+                  <AvatarImage
+                    src={user?.image || "/assets/images/logo.png"}
+                    alt={user?.name || "User"}
+                    className="object-cover"
+                  />
+                  <AvatarFallback>
+                    {user?.name?.toUpperCase().charAt(0) || "U"}
+                  </AvatarFallback>
+                </Avatar>
+                <span
+                  className="absolute -right-0.5 -top-0.5 block h-2.5 w-2.5 rounded-full border-2 border-background bg-primary"
+                  aria-label="Online"
+                />
+              </span>
+              <span className="min-w-0">
+                <span className="block truncate text-sm font-medium">
+                  {user?.name || "Admin"}
+                </span>
+                <span className="block truncate text-xs text-muted-foreground">
+                  {user?.email}
+                </span>
+              </span>
+            </span>
+            <MoreVertical className="h-4 w-4 text-muted-foreground" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="top" align="end" className="w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Account</DropdownMenuLabel>
+              <DropdownMenuItem>
+                {{#if framework == "nextjs"}}
+                <Link href="/dashboard/my-profile">Profile</Link>
+                {{else}}
+                <Link to="/dashboard/my-profile">Profile</Link>
+                {{/if}}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled={isPending} onClick={() => logout()}>
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+export default DashboardSidebar;

package/modules/auth/better-auth/files/shared/ui/shadcn/components/footer.tsx

@@ -0,0 +1,35 @@
+{{#if framework == "nextjs"}}
+import Link from "next/link";
+{{else}}
+import { Link } from "react-router";
+{{/if}}
+
+const footerLinks = [
+  { name: "Privacy", href: "#" },
+  { name: "Terms", href: "#" },
+];
+
+export default function Footer() {
+  return (
+    <footer className="w-full bg-background border-t mt-8">
+      <div className="mx-auto max-w-7xl px-4 py-6 flex items-center justify-between text-sm text-muted-foreground">
+        <div>© {new Date().getFullYear()} StackKit</div>
+        <div className="flex gap-4">
+          {{#if framework == "nextjs"}}
+          {footerLinks.map((link, idx) => (
+            <Link key={idx} href={link.href} className="underline">
+              {link.name}
+            </Link>
+          ))}
+          {{else}}
+          {footerLinks.map((link, idx) => (
+            <Link key={idx} to={link.href} className="underline">
+              {link.name}
+            </Link>
+          ))}
+          {{/if}}
+        </div>
+      </div>
+    </footer>
+  );
+}

package/modules/auth/better-auth/files/shared/ui/shadcn/components/navbar.tsx

@@ -0,0 +1,145 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import { ModeToggle } from "@/components/mode-toggle";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import UserProfile from "@/features/auth/components/user-profile-menu";
+{{#if framework == "nextjs"}}
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+{{else}}
+import { Link, NavLink } from "react-router";
+{{/if}}
+
+const navLinks = [
+  { name: "Home", href: "/" },
+  { name: "Docs", href: "/docs" },
+];
+
+export default function Navbar() {
+  {{#if framework == "nextjs"}}
+  const pathname = usePathname();
+  {{/if}}
+
+  return (
+    <header className="w-full border-b">
+      <div className="mx-auto max-w-5xl px-4 py-4 flex items-center justify-between">
+        {{#if framework == "nextjs"}}
+        <Link href="/" className="text-lg font-bold">
+          StackKit
+        </Link>
+        {{else}}
+        <Link to="/" className="text-lg font-bold">
+          StackKit
+        </Link>
+        {{/if}}
+
+        <nav className="relative flex items-center">
+          <div className="hidden md:flex items-center gap-4">
+            {{#if framework == "nextjs"}}
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`text-sm ${pathname === link.href ? "active" : "text-muted-foreground"}`}
+              >
+                {link.name}
+              </Link>
+            ))}
+            {{else}}
+            {navLinks.map((link) => (
+              <NavLink
+                key={link.href}
+                to={link.href}
+                className={({ isActive }) =>
+                  `text-sm ${isActive ? "active" : "text-muted-foreground"}`
+                }
+              >
+                {link.name}
+              </NavLink>
+            ))}
+            {{/if}}
+          </div>
+
+          {/* Desktop actions */}
+          <div className="hidden md:flex items-center gap-4 ml-4">
+            <UserProfile />
+            <ModeToggle />
+          </div>
+
+          {/* Mobile sheet (shadcn) */}
+          <div className="md:hidden ml-2">
+            <Sheet>
+              <SheetTrigger
+                render={
+                  <Button variant="ghost" size="icon" aria-label="Open menu" />
+                }
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2}
+                  stroke="currentColor"
+                  className="size-4"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M3 12h18M3 6h18M3 18h18"
+                  />
+                </svg>
+              </SheetTrigger>
+
+              <SheetContent side="right" showCloseButton>
+                <SheetHeader>
+                  <SheetTitle>Menu</SheetTitle>
+                  <SheetDescription>Navigate the site</SheetDescription>
+                </SheetHeader>
+
+                <div className="flex flex-col gap-3 p-2">
+                  {{#if framework == "nextjs"}}
+                  {navLinks.map((link) => (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      className={`px-3 py-2 rounded-md text-sm hover:bg-muted ${pathname === link.href ? "active" : ""}`}
+                    >
+                      {link.name}
+                    </Link>
+                  ))}
+                  {{else}}
+                  {navLinks.map((link) => (
+                    <NavLink
+                      key={link.href}
+                      to={link.href}
+                      className={({ isActive }) =>
+                        `px-3 py-2 rounded-md text-sm hover:bg-muted ${isActive ? "active" : ""}`
+                      }
+                    >
+                      {link.name}
+                    </NavLink>
+                  ))}
+                  {{/if}}
+
+                  <div className="border-t my-2" />
+                  <UserProfile />
+                  <ModeToggle />
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </nav>
+      </div>
+    </header>
+  );
+}