fix: select width, change padding in dialog-footer, email slice

Author: lorenzocorallo

src/app/dashboard/(active)/telegram/users/delete-group-admin.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { Trash2Icon } from "lucide-react"
+import { Trash2, Trash2Icon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 import { toast } from "sonner"
@@ -55,7 +55,14 @@ export function DeleteGroupAdmin({ userId, chatId }: { userId: number; chatId: n
 
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
-      <AlertDialogTrigger render={<Button variant="destructive">Delete</Button>}></AlertDialogTrigger>
+      <AlertDialogTrigger
+        render={
+          <Button variant="destructive">
+            <Trash2 />
+            Delete
+          </Button>
+        }
+      ></AlertDialogTrigger>
       <AlertDialogContent size="sm">
         <AlertDialogHeader>
           <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">

src/app/dashboard/(active)/telegram/users/new-group-admin.tsx

@@ -104,14 +104,15 @@ export function NewGroupAdmin({ user, alreadyIn }: { user: User; alreadyIn: numb
         )}
 
         <form onSubmit={searchGroup} className="pt-2 gap-y-4 flex flex-col justify-start items-start">
-          <div className="flex gap-2 flex-col items-start justify-start">
-            <Label htmlFor="email" className="text-base">
+          <div className="flex gap-2 flex-col items-start justify-start w-full">
+            <Label htmlFor="group-query" className="text-base">
               Search Group
             </Label>
-            <div className="flex gap-2 items-center justify-start">
+            <div className="flex gap-2 items-center justify-start w-full">
               <Input
                 id="group-query"
                 type="text"
+                name="group-query"
                 placeholder="Group name"
                 className="bg-card w-auto"
                 disabled={groups.length > 0}
@@ -124,8 +125,9 @@ export function NewGroupAdmin({ user, alreadyIn }: { user: User; alreadyIn: numb
               <Button type="submit" size="icon">
                 <Search />
               </Button>
+              <div className="grow" />
               {groups.length > 0 && (
-                <Button variant="outline" onClick={reset}>
+                <Button variant="outline" onClick={reset} className="justify-self-end">
                   <X />
                   Reset
                 </Button>
@@ -141,7 +143,7 @@ export function NewGroupAdmin({ user, alreadyIn }: { user: User; alreadyIn: numb
             onValueChange={(v) => setSelectedGroup(v)}
             disabled={groups.length === 0}
           >
-            <SelectTrigger className="w-full max-w-48">{selectedGroup?.title ?? "Select a group"}</SelectTrigger>
+            <SelectTrigger className="w-full">{selectedGroup?.title ?? "Select a group"}</SelectTrigger>
             <SelectContent>
               <SelectGroup>
                 {groups.map((item) => (

src/app/dashboard/(active)/telegram/users/page.tsx

@@ -4,6 +4,7 @@ import { ArrowLeft, ExternalLinkIcon, Search, Star, X } from "lucide-react"
 import Link from "next/link"
 import { useState } from "react"
 import { toast } from "sonner"
+import { Code } from "@/components/code"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
@@ -93,7 +94,7 @@ export default function TgUsers() {
             <p>Admin in groups:</p>
             <NewGroupAdmin user={user} alreadyIn={userData?.groupAdmin.map((g) => g?.group.id ?? 0) ?? []} />
           </div>
-          <div className="grid grid-cols-3 py-2 gap-4">
+          <div className="grid grid-cols-4 py-2 gap-4">
             {userData?.groupAdmin
               .filter((m) => m !== null && m !== undefined)
               .map((m) => (
@@ -181,11 +182,13 @@ type GroupAdminSingle = NonNullable<ApiOutput["tg"]["permissions"]["getRoles"]["
 function GroupAdminCard({ user, groupAdminInfo: m }: { user: NonNullable<User>; groupAdminInfo: GroupAdminSingle }) {
   return (
     <Card>
+      <CardHeader>
+        <CardTitle>{m.group.title}</CardTitle>
+      </CardHeader>
       <CardContent className="space-y-2">
         <p>
-          {" "}
-          <span className="text-muted-foreground">Chat: </span>
-          {m.group && <span>{m.group.title}</span>} [{m.group.id}]
+          <span className="text-muted-foreground">Chat ID: </span>
+          <Code copyOnClick>{m.group.id}</Code> / <Code copyOnClick>{stripChatId(m.group.id)}</Code>
         </p>
         <p>
           <span className="text-muted-foreground">Added By: </span>
@@ -253,33 +256,29 @@ function AuditLogCard({ log: m }: { log: Log }) {
       <CardHeader>
         <CardTitle>{m.type}</CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="grid grid-cols-[auto_1fr] gap-x-2">
+        <span className="text-muted-foreground">Chat: </span>
         <p>
-          {" "}
-          <span className="text-muted-foreground">Chat: </span>
           {m.groupTitle && <span>{m.groupTitle}</span>} [{m.groupId}]
         </p>
-        <p>
-          {" "}
-          <span className="text-muted-foreground">Admin ID: </span>
-          {admin && admin.user && fmtUser(admin.user)}
-        </p>
+        <span className="text-muted-foreground">Admin ID: </span>
+        <p>{admin?.user && fmtUser(admin.user)}</p>
+
         {m.createdAt && (
-          <p>
+          <>
             <span className="text-muted-foreground">Created: </span>
-            {m.createdAt.toLocaleString()}
-          </p>
+            <p>{m.createdAt.toLocaleString()}</p>
+          </>
         )}
+
         {m.until && (
-          <p>
+          <>
             <span className="text-muted-foreground">Until: </span>
-            {m.until.toLocaleString()}
-          </p>
+            <p>{m.until.toLocaleString()}</p>
+          </>
         )}
-        <p>
-          <span className="text-muted-foreground">Reason:</span>
-          {m.reason}
-        </p>
+        <span className="text-muted-foreground">Reason:</span>
+        {m.reason ? <p>{m.reason}</p> : <p className="text-muted-foreground">N/A</p>}
       </CardContent>
     </Card>
   )

src/components/admin-header/right-nav.tsx

@@ -25,7 +25,7 @@ export function RightNav() {
           <Button variant="ghost" size="icon" className="rounded-full">
             <Avatar size="lg">
               <AvatarFallback className="text-foreground text-base">
-                {data.user.name ? getInitials(data.user.name) : data.user.email.slice(2)}
+                {data.user.name ? getInitials(data.user.name) : data.user.email.slice(0, 2)}
               </AvatarFallback>
             </Avatar>
           </Button>

src/components/ui/card.tsx

@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-2 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}