From 5bc83e69884248f4884354fef9273116119e4a74 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:01:20 -0300
Subject: [PATCH 01/29] feat: add popup with licensing info when downloading a
 song

---
 .../song/components/SongPageButtons.tsx       | 38 +++++++----
 .../components/client/DownloadSongModal.tsx   | 68 +++++++++++++++++++
 2 files changed, 91 insertions(+), 15 deletions(-)
 create mode 100644 web/src/modules/song/components/client/DownloadSongModal.tsx

diff --git a/web/src/modules/song/components/SongPageButtons.tsx b/web/src/modules/song/components/SongPageButtons.tsx
index 7aab4cb1..fbc1e11a 100644
--- a/web/src/modules/song/components/SongPageButtons.tsx
+++ b/web/src/modules/song/components/SongPageButtons.tsx
@@ -16,6 +16,7 @@ import Link from 'next/link';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 
+import DownloadSongModal from './client/DownloadSongModal';
 import ShareModal from './client/ShareModal';
 import { downloadSongFile, openSongInNBS } from '../util/downloadSong';
 
@@ -199,22 +200,29 @@ const showOpenFailedToast = () => {
   );
 };
 
-const DownloadSongButton = ({
-  song,
-}: {
-  song: {
-    publicId: string;
-    title: string;
-    downloadCount: number;
-  };
-}) => {
+const DownloadSongButton = ({ song }: { song: SongViewDtoType }) => {
+  const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
+
   return (
-    <DownloadButton
-      downloadCount={song.downloadCount}
-      handleClick={() => {
-        downloadSongFile(song);
-      }}
-    />
+    <>
+      <DownloadButton
+        downloadCount={song.downloadCount}
+        handleClick={() => {
+          setIsDownloadModalOpen(true);
+        }}
+      />{' '}
+      <DownloadSongModal
+        isOpen={isDownloadModalOpen}
+        setIsOpen={(isOpen: boolean) => {
+          setIsDownloadModalOpen(isOpen);
+
+          setTimeout(() => {
+            downloadSongFile(song);
+          }, 3000);
+        }}
+        song={song}
+      />
+    </>
   );
 };
 
diff --git a/web/src/modules/song/components/client/DownloadSongModal.tsx b/web/src/modules/song/components/client/DownloadSongModal.tsx
new file mode 100644
index 00000000..1218f5f5
--- /dev/null
+++ b/web/src/modules/song/components/client/DownloadSongModal.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { SongViewDtoType } from '@shared/validation/song/dto/types';
+import { useState } from 'react';
+
+import { DownloadPopupAdSlot } from '@web/src/modules/shared/components/client/ads/AdSlots';
+import GenericModal from '@web/src/modules/shared/components/client/GenericModal';
+
+export default function DownloadSongModal({
+  isOpen,
+  setIsOpen,
+  song,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  song: SongViewDtoType;
+}) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  let licenseInfo;
+
+  if (song.license == 'cc_by_sa') {
+    licenseInfo = `"${song.title}" by ${song.uploader.username} is licensed under CC BY-SA 4.0\n(https://creativecommons.org/licenses/by-sa/4.0)\n${process.env.NEXT_PUBLIC_URL}/song/${song.publicId}`;
+  } else {
+    licenseInfo = `"${song.title}" by ${song.uploader.username}. All rights reserved.\n${process.env.NEXT_PUBLIC_URL}/song/${song.publicId}`;
+  }
+
+  const handleCopy = () => () => {
+    navigator.clipboard.writeText(licenseInfo);
+
+    setIsCopied(true);
+
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <GenericModal
+      title='Your download will begin shortly!'
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+    >
+      <p className='text-zinc-400 text-sm mb-3'>
+        If you plan to use this song in your own creations, provide attribution
+        to the author by attaching the following text:
+      </p>
+      <div className='flex justify-end items-end gap-3 h-fit'>
+        {/* Attribution box */}
+        <textarea
+          className='box-border text-balance h-24 w-full text-sm p-2 outline outline-1 outline-zinc-600 bg-zinc-900 text-zinc-400 resize-none'
+          value={licenseInfo}
+          disabled
+        />
+
+        {/* Copy button */}
+        <button
+          type='button'
+          disabled={isCopied}
+          className='rounded-md h-8 px-2 w-[4.25rem] text-nowrap bg-zinc-700 text-white enabled:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-default disabled:text-xs'
+          onClick={handleCopy()}
+        >
+          {isCopied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+    </GenericModal>
+  );
+}

From 6e1680f5b9a1923c1ec6d85b34135b69f92408d4 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:01:36 -0300
Subject: [PATCH 02/29] fix: test ad slot in download popup

---
 .../shared/components/client/ads/AdSlots.tsx  | 19 ++++++++++++++++++-
 .../components/client/DownloadSongModal.tsx   |  1 +
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/src/modules/shared/components/client/ads/AdSlots.tsx b/web/src/modules/shared/components/client/ads/AdSlots.tsx
index ea6db91d..b2927fe0 100644
--- a/web/src/modules/shared/components/client/ads/AdSlots.tsx
+++ b/web/src/modules/shared/components/client/ads/AdSlots.tsx
@@ -39,12 +39,14 @@ const AdTemplate = ({
   adFormat = 'auto',
   fullWidthResponsive = 'true',
   hiddenClassName = 'hidden',
+  showCloseButton = true,
 }: {
   className: string;
   adSlot: string;
   adFormat: string;
   fullWidthResponsive: string;
   hiddenClassName?: string;
+  showCloseButton?: boolean;
 }) => {
   const pubId = useAdSenseClient();
 
@@ -81,7 +83,7 @@ const AdTemplate = ({
             data-ad-format={adFormat}
             data-full-width-responsive={fullWidthResponsive}
           ></ins>
-          <HideAdButton setIsHidden={setIsHidden} />
+          {showCloseButton && <HideAdButton setIsHidden={setIsHidden} />}
         </>
       )}
     </div>
@@ -122,3 +124,18 @@ export const SideRailAdSlot = ({ className }: { className?: string }) => {
     />
   );
 };
+
+export const DownloadPopupAdSlot = ({ className }: { className?: string }) => {
+  return (
+    <AdTemplate
+      className={cn(
+        'relative rounded-xl bg-zinc-800/50 p-2 my-8 h-32 max-h-32 w-full min-w-64 text-sm text-zinc-400',
+        className,
+      )}
+      adSlot='3239923384'
+      adFormat='auto'
+      fullWidthResponsive='true'
+      showCloseButton={false}
+    />
+  );
+};
diff --git a/web/src/modules/song/components/client/DownloadSongModal.tsx b/web/src/modules/song/components/client/DownloadSongModal.tsx
index 1218f5f5..65b26d50 100644
--- a/web/src/modules/song/components/client/DownloadSongModal.tsx
+++ b/web/src/modules/song/components/client/DownloadSongModal.tsx
@@ -63,6 +63,7 @@ export default function DownloadSongModal({
           {isCopied ? 'Copied!' : 'Copy'}
         </button>
       </div>
+      <DownloadPopupAdSlot className='mb-0' />
     </GenericModal>
   );
 }

From 4ef57dbd87781ff7ea5bae9f2b8ace17bc2acb1b Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:03:10 -0300
Subject: [PATCH 03/29] fix: random button shade clashing with background +
 repeated width class

---
 web/src/modules/shared/components/layout/RandomSongButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/modules/shared/components/layout/RandomSongButton.tsx b/web/src/modules/shared/components/layout/RandomSongButton.tsx
index ea3408bf..a98f63f2 100644
--- a/web/src/modules/shared/components/layout/RandomSongButton.tsx
+++ b/web/src/modules/shared/components/layout/RandomSongButton.tsx
@@ -37,7 +37,7 @@ export const RandomSongButton = () => {
 
   return (
     <button
-      className='bevel p-2 flex-0 w-8 w-min flex items-center justify-center gap-2 bg-zinc-600 after:bg-zinc-800 before:bg-zinc-900 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125'
+      className='bevel p-2 flex-0 w-min flex items-center justify-center gap-2 bg-zinc-600 after:bg-zinc-700 before:bg-zinc-800 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125'
       onClick={randomSong}
     >
       <FontAwesomeIcon icon={faDice} />

From c19164af0dfeb7f3a264c71b2dedbff212d75f58 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:25:02 -0300
Subject: [PATCH 04/29] fix: require sign in for downloading songs

---
 server/src/song/song.controller.ts            |  2 +
 .../song/components/SongPageButtons.tsx       | 43 +++++++++++++++----
 web/src/modules/song/util/downloadSong.ts     |  6 +++
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/server/src/song/song.controller.ts b/server/src/song/song.controller.ts
index d310c2f9..55e05b76 100644
--- a/server/src/song/song.controller.ts
+++ b/server/src/song/song.controller.ts
@@ -122,6 +122,8 @@ export class SongController {
     @GetRequestToken() user: UserDocument | null,
     @Res() res: Response,
   ): Promise<void> {
+    user = validateUser(user);
+
     // TODO: no longer used
     res.set({
       'Content-Disposition': 'attachment; filename="song.nbs"',
diff --git a/web/src/modules/song/components/SongPageButtons.tsx b/web/src/modules/song/components/SongPageButtons.tsx
index fbc1e11a..ebb168a1 100644
--- a/web/src/modules/song/components/SongPageButtons.tsx
+++ b/web/src/modules/song/components/SongPageButtons.tsx
@@ -16,8 +16,15 @@ import Link from 'next/link';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 
+import { getTokenLocal } from '@web/src/lib/axios/token.utils';
+
 import DownloadSongModal from './client/DownloadSongModal';
 import ShareModal from './client/ShareModal';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '../../shared/components/tooltip';
 import { downloadSongFile, openSongInNBS } from '../util/downloadSong';
 
 const UploaderBadge = ({ user }: { user: SongViewDtoType['uploader'] }) => {
@@ -233,17 +240,35 @@ const DownloadButton = ({
   downloadCount: number;
   handleClick: React.MouseEventHandler<HTMLButtonElement>;
 }) => {
+  let isLoggedIn = true;
+
+  try {
+    getTokenLocal();
+  } catch {
+    isLoggedIn = false;
+  }
+
   return (
     <div className='flex gap-0.5'>
-      <button
-        onClick={handleClick}
-        className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-green-600 hover:bg-green-500'
-      >
-        <div className='flex flex-row items-center gap-2'>
-          <FontAwesomeIcon icon={faDownload} />
-          <div>Download</div>
-        </div>
-      </button>
+      <Tooltip>
+        <TooltipTrigger>
+          <button
+            onClick={handleClick}
+            className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-green-600 hover:enabled:bg-green-500 disabled:opacity-50'
+            disabled={!isLoggedIn}
+          >
+            <div className='flex flex-row items-center gap-2'>
+              <FontAwesomeIcon icon={faDownload} />
+              <div>Download</div>
+            </div>
+          </button>
+        </TooltipTrigger>
+        {!isLoggedIn && (
+          <TooltipContent>
+            {'You must sign in to download this song!'}
+          </TooltipContent>
+        )}
+      </Tooltip>
       <CountBalloon count={downloadCount} />
     </div>
   );
diff --git a/web/src/modules/song/util/downloadSong.ts b/web/src/modules/song/util/downloadSong.ts
index aae1e40d..eb4d87ca 100644
--- a/web/src/modules/song/util/downloadSong.ts
+++ b/web/src/modules/song/util/downloadSong.ts
@@ -3,16 +3,22 @@
 import toast from 'react-hot-toast';
 
 import axios from '@web/src/lib/axios';
+import { getTokenLocal } from '@web/src/lib/axios/token.utils';
 
 export const downloadSongFile = async (song: {
   publicId: string;
   title: string;
 }) => {
+  const token = getTokenLocal();
+
   axios
     .get(`/song/${song.publicId}/download`, {
       params: {
         src: 'downloadButton',
       },
+      headers: {
+        authorization: `Bearer ${token}`,
+      },
       responseType: 'blob',
       withCredentials: true,
     })

From eeaf02e0f566ec5be2de7998f4e378b13ec3ac56 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:28:10 -0300
Subject: [PATCH 05/29] fix: song page buttons overflowing page width on mobile

---
 web/src/modules/song/components/SongPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/modules/song/components/SongPage.tsx b/web/src/modules/song/components/SongPage.tsx
index 075a7a95..5a3b6c45 100644
--- a/web/src/modules/song/components/SongPage.tsx
+++ b/web/src/modules/song/components/SongPage.tsx
@@ -66,7 +66,7 @@ export async function SongPage({ id }: { id: string }) {
             <UploaderBadge user={song.uploader} />
             {/* <FollowButton /> */}
             <div className='flex-grow'></div>
-            <div className='flex flex-row gap-4'>
+            <div className='flex flex-row gap-4 overflow-x-auto'>
               {/* <LikeButton /> */}
               <ShareButton songId={song.publicId} />
               <OpenSongInNBSButton song={song} />

From 150c6d375719f4eb02d845e0cc90a9577e6b956b Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:30:29 -0300
Subject: [PATCH 06/29] fix: hide 'Open in NBS' button in mobile layout

---
 web/src/modules/song/components/SongPageButtons.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/modules/song/components/SongPageButtons.tsx b/web/src/modules/song/components/SongPageButtons.tsx
index ebb168a1..faff2490 100644
--- a/web/src/modules/song/components/SongPageButtons.tsx
+++ b/web/src/modules/song/components/SongPageButtons.tsx
@@ -157,7 +157,7 @@ const OpenInNBSButton = ({
     <button
       onClick={handleClick}
       disabled={isLoading}
-      className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-blue-600 hover:enabled:bg-blue-500 disabled:opacity-50'
+      className='hidden md:block uppercase px-2 py-1 h-fit rounded-md text-sm bg-blue-600 hover:enabled:bg-blue-500 disabled:opacity-50'
     >
       <div className='flex flex-row items-center gap-2 w-max'>
         {isLoading ? (

From d437fe08a28f8c7990b4f8b007d5d6cd116f2f00 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:38:19 -0300
Subject: [PATCH 07/29] fix: song only downloading after modal closed

---
 web/src/modules/song/components/SongPageButtons.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/modules/song/components/SongPageButtons.tsx b/web/src/modules/song/components/SongPageButtons.tsx
index faff2490..659986c9 100644
--- a/web/src/modules/song/components/SongPageButtons.tsx
+++ b/web/src/modules/song/components/SongPageButtons.tsx
@@ -221,11 +221,11 @@ const DownloadSongButton = ({ song }: { song: SongViewDtoType }) => {
       <DownloadSongModal
         isOpen={isDownloadModalOpen}
         setIsOpen={(isOpen: boolean) => {
-          setIsDownloadModalOpen(isOpen);
-
           setTimeout(() => {
             downloadSongFile(song);
           }, 3000);
+
+          setIsDownloadModalOpen(isOpen);
         }}
         song={song}
       />

From 97c39440a6c262795b547ae0d6fcf2301f5d205e Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:45:26 -0300
Subject: [PATCH 08/29] fix: song detail rows not showing full text (clamped to
 single line)

---
 web/src/modules/song/components/SongDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/modules/song/components/SongDetails.tsx b/web/src/modules/song/components/SongDetails.tsx
index 0fc0c8f9..3cdf2a07 100644
--- a/web/src/modules/song/components/SongDetails.tsx
+++ b/web/src/modules/song/components/SongDetails.tsx
@@ -22,7 +22,7 @@ const SongDetailsRow = ({ children }: { children: React.ReactNode }) => {
 
 const SongDetailsCell = ({ children }: { children: React.ReactNode }) => {
   return (
-    <td className='first:w-[40%] last:w-[60%] last:max-w-0 text-ellipsis overflow-hidden whitespace-nowrap p-2 py-[10px] first:text-zinc-400 first:text-right last:font-bold'>
+    <td className='first:w-[40%] last:max-w-0 p-2 py-[10px] align-top first:text-zinc-400 first:text-right last:font-bold'>
       {children}
     </td>
   );

From 114e3046e693fbe266f6b6a31daba030558d9448 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 03:00:58 -0300
Subject: [PATCH 09/29] fix: song only downloading after modal closed (again)

The bad part about code is that it does exactly what you tell it to!
---
 web/src/modules/song/components/SongPageButtons.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/src/modules/song/components/SongPageButtons.tsx b/web/src/modules/song/components/SongPageButtons.tsx
index 659986c9..31667696 100644
--- a/web/src/modules/song/components/SongPageButtons.tsx
+++ b/web/src/modules/song/components/SongPageButtons.tsx
@@ -215,18 +215,16 @@ const DownloadSongButton = ({ song }: { song: SongViewDtoType }) => {
       <DownloadButton
         downloadCount={song.downloadCount}
         handleClick={() => {
-          setIsDownloadModalOpen(true);
-        }}
-      />{' '}
-      <DownloadSongModal
-        isOpen={isDownloadModalOpen}
-        setIsOpen={(isOpen: boolean) => {
           setTimeout(() => {
             downloadSongFile(song);
           }, 3000);
 
-          setIsDownloadModalOpen(isOpen);
+          setIsDownloadModalOpen(true);
         }}
+      />
+      <DownloadSongModal
+        isOpen={isDownloadModalOpen}
+        setIsOpen={setIsDownloadModalOpen}
         song={song}
       />
     </>

From 7bc7a7514c5a00282e55ca1795bd891cd4ec6a43 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 03:35:09 -0300
Subject: [PATCH 10/29] fix: recent song browser not loading more than 100
 songs

---
 shared/validation/song/constants.ts                       | 1 -
 .../components/client/context/RecentSongs.context.tsx     | 8 +-------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/shared/validation/song/constants.ts b/shared/validation/song/constants.ts
index 154dc0ab..db09b939 100644
--- a/shared/validation/song/constants.ts
+++ b/shared/validation/song/constants.ts
@@ -128,7 +128,6 @@ export const MY_SONGS = deepFreeze({
 });
 
 export const BROWSER_SONGS = deepFreeze({
-  max_recent_songs: 100,
   featuredPageSize: 10,
   paddedFeaturedPageSize: 5,
 });
diff --git a/web/src/modules/browse/components/client/context/RecentSongs.context.tsx b/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
index a174d402..79ebcf3d 100644
--- a/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
+++ b/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { BROWSER_SONGS } from '@shared/validation/song/constants';
 import { SongPreviewDtoType } from '@shared/validation/song/dto/types';
 import {
   createContext,
@@ -120,12 +119,7 @@ export function RecentSongsProvider({
   }, [page, endpoint]);
 
   async function increasePageRecent() {
-    if (
-      BROWSER_SONGS.max_recent_songs <= recentSongs.length ||
-      loading ||
-      recentError ||
-      !hasMore
-    ) {
+    if (loading || recentError || !hasMore) {
       return;
     }
 

From 76793c0a040bb88576bf14903a3518d6adc37d35 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 03:41:22 -0300
Subject: [PATCH 11/29] fix: homepage initial load skipping first page of
 recent songs

Fixes #12
---
 web/src/app/(content)/page.tsx                              | 4 ++--
 .../components/client/context/RecentSongs.context.tsx       | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/app/(content)/page.tsx b/web/src/app/(content)/page.tsx
index 3050a6db..a4d1a03e 100644
--- a/web/src/app/(content)/page.tsx
+++ b/web/src/app/(content)/page.tsx
@@ -52,12 +52,12 @@ export const metadata: Metadata = {
 };
 
 async function Home() {
-  const recentSongs = await fetchRecentSongs();
+  //const recentSongs = await fetchRecentSongs();
   const featuredSongs = await fetchFeaturedSongs();
 
   return (
     <HomePageProvider
-      initialRecentSongs={recentSongs}
+      initialRecentSongs={[]}
       initialFeaturedSongs={featuredSongs}
     >
       <HomePageComponent />
diff --git a/web/src/modules/browse/components/client/context/RecentSongs.context.tsx b/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
index 79ebcf3d..f6b3bbce 100644
--- a/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
+++ b/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
@@ -38,7 +38,7 @@ export function RecentSongsProvider({
     useState<SongPreviewDtoType[]>(initialRecentSongs);
 
   const [recentError, setRecentError] = useState<string>('');
-  const [page, setPage] = useState<number>(3);
+  const [page, setPage] = useState<number>(0);
   const [loading, setLoading] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [categories, setCategories] = useState<Record<string, number>>({});
@@ -113,10 +113,10 @@ export function RecentSongsProvider({
     setEndpoint(newEndpoint);
   }, [selectedCategory]);
 
-  // Fetch recent songs when the page or endpoint changes
   useEffect(() => {
+    if (page === 0) return;
     fetchRecentSongs();
-  }, [page, endpoint]);
+  }, [page, endpoint, fetchRecentSongs]);
 
   async function increasePageRecent() {
     if (loading || recentError || !hasMore) {

From e371b4bcfd4e9ee5d70bb7e091897466318ae6f3 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 03:41:46 -0300
Subject: [PATCH 12/29] fix: increase recent song page size to 12

---
 .../browse/components/client/context/RecentSongs.context.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/modules/browse/components/client/context/RecentSongs.context.tsx b/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
index f6b3bbce..f668d027 100644
--- a/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
+++ b/web/src/modules/browse/components/client/context/RecentSongs.context.tsx
@@ -55,7 +55,7 @@ export function RecentSongsProvider({
           {
             params: {
               page,
-              limit: 8, // TODO: fix constants
+              limit: 12, // TODO: fix constants
               order: false,
             },
           },
@@ -66,7 +66,7 @@ export function RecentSongsProvider({
           ...response.data,
         ]);
 
-        if (response.data.length < 8) {
+        if (response.data.length < 12) {
           setHasMore(false);
         }
       } catch (error) {

From 50298d61bc7a93fcea73717769272a129dfc88f7 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 04:24:05 -0300
Subject: [PATCH 13/29] fix: button can't be a child of button (hydration
 error)

---
 web/src/modules/song/components/SongPageButtons.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/modules/song/components/SongPageButtons.tsx b/web/src/modules/song/components/SongPageButtons.tsx
index 31667696..aa920eac 100644
--- a/web/src/modules/song/components/SongPageButtons.tsx
+++ b/web/src/modules/song/components/SongPageButtons.tsx
@@ -249,7 +249,7 @@ const DownloadButton = ({
   return (
     <div className='flex gap-0.5'>
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <button
             onClick={handleClick}
             className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-green-600 hover:enabled:bg-green-500 disabled:opacity-50'

From ccaa1dcecd847dcbdc21d13081062733b3ed9a81 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 05:31:18 -0300
Subject: [PATCH 14/29] fix: notes that exceed C0 or A8 via pitch changes wrap
 to the other end

---
 shared/features/song/obfuscate.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/shared/features/song/obfuscate.ts b/shared/features/song/obfuscate.ts
index e0026791..4eeb74a4 100644
--- a/shared/features/song/obfuscate.ts
+++ b/shared/features/song/obfuscate.ts
@@ -119,8 +119,21 @@ export class SongObfuscator {
 
     const resolveKeyAndPitch = (note: Note) => {
       const factoredPitch = note.key * 100 + note.pitch;
-      const key = Math.floor((factoredPitch + 50) / 100);
-      const pitch = ((factoredPitch + 50) % 100) - 50;
+
+      let key, pitch;
+
+      if (factoredPitch < 0) {
+        // Below A0
+        key = 0;
+        pitch = factoredPitch;
+      } else if (factoredPitch >= 87 * 100) {
+        // Above C8
+        key = 87;
+        pitch = factoredPitch - 87 * 100;
+      } else {
+        key = Math.floor((factoredPitch + 50) / 100);
+        pitch = ((factoredPitch + 50) % 100) - 50;
+      }
 
       return { key, pitch };
     };

From 0ab2263495d2b3fb44dbb2b4ab3a479bbb631810 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:32:04 -0300
Subject: [PATCH 15/29] fix: missing authorization when downloading song for
 editing

---
 .../song-edit/components/client/context/EditSong.context.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/src/modules/song-edit/components/client/context/EditSong.context.tsx b/web/src/modules/song-edit/components/client/context/EditSong.context.tsx
index c9d212ff..c9d3c518 100644
--- a/web/src/modules/song-edit/components/client/context/EditSong.context.tsx
+++ b/web/src/modules/song-edit/components/client/context/EditSong.context.tsx
@@ -239,12 +239,15 @@ export const EditSongProvider = ({
       formMethods.setValue('category', songData.category);
 
       // fetch song
+      const token = getTokenLocal();
+
       const songFile = (
         await axiosInstance.get(`/song/${id}/download`, {
           params: {
             src: 'edit',
           },
           responseType: 'arraybuffer',
+          headers: { authorization: `Bearer ${token}` },
         })
       ).data as ArrayBuffer;
 

From 9931c2b1515c95fcf9687d55cfe9b0cbe2d91ab7 Mon Sep 17 00:00:00 2001
From: Bentroen <29354120+Bentroen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:48:31 -0300
Subject: [PATCH 16/29] fix: long word without space overflowing song details
 cell

Fixes #21
---
 web/src/modules/song/components/SongDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/modules/song/components/SongDetails.tsx b/web/src/modules/song/components/SongDetails.tsx
index 3cdf2a07..7fdf96a8 100644
--- a/web/src/modules/song/components/SongDetails.tsx
+++ b/web/src/modules/song/components/SongDetails.tsx
@@ -22,7 +22,7 @@ const SongDetailsRow = ({ children }: { children: React.ReactNode }) => {
 
 const SongDetailsCell = ({ children }: { children: React.ReactNode }) => {
   return (
-    <td className='first:w-[40%] last:max-w-0 p-2 py-[10px] align-top first:text-zinc-400 first:text-right last:font-bold'>
+    <td className='first:w-[40%] last:max-w-0 p-2 py-[10px] break-words align-top first:text-zinc-400 first:text-right last:font-bold'>
       {children}
     </td>
   );

From ad199fa6084ab8a6698d2f6b4922c3343d6ec966 Mon Sep 17 00:00:00 2001
From: Bernardo Costa <bemcdc@gmail.com>
Date: Mon, 23 Dec 2024 21:18:17 -0300
Subject: [PATCH 17/29] fix: outdated discord links

---
 CONTRIBUTING.md                                     | 2 +-
 web/src/app/(content)/(info)/contact/contact.mdx    | 2 +-
 web/src/modules/browse/WelcomeBanner.tsx            | 2 +-
 web/src/modules/shared/components/layout/Footer.tsx | 2 +-
 web/src/modules/song/components/client/SongForm.tsx | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 29aa36c3..e0059774 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,7 +2,7 @@
 
 Hello! We're glad to have you interested in contributing to Note Block World. This document will guide you through the process of setting up the project and submitting your contributions.
 
-This page is a work-in-progress and will be updated as the project evolves. If you have any questions or need help, feel free to reach out to us on our [Discord server](https://discord.gg/open-note-block-studio-608692895179997252).
+This page is a work-in-progress and will be updated as the project evolves. If you have any questions or need help, feel free to reach out to us on our [Discord server](https://discord.gg/note-block-world-608692895179997252).
 
 ## Stack
 
diff --git a/web/src/app/(content)/(info)/contact/contact.mdx b/web/src/app/(content)/(info)/contact/contact.mdx
index a97a5a48..26c85682 100644
--- a/web/src/app/(content)/(info)/contact/contact.mdx
+++ b/web/src/app/(content)/(info)/contact/contact.mdx
@@ -2,6 +2,6 @@ Have you got any question, suggestion or feedback? We'd love to hear from you!
 
 To report an issue or suggest a new feature, please [open a new issue](https://github.com/issues/new/choose) in our GitHub repository. Make sure to search the existing issues to see if your suggestion has already been made. Also, check our [project roadmap](https://github.com/orgs/OpenNBS/projects/4) to see if the feature you want is already planned!
 
-For general support, or if you'd just like to have a chat, the fastest way to get in touch with us is by joining our public community on [Discord](https://discord.gg/open-note-block-studio-608692895179997252). We're always happy to help!
+For general support, or if you'd just like to have a chat, the fastest way to get in touch with us is by joining our public community on [Discord](https://discord.gg/note-block-world-608692895179997252). We're always happy to help!
 
 For business inquiries, or if you need to reach out to us privately, you can send us an email at [opennbs@gmail.com](opennbs@gmail.com).
diff --git a/web/src/modules/browse/WelcomeBanner.tsx b/web/src/modules/browse/WelcomeBanner.tsx
index 447453ed..89c64d8a 100644
--- a/web/src/modules/browse/WelcomeBanner.tsx
+++ b/web/src/modules/browse/WelcomeBanner.tsx
@@ -40,7 +40,7 @@ export const WelcomeBanner = () => {
           </Link>
           {' • '}
           <Link
-            href='https://github.com/OpenNBS/NoteBlockWorld/issues/new/choose'
+            href='https://discord.gg/note-block-world-608692895179997252'
             className='text-blue-400 hover:text-blue-300'
           >
             Discord Server
diff --git a/web/src/modules/shared/components/layout/Footer.tsx b/web/src/modules/shared/components/layout/Footer.tsx
index 8d872b38..b7bb7eb7 100644
--- a/web/src/modules/shared/components/layout/Footer.tsx
+++ b/web/src/modules/shared/components/layout/Footer.tsx
@@ -29,7 +29,7 @@ export function Footer() {
           <FooterIcon icon={faGithub} href='https://github.com/OpenNBS' />
           <FooterIcon
             icon={faDiscord}
-            href='https://discord.gg/open-note-block-studio-608692895179997252'
+            href='https://discord.gg/note-block-world-608692895179997252'
           />
           {/* <FooterIcon icon={faEarth} href='https://opennbs.org' /> */}
           {/* <FooterIcon icon={faEnvelope} href='mailto:opennbs@gmail.com' /> */}
diff --git a/web/src/modules/song/components/client/SongForm.tsx b/web/src/modules/song/components/client/SongForm.tsx
index 5ea0ebd3..48f44e81 100644
--- a/web/src/modules/song/components/client/SongForm.tsx
+++ b/web/src/modules/song/components/client/SongForm.tsx
@@ -192,7 +192,7 @@ export const SongForm = ({
                     <p>
                       Haven&apos;t found one that fits your song? You can
                       suggest a new category in our{' '}
-                      <Link href='https://discord.gg/open-note-block-studio-608692895179997252'>
+                      <Link href='https://discord.gg/note-block-world-608692895179997252'>
                         Discord server
                       </Link>
                       !

From 089f533d583ed69b6a101ff4c2a8b8cdb94609e6 Mon Sep 17 00:00:00 2001
From: Bernardo Costa <bemcdc@gmail.com>
Date: Wed, 25 Dec 2024 04:12:30 -0300
Subject: [PATCH 18/29] fix: auth cookie expiring too early

When not set in an environment variable, `COOKIE_EXPIRES_IN` will default to `60 * 60 * 24 * 7` = 604,800s = 7 days, since the `Max-Age` cookie attribute is specified in seconds:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#max-agenumber

However, the `res.cookie` function takes the `maxAge` **in milliseconds**. which means that the previous amount of seconds actually meant *604.8 seconds* ~= 10 minutes. Oof.
---
 server/src/auth/auth.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/auth/auth.service.ts b/server/src/auth/auth.service.ts
index 26b028d2..0185a16c 100644
--- a/server/src/auth/auth.service.ts
+++ b/server/src/auth/auth.service.ts
@@ -239,7 +239,7 @@ export class AuthService {
 
     const frontEndURL = this.FRONTEND_URL;
     const domain = this.APP_DOMAIN;
-    const maxAge = parseInt(this.COOKIE_EXPIRES_IN);
+    const maxAge = parseInt(this.COOKIE_EXPIRES_IN) * 1000;
 
     res.cookie('token', token.access_token, {
       domain: domain,

From 4cdaf98fab175a3393fa94f1154eb6efe19f2797 Mon Sep 17 00:00:00 2001
From: Bernardo Costa <bemcdc@gmail.com>
Date: Tue, 31 Dec 2024 03:23:08 -0300
Subject: [PATCH 19/29] feat: add UI for changing username in user menu popup

---
 .../shared/components/layout/UserMenu.tsx     | 62 +++++++++++++++++--
 1 file changed, 58 insertions(+), 4 deletions(-)

diff --git a/web/src/modules/shared/components/layout/UserMenu.tsx b/web/src/modules/shared/components/layout/UserMenu.tsx
index 1585423d..9fd7bfb9 100644
--- a/web/src/modules/shared/components/layout/UserMenu.tsx
+++ b/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 />
 

From 4e9badbd4c3c0908b638f71dbf892bae1e83a575 Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 09:22:03 -0300
Subject: [PATCH 20/29] feat: add username update functionality and
 normalization logic

---
 server/src/user/user.controller.ts            | 15 +++-
 server/src/user/user.service.spec.ts          | 71 +++++++++++++++++++
 server/src/user/user.service.ts               | 27 +++++--
 .../validation/user/dto/UpdateUsername.dto.ts | 13 ++++
 4 files changed, 121 insertions(+), 5 deletions(-)
 create mode 100644 shared/validation/user/dto/UpdateUsername.dto.ts

diff --git a/server/src/user/user.controller.ts b/server/src/user/user.controller.ts
index 2805ce42..6e13d102 100644
--- a/server/src/user/user.controller.ts
+++ b/server/src/user/user.controller.ts
@@ -1,4 +1,4 @@
-import { Controller, Get, Inject, Query } from '@nestjs/common';
+import { Body, Controller, Get, Inject, Patch, Query } from '@nestjs/common';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { PageQueryDTO } from '@shared/validation/common/dto/PageQuery.dto';
 import { GetUser } from '@shared/validation/user/dto/GetUser.dto';
@@ -7,6 +7,7 @@ import { GetRequestToken, validateUser } from '@server/GetRequestUser';
 
 import { UserDocument } from './entity/user.entity';
 import { UserService } from './user.service';
+import { UpdateUsernameDto } from '@shared/validation/user/dto/UpdateUsername.dto';
 
 @Controller('user')
 export class UserController {
@@ -37,4 +38,16 @@ export class UserController {
     user = validateUser(user);
     return await this.userService.getSelfUserData(user);
   }
+
+  @Patch('username')
+  @ApiTags('user')
+  @ApiBearerAuth()
+  @ApiOperation({ summary: 'Update the username' })
+  async updateUsername(
+    @GetRequestToken() user: UserDocument | null,
+    @Body() body: UpdateUsernameDto,
+  ) {
+    user = validateUser(user);
+    return await this.userService.updateUsername(user, body);
+  }
 }
diff --git a/server/src/user/user.service.spec.ts b/server/src/user/user.service.spec.ts
index bf5df91c..36ac541d 100644
--- a/server/src/user/user.service.spec.ts
+++ b/server/src/user/user.service.spec.ts
@@ -287,4 +287,75 @@ describe('UserService', () => {
       expect(service.usernameExists).toHaveBeenCalledWith(baseUsername);
     });
   });
+
+  describe('normalizeUsername', () => {
+    it('should normalize a username', () => {
+      const inputUsername = 'tést user';
+      const normalizedUsername = 'test_user';
+
+      const result = (service as any).normalizeUsername(inputUsername);
+
+      expect(result).toBe(normalizedUsername);
+    });
+
+    it('should remove special characters from a username', () => {
+      const inputUsername = '静_かな';
+      const normalizedUsername = '_';
+
+      const result = (service as any).normalizeUsername(inputUsername);
+
+      expect(result).toBe(normalizedUsername);
+    });
+
+    it('should replace spaces with underscores in a username', () => {
+      const inputUsername = 'Имя пользователя';
+      const normalizedUsername = '_';
+
+      const result = (service as any).normalizeUsername(inputUsername);
+
+      expect(result).toBe(normalizedUsername);
+    });
+
+    it('should replace spaces with underscores in a username', () => {
+      const inputUsername = 'Eglė Čepulytė';
+      const normalizedUsername = 'Egle_Cepulyte';
+
+      const result = (service as any).normalizeUsername(inputUsername);
+
+      expect(result).toBe(normalizedUsername);
+    });
+  });
+
+  describe('updateUsername', () => {
+    it('should update a user username', async () => {
+      const user = {
+        username: 'testuser',
+        save: jest.fn().mockReturnThis(),
+      } as unknown as UserDocument;
+      const body = { username: 'newuser' };
+
+      jest.spyOn(service, 'usernameExists').mockResolvedValue(false);
+
+      const result = await service.updateUsername(user, body);
+
+      expect(result).toEqual(user);
+      expect(user.username).toBe(body.username);
+      expect(service.usernameExists).toHaveBeenCalledWith(body.username);
+    });
+
+    it('should throw an error if username already exists', async () => {
+      const user = {
+        username: 'testuser',
+        save: jest.fn().mockReturnThis(),
+      } as unknown as UserDocument;
+
+      const body = { username: 'newuser' };
+
+      jest.spyOn(service, 'usernameExists').mockResolvedValue(true);
+
+      await expect(service.updateUsername(user, body)).rejects.toThrow(
+        new HttpException('Username already exists', HttpStatus.BAD_REQUEST),
+      );
+    });
+  });
 });
diff --git a/server/src/user/user.service.ts b/server/src/user/user.service.ts
index 7b231c16..31702525 100644
--- a/server/src/user/user.service.ts
+++ b/server/src/user/user.service.ts
@@ -5,7 +5,7 @@ import { CreateUser } from '@shared/validation/user/dto/CreateUser.dto';
 import { GetUser } from '@shared/validation/user/dto/GetUser.dto';
 import { validate } from 'class-validator';
 import { Model } from 'mongoose';
-
+import { UpdateUsernameDto } from '@shared/validation/user/dto/UpdateUsername.dto';
 import { User, UserDocument } from './entity/user.entity';
 
 @Injectable()
@@ -106,14 +106,17 @@ export class UserService {
     return !!user;
   }
 
-  public async generateUsername(inputUsername: string) {
-    // Normalize username (remove accents, replace spaces with underscores)
-    const baseUsername = inputUsername
+  private normalizeUsername = (inputUsername: string) =>
+    inputUsername
       .replace(' ', '_')
       .normalize('NFKD')
       .replace(/[\u0300-\u036f]/g, '')
       .replace(/[^a-zA-Z0-9_]/g, '');
 
+  public async generateUsername(inputUsername: string) {
+    // Normalize username (remove accents, replace spaces with underscores)
+    const baseUsername = this.normalizeUsername(inputUsername);
+
     let newUsername = baseUsername;
     let counter = 1;
 
@@ -125,4 +128,20 @@ export class UserService {
 
     return newUsername;
   }
+
+  public async updateUsername(user: UserDocument, body: UpdateUsernameDto) {
+    let { username } = body;
+    username = this.normalizeUsername(username);
+
+    if (await this.usernameExists(username)) {
+      throw new HttpException(
+        'Username already exists',
+        HttpStatus.BAD_REQUEST,
+      );
+    }
+
+    user.username = username;
+
+    return await user.save();
+  }
 }
diff --git a/shared/validation/user/dto/UpdateUsername.dto.ts b/shared/validation/user/dto/UpdateUsername.dto.ts
new file mode 100644
index 00000000..c9afe018
--- /dev/null
+++ b/shared/validation/user/dto/UpdateUsername.dto.ts
@@ -0,0 +1,13 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsString, IsNotEmpty, MinLength, MaxLength } from 'class-validator';
+
+export class UpdateUsernameDto {
+  @IsString()
+  @MaxLength(64)
+  @MinLength(3)
+  @ApiProperty({
+    description: 'Username of the user',
+    example: 'tomast1137',
+  })
+  username: string;
+}

From 6f02dcf9c3a34323f78c4c6e5bacbe60fd0992e2 Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 10:34:03 -0300
Subject: [PATCH 21/29] fix: make children prop optional in GenericModal
 component

---
 web/src/modules/shared/components/client/GenericModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/modules/shared/components/client/GenericModal.tsx b/web/src/modules/shared/components/client/GenericModal.tsx
index de053908..78b8d33c 100644
--- a/web/src/modules/shared/components/client/GenericModal.tsx
+++ b/web/src/modules/shared/components/client/GenericModal.tsx
@@ -14,7 +14,7 @@ export default function GenericModal({
   isOpen: boolean;
   setIsOpen?: (isOpen: boolean) => void;
   title: string;
-  children: React.ReactNode;
+  children?: React.ReactNode | React.ReactNode[] | string;
 }) {
   return (
     <Transition appear show={isOpen} as={Fragment}>

From a1a26f051ca92ccf76de4d2e29675731558cd2d6 Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 10:34:12 -0300
Subject: [PATCH 22/29] feat: add EditUsernameModal component for username
 editing functionality

---
 .../components/layout/EditUsernameModal.tsx   | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 web/src/modules/shared/components/layout/EditUsernameModal.tsx

diff --git a/web/src/modules/shared/components/layout/EditUsernameModal.tsx b/web/src/modules/shared/components/layout/EditUsernameModal.tsx
new file mode 100644
index 00000000..f1315281
--- /dev/null
+++ b/web/src/modules/shared/components/layout/EditUsernameModal.tsx
@@ -0,0 +1,90 @@
+'use client';
+import { faPen } from '@fortawesome/free-solid-svg-icons';
+import { LoggedUserData } from '@web/src/modules/auth/types/User';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import axiosInstance from '@web/src/lib/axios';
+import { AxiosError } from 'axios';
+import { useState } from 'react';
+import GenericModal from '../client/GenericModal';
+import { toast } from 'react-hot-toast';
+
+type EditUsernameModalProps = {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+  userData: LoggedUserData;
+};
+
+export const EditUsernameModal = ({
+  isOpen,
+  setIsOpen,
+  userData,
+}: EditUsernameModalProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClick = async () => {
+    try {
+      setIsLoading(true);
+
+      const result = await axiosInstance.patch('/user/username', {
+        username: userData.username,
+      });
+
+      console.log(result);
+    } catch (error: unknown) {
+      if ((error as any).isAxiosError) {
+        const axiosError = error as AxiosError;
+
+        // verify for throttling limit error
+        if (axiosError.response?.status === 429) {
+          toast.error('Too many requests. Please try again later.');
+        }
+
+        // verify for validation error
+        if (axiosError.response?.status === 400) {
+          toast.error('Invalid username');
+        }
+
+        // verify for unauthorized error
+        if (axiosError.response?.status === 401) {
+          toast.error('Unauthorized');
+        }
+
+        return;
+      }
+
+      toast.error('An error occurred. Please try again later.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <GenericModal title='Edit username' isOpen={isOpen} setIsOpen={setIsOpen}>
+      <div className='flex flex-col gap-4'>
+        <div>
+          <label htmlFor='username' className='block text-white'>
+            Username
+          </label>
+          <input
+            type='text'
+            id='username'
+            name='username'
+            className='w-full bg-zinc-700 text-white rounded-lg p-2'
+            defaultValue={userData.username}
+            disabled={isLoading}
+          />
+        </div>
+        <div className='flex justify-end'>
+          <button
+            onClick={onClick}
+            className='text-sm px-3 py-2 rounded-lg bg-blue-500 hover:bg-blue-400'
+            disabled={isLoading}
+          >
+            Edit username
+            <FontAwesomeIcon className='ml-2' icon={faPen} />
+          </button>
+        </div>
+      </div>
+    </GenericModal>
+  );
+};

From cad063718031ba8603270f49173077f04d3efbe3 Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 10:34:16 -0300
Subject: [PATCH 23/29] feat: integrate EditUsernameModal into UserMenu for
 username editing

---
 .../shared/components/layout/UserMenu.tsx     | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/web/src/modules/shared/components/layout/UserMenu.tsx b/web/src/modules/shared/components/layout/UserMenu.tsx
index 1585423d..7f26bb49 100644
--- a/web/src/modules/shared/components/layout/UserMenu.tsx
+++ b/web/src/modules/shared/components/layout/UserMenu.tsx
@@ -1,20 +1,34 @@
-import { faMusic, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+'use client';
+import {
+  faMusic,
+  faPen,
+  faSignOutAlt,
+} from '@fortawesome/free-solid-svg-icons';
 import Image from 'next/image';
 
 import { LoggedUserData } from '@web/src/modules/auth/types/User';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
+import { UserMenuButton } from '../client/UserMenuButton';
+import { EditUsernameModal } from './EditUsernameModal';
+import { UserMenuLink, UserMenuSplitLine } from './UserMenuLink';
 import {
   Popover,
   PopoverArrow,
   PopoverContent,
   PopoverTrigger,
 } from './popover';
-import { UserMenuLink, UserMenuSplitLine } from './UserMenuLink';
-import { UserMenuButton } from '../client/UserMenuButton';
 
-export function UserMenu({ userData }: { userData: LoggedUserData }) {
+export const UserMenu = ({ userData }: { userData: LoggedUserData }) => {
+  const [isEditingUsername, setIsEditingUsername] = useState(false);
   return (
     <Popover>
+      <EditUsernameModal
+        isOpen={isEditingUsername}
+        setIsOpen={setIsEditingUsername}
+        userData={userData}
+      />
       <PopoverTrigger>
         <UserMenuButton userData={userData} />
       </PopoverTrigger>
@@ -40,7 +54,15 @@ 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>
+              <h4 className='truncate font-semibold'>
+                {userData.username}
+                <button
+                  className='ml-1 text-zinc-300 hover:text-white'
+                  onClick={() => setIsEditingUsername(true)}
+                >
+                  <FontAwesomeIcon icon={faPen} />
+                </button>
+              </h4>
               <p className='text-zinc-300 text-xs truncate'>{userData.email}</p>
             </div>
           </div>
@@ -57,4 +79,4 @@ export function UserMenu({ userData }: { userData: LoggedUserData }) {
       </PopoverContent>
     </Popover>
   );
-}
+};

From 44af478b4a6f7734df263743fd3768293fa7d655 Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 10:56:01 -0300
Subject: [PATCH 24/29] fix: prevent username update to the same value in
 UserService

---
 server/src/user/user.service.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/server/src/user/user.service.ts b/server/src/user/user.service.ts
index 31702525..ec3a10f8 100644
--- a/server/src/user/user.service.ts
+++ b/server/src/user/user.service.ts
@@ -140,6 +140,10 @@ export class UserService {
       );
     }
 
+    if (user.username === username) {
+      throw new HttpException('Username is the same', HttpStatus.BAD_REQUEST);
+    }
+
     user.username = username;
 
     return await user.save();

From 3f6a05919adf85f38dc4879f6d393d893429acdf Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 10:56:15 -0300
Subject: [PATCH 25/29] feat: implement ClientAxios for API requests and update
 EditUsernameModal to use it

---
 web/src/lib/axios/ClientAxios.ts              | 24 +++++++
 .../shared/components/client/GenericModal.tsx | 20 +++---
 .../components/layout/EditUsernameModal.tsx   | 68 +++++++++++--------
 3 files changed, 76 insertions(+), 36 deletions(-)
 create mode 100644 web/src/lib/axios/ClientAxios.ts

diff --git a/web/src/lib/axios/ClientAxios.ts b/web/src/lib/axios/ClientAxios.ts
new file mode 100644
index 00000000..f27ba701
--- /dev/null
+++ b/web/src/lib/axios/ClientAxios.ts
@@ -0,0 +1,24 @@
+import axios from 'axios';
+import { getTokenLocal } from './token.utils';
+export const baseApiURL = process.env.NEXT_PUBLIC_API_URL;
+
+const ClientAxios = axios.create({
+  baseURL: baseApiURL,
+  withCredentials: true,
+});
+
+// Add a request interceptor to add the token to the request
+ClientAxios.interceptors.request.use(
+  (config) => {
+    const token = getTokenLocal();
+
+    config.headers.authorization = `Bearer ${token}`;
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+export default ClientAxios;
diff --git a/web/src/modules/shared/components/client/GenericModal.tsx b/web/src/modules/shared/components/client/GenericModal.tsx
index 78b8d33c..48572845 100644
--- a/web/src/modules/shared/components/client/GenericModal.tsx
+++ b/web/src/modules/shared/components/client/GenericModal.tsx
@@ -5,17 +5,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dialog, Transition } from '@headlessui/react';
 import { Fragment } from 'react';
 
-export default function GenericModal({
-  isOpen,
-  setIsOpen,
-  title,
-  children,
-}: {
+interface GenericModalProps {
   isOpen: boolean;
   setIsOpen?: (isOpen: boolean) => void;
   title: string;
   children?: React.ReactNode | React.ReactNode[] | string;
-}) {
+}
+
+const GenericModal = ({
+  isOpen,
+  setIsOpen,
+  title,
+  children,
+}: GenericModalProps) => {
   return (
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog
@@ -80,4 +82,6 @@ export default function GenericModal({
       </Dialog>
     </Transition>
   );
-}
+};
+
+export default GenericModal;
diff --git a/web/src/modules/shared/components/layout/EditUsernameModal.tsx b/web/src/modules/shared/components/layout/EditUsernameModal.tsx
index f1315281..53c3e166 100644
--- a/web/src/modules/shared/components/layout/EditUsernameModal.tsx
+++ b/web/src/modules/shared/components/layout/EditUsernameModal.tsx
@@ -1,35 +1,45 @@
 'use client';
 import { faPen } from '@fortawesome/free-solid-svg-icons';
-import { LoggedUserData } from '@web/src/modules/auth/types/User';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import axiosInstance from '@web/src/lib/axios';
+import ClientAxios from '@web/src/lib/axios/ClientAxios';
+import { LoggedUserData } from '@web/src/modules/auth/types/User';
 import { AxiosError } from 'axios';
 import { useState } from 'react';
-import GenericModal from '../client/GenericModal';
 import { toast } from 'react-hot-toast';
+import GenericModal from '../client/GenericModal';
+import { SubmitHandler, useForm } from 'react-hook-form';
 
-type EditUsernameModalProps = {
+interface EditUsernameModalProps {
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
   userData: LoggedUserData;
-};
+}
+
+interface FormValues {
+  username: string;
+}
 
 export const EditUsernameModal = ({
   isOpen,
   setIsOpen,
   userData,
 }: EditUsernameModalProps) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const {
+    handleSubmit,
+    formState: { isSubmitting, errors },
+    register,
+  } = useForm<FormValues>();
 
-  const onClick = async () => {
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
     try {
-      setIsLoading(true);
-
-      const result = await axiosInstance.patch('/user/username', {
-        username: userData.username,
+      await ClientAxios.patch('/user/username', {
+        username: data.username,
       });
 
-      console.log(result);
+      toast.success('Username updated successfully');
+
+      // refresh the page
+      window.location.reload();
     } catch (error: unknown) {
       if ((error as any).isAxiosError) {
         const axiosError = error as AxiosError;
@@ -53,37 +63,39 @@ export const EditUsernameModal = ({
       }
 
       toast.error('An error occurred. Please try again later.');
-    } finally {
-      setIsLoading(false);
     }
   };
 
   return (
     <GenericModal title='Edit username' isOpen={isOpen} setIsOpen={setIsOpen}>
       <div className='flex flex-col gap-4'>
-        <div>
+        <form className='flex flex-col gap-4' onSubmit={handleSubmit(onSubmit)}>
+          <span className='text-red-500 text-sm font-medium h-4'>
+            {errors.username && errors.username.message}
+          </span>
           <label htmlFor='username' className='block text-white'>
             Username
           </label>
           <input
+            autoFocus
             type='text'
             id='username'
-            name='username'
+            {...register('username', { required: 'Username is required' })}
             className='w-full bg-zinc-700 text-white rounded-lg p-2'
             defaultValue={userData.username}
-            disabled={isLoading}
+            disabled={isSubmitting}
           />
-        </div>
-        <div className='flex justify-end'>
-          <button
-            onClick={onClick}
-            className='text-sm px-3 py-2 rounded-lg bg-blue-500 hover:bg-blue-400'
-            disabled={isLoading}
-          >
-            Edit username
-            <FontAwesomeIcon className='ml-2' icon={faPen} />
-          </button>
-        </div>
+          <div className='flex justify-end'>
+            <button
+              type='submit'
+              className='text-sm px-3 py-2 rounded-lg bg-blue-500 hover:bg-blue-400'
+              disabled={isSubmitting}
+            >
+              Edit username
+              <FontAwesomeIcon className='ml-2' icon={faPen} />
+            </button>
+          </div>
+        </form>
       </div>
     </GenericModal>
   );

From e335b263ae56afe0fe09d5bf212876191388dbd2 Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 21:02:25 -0300
Subject: [PATCH 26/29] refactor: remove EditUsernameModal component

---
 .../components/layout/EditUsernameModal.tsx   | 102 ------------------
 1 file changed, 102 deletions(-)
 delete mode 100644 web/src/modules/shared/components/layout/EditUsernameModal.tsx

diff --git a/web/src/modules/shared/components/layout/EditUsernameModal.tsx b/web/src/modules/shared/components/layout/EditUsernameModal.tsx
deleted file mode 100644
index 53c3e166..00000000
--- a/web/src/modules/shared/components/layout/EditUsernameModal.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client';
-import { faPen } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import ClientAxios from '@web/src/lib/axios/ClientAxios';
-import { LoggedUserData } from '@web/src/modules/auth/types/User';
-import { AxiosError } from 'axios';
-import { useState } from 'react';
-import { toast } from 'react-hot-toast';
-import GenericModal from '../client/GenericModal';
-import { SubmitHandler, useForm } from 'react-hook-form';
-
-interface EditUsernameModalProps {
-  isOpen: boolean;
-  setIsOpen: (value: boolean) => void;
-  userData: LoggedUserData;
-}
-
-interface FormValues {
-  username: string;
-}
-
-export const EditUsernameModal = ({
-  isOpen,
-  setIsOpen,
-  userData,
-}: EditUsernameModalProps) => {
-  const {
-    handleSubmit,
-    formState: { isSubmitting, errors },
-    register,
-  } = useForm<FormValues>();
-
-  const onSubmit: SubmitHandler<FormValues> = async (data) => {
-    try {
-      await ClientAxios.patch('/user/username', {
-        username: data.username,
-      });
-
-      toast.success('Username updated successfully');
-
-      // refresh the page
-      window.location.reload();
-    } catch (error: unknown) {
-      if ((error as any).isAxiosError) {
-        const axiosError = error as AxiosError;
-
-        // verify for throttling limit error
-        if (axiosError.response?.status === 429) {
-          toast.error('Too many requests. Please try again later.');
-        }
-
-        // verify for validation error
-        if (axiosError.response?.status === 400) {
-          toast.error('Invalid username');
-        }
-
-        // verify for unauthorized error
-        if (axiosError.response?.status === 401) {
-          toast.error('Unauthorized');
-        }
-
-        return;
-      }
-
-      toast.error('An error occurred. Please try again later.');
-    }
-  };
-
-  return (
-    <GenericModal title='Edit username' isOpen={isOpen} setIsOpen={setIsOpen}>
-      <div className='flex flex-col gap-4'>
-        <form className='flex flex-col gap-4' onSubmit={handleSubmit(onSubmit)}>
-          <span className='text-red-500 text-sm font-medium h-4'>
-            {errors.username && errors.username.message}
-          </span>
-          <label htmlFor='username' className='block text-white'>
-            Username
-          </label>
-          <input
-            autoFocus
-            type='text'
-            id='username'
-            {...register('username', { required: 'Username is required' })}
-            className='w-full bg-zinc-700 text-white rounded-lg p-2'
-            defaultValue={userData.username}
-            disabled={isSubmitting}
-          />
-          <div className='flex justify-end'>
-            <button
-              type='submit'
-              className='text-sm px-3 py-2 rounded-lg bg-blue-500 hover:bg-blue-400'
-              disabled={isSubmitting}
-            >
-              Edit username
-              <FontAwesomeIcon className='ml-2' icon={faPen} />
-            </button>
-          </div>
-        </form>
-      </div>
-    </GenericModal>
-  );
-};

From 2ec8276406e8bb6f351804544dfe6a1ed6fe9b0f Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 21:02:30 -0300
Subject: [PATCH 27/29] feat: enhance UserMenu to support username editing with
 validation and error handling

---
 .../shared/components/layout/UserMenu.tsx     | 115 +++++++++++++-----
 1 file changed, 87 insertions(+), 28 deletions(-)

diff --git a/web/src/modules/shared/components/layout/UserMenu.tsx b/web/src/modules/shared/components/layout/UserMenu.tsx
index a7cadf29..ba40083d 100644
--- a/web/src/modules/shared/components/layout/UserMenu.tsx
+++ b/web/src/modules/shared/components/layout/UserMenu.tsx
@@ -8,11 +8,10 @@ import {
   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';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
 import { UserMenuButton } from '../client/UserMenuButton';
-import { EditUsernameModal } from './EditUsernameModal';
 import { UserMenuLink, UserMenuSplitLine } from './UserMenuLink';
 import {
   Popover,
@@ -20,14 +19,65 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from './popover';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import ClientAxios from '@web/src/lib/axios/ClientAxios';
+import { AxiosError } from 'axios';
+import toast from 'react-hot-toast';
 
-export function UserMenu({ userData }: { userData: LoggedUserData }) {
+interface FormValues {
+  username: string;
+}
+
+export const UserMenu = ({ userData }: { userData: LoggedUserData }) => {
   const [isEditingUsername, setIsEditingUsername] = useState(false);
-  const [error, setError] = useState<string>('');
+  const [name, setName] = useState(userData.username);
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting, errors },
+    register,
+  } = useForm<FormValues>();
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      await ClientAxios.patch('/user/username', {
+        username: data.username,
+      });
+
+      toast.success('Username updated successfully');
+      setIsEditingUsername(false);
+      setName(data.username);
+    } catch (error: unknown) {
+      if ((error as any).isAxiosError) {
+        const axiosError = error as AxiosError;
+
+        // verify for throttling limit error
+        if (axiosError.response?.status === 429) {
+          toast.error('Too many requests. Please try again later.');
+        }
+
+        // verify for validation error
+        if (axiosError.response?.status === 400) {
+          toast.error('Invalid username');
+        }
 
-  // ERRORS:
-  // 'This username is not available! :('
-  // 'Your username may only contain these characters: A-Z a-z 0-9 - _ .'
+        // verify for unauthorized error
+        if (axiosError.response?.status === 401) {
+          toast.error('Unauthorized');
+        }
+
+        return;
+      }
+
+      toast.error('An error occurred. Please try again later.');
+    }
+  };
+
+  useEffect(() => {
+    if (errors.username?.message) {
+      toast.error(errors.username.message);
+    }
+  }, [errors.username?.message]);
 
   return (
     <Popover onOpenChange={() => setIsEditingUsername(false)}>
@@ -60,7 +110,7 @@ export function UserMenu({ userData }: { userData: LoggedUserData }) {
                 {!isEditingUsername ? (
                   <>
                     <h4 className='truncate font-semibold w-48 py-px'>
-                      {userData.username}
+                      {name}
                     </h4>
                     <button onClick={() => setIsEditingUsername(true)}>
                       <FontAwesomeIcon
@@ -72,31 +122,40 @@ export function UserMenu({ userData }: { userData: LoggedUserData }) {
                   </>
                 ) : (
                   <>
-                    <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'
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                      <input
+                        className='w-[calc(12rem-52px)] font-semibold bg-transparent border border-zinc-400 rounded-md px-1'
+                        defaultValue={name}
+                        {...register('username', {
+                          required: 'Username is required',
+                          pattern: {
+                            value: /^[a-zA-Z0-9-_.]{1,32}$/,
+                            message:
+                              'Your username may only contain these characters: A-Z a-z 0-9 - _ .',
+                          },
+                        })}
                       />
-                    </button>
-                    <button onClick={() => setIsEditingUsername(false)}>
-                      <FontAwesomeIcon
-                        icon={faCheck}
-                        size='lg'
-                        className='text-zinc-400 hover:text-green-500'
-                      />
-                    </button>
+                      <button onClick={() => setIsEditingUsername(true)}>
+                        <FontAwesomeIcon
+                          icon={faClose}
+                          size='lg'
+                          className='text-zinc-400 hover:text-red-500'
+                        />
+                      </button>
+                      <button disabled={isSubmitting} type='submit'>
+                        <FontAwesomeIcon
+                          icon={faCheck}
+                          size='lg'
+                          className='text-zinc-400 hover:text-green-500'
+                        />
+                      </button>
+                    </form>
                   </>
                 )}
               </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 />
 
@@ -110,4 +169,4 @@ export function UserMenu({ userData }: { userData: LoggedUserData }) {
       </PopoverContent>
     </Popover>
   );
-}
+};

From 1ae51df3c3c04be117217ec4bc5305b288a5f802 Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 21:43:57 -0300
Subject: [PATCH 28/29] fix: update cookie expiration time in tests

---
 server/src/auth/auth.service.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/server/src/auth/auth.service.spec.ts b/server/src/auth/auth.service.spec.ts
index df510c6f..4fa1e388 100644
--- a/server/src/auth/auth.service.spec.ts
+++ b/server/src/auth/auth.service.spec.ts
@@ -51,7 +51,7 @@ describe('AuthService', () => {
         },
         {
           provide: 'COOKIE_EXPIRES_IN',
-          useValue: '1d',
+          useValue: '3600',
         },
         {
           provide: 'JWT_SECRET',
@@ -373,7 +373,7 @@ describe('AuthService', () => {
 
       expect(res.cookie).toHaveBeenCalledWith('token', 'access-token', {
         domain: '.test.com',
-        maxAge: 1,
+        maxAge: 3600000,
       });
 
       expect(res.cookie).toHaveBeenCalledWith(
@@ -381,7 +381,7 @@ describe('AuthService', () => {
         'refresh-token',
         {
           domain: '.test.com',
-          maxAge: 1,
+          maxAge: 3600000,
         },
       );
 

From b3e55b30f90960052512797279f4427305807691 Mon Sep 17 00:00:00 2001
From: tomast1337 <vycasnicolas@gmail.com>
Date: Tue, 31 Dec 2024 21:55:55 -0300
Subject: [PATCH 29/29] fix: correct button action to stop username editing in
 UserMenu

---
 web/src/modules/shared/components/layout/UserMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/modules/shared/components/layout/UserMenu.tsx b/web/src/modules/shared/components/layout/UserMenu.tsx
index ba40083d..844e1f5a 100644
--- a/web/src/modules/shared/components/layout/UserMenu.tsx
+++ b/web/src/modules/shared/components/layout/UserMenu.tsx
@@ -135,7 +135,7 @@ export const UserMenu = ({ userData }: { userData: LoggedUserData }) => {
                           },
                         })}
                       />
-                      <button onClick={() => setIsEditingUsername(true)}>
+                      <button onClick={() => setIsEditingUsername(false)}>
                         <FontAwesomeIcon
                           icon={faClose}
                           size='lg'