Skip to content

Commit 8a3552f

Browse files
kingstonkingston
authored
feat: Redesign admin app configuration UI (#880)
1 parent b231bca commit 8a3552f

59 files changed

Lines changed: 1183 additions & 956 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/redesign-admin-sections-ui.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@baseplate-dev/project-builder-web': patch
3+
---
4+
5+
Redesign admin app configuration UI: promote admin sections to first-class sidebar navigation items with collapsible app groups, remove separate admin-sections route, and add Enable Admin CTA to General page

‎examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
* https://ui.shadcn.com/docs/components/sidebar
3636
*
3737
* - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561)
38+
* - Added aria-[current=page] support alongside data-[active=true] for active state styling
3839
*/
3940

4041
const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -527,7 +528,7 @@ function SidebarMenuItem({
527528
}
528529

529530
const sidebarMenuButtonVariants = cva(
530-
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
531+
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
531532
{
532533
variants: {
533534
variant: {
@@ -632,7 +633,7 @@ function SidebarMenuAction({
632633
'peer-data-[size=lg]/menu-button:top-2.5',
633634
'group-data-[collapsible=icon]:hidden',
634635
showOnHover &&
635-
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
636+
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
636637
className,
637638
),
638639
},
@@ -656,7 +657,7 @@ function SidebarMenuBadge({
656657
data-sidebar="menu-badge"
657658
className={cn(
658659
'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none',
659-
'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
660+
'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
660661
'peer-data-[size=sm]/menu-button:top-1',
661662
'peer-data-[size=default]/menu-button:top-1.5',
662663
'peer-data-[size=lg]/menu-button:top-2.5',
@@ -756,6 +757,7 @@ function SidebarMenuSubButton({
756757
className: cn(
757758
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground',
758759
'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
760+
'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground',
759761
size === 'sm' && 'text-xs',
760762
size === 'md' && 'text-sm',
761763
'group-data-[collapsible=icon]:hidden',

‎examples/blog-with-auth/apps/admin/src/components/ui/sidebar.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
* https://ui.shadcn.com/docs/components/sidebar
3636
*
3737
* - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561)
38+
* - Added aria-[current=page] support alongside data-[active=true] for active state styling
3839
*/
3940

4041
const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -527,7 +528,7 @@ function SidebarMenuItem({
527528
}
528529

529530
const sidebarMenuButtonVariants = cva(
530-
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
531+
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
531532
{
532533
variants: {
533534
variant: {
@@ -632,7 +633,7 @@ function SidebarMenuAction({
632633
'peer-data-[size=lg]/menu-button:top-2.5',
633634
'group-data-[collapsible=icon]:hidden',
634635
showOnHover &&
635-
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
636+
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
636637
className,
637638
),
638639
},
@@ -656,7 +657,7 @@ function SidebarMenuBadge({
656657
data-sidebar="menu-badge"
657658
className={cn(
658659
'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none',
659-
'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
660+
'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
660661
'peer-data-[size=sm]/menu-button:top-1',
661662
'peer-data-[size=default]/menu-button:top-1.5',
662663
'peer-data-[size=lg]/menu-button:top-2.5',
@@ -756,6 +757,7 @@ function SidebarMenuSubButton({
756757
className: cn(
757758
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground',
758759
'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
760+
'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground',
759761
size === 'sm' && 'text-xs',
760762
size === 'md' && 'text-sm',
761763
'group-data-[collapsible=icon]:hidden',

‎examples/blog-with-auth/pnpm-lock.yaml‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/todo-with-better-auth/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Link } from '@tanstack/react-router';
22
import { BsCardChecklist } from 'react-icons/bs';
3-
import { FaUserAlt } from 'react-icons/fa';
3+
import { FaUser } from 'react-icons/fa';
44
import { MdHome, MdLogout } from 'react-icons/md';
55

66
import { useLogOut } from '@src/hooks/use-log-out';
@@ -42,7 +42,7 @@ export function AppSidebar(): React.ReactElement {
4242
<SidebarMenuButton
4343
render={<Link to="/admin/accounts/users/user" />}
4444
>
45-
<FaUserAlt />
45+
<FaUser />
4646
<span>User</span>
4747
</SidebarMenuButton>
4848
</SidebarMenuItem>

‎examples/todo-with-better-auth/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
* https://ui.shadcn.com/docs/components/sidebar
3636
*
3737
* - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561)
38+
* - Added aria-[current=page] support alongside data-[active=true] for active state styling
3839
*/
3940

4041
const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -527,7 +528,7 @@ function SidebarMenuItem({
527528
}
528529

529530
const sidebarMenuButtonVariants = cva(
530-
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
531+
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
531532
{
532533
variants: {
533534
variant: {
@@ -632,7 +633,7 @@ function SidebarMenuAction({
632633
'peer-data-[size=lg]/menu-button:top-2.5',
633634
'group-data-[collapsible=icon]:hidden',
634635
showOnHover &&
635-
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
636+
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
636637
className,
637638
),
638639
},
@@ -656,7 +657,7 @@ function SidebarMenuBadge({
656657
data-sidebar="menu-badge"
657658
className={cn(
658659
'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none',
659-
'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
660+
'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
660661
'peer-data-[size=sm]/menu-button:top-1',
661662
'peer-data-[size=default]/menu-button:top-1.5',
662663
'peer-data-[size=lg]/menu-button:top-2.5',
@@ -756,6 +757,7 @@ function SidebarMenuSubButton({
756757
className: cn(
757758
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground',
758759
'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
760+
'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground',
759761
size === 'sm' && 'text-xs',
760762
size === 'md' && 'text-sm',
761763
'group-data-[collapsible=icon]:hidden',

‎examples/todo-with-better-auth/apps/admin/src/components/layouts/app-sidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Link } from '@tanstack/react-router';
22
import { BsCardChecklist } from 'react-icons/bs';
3-
import { FaUserAlt } from 'react-icons/fa';
3+
import { FaUser } from 'react-icons/fa';
44
import { MdHome, MdLogout } from 'react-icons/md';
55

66
import { useLogOut } from '@src/hooks/use-log-out';
@@ -42,7 +42,7 @@ export function AppSidebar(): React.ReactElement {
4242
<SidebarMenuButton
4343
render={<Link to="/admin/accounts/users/user" />}
4444
>
45-
<FaUserAlt />
45+
<FaUser />
4646
<span>User</span>
4747
</SidebarMenuButton>
4848
</SidebarMenuItem>

‎examples/todo-with-better-auth/apps/admin/src/components/ui/sidebar.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
* https://ui.shadcn.com/docs/components/sidebar
3636
*
3737
* - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561)
38+
* - Added aria-[current=page] support alongside data-[active=true] for active state styling
3839
*/
3940

4041
const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -527,7 +528,7 @@ function SidebarMenuItem({
527528
}
528529

529530
const sidebarMenuButtonVariants = cva(
530-
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
531+
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
531532
{
532533
variants: {
533534
variant: {
@@ -632,7 +633,7 @@ function SidebarMenuAction({
632633
'peer-data-[size=lg]/menu-button:top-2.5',
633634
'group-data-[collapsible=icon]:hidden',
634635
showOnHover &&
635-
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
636+
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
636637
className,
637638
),
638639
},
@@ -656,7 +657,7 @@ function SidebarMenuBadge({
656657
data-sidebar="menu-badge"
657658
className={cn(
658659
'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none',
659-
'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
660+
'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
660661
'peer-data-[size=sm]/menu-button:top-1',
661662
'peer-data-[size=default]/menu-button:top-1.5',
662663
'peer-data-[size=lg]/menu-button:top-2.5',
@@ -756,6 +757,7 @@ function SidebarMenuSubButton({
756757
className: cn(
757758
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground',
758759
'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
760+
'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground',
759761
size === 'sm' && 'text-xs',
760762
size === 'md' && 'text-sm',
761763
'group-data-[collapsible=icon]:hidden',

0 commit comments

Comments
 (0)