Refresh shadcn auth component comments (#262)

Author: phuctm97

.agents/skills/shadcn-ui/SKILL.md

@@ -31,6 +31,7 @@ description: Use when adding or updating shadcn/ui or compatible registry compon
 4. Keep generated file structure intact.
    - Generated files are an exception to the repo's normal single-export preference
    - Multiple exports are allowed if the generator created them
+   - Generated comments are allowed; keep them unless they conflict with repo-specific behavior or become misleading after follow-up edits
 
 5. Make only minimal repo-specific follow-up changes.
    - Add missing dependencies to the target package's `package.json`
@@ -50,6 +51,7 @@ description: Use when adding or updating shadcn/ui or compatible registry compon
      - rename generated `packages/world/components/auth/auth.tsx` to `packages/world/components/auth/auth-router.tsx`, and update relevant names such as `Auth` / `AuthProps` to `AuthRouter` / `AuthRouterProps`; alias Better Auth UI's `AuthView` type as `BetterAuthView`
      - keep `packages/world/components/auth/auth-link.tsx` and `packages/world/components/auth/auth-provider.tsx`; adapt them to upstream changes when applicable
    - Add or update tests so coverage stays at 100%
+   - Each generated source file should have its own corresponding test file; do not combine tests for multiple generated source files into one test file
 
 6. Prefer bundled Radix over individual `@radix-ui/*` packages.
    - This repo uses the bundled `radix-ui` package

packages/world/components/auth/auth-router.tsx

@@ -14,9 +14,23 @@ export type AuthRouterProps = {
   path?: string;
   socialLayout?: SocialLayout;
   socialPosition?: "top" | "bottom";
+  /** @remarks `BetterAuthView` */
   view?: BetterAuthView;
 };
 
+/**
+ * Render the selected authentication view component.
+ *
+ * The view is determined by the explicit `view` prop or, if absent, resolved from `path` using the application's auth view paths.
+ *
+ * @param path - Route path used to resolve an auth view when `view` is not provided
+ * @param socialLayout - Social layout to apply to the component
+ * @param socialPosition - Social position to apply to the component
+ * @param view - Explicit auth view to render
+ * @returns The rendered authentication view element
+ * @throws Error if neither `view` nor `path` is provided
+ * @throws Error if the resolved view is not a valid auth view
+ */
 export function AuthRouter({
   className,
   view,

packages/world/components/ui/sidebar.tsx

@@ -78,6 +78,8 @@ function SidebarProvider({
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
 
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
   const [_open, _setOpen] = React.useState(() =>
     getStoredSidebarOpen(defaultOpen),
   );
@@ -96,10 +98,12 @@ function SidebarProvider({
     [setOpenProp, open],
   );
 
+  // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
   }, [isMobile, setOpen, setOpenMobile]);
 
+  // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (
@@ -115,6 +119,8 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
 
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
   const state = open ? "expanded" : "collapsed";
 
   const contextValue = React.useMemo<SidebarContextProps>(
@@ -218,6 +224,7 @@ function Sidebar({
       data-side={side}
       data-slot="sidebar"
     >
+      {/* This is what handles the sidebar gap on desktop */}
       <div
         data-slot="sidebar-gap"
         className={cn(
@@ -234,6 +241,7 @@ function Sidebar({
         data-side={side}
         className={cn(
           "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
@@ -590,6 +598,7 @@ function SidebarMenuSkeleton({
 }: React.ComponentProps<"div"> & {
   showIcon?: boolean;
 }) {
+  // Random width between 50 to 90%.
   const [width] = React.useState(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   });