feat: add visibility badge to private songs

Author: Bentroen

shared/validation/song/dto/SongView.dto.ts

@@ -9,7 +9,7 @@ import {
 
 import { SongStats } from '@shared/validation/song/dto/SongStats';
 
-import type { CategoryType } from './types';
+import type { CategoryType, VisibilityType } from './types';
 import { SongDocument } from '../../../../server/src/song/entity/song.entity';
 
 export type SongViewUploader = {
@@ -59,6 +59,10 @@ export class SongViewDto {
   @IsString()
   description: string;
 
+  @IsString()
+  @IsNotEmpty()
+  visibility: VisibilityType;
+
   @IsString()
   @IsNotEmpty()
   category: CategoryType;
@@ -90,6 +94,7 @@ export class SongViewDto {
       originalAuthor: song.originalAuthor,
       description: song.description,
       category: song.category,
+      visibility: song.visibility,
       license: song.license,
       customInstruments: song.customInstruments,
       fileSize: song.fileSize,

web/src/modules/song/components/SongPage.tsx

@@ -12,6 +12,7 @@ import {
   OpenSongInNBSButton,
   ShareButton,
   UploaderBadge,
+  VisibilityBadge,
 } from './SongPageButtons';
 import SongCard from '../../browse/components/SongCard';
 import SongCardGroup from '../../browse/components/SongCardGroup';
@@ -73,7 +74,15 @@ export async function SongPage({ id }: { id: string }) {
             />
           </picture>
 
-          <h1 className='text-xl font-bold'>{song.title}</h1>
+          <div className='text-xl font-bold inline'>
+            <h1 className='inline'>{song.title}</h1>
+            {song.visibility === 'private' && (
+              <>
+                <span className='inline-block w-3 align-middle' />
+                <VisibilityBadge />
+              </>
+            )}
+          </div>
 
           {/* Uploader and actions */}
           <div className='flex flex-row flex-wrap justify-start items-center gap-8 w-full'>

web/src/modules/song/components/SongPageButtons.tsx

@@ -5,6 +5,7 @@ import {
   faDownload,
   faExternalLink,
   faHeart,
+  faLock,
   faPlay,
   faPlus,
   faShare,
@@ -27,6 +28,15 @@ import {
 } from '../../shared/components/tooltip';
 import { downloadSongFile, openSongInNBS } from '../util/downloadSong';
 
+const VisibilityBadge = () => {
+  return (
+    <span className='inline-flex items-center bg-zinc-700 text-zinc-400 px-1.5 py-0.5 rounded-md text-sm font-semibold'>
+      <FontAwesomeIcon icon={faLock} className='w-3' />
+      <span className='ml-1.5'>Private</span>
+    </span>
+  );
+};
+
 const UploaderBadge = ({ user }: { user: SongViewDtoType['uploader'] }) => {
   return (
     <div className='flex flex-row items-center gap-3'>
@@ -276,6 +286,7 @@ const DownloadButton = ({
 };
 
 export {
+  VisibilityBadge,
   UploaderBadge,
   FollowButton,
   LikeButton,