feat: add UI for changing username in user menu popup

Author: Bentroen

web/src/modules/shared/components/layout/UserMenu.tsx

@@ -1,5 +1,15 @@
-import { faMusic, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+'use client';
+
+import {
+  faCheck,
+  faClose,
+  faMusic,
+  faPencil,
+  faSignOutAlt,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Image from 'next/image';
+import { useState } from 'react';
 
 import { LoggedUserData } from '@web/src/modules/auth/types/User';
 
@@ -13,8 +23,15 @@ import { UserMenuLink, UserMenuSplitLine } from './UserMenuLink';
 import { UserMenuButton } from '../client/UserMenuButton';
 
 export function UserMenu({ userData }: { userData: LoggedUserData }) {
+  const [isEditingUsername, setIsEditingUsername] = useState(false);
+  const [error, setError] = useState<string>('');
+
+  // ERRORS:
+  // 'This username is not available! :('
+  // 'Your username may only contain these characters: A-Z a-z 0-9 - _ .'
+
   return (
-    <Popover>
+    <Popover onOpenChange={() => setIsEditingUsername(false)}>
       <PopoverTrigger>
         <UserMenuButton userData={userData} />
       </PopoverTrigger>
@@ -30,7 +47,7 @@ export function UserMenu({ userData }: { userData: LoggedUserData }) {
         <div className='min-w-48 max-w-64'>
           {/* User */}
           <div className='flex flex-row gap-2 items-center p-4 pb-3'>
-            <div className='h-8 w-8'>
+            <div className='h-8 w-8 aspect-square'>
               <Image
                 width={32}
                 height={32}
@@ -40,10 +57,47 @@ export function UserMenu({ userData }: { userData: LoggedUserData }) {
               />
             </div>
             <div className='flex-shrink min-w-0 flex flex-col leading-tight'>
-              <h4 className='truncate font-semibold'>{userData.username}</h4>
+              <div className='flex justify-start items-center gap-2'>
+                {!isEditingUsername ? (
+                  <>
+                    <h4 className='truncate font-semibold w-48 py-px'>
+                      {userData.username}
+                    </h4>
+                    <button onClick={() => setIsEditingUsername(true)}>
+                      <FontAwesomeIcon
+                        icon={faPencil}
+                        size='sm'
+                        className='text-zinc-400 hover:text-zinc-200'
+                      />
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <input
+                      className='w-[calc(12rem-52px)] font-semibold bg-transparent border border-zinc-400 rounded-md px-1'
+                      defaultValue={userData.username}
+                    ></input>
+                    <button onClick={() => setIsEditingUsername(false)}>
+                      <FontAwesomeIcon
+                        icon={faClose}
+                        size='lg'
+                        className='text-zinc-400 hover:text-red-500'
+                      />
+                    </button>
+                    <button onClick={() => setIsEditingUsername(false)}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        size='lg'
+                        className='text-zinc-400 hover:text-green-500'
+                      />
+                    </button>
+                  </>
+                )}
+              </div>
               <p className='text-zinc-300 text-xs truncate'>{userData.email}</p>
             </div>
           </div>
+          {error && <p className='text-sm text-red-400 px-4 pb-2'>{error}</p>}
 
           <UserMenuSplitLine />