feat: improve auth seeding and sidebar ux

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

web/src/components/admin/queues/queues-manager.tsx

@@ -34,6 +34,8 @@ export function QueuesManager() {
   const { session, convexUserId } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
 
+  const NO_TEAM_VALUE = "__none__"
+
   const queues = useQuery(
     api.queues.list,
     convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
@@ -202,12 +204,15 @@ export function QueuesManager() {
             </div>
             <div className="space-y-2">
               <Label>Time responsável</Label>
-              <Select value={teamId ?? ""} onValueChange={(value) => setTeamId(value || undefined)}>
+              <Select
+                value={teamId ?? NO_TEAM_VALUE}
+                onValueChange={(value) => setTeamId(value === NO_TEAM_VALUE ? undefined : value)}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="Selecione um time" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="">Sem time</SelectItem>
+                  <SelectItem value={NO_TEAM_VALUE}>Sem time</SelectItem>
                   {teams?.map((team) => (
                     <SelectItem key={team.id} value={team.id}>
                       {team.name}
@@ -292,12 +297,15 @@ export function QueuesManager() {
             </div>
             <div className="space-y-2">
               <Label>Time responsável</Label>
-              <Select value={teamId ?? ""} onValueChange={(value) => setTeamId(value || undefined)}>
+              <Select
+                value={teamId ?? NO_TEAM_VALUE}
+                onValueChange={(value) => setTeamId(value === NO_TEAM_VALUE ? undefined : value)}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="Selecione um time" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="">Sem time</SelectItem>
+                  <SelectItem value={NO_TEAM_VALUE}>Sem time</SelectItem>
                   {teams?.map((team) => (
                     <SelectItem key={team.id} value={team.id}>
                       {team.name}

web/src/components/app-sidebar.tsx

@@ -13,7 +13,6 @@ import {
   Users,
   Waypoints,
   Timer,
-  Plug,
   Layers3,
   UserPlus,
   Settings,
@@ -34,6 +33,7 @@ import {
   SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar"
+import { Skeleton } from "@/components/ui/skeleton"
 import { useAuth } from "@/lib/auth-client"
 
 import type { LucideIcon } from "lucide-react"
@@ -45,6 +45,7 @@ type NavigationItem = {
   url: string
   icon: LucideIcon
   requiredRole?: NavRoleRequirement
+  exact?: boolean
 }
 
 type NavigationGroup = {
@@ -79,12 +80,17 @@ const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
       title: "Administração",
       requiredRole: "admin",
       items: [
-        { title: "Convites e acessos", url: "/admin", icon: UserPlus, requiredRole: "admin" },
+        {
+          title: "Convites e acessos",
+          url: "/admin",
+          icon: UserPlus,
+          requiredRole: "admin",
+          exact: true,
+        },
         { title: "Canais & roteamento", url: "/admin/channels", icon: Waypoints, requiredRole: "admin" },
         { title: "Times & papéis", url: "/admin/teams", icon: Users, requiredRole: "admin" },
         { title: "Campos personalizados", url: "/admin/fields", icon: Layers3, requiredRole: "admin" },
         { title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
-        { title: "Integrações", url: "/admin/integrations", icon: Plug, requiredRole: "admin" },
       ],
     },
     {
@@ -95,16 +101,25 @@ const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
   ],
 }
 
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const pathname = usePathname()
   const { isAdmin, isStaff, isCustomer } = useAuth()
+  const [isHydrated, setIsHydrated] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsHydrated(true)
+  }, [])
 
-  function isActive(url: string) {
+  function isActive(item: NavigationItem) {
+    const { url, exact } = item
     if (!pathname) return false
-    if (url === "/dashboard" && pathname === "/") {
+    if (url === "/dashboard" && pathname === "/") {
       return true
     }
-    return pathname === url || pathname.startsWith(`${url}/`)
+    if (exact) {
+      return pathname === url
+    }
+    return pathname === url || pathname.startsWith(`${url}/`)
   }
 
   function canAccess(requiredRole?: NavRoleRequirement) {
@@ -115,7 +130,35 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     return false
   }
 
-  return (
+  if (!isHydrated) {
+    return (
+      <Sidebar {...props}>
+        <SidebarHeader className="gap-3">
+          <Skeleton className="h-12 w-full rounded-lg" />
+          <Skeleton className="h-9 w-full rounded-lg" />
+        </SidebarHeader>
+        <SidebarContent>
+          {[0, 1, 2].map((group) => (
+            <SidebarGroup key={group}>
+              <SidebarGroupLabel>
+                <Skeleton className="h-3 w-20 rounded" />
+              </SidebarGroupLabel>
+              <SidebarGroupContent>
+                <div className="space-y-2">
+                  {[0, 1, 2].map((item) => (
+                    <Skeleton key={item} className="h-9 w-full rounded-md" />
+                  ))}
+                </div>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+    )
+  }
+
+  return (
     <Sidebar {...props}>
       <SidebarHeader className="gap-3">
         <VersionSwitcher
@@ -123,7 +166,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           versions={[...navigation.versions]}
           defaultVersion={navigation.versions[0]}
         />
-        <SearchForm placeholder="Buscar tickets, macros ou artigos" />
+        <SearchForm placeholder="Buscar tickets" />
       </SidebarHeader>
       <SidebarContent>
         {navigation.navMain.map((group) => {
@@ -137,7 +180,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 <SidebarMenu>
                   {visibleItems.map((item) => (
                     <SidebarMenuItem key={item.title}>
-                      <SidebarMenuButton asChild isActive={isActive(item.url)}>
+                      <SidebarMenuButton asChild isActive={isActive(item)}>
                         <a href={item.url} className="gap-2">
                           <item.icon className="size-4" />
                           <span>{item.title}</span>

web/src/components/ui/dialog.tsx

@@ -47,6 +47,13 @@ const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
   <div className={cn("flex flex-col gap-1", className)} {...props} />
 )
 
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+    {...props}
+  />
+)
+
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
@@ -64,4 +71,5 @@ const DialogDescription = React.forwardRef<
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription }
+export { DialogFooter }