@betterstart/cli 0.1.82 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstart/cli",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "description": "Scaffold a full-featured CMS into any Next.js 16 application",
   "type": "module",
   "main": "./dist/index.js",

package/templates/init/components/data-table/data-table.tsx

@@ -133,7 +133,7 @@ export function DataTable<TData, TValue>({
     <div className="space-y-6">
       <div className="bg-card border overflow-hidden rounded-lg corner-squircle">
         <Table>
-          <TableHeader className="bg-secondary">
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (

package/templates/init/components/shared/page-header.tsx

@@ -8,16 +8,16 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, children, search, actions, back }: PageHeaderProps) {
   return (
-    <div className="grid grid-cols-3 items-center justify-between w-full h-14 px-4 border-b border-border sticky top-0 bg-background/60 backdrop-blur-md z-10">
-      <div className="flex items-center justify-start gap-2 w-full">{back && back}</div>
-      <div className="flex items-center justify-center gap-2">
+    <header className="grid grid-cols-3 items-center h-14 px-6 border-b border-border fixed top-0 bg-background/60 backdrop-blur-md z-10 left-0 pl-[calc(var(--sidebar-width)+calc(var(--spacing)*6))] right-0 w-svw">
+      <div className="flex items-center justify-start gap-2 w-full">{back}</div>
+      <div className="flex items-center justify-center gap-2 w-full">
         <h2 className="text-sm font-medium tracking-tight">{title}</h2>
       </div>
-      <div className="flex items-center justify-end gap-2">
+      <div className="flex items-center justify-end gap-2 w-full">
         {children && children}
         {search && search}
         {actions && actions}
       </div>
-    </div>
+    </header>
   )
 }

package/templates/init/pages/dashboard-page.tsx

@@ -28,7 +28,7 @@ const quickLinks = [
 
 export default function DashboardPage() {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col pt-14">
       <PageHeader title="Dashboard" />
       <div className="p-6 space-y-6">
         <div className="grid gap-4 md:grid-cols-3">

package/templates/init/pages/users/columns.tsx

@@ -12,7 +12,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@cms/components/ui/alert-dialog'
-import { Avatar, AvatarFallback } from '@cms/components/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@cms/components/ui/avatar'
 import { Badge } from '@cms/components/ui/badge'
 import { Button } from '@cms/components/ui/button'
 import {
@@ -26,7 +26,7 @@ import {
 import type { UserData } from '@cms/types/auth'
 import { useQueryClient } from '@tanstack/react-query'
 import type { ColumnDef } from '@tanstack/react-table'
-import { ArrowUpDown, Edit, MoreHorizontal, Trash } from 'lucide-react'
+import { ArrowUpDown, Edit, MoreHorizontal, ShieldCheck, Trash } from 'lucide-react'
 import React from 'react'
 import { toast } from 'sonner'
 import { EditRoleDialog } from './edit-role-dialog'
@@ -117,10 +117,10 @@ export const columns: ColumnDef<UserData>[] = [
       <Button
         variant="ghost"
         onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        className="hover:bg-muted/50 px-0!"
+        className="px-0 text-muted-foreground hover:text-foreground w-full hover:bg-transparent justify-start"
       >
         User
-        <ArrowUpDown className="size-4" />
+        <ArrowUpDown className="size-3" />
       </Button>
     ),
     cell: ({ row }) => {
@@ -145,8 +145,9 @@ export const columns: ColumnDef<UserData>[] = [
     cell: ({ row }) => {
       const verified = row.getValue('emailVerified') as boolean
       return (
-        <Badge variant={verified ? 'outline' : 'secondary'}>
-          {verified ? 'Verified' : 'Unverified'}
+        <Badge variant="outline">
+
+          {verified ? <span className="flex items-center gap-1"><ShieldCheck className="size-3.5" />Verified</span> : <span className="flex items-center gap-1"><ShieldCheck className="size-3.5" />Unverified</span>}
         </Badge>
       )
     },
@@ -174,8 +175,10 @@ export const columns: ColumnDef<UserData>[] = [
           userName={row.original.name}
         >
           <Badge variant="outline" className="capitalize cursor-pointer">
-            {role}
-            <Edit className="size-3 ml-1" strokeWidth={2} />
+            <span className="flex items-center gap-1">
+              {role}
+              <Edit className="size-3" />
+            </span>
           </Badge>
         </EditRoleDialog>
       )
@@ -187,10 +190,10 @@ export const columns: ColumnDef<UserData>[] = [
       <Button
         variant="ghost"
         onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        className="hover:bg-muted/50"
+        className="px-0 text-muted-foreground hover:text-foreground w-full hover:bg-transparent justify-start"
       >
         Joined
-        <ArrowUpDown className="size-4" />
+        <ArrowUpDown className="size-3" />
       </Button>
     ),
     cell: ({ row }) => {

package/templates/init/pages/users/users-page-content.tsx

@@ -1,8 +1,12 @@
 'use client'
 
+import React from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
+import { ChevronLeft } from 'lucide-react'
+import { useRouter } from 'next/navigation'
 import { PageHeader } from '@cms/components/shared/page-header'
 import type { UserData } from '@cms/types/auth'
+import { Button } from '@cms/components/ui/button'
 import { CreateUserDialog } from './create-user-dialog'
 import { UsersTable } from './users-table'
 
@@ -11,10 +15,13 @@ interface UsersPageContentProps<TValue> {
 }
 
 export function UsersPageContent<TValue>({ columns }: UsersPageContentProps<TValue>) {
+  const router = useRouter()
+
   return (
-    <>
+    <React.Fragment>
       <PageHeader
         title="Users"
+        back={<Button variant="ghost" size="icon" onClick={() => router.back()}><ChevronLeft /></Button>}
         actions={
           <div className="flex items-center gap-2">
             <CreateUserDialog />
@@ -24,6 +31,6 @@ export function UsersPageContent<TValue>({ columns }: UsersPageContentProps<TVal
       <main className="space-y-6 p-6">
         <UsersTable columns={columns} />
       </main>
-    </>
+    </React.Fragment>
   )
 }

package/templates/init/pages/users/users-page.tsx

@@ -11,7 +11,7 @@ export default function UsersPage() {
         </div>
       }
     >
-      <div className="flex flex-col">
+      <div className="flex flex-col pt-14">
         <UsersPageContent columns={columns} />
       </div>
     </React.Suspense>

package/templates/init/pages/users/users-table.tsx

@@ -126,7 +126,7 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
     <div className="space-y-6">
       <div className="bg-card border overflow-hidden rounded-lg">
         <Table>
-          <TableHeader className="bg-secondary">
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
@@ -180,7 +180,7 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
             value={pageSize === -1 ? 'all' : String(pageSize)}
             onValueChange={handlePageSizeChange}
           >
-            <SelectTrigger className="w-[100px] h-8">
+            <SelectTrigger className="w-25 h-8">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/templates/ui/badge.tsx

@@ -4,12 +4,12 @@ import { Slot } from 'radix-ui'
 import type * as React from 'react'
 
 const badgeVariants = cva(
-  'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge',
+  'h-6 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge',
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        secondary: 'bg-secondary border-border text-secondary-foreground [a]:hover:bg-secondary/80',
         destructive:
           'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
         outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',

package/templates/ui/button.tsx

@@ -11,7 +11,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border-border bg-white hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:

package/templates/ui/sidebar.tsx

@@ -160,7 +160,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col relative z-11',
           className
         )}
         {...props}
@@ -198,7 +198,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer text-sidebar-foreground hidden md:block z-11 relative"
       data-state={state}
       data-collapsible={state === 'collapsed' ? collapsible : ''}
       data-variant={variant}

package/templates/ui/table.tsx

@@ -16,7 +16,13 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b [&_tr:hover]:bg-transparent! bg-background [&_th]:text-muted-foreground', className)}
+      {...props}
+    />
+  )
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
@@ -33,7 +39,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+      className={cn('bg-background border-t font-medium [&>tr]:last:border-b-0', className)}
       {...props}
     />
   )
@@ -44,7 +50,7 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
     <tr
       data-slot="table-row"
       className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        'hover:bg-background data-[state=selected]:bg-background border-b transition-colors',
         className
       )}
       {...props}
@@ -69,7 +75,7 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
   return (
     <td
       data-slot="table-cell"
-      className={cn('px-4 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
+      className={cn('px-4 py-3.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
       {...props}
     />
   )