1- import { Avatar , AvatarFallback , AvatarImage } from "@renderer/components/ui/avatar"
2- import { Button } from "@renderer/components/ui/button"
1+ import {
2+ Avatar ,
3+ AvatarFallback ,
4+ AvatarImage ,
5+ } from "@renderer/components/ui/avatar"
6+ import { Button , MotionButtonBase } from "@renderer/components/ui/button"
37import { CopyButton } from "@renderer/components/ui/code-highlighter"
8+ import { ScrollArea } from "@renderer/components/ui/scroll-area"
49import {
510 Table ,
611 TableBody ,
@@ -9,6 +14,7 @@ import {
914 TableHeader ,
1015 TableRow ,
1116} from "@renderer/components/ui/table"
17+ import { Tooltip , TooltipContent , TooltipTrigger } from "@renderer/components/ui/tooltip"
1218import { useAuthQuery } from "@renderer/hooks/common"
1319import { apiClient , getFetchErrorMessage } from "@renderer/lib/api-fetch"
1420import { usePresentUserProfileModal } from "@renderer/modules/profile/hooks"
@@ -27,73 +33,109 @@ export const SettingInvitations = () => {
2733 async onError ( err ) {
2834 toast . error ( getFetchErrorMessage ( err ) )
2935 } ,
30- onSuccess ( ) {
36+ onSuccess ( data ) {
3137 Queries . invitations . list ( ) . invalidate ( )
32- toast ( "🎉 New invitation generated" )
38+ toast ( "🎉 New invitation generated, invite code is copied" )
39+ navigator . clipboard . writeText ( data . data )
3340 } ,
3441 } )
3542 const presentUserProfile = usePresentUserProfileModal ( "drawer" )
3643
3744 return (
3845 < >
3946 < SettingsTitle />
40- < div className = "mt-4" >
41- < Button onClick = { ( ) => newInvitation . mutate ( ) } >
42- New invitation
43- </ Button >
44- < Table className = "mt-4" >
45- < TableHeader >
46- < TableRow className = "[&_*]:!font-semibold" >
47- < TableHead className = "w-16 text-center" size = "sm" >
48- Code
49- </ TableHead >
50- < TableHead className = "text-center" size = "sm" >
51- Creation Time
52- </ TableHead >
53- < TableHead className = "text-center" size = "sm" >
54- Used by
55- </ TableHead >
56- </ TableRow >
57- </ TableHeader >
58- < TableBody >
59- { invitations . data ?. map ( ( row ) => (
60- < TableRow key = { row . code } >
61- < TableCell align = "center" size = "sm" >
62- < div className = "group relative flex items-center justify-center gap-2" >
63- < span > { row . code } </ span >
64- < CopyButton
65- value = { row . code }
66- className = "absolute -right-6 p-0.5 opacity-0 group-hover:opacity-100"
67- />
68- </ div >
69- </ TableCell >
70- < TableCell align = "center" size = "sm" >
71- { row . createdAt && new Date ( row . createdAt ) . toLocaleString ( ) }
72- </ TableCell >
73- < TableCell align = "center" size = "sm" >
74- { row . users ? (
75- < div
76- onClick = { ( ) => {
77- presentUserProfile ( row . users ?. id )
78- } }
47+ < div className = "absolute inset-x-0 bottom-10 top-4 flex flex-col" >
48+ < Tooltip >
49+ < TooltipTrigger >
50+ < MotionButtonBase
51+ type = "button"
52+ onClick = { ( ) => {
53+ newInvitation . mutate ( )
54+ } }
55+ className = "center absolute bottom-0 right-2 size-10 rounded-full bg-accent text-white drop-shadow"
56+ >
57+ < i className = "i-mingcute-user-add-2-line size-4" />
58+ </ MotionButtonBase >
59+ </ TooltipTrigger >
60+
61+ < TooltipContent >
62+ new invitation
63+ </ TooltipContent >
64+ </ Tooltip >
65+ < ScrollArea . ScrollArea scrollbarClassName = "w-1" rootClassName = "flex grow" >
66+ { invitations . data ?. length ? (
67+ < Table className = "mt-4" >
68+ < TableHeader className = "border-b" >
69+ < TableRow className = "[&_*]:!font-semibold" >
70+ < TableHead className = "w-16 text-center" size = "sm" >
71+ Code
72+ </ TableHead >
73+ < TableHead className = "text-center" size = "sm" >
74+ Creation Time
75+ </ TableHead >
76+ < TableHead className = "text-center" size = "sm" >
77+ Used by
78+ </ TableHead >
79+ </ TableRow >
80+ </ TableHeader >
81+ < TableBody className = "border-t-[12px] border-transparent" >
82+ { invitations . data ?. map ( ( row ) => (
83+ < TableRow key = { row . code } >
84+ < TableCell align = "center" size = "sm" >
85+ < div className = "group relative flex items-center justify-center gap-2 font-mono" >
86+ < span > { row . code } </ span >
87+ < CopyButton
88+ value = { row . code }
89+ className = "absolute -right-6 p-1 opacity-0 group-hover:opacity-100 [&_i]:size-3"
90+ />
91+ </ div >
92+ </ TableCell >
93+ < TableCell
94+ align = "center"
95+ className = "tabular-nums"
96+ size = "sm"
7997 >
80- < Avatar className = "aspect-square size-5 border border-border ring-1 ring-background" >
81- < AvatarImage src = { row . users ?. image || undefined } />
82- < AvatarFallback > { row . users ?. name ?. slice ( 0 , 2 ) } </ AvatarFallback >
83- </ Avatar >
84- </ div >
85- ) : "Not used" }
98+ { row . createdAt &&
99+ new Date ( row . createdAt ) . toLocaleString ( ) }
100+ </ TableCell >
101+ < TableCell align = "center" size = "sm" >
102+ { row . users ? (
103+ < div
104+ onClick = { ( ) => {
105+ presentUserProfile ( row . users ?. id )
106+ } }
107+ >
108+ < Avatar className = "aspect-square size-5 border border-border ring-1 ring-background" >
109+ < AvatarImage src = { row . users ?. image || undefined } />
110+ < AvatarFallback >
111+ { row . users ?. name ?. slice ( 0 , 2 ) }
112+ </ AvatarFallback >
113+ </ Avatar >
114+ </ div >
115+ ) : (
116+ "Not used"
117+ ) }
118+ </ TableCell >
119+ </ TableRow >
120+ ) ) }
121+ </ TableBody >
122+ </ Table >
123+ ) : (
124+ < div className = "mt-36 w-full text-center text-sm text-zinc-400" >
125+ < p > No invitations</ p >
86126
87- </ TableCell >
88- </ TableRow >
89- ) ) }
90- </ TableBody >
91- </ Table >
92- { ! invitations . data ?. length && (
93- < div className = "my-2 w-full text-center text-sm text-zinc-400" >
94- No invitations
95- </ div >
96- ) }
127+ < div className = "mt-6" >
128+ < Button
129+ onClick = { ( ) => {
130+ newInvitation . mutate ( )
131+ } }
132+ >
133+ Create Invitation
134+ </ Button >
135+ </ div >
136+ </ div >
137+ ) }
138+ </ ScrollArea . ScrollArea >
97139 </ div >
98140 </ >
99141 )
0 commit comments