direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-02 22:46:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard layout (#597)

Browse Source
This commit is contained in:
Saeed Vaziry
2025-05-13 23:42:22 +03:00
committed by GitHub
parent 38bafd7654
commit a81e9b18b7
57 changed files with 1011 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
resources/js/components/app-content.tsx
View File

@ -1,18 +0,0 @@
import { SidebarInset } from '@/components/ui/sidebar';
import * as React from 'react';
interface AppContentProps extends React.ComponentProps<'main'> {
variant?: 'header' | 'sidebar';
}
export function AppContent({ variant = 'header', children, ...props }: AppContentProps) {
if (variant === 'sidebar') {
return <SidebarInset {...props}>{children}</SidebarInset>;
}
return (
<main className="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl px-4" {...props}>
{children}
</main>
);
}

218
resources/js/components/app-header.tsx
View File

@ -1,204 +1,26 @@
import { Icon } from '@/components/icon';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { NavigationMenu, NavigationMenuItem, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { UserMenuContent } from '@/components/user-menu-content';
import { useInitials } from '@/hooks/use-initials';
import { cn } from '@/lib/utils';
import { type NavItem, type SharedData } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import { BookOpen, CogIcon, Folder, Menu, Search, ServerIcon, SlashIcon } from 'lucide-react';
import AppLogo from './app-logo';
import AppLogoIcon from './app-logo-icon';
import { ProjectSwitch } from '@/components/project-switch';
import { ServerSwitch } from '@/components/server-switch';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
const mainNavItems: NavItem[] = [
{
title: 'Servers',
href: '/servers',
activePath: '/servers',
icon: ServerIcon,
},
{
title: 'Settings',
href: '/settings/profile',
activePath: '/settings',
icon: CogIcon,
},
];
const rightNavItems: NavItem[] = [
{
title: 'Repository',
href: 'https://github.com/vitodeploy/vito',
icon: Folder,
},
{
title: 'Documentation',
href: 'https://vitodeploy.com',
icon: BookOpen,
},
];
const activeItemStyles = '';
import { ProjectSwitch } from '@/components/project-switch';
import { SlashIcon } from 'lucide-react';
import { ServerSwitch } from '@/components/server-switch';
export function AppHeader() {
const page = usePage<SharedData>();
const { auth } = page.props;
const getInitials = useInitials();
return (
<>
<div className="border-sidebar-border/80 border-b">
<div className="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
{/* Mobile Menu */}
<div className="lg:hidden">
<Sheet>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="mr-2 h-[34px] w-[34px]">
<Menu className="h-5 w-5" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="bg-sidebar flex h-full w-64 flex-col items-stretch justify-between">
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
<SheetHeader className="flex justify-start text-left">
<AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
</SheetHeader>
<div className="flex h-full flex-1 flex-col space-y-4 p-4">
<div className="flex h-full flex-col justify-between text-sm">
<div className="flex flex-col space-y-4">
{mainNavItems.map((item) => (
<Link key={item.title} href={item.href} className="flex items-center space-x-2 font-medium">
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
<span>{item.title}</span>
</Link>
))}
</div>
<div className="flex flex-col space-y-4">
{rightNavItems.map((item) => (
<a
key={item.title}
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-2 font-medium"
>
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
<span>{item.title}</span>
</a>
))}
</div>
</div>
</div>
</SheetContent>
</Sheet>
</div>
<Link href={route('home')} prefetch className="flex items-center space-x-2">
<AppLogo />
</Link>
{/* Desktop Navigation */}
<div className="ml-6 flex h-full items-center space-x-6">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<ProjectSwitch />
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<ServerSwitch />
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div className="ml-auto flex items-center space-x-2">
<div className="relative flex items-center space-x-1">
<Button variant="ghost" size="icon" className="group h-9 w-9 cursor-pointer">
<Search className="!size-5 opacity-80 group-hover:opacity-100" />
</Button>
<div className="hidden lg:flex">
{rightNavItems.map((item) => (
<TooltipProvider key={item.title} delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<a
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="group text-accent-foreground ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
>
<span className="sr-only">{item.title}</span>
{item.icon && <Icon iconNode={item.icon} className="size-5 opacity-80 group-hover:opacity-100" />}
</a>
</TooltipTrigger>
<TooltipContent>
<p>{item.title}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
))}
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="size-10 rounded-full p-1">
<Avatar className="size-8 overflow-hidden rounded-full">
<AvatarImage src={auth.user.avatar} alt={auth.user.name} />
<AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
{getInitials(auth.user.name)}
</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end">
<UserMenuContent user={auth.user} />
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
{/* Desktop Navigation */}
<div className="mx-auto hidden h-12 items-center px-2 md:max-w-7xl lg:flex">
<NavigationMenu className="flex h-full items-stretch">
<NavigationMenuList className="flex h-full items-stretch">
{mainNavItems.map((item, index) => (
<NavigationMenuItem key={index} className="relative flex h-full items-center">
<Link
href={item.href}
className={cn(
navigationMenuTriggerStyle(),
item.activePath && page.url.startsWith(item.activePath) && activeItemStyles,
'h-9 cursor-pointer px-3',
)}
>
{item.icon && <Icon iconNode={item.icon} className="mr-2 h-4 w-4" />}
{item.title}
</Link>
{item.activePath && page.url.startsWith(item.activePath) && (
<div className="absolute right-3 bottom-0 left-3 h-0.5 translate-y-px bg-black dark:bg-white"></div>
)}
</NavigationMenuItem>
))}
</NavigationMenuList>
</NavigationMenu>
</div>
</div>
{/*{breadcrumbs.length > 1 && (*/}
{/* <div className="border-sidebar-border/70 flex w-full border-b">*/}
{/* <div*/}
{/* className="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">*/}
{/* <Breadcrumbs breadcrumbs={breadcrumbs} />*/}
{/* </div>*/}
{/* </div>*/}
{/*)}*/}
</>
<header className="bg-background -ml-1 flex h-12 shrink-0 items-center gap-2 border-b p-4 md:-ml-2">
<SidebarTrigger className="-ml-1 md:hidden" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<ProjectSwitch />
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<ServerSwitch />
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</header>
);
}

18
resources/js/components/app-shell.tsx
View File

@ -1,18 +0,0 @@
import { SidebarProvider } from '@/components/ui/sidebar';
import { SharedData } from '@/types';
import { usePage } from '@inertiajs/react';
interface AppShellProps {
children: React.ReactNode;
variant?: 'header' | 'sidebar';
}
export function AppShell({ children, variant = 'header' }: AppShellProps) {
const isOpen = usePage<SharedData>().props.sidebarOpen;
if (variant === 'header') {
return <div className="flex min-h-screen w-full flex-col">{children}</div>;
}
return <SidebarProvider defaultOpen={isOpen}>{children}</SidebarProvider>;
}

14
resources/js/components/app-sidebar-header.tsx
View File

@ -1,14 +0,0 @@
import { Breadcrumbs } from '@/components/breadcrumbs';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
return (
<header className="border-sidebar-border/50 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
<div className="flex items-center gap-2">
<SidebarTrigger className="-ml-1" />
<Breadcrumbs breadcrumbs={breadcrumbs} />
</div>
</header>
);
}

128
resources/js/components/app-sidebar.tsx
View File

@ -1,11 +1,20 @@
import { NavFooter } from '@/components/nav-footer';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import { BookOpen, Folder, ServerIcon } from 'lucide-react';
import { BookOpen, CogIcon, Folder, ServerIcon } from 'lucide-react';
import AppLogo from './app-logo';
import { Icon } from '@/components/icon';
const mainNavItems: NavItem[] = [
{
@ -13,6 +22,11 @@ const mainNavItems: NavItem[] = [
href: route('servers'),
icon: ServerIcon,
},
{
title: 'Settings',
href: route('profile'),
icon: CogIcon,
},
];
const footerNavItems: NavItem[] = [
@ -28,29 +42,93 @@ const footerNavItems: NavItem[] = [
},
];
export function AppSidebar() {
export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?: NavItem[]; secondNavTitle?: string }) {
return (
<Sidebar collapsible="icon" variant="sidebar">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<Link href={route('servers')} prefetch>
<AppLogo />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<Sidebar collapsible="icon" className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row">
{/* This is the first sidebar */}
{/* We disable collapsible and adjust width to icon. */}
{/* This will make the sidebar appear as icons. */}
<Sidebar collapsible="none" className="h-auto !w-[calc(var(--sidebar-width-icon)_+_1px)] border-r">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
<Link href={route('servers')} prefetch>
<AppLogo />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent className="md:px-0">
<SidebarMenu>
{mainNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={window.location.href.startsWith(item.href)}
tooltip={{ children: item.title, hidden: false }}
>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter className="hidden md:flex">
<SidebarMenu>
{footerNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild tooltip={{ children: item.title, hidden: false }}>
<a href={item.href} target="_blank" rel="noopener noreferrer">
{item.icon && <Icon iconNode={item.icon} />}
<span className="sr-only">{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
<NavUser />
</SidebarFooter>
</Sidebar>
<SidebarContent>
<NavMain items={mainNavItems} />
</SidebarContent>
<SidebarFooter>
<NavFooter items={footerNavItems} className="mt-auto" />
<NavUser />
</SidebarFooter>
{/* This is the second sidebar */}
{/* We enable collapsible and adjust width to icon. */}
{/* This will make the sidebar appear as icons. */}
{secondNavItems && secondNavItems.length > 0 && (
<Sidebar collapsible="none" className="flex flex-1">
<SidebarHeader className="hidden h-12 border-b p-0 md:flex">
<div className="flex h-full items-center p-2">
<span className="max-w-[200px] truncate overflow-ellipsis">{secondNavTitle}</span>
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{secondNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={window.location.href.startsWith(item.href)}>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
)}
</Sidebar>
);
}

34
resources/js/components/breadcrumbs.tsx
View File

@ -1,34 +0,0 @@
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
import { Link } from '@inertiajs/react';
import { Fragment } from 'react';
export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: BreadcrumbItemType[] }) {
return (
<>
{breadcrumbs.length > 0 && (
<Breadcrumb>
<BreadcrumbList>
{breadcrumbs.map((item, index) => {
const isLast = index === breadcrumbs.length - 1;
return (
<Fragment key={index}>
<BreadcrumbItem>
{isLast ? (
<BreadcrumbPage>{item.title}</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<Link href={item.href}>{item.title}</Link>
</BreadcrumbLink>
)}
</BreadcrumbItem>
{!isLast && <BreadcrumbSeparator />}
</Fragment>
);
})}
</BreadcrumbList>
</Breadcrumb>
)}
</>
);
}

5
resources/js/components/container.tsx
View File

@ -1,5 +1,6 @@
import { ReactNode } from 'react';
import { cn } from '@/lib/utils';
export default function Container({ children }: { children?: ReactNode }) {
return <div className="container mx-auto space-y-5 py-10">{children}</div>;
export default function Container({ className, children }: { className?: string; children?: ReactNode }) {
return <div className={cn('container mx-auto space-y-5 px-4 py-5', className)}>{children}</div>;
}

89
resources/js/components/delete-user.tsx
View File

@ -1,89 +0,0 @@
import { useForm } from '@inertiajs/react';
import { FormEventHandler, useRef } from 'react';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import HeadingSmall from '@/components/heading-small';
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
export default function DeleteUser() {
const passwordInput = useRef<HTMLInputElement>(null);
const { data, setData, delete: destroy, processing, reset, errors, clearErrors } = useForm<Required<{ password: string }>>({ password: '' });
const deleteUser: FormEventHandler = (e) => {
e.preventDefault();
destroy(route('profile.destroy'), {
preserveScroll: true,
onSuccess: () => closeModal(),
onError: () => passwordInput.current?.focus(),
onFinish: () => reset(),
});
};
const closeModal = () => {
clearErrors();
reset();
};
return (
<div className="space-y-6">
<HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
<div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
<div className="relative space-y-0.5 text-red-600 dark:text-red-100">
<p className="font-medium">Warning</p>
<p className="text-sm">Please proceed with caution, this cannot be undone.</p>
</div>
<Dialog>
<DialogTrigger asChild>
<Button variant="destructive">Delete account</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle>Are you sure you want to delete your account?</DialogTitle>
<DialogDescription>
Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you
would like to permanently delete your account.
</DialogDescription>
<form className="space-y-6" onSubmit={deleteUser}>
<div className="grid gap-2">
<Label htmlFor="password" className="sr-only">
Password
</Label>
<Input
id="password"
type="password"
name="password"
ref={passwordInput}
value={data.password}
onChange={(e) => setData('password', e.target.value)}
placeholder="Password"
autoComplete="current-password"
/>
<InputError message={errors.password} />
</div>
<DialogFooter className="gap-2">
<DialogClose asChild>
<Button variant="secondary" onClick={closeModal}>
Cancel
</Button>
</DialogClose>
<Button variant="destructive" disabled={processing} asChild>
<button type="submit">Delete account</button>
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
</div>
</div>
);
}

2
resources/js/components/heading.tsx
View File

@ -1,6 +1,6 @@
export default function Heading({ title, description }: { title: string; description?: string }) {
return (
<div className="mb-8 space-y-0.5">
<div className="space-y-0.5">
<h2 className="text-xl font-semibold tracking-tight">{title}</h2>
{description && <p className="text-muted-foreground text-sm">{description}</p>}
</div>

31
resources/js/components/nav-footer.tsx
View File

@ -1,31 +0,0 @@
import { Icon } from '@/components/icon';
import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { type ComponentPropsWithoutRef } from 'react';
export function NavFooter({
items,
className,
...props
}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
items: NavItem[];
}) {
return (
<SidebarGroup {...props} className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100">
<a href={item.href} target="_blank" rel="noopener noreferrer">
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

24
resources/js/components/nav-main.tsx
View File

@ -1,24 +0,0 @@
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link, usePage } from '@inertiajs/react';
export function NavMain({ items = [] }: { items: NavItem[] }) {
const page = usePage();
return (
<SidebarGroup className="px-2 py-0">
<SidebarGroupLabel>Platform</SidebarGroupLabel>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={item.href === page.url} tooltip={{ children: item.title }}>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroup>
);
}

13
resources/js/components/nav-user.tsx
View File

@ -1,5 +1,5 @@
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { UserInfo } from '@/components/user-info';
import { UserMenuContent } from '@/components/user-menu-content';
import { useIsMobile } from '@/hooks/use-mobile';
@ -9,7 +9,6 @@ import { ChevronsUpDown } from 'lucide-react';
export function NavUser() {
const { auth } = usePage<SharedData>().props;
const { state } = useSidebar();
const isMobile = useIsMobile();
return (
@ -17,15 +16,19 @@ export function NavUser() {
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton size="lg" className="text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent group">
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
>
<UserInfo user={auth.user} />
<ChevronsUpDown className="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
side={isMobile ? 'bottom' : 'right'}
align="end"
side={isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'}
sideOffset={4}
>
<UserMenuContent user={auth.user} />
</DropdownMenuContent>

4
resources/js/components/project-switch.tsx
View File

@ -33,8 +33,8 @@ export function ProjectSwitch() {
<div className="flex items-center">
<Link href={route('servers')}>
<Button variant="ghost" className="px-2">
<Avatar className="size-7 rounded-md">
<AvatarFallback className="rounded-md">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">{auth.currentProject?.name}</span>
</Button>

8
resources/js/components/server-switch.tsx
View File

@ -31,8 +31,8 @@ export function ServerSwitch() {
{selectedServer && (
<Link href={route('servers.show', { server: selectedServer?.id || '' })}>
<Button variant="ghost" className="px-2">
<Avatar className="size-7 rounded-md">
<AvatarFallback className="rounded-md">{initials(selectedServer?.name ?? '')}</AvatarFallback>
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">{initials(selectedServer?.name ?? '')}</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">{selectedServer?.name}</span>
</Button>
@ -41,8 +41,8 @@ export function ServerSwitch() {
{!selectedServer && (
<Button variant="ghost" className="cursor-default px-2">
<Avatar className="size-7 rounded-md">
<AvatarFallback className="rounded-md">S</AvatarFallback>
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">S</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">Select a server</span>
</Button>

11
resources/js/components/ui/button.tsx
View File

@ -5,21 +5,22 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
"cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-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",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
destructive:
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline:
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5',
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
icon: 'size-9',
},

0
resources/js/components/input-error.tsx → resources/js/components/ui/input-error.tsx
View File

2
resources/js/components/ui/input.tsx
View File

@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
type={type}
data-slot="input"
className={cn(
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'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',
className,

2
resources/js/components/ui/separator.tsx
View File

@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import * as SeparatorPrimitive from '@radix-ui/react-separator';

8
resources/js/components/ui/sheet.tsx
View File

@ -25,7 +25,7 @@ function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Sheet
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
className,
)}
{...props}
@ -48,8 +48,10 @@ function SheetContent({
data-slot="sheet-content"
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
side === 'right' && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l',
side === 'left' && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r',
side === 'right' &&
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
side === 'left' &&
'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
side === 'top' && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
side === 'bottom' && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
className,

2
resources/js/components/ui/skeleton.tsx
View File

@ -1,7 +1,7 @@
import { cn } from '@/lib/utils';
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
return <div data-slot="skeleton" className={cn('bg-primary/10 animate-pulse rounded-md', className)} {...props} />;
return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />;
}
export { Skeleton };

2
resources/js/components/ui/tooltip.tsx
View File

@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';

2
resources/js/components/user-info.tsx
View File

@ -7,7 +7,7 @@ export function UserInfo({ user, showEmail = false }: { user: User; showEmail?:
return (
<>
<Avatar className="h-8 w-8 overflow-hidden rounded-full">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">{getInitials(user.name)}</AvatarFallback>
</Avatar>

2
resources/js/components/user-menu-content.tsx
View File

@ -30,7 +30,7 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem asChild>
<Link className="block w-full" href={route('profile.edit')} as="button" prefetch onClick={cleanup}>
<Link className="block w-full" href={route('profile')} as="button" prefetch onClick={cleanup}>
<Settings className="mr-2" />
Settings
</Link>