chore/ui: Add user dropdown

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/components/common/user-dropdown.tsx

@@ -7,11 +7,17 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { logout } from '@/services/user-service';
+import { useAuthedRoute } from '@/stores/auth-store';
+
+import { Badge } from '../ui/badge';
 
 export const UserDropdown = () => {
+  const { email, username, isAdmin } = useAuthedRoute();
   const navigate = useNavigate();
 
   const { mutate: sendLogoutRequest } = useMutation({
@@ -32,9 +38,24 @@ export const UserDropdown = () => {
           <PersonIcon />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className='translate-x-[-40px]'>
+      <DropdownMenuContent className='border-border translate-x-[-40px]'>
+        <DropdownMenuLabel className='font-normal'>
+          <div className='flex flex-col space-y-1'>
+            <p className='text-sm font-medium leading-none'>{username}</p>
+            <p className='text-muted-foreground text-xs leading-none'>{email}</p>
+            {isAdmin && (
+              <>
+                <div className='h-1' />
+                <Badge className='w-min uppercase' variant='easy'>
+                  Admin
+                </Badge>
+              </>
+            )}
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
         <DropdownMenuItem className='hover:cursor-pointer' onClick={handleLogout}>
-          Logout
+          Log&nbsp;out
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

frontend/src/services/user-service.ts

@@ -43,7 +43,7 @@ export const checkIsAuthed = (param?: { signal: AbortSignal }) => {
           isAuthed: true,
           expiresAt: response.data ? new Date(response.data.expiresAt) : new Date(),
           userId: response.data ? response.data.userId : undefined,
-          username: response.data ? response.data.userName : undefined,
+          username: response.data ? response.data.username : undefined,
           email: response.data ? response.data.email : undefined,
           isAdmin: response.data?.isAdmin ?? undefined,
         };

frontend/vite.config.ts

@@ -26,39 +26,39 @@ export default defineConfig(({ mode }) => {
       proxy: {
         '/user-service': {
           target: env.VITE_USER_SERVICE,
-          rewrite: (path) => path.replace(/^\/user-service/, ''),
+          rewrite: (path: string) => path.replace(/^\/user-service/, ''),
           changeOrigin: true,
           cookiePathRewrite: {
             '*': '/',
           },
         },
         '/question-service': {
           target: env.VITE_QUESTION_SERVICE,
-          rewrite: (path) => path.replace(/^\/question-service/, ''),
+          rewrite: (path: string) => path.replace(/^\/question-service/, ''),
           changeOrigin: true,
           cookiePathRewrite: {
             '*': '/',
           },
         },
         '/collaboration-service': {
           target: env.VITE_COLLAB_SERVICE,
-          rewrite: (path) => path.replace(/^\/collaboration-service/, ''),
+          rewrite: (path: string) => path.replace(/^\/collaboration-service/, ''),
           changeOrigin: true,
           cookiePathRewrite: {
             '*': '/',
           },
         },
         '/matching-service': {
           target: env.VITE_MATCHING_SERVICE,
-          rewrite: (path) => path.replace(/^\/matching-service/, ''),
+          rewrite: (path: string) => path.replace(/^\/matching-service/, ''),
           changeOrigin: true,
           cookiePathRewrite: {
             '*': '/',
           },
         },
         '/collab-ws': {
           target: `${env.VITE_COLLAB_SERVICE.replace('http', 'ws')}`,
-          rewrite: (path) => path.replace(/\/collab-ws/, ''),
+          rewrite: (path: string) => path.replace(/\/collab-ws/, ''),
           ws: true,
         },
         '/matching-socket/': {