Merge pull request #100 from standleypg-dev/UI-migrate

UI/UX improvments

Author: standleypg

CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-Discord Music Bot - A .NET 9 application that provides music playback functionality for Discord servers. Supports YouTube, SoundCloud, Spotify (for playlist fetching), and radio streams.
+Discord Music Bot - A .NET 10 application that provides music playback functionality for Discord servers. Supports various audio sources, Spotify (for playlist fetching), and radio streams.
 
 ## Build & Run Commands
 
@@ -22,13 +22,13 @@ dotnet run --project src/Worker/Worker.csproj
 dotnet run --project src/Worker/Worker.csproj -c Release
 
 # Frontend dev server (from src/UI/App)
-npm run dev
+bun run dev
 
 # Frontend production build
-npm run build
+bun run build
 
 # Frontend development build
-npm run build:dev
+bun run build:dev
 ```
 
 ## Architecture
@@ -40,7 +40,7 @@ npm run build:dev
 - **Infrastructure** (`src/Infrastructure/`) - Discord bot implementation using NetCord, audio processing with FFmpeg/NAudio, database access via EF Core, YouTube/SoundCloud integration
 - **UI** (`src/UI/`) - Contains two sub-projects:
   - `Api/` - ASP.NET Core REST API with JWT authentication
-  - `App/` - Lit-based TypeScript frontend (Vite build)
+  - `App/` - React TypeScript frontend (Vite build, Bun package manager)
 - **Worker** (`src/Worker/`) - Main entry point that composes all layers, hosts the Discord bot and web API
 
 ### Key Patterns
@@ -86,4 +86,4 @@ Environment variables (via docker-compose or appsettings.json):
 
 ## Frontend Stack
 
-TypeScript with Lit web components, Vaadin Router, Chart.js. Build output goes to `src/Worker/wwwroot/`.
+React 19 with TypeScript, TanStack Router, TanStack Query, Recharts. Uses Bun as the package manager and Vite 8 for bundling. Build output goes to `src/Worker/wwwroot/`.

README.md

@@ -1,26 +1,34 @@
-# Local Radio and Music Bot Player for Discord
+# Discord Music Bot
 
-**_Disclaimer_**: _This code is meant for educational purposes only. Please do not use this code for malicious purposes or to violate the [Discord](https://discord.com), [Youtube](https://www.youtube.com), [Radio Televisyen Malaysia (RTM)](https://www.rtm.gov.my) and [Astro](https://www.astro.com.my) Terms of Service._
+A .NET 10 Discord bot for music playback, supporting various audio sources and radio streams. Includes a React-based web dashboard.
 
-**Note:** This code has been tested on a Linux environment. If you are using a different operating system, you may need to modify the code accordingly. You also can run this application using Docker and WSL2. Dockerfile is provided in this repository.
+**Note:** This application is designed to run on Linux via Docker. A Dockerfile and docker-compose setup are provided.
 
 ## Installation
 
-To use this application, follow these steps:
-
-1. You need to create a Discord bot and add it to your server. You can follow the instructions [here](https://discord.com/developers/docs/intro).
-2. Setup up neccessary bot access permissions. You can follow the instructions [here](https://discord.com/developers/docs/topics/permissions).
-3. Discord bot token is required to run this application. You can create a bot token by following the instructions [here](https://discord.com/developers/docs/topics/oauth2#bots).
-3. Clone this repository.
-4. Use docker-compose to build and run the application. It will automatically install the required dependencies.
+1. Create a Discord bot and add it to your server. Follow the [Discord Developer docs](https://discord.com/developers/docs/intro).
+2. Set up the necessary bot permissions. See [Permissions](https://discord.com/developers/docs/topics/permissions).
+3. Obtain a Discord bot token. See [OAuth2 Bots](https://discord.com/developers/docs/topics/oauth2#bots).
+4. Clone this repository.
+5. Configure `deployment/.env` with your values (Discord token, Spotify credentials, database, JWT, etc.).
+6. Build and run with Docker:
    ```
-   docker-compose up --build
+   docker-compose -f deployment/docker-compose.yml up --build
    ```
-5. Please refer to the [Discord.NET](https://discordnet.dev) for more information on how to create a Discord bot and how to use the Discord.NET library.
 
 ## Technologies Used
-1. [Discord.NET](https://discordnet.dev)
-2. [YoutubeExplode](https://github.com/Tyrrrz/YoutubeExplode)
-3. [FFmpeg](https://ffmpeg.org)
-4. [Opus](https://opus-codec.org)
-5. [Sodium](https://doc.libsodium.org)
+
+### Backend
+- [.NET 10](https://dotnet.microsoft.com) / ASP.NET Core
+- [NetCord](https://github.com/NetCordDev/NetCord) - Discord bot framework
+- [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) + [PostgreSQL](https://www.postgresql.org)
+- [YoutubeExplode](https://github.com/Tyrrrz/YoutubeExplode) / [YoutubeDLSharp](https://github.com/Bluegrams/YoutubeDLSharp) + [yt-dlp](https://github.com/yt-dlp/yt-dlp)
+- [SoundCloudExplode](https://github.com/jerry08/SoundCloudExplode)
+- [NAudio](https://github.com/naudio/NAudio) / [FFmpeg](https://ffmpeg.org) - audio processing
+- [libopus](https://opus-codec.org) / [libsodium](https://doc.libsodium.org) - voice encryption and encoding
+
+### Frontend
+- [React 19](https://react.dev) with TypeScript
+- [TanStack Router](https://tanstack.com/router) / [TanStack Query](https://tanstack.com/query)
+- [Recharts](https://recharts.org)
+- [Vite](https://vite.dev) + [Bun](https://bun.sh)

src/Application/Interfaces/Services/IRadioSourceService.cs

@@ -4,9 +4,9 @@ namespace Application.Interfaces.Services;
 
 public interface IRadioSourceService
 {
-    Task<IReadOnlyCollection<RadioSource>> GetAllRadioSourcesAsync(CancellationToken cancellationToken = default);
-    Task<RadioSource> GetRadioSourceByIdAsync(Guid id, CancellationToken cancellationToken = default);
-    Task UpdateRadioSourceUrlAsync(Guid id, string newSourceUrl, bool isActive, CancellationToken cancellationToken = default);
-    Task<Guid> AddRadioSourceAsync(string name, string sourceUrl, CancellationToken cancellationToken = default);
-    Task<int> DeleteRadioSourceAsync(Guid id, CancellationToken cancellationToken = default);
+    Task<IReadOnlyCollection<RadioSource>> GetAllRadioSourcesAsync(CancellationToken cancellationToken);
+    Task<RadioSource> GetRadioSourceByIdAsync(Guid id, CancellationToken cancellationToken);
+    Task UpdateRadioSourceUrlAsync(Guid id, string name, string newSourceUrl, bool isActive, CancellationToken cancellationToken);
+    Task<Guid> AddRadioSourceAsync(string name, string sourceUrl, CancellationToken cancellationToken);
+    Task<int> DeleteRadioSourceAsync(Guid id, CancellationToken cancellationToken);
 }

src/Domain/Entities/RadioSource.cs

@@ -5,7 +5,7 @@ namespace Domain.Entities;
 public class RadioSource: EntityBase
 {
     public Guid Id { get; init; }
-    public string Name { get; init; }
+    public string Name { get; set; }
     public string SourceUrl { get; private set; }
     public bool IsActive { get; set; } = true;
 
@@ -15,14 +15,15 @@ private RadioSource(string name, string sourceUrl)
         SourceUrl = sourceUrl;
     }
 
-    public static RadioSource UpdateSourceUrl(RadioSource radioSource, string newSourceUrl, bool isActive)
+    public static void Update(RadioSource radioSource, string name, string newSourceUrl, bool isActive)
     {
-        ArgumentNullException.ThrowIfNull(radioSource, nameof(radioSource));
-        ArgumentNullException.ThrowIfNull(newSourceUrl, nameof(newSourceUrl));
+        ArgumentNullException.ThrowIfNull(radioSource);
+        ArgumentNullException.ThrowIfNull(radioSource);
+        ArgumentNullException.ThrowIfNull(newSourceUrl);
 
+        radioSource.Name = name;
         radioSource.SourceUrl = newSourceUrl;
         radioSource.IsActive = isActive;
-        return radioSource;
     }
 
     public static RadioSource Create(string name, string sourceUrl)

src/Infrastructure/Commands/MusicPlayCommands.cs

@@ -62,7 +62,7 @@ await executor.ExecuteAsync(async serviceProvider =>
             var message =
                 CommandUtils.CreateMessage<InteractionMessageProperties>("Select a radio station to play:");
 
-            var radiosSourceList = (await radioSourceService.GetAllRadioSourcesAsync()).Where(rs => rs.IsActive);
+            var radiosSourceList = (await radioSourceService.GetAllRadioSourcesAsync(CancellationToken.None)).Where(rs => rs.IsActive);
             message.Components =
                 CommandUtils.CreateComponent(radiosSourceList.Select(rs =>
                     new CommandUtils.ComponentModel(rs.Name, rs.Id.ToString())));

src/Infrastructure/Services/AudioPlayerService.cs

@@ -166,7 +166,7 @@ private async Task<string> GetSourceUrl(string selectedValue, IRadioSourceServic
 
         if (Guid.TryParse(selectedValue, out var radioId))
         {
-            sourceUrl = (await radioSourceService.GetRadioSourceByIdAsync(radioId)).SourceUrl;
+            sourceUrl = (await radioSourceService.GetRadioSourceByIdAsync(radioId, CancellationToken.None)).SourceUrl;
         }
         else
         {

src/Infrastructure/Services/RadioSourceService.cs

@@ -18,7 +18,7 @@ public async Task<RadioSource> GetRadioSourceByIdAsync(Guid id, CancellationToke
                throw new KeyNotFoundException($"Radio source with ID {id} not found.");
     }
 
-    public async Task UpdateRadioSourceUrlAsync(Guid id, string newSourceUrl, bool isActive, CancellationToken cancellationToken = default)
+    public async Task UpdateRadioSourceUrlAsync(Guid id, string name, string newSourceUrl, bool isActive, CancellationToken cancellationToken = default)
     {
         if (string.IsNullOrEmpty(newSourceUrl))
         {
@@ -31,7 +31,7 @@ public async Task UpdateRadioSourceUrlAsync(Guid id, string newSourceUrl, bool i
             throw new KeyNotFoundException($"Radio source with ID {id} not found.");
         }
 
-        RadioSource.UpdateSourceUrl(radioSource, newSourceUrl, isActive);
+        RadioSource.Update(radioSource, name, newSourceUrl, isActive);
 
         context.RadioSources.Update(radioSource);