fix: adjust size for custom controls in topbar

also clean:dist

.github/ISSUE_TEMPLATE/performance-issue.md

@@ -29,6 +29,9 @@ Clear description of the performance issue.
 - **Storage**: [e.g. SSD/HDD]
 - **Other Applications Opened**: [e.g. Discord/Opera GX]
 
+> [!INFO]
+> At the start of the application, SystemInfo is printed in the logs, so you can just copy and paste it!
+
 ## Reproduction Details
 
 - **Download URL**: [if applicable]

.github/ISSUE_TEMPLATE/question.md

@@ -9,8 +9,8 @@ assignees: 'MasterAcnolo'
 
 ## Pre-submission Checklist
 
-- [ ] I have checked the [FAQ](https://masteracnolo.github.io/FreedomLoader/pages/faq.html)
+- [ ] I have checked the [FAQ](https://freedomloader.acnolo.fr/#/faq)
-- [ ] I have reviewed the [Wiki](https://masteracnolo.github.io/FreedomLoader/pages/wiki.html)
+- [ ] I have reviewed the [Wiki](https://freedomloader.acnolo.fr/#/wiki)
 - [ ] I have searched existing issues
 
 ## Question

.github/PULL_REQUEST_TEMPLATE/contribution.md

@@ -2,7 +2,7 @@
 
 Brief description of what this PR does.
 
-## Related Issue
+## Related Issue (if applicable)
 
 Fixes #(issue number)
 Closes #(issue number)
@@ -30,7 +30,7 @@ Related to #(issue number)
 - [ ] I have tested with different download scenarios (video/audio, playlists)
 - [ ] I have checked the application logs for errors
 - [ ] I have verified the UI changes (if applicable)
-- [ ] I have tested on Windows 10 and/or Windows 11
+- [ ] I have tested on Windows 10 and/or Windows 11 or in any Linux Distribution
 
 ## Screenshots (if applicable)
 

.github/workflows/codeql.yml

@@ -0,0 +1,46 @@
+name: "CodeQL PR"
+
+on:
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '00 00 * * 1'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      security-events: write
+      packages: read
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - language: javascript-typescript
+            build-mode: none
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v4
+        with:
+          languages: ${{ matrix.language }}
+          build-mode: ${{ matrix.build-mode }}
+
+      - name: Run manual build steps
+        if: matrix.build-mode == 'manual'
+        shell: bash
+        run: |
+          echo 'Manual build required'
+          exit 1
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v4
+        with:
+          category: "/language:${{matrix.language}}"

.gitignore

@@ -1,11 +1,35 @@
+# Dependencies
 /node_modules
-/downloads
+
+# Build Output Folder
 /dist
 /out
+/srpm-out
 
-/ressources/ffmpeg.exe
+# .env
-/ressources/ffprobe.exe
+*.env
-/ressources/deno.exe
 
-logs/*.json
+# Config JSON File. Create it and fill it if you want to have dev only settings
-logs/*.log
+config/config.dev.json
+
+# IDE
+.idea/
+.vscode/
+.zed/
+
+# OS generated files
+.DS_Store
+.DS_Store?
+Thumbs.db
+
+# Linux executable
+ffmpeg
+ffprobe
+deno
+yt-dlp
+
+# Windows Executable
+ffmpeg.exe
+ffprobe.exe
+deno.exe
+yt-dlp.exe

BINARIES.md

@@ -0,0 +1,97 @@
+# External binaries
+
+This project depends on three external tools that are **not bundled in the repository**.  
+You must download them manually and place each binary in the correct folder before building or running the app locally.
+
+---
+
+## Required tools
+
+| Tool    | Role                                        |
+|---------|---------------------------------------------|
+| yt-dlp  | Video and audio download engine             |
+| ffmpeg  | Media encoding, transcoding, muxing         |
+| ffprobe | Media file analysis and metadata extraction |
+| deno    | JavaScript / TypeScript runtime             |
+
+---
+
+## Folder structure
+
+Place the binaries exactly as shown below.  
+Do not rename them — the application resolves them by these exact names.
+
+```
+resources/
+└── binaries/
+    ├── linux/
+    │   ├── yt-dlp
+    │   ├── ffmpeg
+    │   ├── ffprobe
+    │   └── deno
+    └── win-32/
+        ├── yt-dlp.exe
+        ├── ffmpeg.exe
+        ├── ffprobe.exe
+        └── deno.exe
+```
+
+---
+
+## Download links
+
+### yt-dlp
+
+| Platform | URL                                                                  |
+|----------|----------------------------------------------------------------------|
+| Windows  | https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp.exe |
+| Linux    | https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp     |
+
+Rename the downloaded file to `yt-dlp` (or `yt-dlp.exe` on Windows).
+
+---
+
+### ffmpeg and ffprobe
+
+**Windows and Linux** — both binaries are included in the same archive.
+
+| Platform    | URL                                                                                                       |
+|-------------|-----------------------------------------------------------------------------------------------------------|
+| Windows x64 | https://github.com/BtbN/FFmpeg-Builds/releases/download/latest/ffmpeg-master-latest-win64-gpl.zip         |
+| Linux x64   | https://github.com/BtbN/FFmpeg-Builds/releases/download/latest/ffmpeg-master-latest-linux64-gpl.tar.xz    |
+| Linux arm64 | https://github.com/BtbN/FFmpeg-Builds/releases/download/latest/ffmpeg-master-latest-linuxarm64-gpl.tar.xz |
+
+Extract the archive and copy `ffmpeg` and `ffprobe` from the `bin/` subfolder.
+
+---
+
+### deno
+
+| Platform    | URL                                                                                          |
+|-------------|----------------------------------------------------------------------------------------------|
+| Windows x64 | https://github.com/denoland/deno/releases/latest/download/deno-x86_64-pc-windows-msvc.zip    |
+| Linux x64   | https://github.com/denoland/deno/releases/latest/download/deno-x86_64-unknown-linux-gnu.zip  |
+| Linux arm64 | https://github.com/denoland/deno/releases/latest/download/deno-aarch64-unknown-linux-gnu.zip |
+
+Each archive contains a single binary. Rename it to `deno` (or `deno.exe` on Windows).
+
+---
+
+## Permissions (Linux )
+
+After placing the binaries, make them executable:
+
+```bash
+chmod +x resources/binaries/linux/yt-dlp
+chmod +x resources/binaries/linux/ffmpeg
+chmod +x resources/binaries/linux/ffprobe
+chmod +x resources/binaries/linux/deno
+```
+
+---
+
+## Notes
+
+- These binaries are excluded from version control via `.gitignore`.
+- Always use the latest stable release of each tool.
+- **Yt-dlp** binaries don't need to be updated manually. At every startup of the application, the binary tries to update itself

CONTRIBUTING.md

@@ -6,6 +6,7 @@ Welcome! Thanks for your interest in Freedom Loader. Your contributions—bug re
 
 ## Quick Links
 
+- [Development Guide](DEVELOPMENT.md)
 - [Code of Conduct](CODE_OF_CONDUCT.md)
 - [Issue Templates](.github/ISSUE_TEMPLATE/)
 - [Pull Request Templates](.github/PULL_REQUEST_TEMPLATE/)
@@ -23,7 +24,7 @@ Found a bug or unexpected behavior? Open an [**issue**](https://github.com/Maste
 - Clear description of the bug
 - Steps to reproduce
 - App version and environment (Windows version, Firefox version if relevant)
-- Logs from: `C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\LOGS-YYYY-MM-DD.log`
+- Logs from: `C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\LOGS-YYYY-MM-DD.log` (Windows) or `~/.local/share/FreedomLoader/logs/` (Linux)
 - Screenshots if applicable
 
 ### 2. Request a Feature
@@ -43,13 +44,11 @@ Have an idea to improve Freedom Loader? Open a [**Feature Request**](https://git
 - Follow the project's code style and conventions
 
 **Process:**
-1. Fork the repository
+1. Fork the repository.
-2. Create a feature branch: `git checkout -b feature/your-feature-name`
+2. Check out our [**Developer Guide (DEVELOPMENT.md)**](./DEVELOPMENT.md) to set up your environment.
-3. Make your changes
+3. Create a feature branch following our branching conventions.
-4. Test thoroughly on Windows 10/11
+4. Make your changes and test thoroughly on Windows and/or Linux.
-5. Commit with clear messages: `git commit -m "Add feature X"`
+5. Open a Pull Request using the appropriate template.
-6. Push to your fork: `git push origin feature/your-feature-name`
-7. Open a Pull Request using the appropriate template
 
 **Code Guidelines:**
 - Use camelCase for variables and functions
@@ -72,41 +71,9 @@ Small contributions matter—don't hesitate to submit documentation PRs.
 
 ## Development Setup
 
-### Prerequisites
+Want to write some code? Awesome! 
-- Node.js 16.x or higher
-- npm or yarn
-- Git
-- Windows 10/11 (for testing)
 
-### Setup
+Please read our [**Developer Guide (DEVELOPMENT.md)**](./DEVELOPMENT.md) for instructions on how to set up your local environment, our project architecture, and our Git branching rules.
-```bash
-# Clone your fork
-git clone https://github.com/YOUR-USERNAME/Freedom-Loader.git
-cd Freedom-Loader
-
-# Install dependencies
-npm install
-
-# Run in development mode
-npm start
-
-# Build for production
-npm run build
-```
-
-### Project Structure
-```
-Freedom-Loader/
-├── main.js           # Electron main process
-├── preload.js        # Electron preload script
-├── config.js         # Global configuration
-├── server/           # Express backend
-│   ├── routes/       # API routes
-│   ├── controller/   # Business logic
-│   └── helpers/      # Utility functions
-├── public/           # Frontend (HTML, CSS, JS)
-└── ressources/       # Binaries (yt-dlp, ffmpeg, etc.)
-```
 
 ---
 
@@ -114,12 +81,9 @@ Freedom-Loader/
 
 Before submitting a PR, verify:
 - [ ] Download functionality works (video/audio)
-- [ ] Playlist downloads work
-- [ ] Settings panel functions correctly
-- [ ] Custom path selection works
 - [ ] No errors in application logs
-- [ ] UI changes work on all themes (if applicable)
+- [ ] Any features wasn't break during the development
-- [ ] Tested on Windows 10 and/or Windows 11
+- [ ] Tested on Windows 10/11 and/or any Linux Distribution
 
 ---
 
@@ -148,8 +112,8 @@ See [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) for details.
 
 ## Questions?
 
-- Check the [FAQ](https://masteracnolo.github.io/FreedomLoader/pages/faq.html)
+- Check the [FAQ](https://freedomloader.acnolo.fr/faq)
-- Review the [Wiki](https://masteracnolo.github.io/FreedomLoader/pages/wiki.html)
+- Review the [Wiki](https://freedomloader.acnolo.fr/wiki)
 - Open a [Question issue](https://github.com/MasterAcnolo/Freedom-Loader/issues/new/choose)
 
 ---
@@ -161,4 +125,4 @@ Check out his work: [IG @designmark_studio](https://www.instagram.com/designmark
 
 ---
 
-**Thank you for contributing to Freedom Loader!**
+**Thank you for contributing to Freedom Loader!**

DEVELOPMENT.md

@@ -0,0 +1,388 @@
+# Freedom Loader - Development Guide
+
+Welcome to the Developer Guide! This document explains how to set up your local environment, project architecture, Git workflow, and the release process.
+
+## Prerequisites
+
+Before you begin, ensure you have the following installed on your machine:
+
+- **Node.js** (v22 or higher recommended)
+- **npm** (comes with Node.js)
+- **Git**
+- **yt-dlp binaries**: Freedom Loader requires native binaries to function. Read [BINARIES.md](./BINARIES.md) for download instructions and placement in `resources/binaries/`.
+
+## Setup Instructions
+
+### 1. Clone the repository
+
+```bash
+git clone https://github.com/MasterAcnolo/Freedom-Loader.git
+cd Freedom-Loader
+```
+
+### 2. Install dependencies
+
+```bash
+npm install
+```
+
+### 3. Install the Binaries
+
+Follow the instructions in `BINARIES.md` to place `yt-dlp`, `ffmpeg`, `ffprobe`, and `deno` in the correct `resources/binaries/` folder for your OS.
+
+### 4. Run in Development Mode
+
+```bash
+npm start
+```
+
+**Note**: Development mode automatically enables detailed colored logs and the DevTron extension for debugging.
+
+---
+
+## Available Scripts
+
+### Development
+
+- `npm start` — Start the app in development mode (no warnings)
+- `npm run start:warn` — Start with deprecation warnings visible
+- `npm run start:debug` — Start with full debug logging (Wayland, Electron logging, stack dumps)
+- `npm run dev` — Start with auto-reload on file changes (watches server/, app/, main.js, config.js)
+- `npm run dev:warn` — Dev mode with warnings
+- `npm run dev:debug` — Dev mode with full debug output and auto-reload
+
+### Building
+
+- `npm run build:linux` — Build Linux packages (AppImage, deb, snap)
+- `npm run build:win` — Build Windows installer (.exe)
+- `npm run build:rpm` — Build RPM and SRPM for COPR (Fedora)
+- `npm run build:all` — Build both Windows and Linux (not recommended because it adds both OS binaries into a single package. The output file is 2x bigger than expected).
+
+### Testing
+
+- `npm test` — Run all tests (unit + integration)
+- `npm run test:unit` — Run unit tests only
+
+### Release Pipeline
+
+- `npm run release` — Build all packages and create a draft GitHub release (no store publishing)
+- `npm run release:publish` — Build all packages and publish to Snap Store + COPR
+- `npm run release:dry-run` — Simulate the full release pipeline without publishing anything
+
+### Maintenance
+
+- `npm update` — Update npm dependencies
+
+---
+
+## Project Architecture
+
+Freedom Loader is built with **Electron** (frontend) and **Node.js + Express** (backend), using a modular structure:
+
+---
+
+## Git & Branching Workflow
+
+I use **Trunk-Based Development** (GitHub Flow):
+
+### Core Principles
+
+- **`main` is always deployable**: The `main` branch contains the latest stable code and must never be broken.
+- **No long-lived branches**: I no longer maintain version branches like `v1.6` or `v1.7`.
+- **Pull Requests for review**: All code changes go through PR review before merging to `main`.
+
+### How to Contribute
+
+#### 1. Create a feature branch
+
+```bash
+git checkout -b feat/add-new-button
+# or for fixes:
+git checkout -b fix/ui-bug
+```
+
+**Branch naming convention**:
+- `feat/` — New features
+- `fix/` — Bug fixes
+- `refactor/` — Code cleanup (no behavior change)
+- `docs/` — Documentation updates
+- `chore/` — Dependency updates, build config, etc.
+
+#### 2. Make commits
+
+```bash
+# Make changes
+git add .
+git commit -m "Brief, imperative description of the change"
+```
+
+**Commit message tips**:
+- Use imperative mood: "Add theme caching" not "Added theme caching"
+- Keep commits logical and focused (one feature per commit if possible)
+- Link to issues if relevant: "Fix crash on download (fixes #42)"
+
+#### 3. Push and open a PR
+
+```bash
+git push origin feat/add-new-button
+```
+
+Then open a PR on GitHub against `main`.
+
+#### 4. Review and merge
+
+- Address feedback in new commits (don't rebase — easier to review)
+- Once approved, merge via GitHub (use "Squash and merge" for clean history if many small commits and you find it relevant)
+
+---
+
+## Release Process
+
+**Note**: Only project maintainers release to production. This section documents the process for transparency and for future maintainers.
+
+Releases are fully automated via the `release.sh` script. The process handles building, packaging, and publishing to **all distribution channels**:
+- **GitHub Releases** (Windows .exe, Linux packages)
+- **Fedora COPR** (automatic RPM builds for Fedora 43+)
+- **Snap Store** (universal Linux)
+
+### Before You Release
+
+1. **Ensure `main` is green**: All tests pass, features are stable.
+2. **Update `package.json` version**:
+
+```json
+   "version": "1.6.1"
+```
+3. **Commit the version bump**: `git add package.json && git commit -m "chore: v1.6.1"`
+4. **Push to `main`**: `git push origin main`
+
+### Step 1: Local Build & Draft Release
+
+```bash
+npm run release
+```
+
+This:
+1. Builds Linux packages (AppImage, deb, snap)
+2. Builds RPM and SRPM for COPR
+3. Builds Windows installer
+4. Creates a draft GitHub release
+
+### Step 2: Edit & Publish on GitHub
+
+1. Go to https://github.com/MasterAcnolo/Freedom-Loader/releases
+2. Edit the draft release — fill in changelog
+3. Click **"Publish"** to make it live
+
+### Step 3: Publish to Distribution Channels
+
+```bash
+npm run release:publish
+```
+
+This automatically:
+- **Uploads to Snap Store**: Makes the app available via `snap install freedom-loader`
+- **Submits to Fedora COPR**: Builds and publishes RPMs for Fedora 43+ (users can `dnf install freedom-loader` from the COPR repo)
+
+Both happen in parallel — users across all platforms get the release simultaneously.
+
+---
+
+## Linux Development Considerations
+
+### Cross-Distribution Compatibility
+
+Freedom Loader targets **Debian-based** (Ubuntu, Debian) and **Fedora-based** (Fedora, RHEL, openSUSE) distributions. When developing features, keep this in mind:
+
+#### What to test
+
+- **Feature works on Fedora 44+** (primary Linux development environment)
+- **Feature works on Ubuntu/Debian** (via deb package or AppImage)
+- **Feature doesn't break Snap confinement** (Snap has restricted filesystem/IPC access)
+- **Feature gracefully degrades on missing system dependencies**
+
+#### Desktop Environment (DE) Compatibility
+
+Test on at least **GNOME** and **KDE** (the most common DEs). Common pain points:
+
+- **Themes**: May render differently on KDE vs GNOME — test both if possible
+- **File dialogs**: Some DEs use native file pickers, others fall back to Electron's
+- **Notifications**: System notification APIs vary (D-Bus, libnotify)
+- **Tray icons**: May not work identically across DEs
+
+#### How to check locally
+
+```bash
+# Test on Fedora (if available)
+npm run build:linux
+sudo dnf install dist/freedom-loader-*.x86_64.rpm
+freedom-loader
+
+# Test AppImage (works on any distro)
+chmod +x dist/Freedom\ Loader-*.AppImage
+./dist/Freedom\ Loader-*.AppImage
+```
+
+### CI/CD Gap
+
+**Currently**: No automated testing across distros or DEs. Releases rely on manual testing before publish.
+
+**Future improvement**: Automated tests via GitHub Actions (Ubuntu) + local testing on Fedora would catch cross-distro issues early. This is planned but not yet implemented.
+
+For now, if you fix a Linux-specific bug or add a DE-dependent feature, **please mention it in your PR description** so reviewers can test extra carefully.
+
+---
+
+## Testing
+
+### Unit Tests
+
+Test individual functions in isolation (no Electron required).
+
+```bash
+npm run test:unit
+```
+
+Covered:
+
+(Tests will come soon)
+
+### End-to-End Tests (Playwright)
+
+Test the actual Electron app launching and basic UI interactions.
+
+```bash
+npm run test
+```
+
+Covered:
+
+(Tests will come soon)
+
+
+### Running All Tests
+
+```bash
+npm test
+```
+
+Or include tests before release:
+
+```bash
+npm test && npm run release
+```
+
+---
+
+## Common Tasks
+
+### Add a new feature
+
+1. Create a feature branch: `git checkout -b feat/my-feature`
+2. Make changes, commit: `git add . && git commit -m "feat: my feature"`
+3. Push: `git push origin feat/my-feature`
+4. Open a PR on GitHub
+5. Once approved, merge to `main`
+6. (Later) Cut a release when ready: `npm run release`
+
+### Fix a bug
+
+Same as above, but use `fix/bug-name` branch and `git commit -m "fix: description"`.
+
+### Test the app before releasing
+
+```bash
+npm run dev        # Auto-reload on file changes
+# Make changes, test in the UI
+npm test           # Run all tests
+npm run release:dry-run   # Simulate release (builds but doesn't publish)
+```
+
+### Update dependencies
+
+```bash
+npm update
+git add package.json package-lock.json
+git commit -m "chore: update dependencies"
+git push origin main
+```
+
+### Rebuild only Linux (after quick fixes)
+
+```bash
+npm run build:linux
+# Or just the RPM:
+npm run build:rpm
+```
+
+### Publish to stores manually
+
+If `npm run release:publish` fails partway:
+
+```bash
+# Just Snap:
+snapcraft upload dist/freedom-loader_*.snap --release=stable
+
+# Just COPR:
+copr-cli build freedom-loader srpm-out/*.src.rpm
+```
+
+---
+
+## Troubleshooting
+
+### App won't start in dev mode
+
+```bash
+npm run start:debug
+```
+
+Check the debug output for errors. Most common:
+- Missing binaries in `resources/binaries/`
+- Port 8787 already in use
+- A dead instance is still running — open Task Manager and kill the "Freedom Loader" process
+
+### (Linux) Binaries in the right place but app still won't launch
+
+You probably forgot to make them executable:
+
+```bash
+chmod +x resources/binaries/linux/*
+```
+
+The app will fail silently if binaries lack execute permissions.
+
+### Build fails with "permission denied"
+
+Make sure you have write access to `dist/` and `srpm-out/`:
+
+```bash
+chmod -R u+w dist srpm-out
+npm run build:linux
+```
+
+### Tests fail
+
+Check for:
+- Missing test files in `tests/unit/`
+- Node modules out of sync: `rm -rf node_modules && npm install`
+
+### GitHub release publish fails
+
+Verify `gh` CLI is installed and authenticated:
+
+```bash
+gh auth login
+gh release list
+```
+
+---
+
+## Questions?
+
+For more info:
+- **Electron docs**: https://www.electronjs.org/docs
+- **electron-builder**: https://www.electron.build/
+- **This repo**: https://github.com/MasterAcnolo/Freedom-Loader
+
+Happy coding! 🎉

README.md

@@ -1,27 +1,31 @@
 <div align="center">
 
-  <a href="https://masteracnolo.github.io/FreedomLoader/"><img
+<a href="https://freedomloader.acnolo.fr/"><img
     src="./build/banner.png"
     alt="Banner"
     style="width: 50%;"/></a>
 
-### **A clean, open-source multimedia downloader for Windows**
+### **A clean, open-source multimedia downloader for Windows and Linux**
 
-[![Release](https://img.shields.io/badge/Release-1.4.6-blue?style=for-the-badge)](https://github.com/MasterAcnolo/Freedom-Loader/releases)
+[![Release](https://img.shields.io/github/v/release/MasterAcnolo/Freedom-Loader?style=for-the-badge&color=blue)](https://github.com/MasterAcnolo/Freedom-Loader/releases)
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-red.svg?style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0)
-[![Website](https://img.shields.io/badge/Website-Visit-404040?style=for-the-badge)](https://masteracnolo.github.io/FreedomLoader/)
+[![Website](https://img.shields.io/badge/Website-Visit-404040?style=for-the-badge)](https://freedomloader.acnolo.fr/)
-  <a href="https://www.firefox.com/fr/?utm_campaign=SET_DEFAULT_BROWSER"><img src="https://img.shields.io/badge/Require Firefox-E66000?style=for-the-badge&logo=Firefox-Browser&logoColor=white"></a>
+[![Workshop](https://img.shields.io/badge/Worshop-Visit-0E05A1?style=for-the-badge)](https://masteracnolo.github.io/Freedom-Loader-Workshop/)
+<a href="https://www.firefox.com/fr/?utm_campaign=SET_DEFAULT_BROWSER"><img src="https://img.shields.io/badge/Require Firefox-E66000?style=for-the-badge&logo=Firefox-Browser&logoColor=white"></a>
 
 </div>
 
----
-
 ## Overview
 
 Freedom Loader is a desktop application built with Electron that provides a straightforward way to download video and audio content with full metadata support. The application focuses on reliability, transparency, and user privacy-no ads, no tracking, no questionable third-party services.
 
 The primary goal is to make media downloading accessible to users who want offline access to their favorite content, particularly in situations where internet connectivity is unreliable or unavailable.
 
+### See related repo:
+
+- **[Website](https://github.com/MasterAcnolo/Freedom-Loader-Site/)** - Official project website and documentation
+- **[Workshop](https://github.com/MasterAcnolo/Freedom-Loader-Workshop)** - Theme creation tool and theme browser
+
 ## Table of Contents
 
 - [Features](#features)
@@ -29,12 +33,12 @@ The primary goal is to make media downloading accessible to users who want offli
 - [Usage](#usage)
 - [Preview](#preview)
 - [Configuration](#configuration)
-- [Project Structure](#project-structure)
+- [Theme Workshop](#Theme-Workshop)
 - [Technology Stack](#technology-stack)
 - [Development](#development)
 - [Roadmap](#roadmap)
 - [Contributing](#contributing)
-- [Support](#support)
+- [Submitting a community theme](#Submitting-a-community-theme)
 - [License](#license)
 
 ## Features
@@ -53,7 +57,9 @@ The primary goal is to make media downloading accessible to users who want offli
 ### User Interface
 
 - **Custom window controls** - Frameless window with custom top bar (optional)
-- **Theme system** - Multiple pre-built themes with dynamic switching
+- **Custom themes** - ZIP-based theme system with live preview
+- **Theme Workshop** - web-based theme creator and browser
+- **Toast notifications** - in-app feedback system
 - **Real-time progress tracking** - Live download progress bar with network speed indicator
 - **Server-Sent Events (SSE)** - Non-blocking progress updates via event streaming
 - **Settings panel** - In-app configuration interface with live updates
@@ -70,38 +76,90 @@ The primary goal is to make media downloading accessible to users who want offli
 - **Rate limiting** - Express-based request throttling to prevent server overload
 - **Graceful shutdown** - Proper cleanup of servers, logs, and RPC connections
 - **System notifications** - Windows notifications on download completion (clickable to open folder)
+- **Splash screen** - animated loading screen on startup
+- **Stop download** - ability to cancel in-progress downloads
+- **Playlist folders** - dedicated folder creation per playlist
+- **Keep Playlist Order** - Add an Index before the title, could be useful for an album for example.
+- **System Tray** - Could minimize the application in the system Tray, allow it to run in the background.
 
 ## Installation
 
+[![Fedora Copr](https://img.shields.io/badge/Fedora-Copr-294172?style=for-the-badge&logo=fedora&logoColor=white)](https://copr.fedorainfracloud.org/coprs/masteracnolo/freedom-loader/)
+[![Debian/Ubuntu](https://img.shields.io/badge/.deb-Debian%2FUbuntu-A81D33?style=for-the-badge&logo=debian&logoColor=white)](https://github.com/MasterAcnolo/Freedom-Loader/releases)
+[![Snap Store](https://img.shields.io/badge/Snap-Store-82BEA0?style=for-the-badge&logo=snapcraft&logoColor=white)](https://snapcraft.io/freedom-loader)
+[![AppImage](https://img.shields.io/badge/AppImage-Universal-1E88E5?style=for-the-badge&logo=linux&logoColor=white)](https://github.com/MasterAcnolo/Freedom-Loader/releases)
+
 ### Requirements
 
-- **Operating System**: Windows 10 or later
+- **Windows**: Windows 10 or later
-- **Browser**: Mozilla Firefox (required for cookie extraction)
+- **Linux**: any modern x86_64 distribution
-  - [Download Firefox](https://www.firefox.com)
+- **Browser**: Mozilla Firefox ([download](https://www.firefox.com)) required for cookie extraction, on both platforms
 
-### Standard Installation
+### Windows
 
-1. Download the latest release from the [Releases page](https://github.com/MasterAcnolo/Freedom-Loader/releases)
+1. Download the latest `.exe` from the [Releases page](https://github.com/MasterAcnolo/Freedom-Loader/releases)
-2. Run the downloaded `.exe` installer
+2. Run the installer (click "More info" → "Run anyway" if Windows Defender warns you)
-3. If Windows Defender shows a warning, click "More info" then "Run anyway"
+3. Follow the installation wizard
-4. Follow the installation wizard
+
+### Linux
+
+#### Fedora (via Copr - recommended)
+
+Installing via Copr lets `dnf` handle future updates automatically:
+
+```bash
+sudo dnf copr enable masteracnolo/freedom-loader
+sudo dnf install freedom-loader
+```
+
+#### Debian / Ubuntu (.deb)
+
+```bash
+# Download the latest .deb from the Releases page, then:
+sudo apt install ./freedom-loader_1.x.x_amd64.deb
+```
+
+#### Snap (any distro with snapd)
+
+```bash
+sudo snap install freedom-loader
+```
+
+#### RPM (Fedora/RHEL/openSUSE, without Copr)
+
+```bash
+# Download the latest .rpm from the Releases page, then:
+sudo dnf install ./freedom-loader-1.x.y.x86_64.rpm
+```
+
+#### AppImage (any distro, no installation needed)
+
+```bash
+# Download the latest .AppImage from the Releases page, then:
+chmod +x Freedom-Loader-1.x.y.AppImage
+./Freedom-Loader-1.x.y.AppImage
+```
+
+Once installed via any method, launch Freedom Loader from your application menu, or from a terminal with:
+```bash
+freedom-loader
+```
 
 ### File Locations
 
-Downloaded files are stored in:
+|               | Windows                                                 | Linux                                |
-```
+|---------------|---------------------------------------------------------|--------------------------------------|
-C:\Users\[USERNAME]\Downloads\Freedom Loader
+| **Downloads** | `C:\Users\[USERNAME]\Downloads\Freedom Loader`          | `~/Downloads/Freedom Loader`         |
-```
+| **Logs**      | `C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\` | `~/.local/share/FreedomLoader/logs/` |
-> [!NOTE]
-> *You can change it whenever you want. Just click the "Edit" button in the UI.*
 
-Application logs can be found at:
+> [!NOTE]
-```
+> The download folder can be changed anytime via the "Edit" button in the UI, on both platforms.
-C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\
-```
 
 ## Usage
 
+> [!TIP] 
+> On Linux, you can start Freedom Loader using `freedom-loader` command
+
 ### Basic Download
 
 1. Launch Freedom Loader
@@ -118,14 +176,15 @@ The application supports various configuration options:
 - Custom download directory selection
 - Discord Rich Presence activation
 - Theme customization
-- Log level configuration
+- Log level
+- And somes to see in the list [Configuration Options](#configuration-options) available
 
 ### Troubleshooting
 
 If you encounter issues:
 
 1. Restart the application
-2. Check the logs in `AppData\Local\FreedomLoader\logs\`
+2. Check the logs in `AppData\Local\FreedomLoader\logs\` or `~/.local/share/FreedomLoader/logs`
 3. Open the developer console: `CTRL + SHIFT + I` → "Toggle Developer Tools"
 4. Create an issue on GitHub with logs and reproduction steps
 
@@ -151,14 +210,22 @@ If you encounter issues:
 Freedom Loader can be configured either through the settings panel in the UI or by directly editing the `config.json` file located in the application data directory.
 
 ### Configuration File Location
+
+#### Windows
 ```
-C:\Users\[USERNAME]\AppData\Roaming\FreedomLoader\config.json
+%APPDATA%\Freedom Loader\config.json
+```
+
+#### Linux
+```
+~/.config/Freedom\ Loader/config.json
 ```
 
 ### Available Options
 ```json
 {
   "autoUpdate": true,
+  "systemTray": true,
   "discordRPC": true,
   "customTopBar": true,
   "autoCheckInfo": true,
@@ -166,31 +233,40 @@ C:\Users\[USERNAME]\AppData\Roaming\FreedomLoader\config.json
   "addMetadata": true,
   "verboseLogs": false,
   "autoDownloadPlaylist": true,
+  "keepPlaylistOrder": false,
+  "createPlaylistFolders": true,
   "customCodec": "h264",
   "logSystem": true,
   "outputTitleCheck": true,
   "downloadSystem": true,
-  "notifySystem": true
+  "notifySystem": true,
+  "enableHardwareAcceleration": true,
+  "theme": "dark" 
 }
 ```
 
 ### Configuration Options
 
-| Option | Type | Default | Description |
+| Option                       | Type    | Default  | Description                                                |
-|--------|------|---------|-------------|
+|------------------------------|---------|----------|------------------------------------------------------------|
-| `autoUpdate` | boolean | `true` | Enable automatic application updates |
+| `autoUpdate`                 | boolean | `true`   | Enable automatic application updates                       |
-| `discordRPC` | boolean | `true` | Enable Discord Rich Presence integration |
+| `systemTray`                 | boolean | `false`  | Allow app to minimize on close [EXPERIMENTAL]              |
-| `customTopBar` | boolean | `true` | Use custom application top bar |
+| `discordRPC`                 | boolean | `true`   | Enable Discord Rich Presence integration                   |
-| `autoCheckInfo` | boolean | `true` | Automatically fetch video information on URL paste |
+| `customTopBar`               | boolean | `true`   | Use custom application top bar                             |
-| `addThumbnail` | boolean | `true` | Embed thumbnail in downloaded audio files |
+| `autoCheckInfo`              | boolean | `true`   | Automatically fetch video information on URL paste         |
-| `addMetadata` | boolean | `true` | Add metadata tags to downloaded files |
+| `addThumbnail`               | boolean | `true`   | Embed thumbnail in downloaded audio files                  |
-| `verboseLogs` | boolean | `false` | Enable detailed logging for debugging |
+| `addMetadata`                | boolean | `true`   | Add metadata tags to downloaded files                      |
-| `autoDownloadPlaylist` | boolean | `true` | Automatically download entire playlists |
+| `verboseLogs`                | boolean | `false`  | Enable detailed logging for debugging                      |
-| `customCodec` | string | `"h264"` | Video codec for encoding (supported: h264, h265, vp9, av1) |
+| `autoDownloadPlaylist`       | boolean | `true`   | Automatically download entire playlists                    |
-| `logSystem` | boolean | `true` | Enable application logging |
+| `keepPlaylistOrder`          | boolean | `false`  | Add index before title, usefull for album                  |
-| `outputTitleCheck` | boolean | `true` | Verify output file titles |
+| `createPlaylistFolders`      | boolean | `false`  | Automatically create a folder for a playlist               |
-| `downloadSystem` | boolean | `true` | Enable download system |
+| `customCodec`                | string  | `"h264"` | Video codec for encoding (supported: h264, h265, vp9, av1) |
-| `notifySystem` | boolean | `true` | Enable system notifications |
+| `logSystem`                  | boolean | `true`   | Enable application logging                                 |
+| `outputTitleCheck`           | boolean | `true`   | Verify output file titles                                  |
+| `downloadSystem`             | boolean | `true`   | Enable download system                                     |
+| `notifySystem`               | boolean | `true`   | Enable system notifications                                |
+| `enableHardwareAcceleration` | boolean | `true`   | Enable Hardware Acceleration                               |
+| `theme`                      | string  | `dark`   | Current Theme Name                                         |
 
 ### Supported Codecs
 
@@ -203,26 +279,7 @@ C:\Users\[USERNAME]\AppData\Roaming\FreedomLoader\config.json
 - `theora` - Theora (legacy open codec)
 
 > [!NOTE]
-> Configuration changes may require an application restart to take effect.
+> Some configuration changes may require an application restart to take effect.
-
-## Project Structure
-
-```
-Freedom-Loader/
-├── build/                   # Build resources and assets
-├── config/                  # Configuration files
-├── public/                  # Frontend assets (HTML, CSS, JavaScript)
-├── ressources/             # Internal resources (icons, binaries)
-├── server/                 # Express server code
-│   ├── routes/            # API route handlers
-│   ├── services/          # Business logic
-│   └── utils/             # Server utilities
-├── .github/                # GitHub configuration and workflows
-├── main.js                 # Electron main process
-├── preload.js             # Electron preload script
-├── config.js              # Global application configuration
-└── package.json           # Dependencies and npm scripts
-```
 
 ### Architecture Overview
 
@@ -230,10 +287,25 @@ Freedom Loader uses a client-server architecture within a single Electron applic
 
 - **Frontend**: HTML/CSS/JavaScript served via Electron's renderer process
 - **Backend**: Express.js server running locally for download management
+- **App modules**: Electron-specific logic (window, IPC, updates, RPC) isolated in `app/`
 - **IPC Bridge**: Secure communication via Electron's preload script
 - **Logging**: Winston-based structured logging with file rotation
 - **Updates**: Automatic checking and installation via electron-updater
 
+## Theme Workshop
+
+Freedom Loader includes a web-based theme creator available at [Freedom Loader Workshop](https://masteracnolo.github.io/Freedom-Loader-Workshop/).
+
+- Create custom themes with a live preview of the actual UI
+- Browse and download community themes
+- Export themes as `.zip` files ready to drop into the `theme/` folder
+- Supports background images, custom colors for every UI element
+
+### Installing a custom theme
+1. Download a `.zip` theme file
+2. Drop it in the `theme/` folder of your Freedom Loader installation
+3. Restart the app - your theme appears in the settings panel
+
 ## Technology Stack
 
 ### Core Technologies
@@ -255,117 +327,69 @@ Freedom Loader uses a client-server architecture within a single Electron applic
 
 ## Development
 
-### Prerequisites
+If you are interested by running a local non compiled version of Freedom Loader or just interested by contributing, see [DEVELOPMENT](./DEVELOPMENT.md)
-
-- Node.js 16.x or higher
-- npm or yarn
-- Git
-
-### Setup
-
-```bash
-# Clone the repository
-git clone https://github.com/MasterAcnolo/Freedom-Loader.git
-cd Freedom-Loader
-
-# Install dependencies
-npm install
-
-# Run in development mode
-npm start
-
-# Build for production
-npm run build
-```
 
 ### Additional Dependencies
 
 This project relies on several external binaries.  
 Some of them are **not included** in the public repository and must be added manually.
 
-You must download the required binaries and place them in the `ressources` folder, using the exact filenames listed below.
+You must download the required binaries and place them in the `resources` folder, using the exact filenames listed below.
 
 #### Required binaries
 
-- **Deno**
+See [BINARIES.md](./BINARIES.md) for how to setup the binaries.
-  - Download from: https://sourceforge.net/projects/deno.mirror/files/latest/download
-  - Rename to: `deno.exe`
-
-- **FFmpeg**
-  - Download from: https://www.ffmpeg.org/download.html
-  - Required files:
-    - `ffmpeg.exe`
-    - `ffprobe.exe`
-
-- **yt-dlp**
-  - Already bundled with the project  
-  - No manual installation required
-
-Final folder structure:
-
-```
-ressources/
-├── deno.exe
-├── ffmpeg.exe
-├── ffprobe.exe
-└── yt-dlp.exe
-```
-
-> These binaries are required for the application to start correctly.  
-> If any of them are missing, an error message will be displayed at application startup.
 
 ### Development Guidelines
 
 - Follow existing code style and conventions
-- Write clear commit messages
+- Write clear, imperative commit messages (e.g., "Add playlist indexing" not "Added")
-- Test thoroughly before submitting changes
+- Test thoroughly on both Windows and Linux before submitting changes
-- Update documentation when adding features
+- Update documentation (README, DEVELOPMENT.md) when adding features
-- Maintain compatibility with Windows 10+
+- Maintain compatibility with:
+  - Windows 10+
+  - Fedora 43+ / Debian 11+ / Ubuntu 20.04+
+  - GNOME and KDE desktop environments (when possible)
+- Consider Linux distribution differences early (see [DEVELOPMENT.md](./DEVELOPMENT.md#linux-development-considerations))
 
 ## Roadmap
 
-### Completed
+See the most recent Roadmap [Here](https://freedomloader.acnolo.fr/Roadmap).
-
-- [x] ~~Website and documentation~~
-- [x] ~~Automatic YT-DLP updates~~
-- [x] ~~Automatic application updates~~
-- [x] ~~Enhanced download status display~~
-- [x] ~~Video chapter extraction~~
-- [x] ~~Custom output path selection~~
-- [x] ~~Custom codec selection~~
-- [x] ~~Settings Panel with toggle switch for features.~~
-
-### In Progress
-
-- [ ] Additional format support (WebM, OGG, etc.)
-- [ ] Refactoring and cleaning the code base.
-- [ ] Chrome/Edge cookie support
-- [ ] Improved multi-site support
-
-### Planned
-
-- [ ] Subtitle download and embedding
-- [ ] Multiple language support
-- [ ] Partial video downloads
-- [ ] Custom file naming patterns
-- [ ] Parallel downloads
-- [ ] Automatic sponsor detection (SponsorBlock integration)
-- [ ] Download history
-- [ ] Linux version
 
 ## Contributing
 
 Contributions are welcome and appreciated. This project benefits from community involvement.
 
+## Submitting a community theme
+
+Want your theme featured in the Workshop? Please **do not open an issue on this repository** for theme submissions.  
+Head over to the [Freedom Loader Workshop repository](https://github.com/MasterAcnolo/Freedom-Loader-Workshop) and open an issue there with your theme files, preview screenshots, and description.
+
 ### Bug Reports
 
-Use the GitHub Issues system and include:
+You can report bugs either using the built-in application system or via the GitHub Issues system.
+
+#### Using the Built-in Report Tool
+
+1. Open Freedom Loader.
+2. Trigger the bug report interface.
+3. Fill in the title and description of the issue.
+4. Choose whether to include today's logs automatically.
+5. Submit the report.
+
+> [!NOTE]
+> If you need to attach extra context like screenshots or screen recordings, it is recommended to use the GitHub Issues
+system instead.
+
+#### Using GitHub Issues
+
+Open a new issue on the GitHub repository and include:
 
 - Clear description of the issue
 - Steps to reproduce
 - Expected vs actual behavior
-- Relevant logs from `AppData\Local\FreedomLoader\logs\`
+- Relevant logs from `AppData\Local\FreedomLoader\logs\` or `~/.local/share/FreedomLoader/logs/`
-- Screenshots if applicable
+- Screenshots or recordings if applicable
 
 ### Feature Requests
 
@@ -384,15 +408,7 @@ Open a feature request issue with:
 5. Update documentation as needed
 6. Submit a pull request with a detailed description
 
-Please read [CONTRIBUTING.md](CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) before contributing.
+Please read [CONTRIBUTING.md](CONTRIBUTING.md), [DEVELOPMENT.md](./DEVELOPMENT.md) and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) before contributing.
-
-## Support
-
-If you find this project useful and want to support its development:
-
-[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://paypal.me/axelnicolas25)
-
-Your support helps maintain infrastructure, develop new features, and keep the project free and ad-free.
 
 ## License
 
@@ -404,11 +420,12 @@ You are free to use, modify, and redistribute this software under the terms of t
 
 - [yt-dlp](https://github.com/yt-dlp/yt-dlp) for the robust download engine
 - [FFmpeg](https://ffmpeg.org/) for media processing capabilities
-- [Deno](https://deno.com/) for helping me bypassing challenges
+- [Deno](https://deno.com/) for helping me to bypass challenges
 - [Electron](https://www.electronjs.org/) for the desktop application framework
 - The open-source community for continuous support and contributions
 - [@SpicyFire21](https://github.com/SpicyFire21) to be the spiciest one
-- Jacques Chirac to love Apples
+- [@AureCX](https://github.com/AureCX) for being the Official Windows Tester!
+- Zakaria for the website icon 
 - All users who test, report issues, and help improve the application
 
 ---
@@ -417,6 +434,6 @@ You are free to use, modify, and redistribute this software under the terms of t
 
 **Freedom Loader** - Put freedom in your downloads
 
-[Website](https://masteracnolo.github.io/FreedomLoader/) • [Download](https://github.com/MasterAcnolo/Freedom-Loader/releases) • [Documentation](https://masteracnolo.github.io/FreedomLoader/pages/wiki.html) • [Report Bug](https://github.com/MasterAcnolo/Freedom-Loader/issues)
+[Website](https://freedomloader.acnolo.fr/) • [Download](https://github.com/MasterAcnolo/Freedom-Loader/releases) • [Documentation](https://freedomloader.acnolo.fr/wiki) • [Report Bug](https://github.com/MasterAcnolo/Freedom-Loader/issues)
 
-</div>
+</div>

SECURITY.md

@@ -2,15 +2,14 @@
 
 ## Supported Versions
 
-We actively maintain and provide security updates for the following versions of Freedom Loader:
+Freedom Loader follows a **latest-only** support model. Security fixes are applied to the current release only — no backports to older versions.
 
-| Version | Supported          |
+| Version       | Supported          |
-| ------- | ------------------ |
+| ------------- | ------------------ |
-| 1.4.x   | :white_check_mark: |
+| Latest stable | :white_check_mark: |
-| 1.3.x   | :white_check_mark: |
+| Older versions | :x:               |
-| < 1.3.0 | :x:                |
 
-**Note**: We recommend always using the latest version to benefit from the most recent security patches and features.
+I recommend always running the latest version. The built-in auto-updater will notify you when a new release is available. Older versions will not receive security patches regardless of severity.
 
 ## Reporting a Vulnerability
 
@@ -32,37 +31,40 @@ Instead, please report security issues privately by:
 
 ### What to Expect
 
-- **Acknowledgment**: We will acknowledge receipt of your report within 48 hours
+- **Acknowledgment**: I will acknowledge receipt of your report within 48 hours
-- **Assessment**: We will assess the vulnerability and determine its severity
+- **Assessment**: I will assess the vulnerability and determine its severity
-- **Updates**: We will keep you informed of our progress
+- **Updates**: I will keep you informed of our progress
-- **Resolution**: We aim to release a fix within 7-14 days for critical vulnerabilities
+- **Resolution**: I aim to release a fix within 7-14 days for critical vulnerabilities
-- **Credit**: We will credit you in the release notes (unless you prefer to remain anonymous)
+- **Credit**: I will credit you in the release notes (unless you prefer to remain anonymous)
 
 ## Security Best Practices for Users
 
-When using Freedom Loader, we recommend:
+When using Freedom Loader, I recommend:
 
 ### General Security
 
-- **Keep Updated**: Always use the latest version of Freedom Loader
+- **Keep Updated**: Always use the latest version of Freedom Loader — older versions receive no security patches
-- **Official Sources**: Download only from official releases on [GitHub](https://github.com/MasterAcnolo/Freedom-Loader/releases)
+- **Official Sources**: Download only from official sources:
-- **Verify Downloads**: Check that installers are properly signed (Windows SmartScreen may show warnings for new releases)
+    - [GitHub Releases](https://github.com/MasterAcnolo/Freedom-Loader/releases)
+    - [Fedora COPR](https://copr.fedorainfracloud.org/coprs/masteracnolo/freedom-loader/)
+    - [Snap Store](https://snapcraft.io/freedom-loader)
+- **Verify Downloads**: Check that installers are from one of the above sources
 - **Antivirus**: Keep your antivirus software up to date
 
 ### Configuration Security
 
-- **Download Path**: Only set download paths within your user directory (`C:\Users\[USERNAME]\...`)
+- **Download Path**: Only set download paths within your user directory
-- **Cookies**: Be aware that Firefox cookies are used for authentication—keep Firefox secure
+- **Cookies**: Be aware that Firefox cookies are used for authentication — keep Firefox secure
-- **Logs**: Logs may contain sensitive information—avoid sharing them publicly without review
+- **Logs**: Logs may contain sensitive information such as URLs or local paths — avoid sharing them publicly without review
 
 ### Privacy Considerations
 
 Freedom Loader respects your privacy:
 
-- **No Data Collection**: We don't collect, store, or transmit your personal data
+- **No Data Collection**: I don't collect, store, or transmit your personal data
 - **No Telemetry**: No usage tracking or analytics
 - **Local Operation**: All downloads are processed locally on your machine
-- **Optional Features**: Discord RPC is optional and can be disabled
+- **Optional Features**: Discord RPC is optional and can be disabled in settings
 
 ## Known Security Considerations
 
@@ -71,16 +73,16 @@ Freedom Loader respects your privacy:
 Freedom Loader accesses Firefox cookies to download protected content. This is:
 
 - **By Design**: Required for age-restricted or member-only content
-- **Local Only**: Cookies are read locally and never transmitted
+- **Local Only**: Cookies are read locally and never transmitted outside your machine
-- **User Controlled**: You can control what content you download
+- **User Controlled**: You control what content you download
 
 ### Native Dependencies
 
-Freedom Loader bundles native binaries:
+Freedom Loader bundles the following official binaries:
 
-- **yt-dlp**: Official builds from [yt-dlp/yt-dlp](https://github.com/yt-dlp/yt-dlp)
+- **yt-dlp**: Official builds from [yt-dlp/yt-dlp](https://github.com/yt-dlp/yt-dlp) — auto-updated on each launch
 - **FFmpeg**: Official builds from [FFmpeg.org](https://ffmpeg.org/)
-- **Deno**: Official builds from [Deno.land](https://deno.land/)
+- **Deno**: Official builds from [Deno.com](https://deno.com/)
 
 These dependencies are verified and updated regularly.
 
@@ -91,13 +93,13 @@ New releases may trigger Windows Defender warnings because:
 - The application is not yet widely distributed
 - Code signing certificates are expensive for open-source projects
 
-This is expected behavior for new releases. The warning will decrease as more users download the software.
+This is expected behavior for new releases and will diminish as more users download the software.
 
 ## Vulnerability Disclosure Policy
 
 ### Our Commitment
 
-We are committed to:
+I am committed to:
 
 - Responding promptly to security reports
 - Working with security researchers to verify and address issues
@@ -107,9 +109,9 @@ We are committed to:
 ### Disclosure Timeline
 
 1. **Day 0**: Vulnerability reported privately
-2. **Day 1-2**: Acknowledgment sent to reporter
+2. **Day 1–2**: Acknowledgment sent to reporter
-3. **Day 3-7**: Vulnerability assessed and fix developed
+3. **Day 3–7**: Vulnerability assessed and fix developed
-4. **Day 7-14**: Fix released (critical vulnerabilities prioritized)
+4. **Day 7–14**: Fix released (critical vulnerabilities prioritized)
 5. **Day 14+**: Public disclosure (coordinated with reporter)
 
 ### Scope
@@ -129,16 +131,16 @@ The following are generally not considered security vulnerabilities:
 - Issues requiring physical access to the user's machine
 - Social engineering attacks
 - Denial of service against third-party services
-- Issues in third-party dependencies (report to upstream projects)
+- Issues in third-party dependencies (report to upstream projects directly)
-- Missing security headers on local HTTP server (no remote access)
+- Missing security headers on the local HTTP server (not exposed remotely)
 
 ## Security Updates
 
 Security updates are released as:
 
-- **Patch Releases**: For critical security fixes (e.g., 1.4.1 → 1.4.2)
+- **Patch Releases**: For critical security fixes (e.g., 1.6.0 → 1.6.1)
 - **Automatic Updates**: Users are notified via the built-in update system
-- **Release Notes**: Security fixes are clearly marked in changelog
+- **Release Notes**: Security fixes are clearly marked in the changelog
 
 ## Additional Resources
 
@@ -150,6 +152,7 @@ Security updates are released as:
 
 For security-related questions or concerns:
 
+- **Email**: masteracnolo25@gmail.com
 - **GitHub**: [@MasterAcnolo](https://github.com/MasterAcnolo)
 
 ---

app/autoUpdater.js

@@ -0,0 +1,167 @@
+/**
+ * Electron auto-update system using electron-updater.
+ *
+ * Handles:
+ * - update detection
+ * - user confirmation dialogs
+ * - download progress streaming to renderer
+ * - application restart and installation
+ */
+
+const { autoUpdater } = require("electron-updater");
+const { logger } = require("../server/logger");
+
+/**
+ * Configures autoUpdater behavior:
+ * - disables automatic download
+ * - disables automatic installation on quit
+ * (manual user-controlled update flow)
+ */
+autoUpdater.autoDownload = false;
+autoUpdater.autoInstallOnAppQuit = false;
+
+let updateAvailable = false;
+
+/**
+ * Determines how the update should be handled based on the platform
+ * @returns {"auto" | "snap" | "flatpak" | "linux-native"}
+ */
+function getUpdateEnvironment() {
+  if (
+    process.env.APPIMAGE ||
+    process.platform === "win32" ||
+    process.platform === "darwin"
+  ) {
+    return "auto";
+  }
+  if (process.env.SNAP) return "snap";
+  if (process.env.FLATPAK_ID) return "flatpak";
+
+  return "linux-native";
+}
+
+/**
+ * Initializes application auto-update lifecycle.
+ *
+ * Registers update event listeners and binds them to:
+ * - UI dialogs (Electron dialog)
+ * - renderer communication (webContents)
+ * - download/install flow control
+ *
+ * @param {BrowserWindow} mainWindow - main Electron window instance
+ */
+function initAutoUpdater(mainWindow) {
+  /**
+   * Triggered when a new version is detected.
+   * Prompts user to install or defer update.
+   */
+  autoUpdater.on("update-available", async (info) => {
+    logger.info(`Update available: ${info.version}`);
+
+    mainWindow?.webContents.send("update-available", {
+      version: info.version,
+      environment: getUpdateEnvironment(),
+    });
+    updateAvailable = true;
+
+  });
+
+  /**
+   * Streams update download progress to renderer process.
+   * Used to update UI progress bar and status indicators.
+   */
+  autoUpdater.on("download-progress", (progress) => {
+    logger.info(`Download progress: ${Math.round(progress.percent)}%`);
+    mainWindow?.webContents.send("update-progress", {
+      percent: progress.percent,
+      bytesPerSecond: progress.bytesPerSecond,
+      transferred: progress.transferred,
+      total: progress.total,
+    });
+  });
+
+  /**
+   * Triggered when update has been fully downloaded.
+   * Prompts user to restart application and install update.
+   */
+  autoUpdater.on("update-downloaded", async (info) => {
+    logger.info(`Update downloaded: ${info.version}`);
+
+    mainWindow?.webContents.send("update-downloaded", info);
+
+
+  });
+
+  /**
+   * Handles update system errors.
+   * Logs failure and displays an error dialog to user.
+   */
+  autoUpdater.on("error", (err) => {
+    const msg = err?.message || "";
+
+    /**
+     * If no update is available, I put this because there is no Linux version before 1.6.0
+     * @type {boolean}
+     */
+    const isNoUpdateAvailable =
+      /404/.test(msg) || /Cannot find latest.*\.yml/i.test(msg);
+
+    if (isNoUpdateAvailable) {
+      logger.warn("Auto update: no update metadata found (probably no previous release), ignoring", msg);
+      return;
+    }
+
+    logger.error("Auto update error:", err);
+    mainWindow?.webContents.send("update-error", msg);
+  });
+
+  checkForUpdates();
+}
+
+/**
+ * Manually triggers update check on startup.
+ * Separated from init for reusability and testability.
+ */
+async function checkForUpdates() {
+
+  // If app is was installed from SNAP or Flatpak.
+  if (process.env.SNAP || process.env.FLATPAK_ID) return;
+  if (!require("electron").app.isPackaged) return;
+
+  try {
+    await autoUpdater.checkForUpdates();
+  } catch (err) {
+    logger.error("Update check failed:", err.message);
+  }
+}
+
+/**
+ * Manually triggers update download.
+ * Used when user accepts update prompt.
+ */
+async function downloadUpdate() {
+  try {
+    await autoUpdater.downloadUpdate();
+  } catch (err) {
+    logger.error("Download failed:", err.message);
+    throw err;
+  }
+}
+
+/**
+ * Immediately quits application and installs downloaded update.
+ */
+function installUpdate() {
+  autoUpdater.quitAndInstall();
+}
+
+function isUpdateAvailable() {
+  return updateAvailable;
+}
+
+module.exports = {
+  initAutoUpdater,
+  downloadUpdate,
+  installUpdate,
+  isUpdateAvailable,
+};

app/changelogManager.js

@@ -0,0 +1,177 @@
+const { app } = require("electron");
+const fs = require("fs");
+const path = require("path");
+const https = require("https");
+const config = require("../config");
+const { logger } = require("../server/logger");
+
+/** Maximum age of the cached release list before it must be refreshed. */
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+/** Filename used to persist changelog data in the Electron user data folder. */
+const CACHE_FILE_NAME = "changelog-cache.json";
+
+/** GitHub API endpoint containing the application's published releases. */
+const RELEASES_URL = "https://api.github.com/repos/MasterAcnolo/Freedom-Loader/releases";
+
+/** Returns the path of the local changelog cache file. */
+function getCachePath() {
+  return path.join(app.getPath("userData"), CACHE_FILE_NAME);
+}
+
+/**
+ * Extracts the numeric major, minor, and patch parts from a version string.
+ *
+ * @param {string} version - Version string or release tag
+ * @returns {number[]|null} Parsed version parts, or null when invalid
+ */
+function normalizeVersion(version) {
+  const match = String(version || "").match(/(\d+)\.(\d+)\.(\d+)/);
+  return match ? match.slice(1).map(Number) : null;
+}
+
+/**
+ * Compares two semantic version strings.
+ *
+ * @param {string} left - First version to compare
+ * @param {string} right - Second version to compare
+ * @returns {number} Negative, zero, or positive comparison result
+ */
+function compareVersions(left, right) {
+  const leftParts = normalizeVersion(left) || [0, 0, 0];
+  const rightParts = normalizeVersion(right) || [0, 0, 0];
+
+  for (let index = 0; index < 3; index += 1) {
+    if (leftParts[index] !== rightParts[index]) {
+      return leftParts[index] - rightParts[index];
+    }
+  }
+
+  return 0;
+}
+
+/** Reads and parses the cached changelog, if one is available. */
+function readCache() {
+  try {
+    return JSON.parse(fs.readFileSync(getCachePath(), "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+/** Persists the fetched releases together with their cache timestamp. */
+function writeCache(releases) {
+  try {
+    fs.writeFileSync(
+      getCachePath(),
+      JSON.stringify({ cachedAt: Date.now(), releases }, null, 2),
+      "utf8",
+    );
+  } catch (error) {
+    logger.warn(`Unable to cache changelog: ${error.message}`);
+  }
+}
+
+/**
+ * Fetches published releases from GitHub and maps them to the UI data shape.
+ *
+ * @returns {Promise<object[]>} Published releases
+ */
+function fetchReleases() {
+  return new Promise((resolve, reject) => {
+    const request = https.get(
+      RELEASES_URL,
+      {
+        headers: {
+          Accept: "application/vnd.github+json",
+          "User-Agent": "Freedom-Loader",
+        },
+      },
+      (response) => {
+        let body = "";
+        response.setEncoding("utf8");
+        response.on("data", (chunk) => {
+          body += chunk;
+        });
+        response.on("end", () => {
+          // Do not attempt to parse an error response as a release list.
+          if (response.statusCode !== 200) {
+            reject(new Error(`GitHub returned HTTP ${response.statusCode}`));
+            return;
+          }
+
+          try {
+            // Draft releases are not visible to users and should not appear in the changelog.
+            const releases = JSON.parse(body)
+              .filter((release) => !release.draft)
+              .map((release) => ({
+                version: release.tag_name,
+                name: release.name || release.tag_name,
+                date: release.published_at || release.created_at,
+                body: release.body || "No changelog available.",
+                url: release.html_url,
+              }));
+            resolve(releases);
+          } catch (error) {
+            reject(error);
+          }
+        });
+      },
+    );
+
+    request.setTimeout(10000, () => {
+      request.destroy(new Error("Changelog request timed out"));
+    });
+    request.on("error", reject);
+  });
+}
+
+/**
+ * Returns cached or freshly fetched releases and identifies unread versions.
+ *
+ * @returns {Promise<object>} Changelog data for the renderer
+ */
+async function getChangelog() {
+  const cache = readCache();
+  let releases = cache?.releases || [];
+  const cacheIsFresh = cache && cache.releases?.length > 0 && Date.now() - cache.cachedAt < CACHE_TTL_MS;
+
+  // Refresh stale or missing data, while keeping the last cache as a fallback.
+  if (!cacheIsFresh) {
+    try {
+      releases = await fetchReleases();
+      writeCache(releases);
+    } catch (error) {
+      logger.warn(`Unable to retrieve changelog: ${error.message}`);
+    }
+  }
+
+  const lastSeenVersion = cache?.lastSeenVersion || null;
+
+  // Without a previous version, all available releases are considered unread.
+  const unreadReleases = lastSeenVersion
+    ? releases.filter((release) => compareVersions(release.version, lastSeenVersion) > 0)
+    : releases;
+
+  return {
+    // An empty release list means that the fetch failed or returned no releases.
+    error: releases.length === 0,
+    currentVersion: config.version,
+    lastSeenVersion,
+    hasUnread: unreadReleases.length > 0,
+    releases,
+    unreadReleases,
+  };
+}
+
+/** Marks the current application version as seen in the local cache. */
+function markChangelogSeen() {
+  const cache = readCache() || { releases: [] };
+  cache.lastSeenVersion = config.version;
+  cache.cachedAt = cache.cachedAt || 0  ;
+  fs.mkdirSync(path.dirname(getCachePath()), { recursive: true });
+  fs.writeFileSync(getCachePath(), JSON.stringify(cache, null, 2), "utf8");
+  return true;
+}
+
+module.exports = { getChangelog, markChangelogSeen };

app/dependencyCheck.js

@@ -0,0 +1,67 @@
+const fs = require("fs");
+const { app, dialog } = require("electron");
+const { logger } = require("../server/logger");
+
+/**
+ * Verifies that all required native binaries exist before the app starts.
+ *
+ * This includes:
+ * - yt-dlp (download engine)
+ * - ffmpeg (media processing)
+ * - ffprobe (media inspection)
+ * - deno (JS runtime used by yt-dlp hooks)
+ *
+ * If any dependency is missing:
+ * - logs the error
+ * - shows a blocking Electron error dialog
+ * - exits the application
+ *
+ * @returns {boolean} true if all dependencies are present, false otherwise
+ */
+function checkNativeDependencies() {
+  /**
+   * Native dependency paths are resolved at runtime from the server helpers.
+   * This ensures correct resolution in both dev and packaged builds.
+   */
+  const { binaryPaths } = require("../server/helpers/path.helpers");
+
+  const isWindows = process.platform === "win32";
+
+  const addExe = isWindows ? ".exe" : "";
+
+  /**
+   * List of required external executables used by the application runtime.
+   * Each entry defines a binary name and its resolved absolute path.
+   */
+  const deps = [
+    { name: `yt-dlp${addExe}`,  path: binaryPaths.ytDlp },
+    { name: `ffmpeg${addExe}`,  path: binaryPaths.ffmpeg },
+    { name: `ffprobe${addExe}`, path: binaryPaths.ffprobe },
+    { name: `deno${addExe}`,    path: binaryPaths.deno },
+  ];
+
+  const missing = deps.filter(d => !fs.existsSync(d.path));
+  if (missing.length === 0) return true;
+
+  /**
+   * Human-readable list of missing binaries for logging and user dialog display.
+   */
+  const list = missing.map(d => d.name).join(", ");
+  logger.error(`Missing dependencies: ${list}`);
+
+  /**
+   * Defers error dialog until Electron app is fully initialized.
+   * Required to safely display modal dialogs before quit.
+   */
+  app.whenReady().then(() => {
+    dialog.showErrorBox(
+      "Missing dependencies",
+      `The following files are missing in the 'resources' folder:\n${list}\n\nThe application will now exit. Try to reinstall.`
+    );
+    app.quit();
+  });
+
+  return false;
+}
+
+module.exports = { checkNativeDependencies };

app/discordRPC.js

@@ -0,0 +1,136 @@
+const config = require('../config');
+const RPC = require("discord-rpc");
+const { logger } = require("../server/logger");
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * Discord Application Client ID used to authenticate the RPC connection.
+ * Comes from the application configuration.
+ */
+const clientId = `${config.DiscordRPCID}`;
+
+/**
+ * Discord RPC client instance using IPC transport.
+ * Maintains a persistent connection with Discord desktop client.
+ */
+const rpc = new RPC.Client({ transport: "ipc" });
+
+/**
+ * Optional interval reference used for future RPC refresh logic.
+ * Currently reserved for potential periodic activity updates.
+ */
+let intervalId;
+
+/**
+ * Automagically fixes Discord RPC on Linux for Sandboxed versions (Flatpak & Snap).
+ * It creates a symlink from the sandbox IPC socket to the standard system location.
+ *
+ * @returns {void}
+ */
+function fixLinuxDiscordRPC() {
+  // Only execute on Linux
+  if (process.platform !== "linux") return;
+
+  /**
+   * Get the user's runtime directory (e.g., /run/user/1000).
+   * @type {string}
+   */
+  const xdgDir = process.env.XDG_RUNTIME_DIR || `/run/user/${process.getuid()}`;
+  const standardSocket = path.join(xdgDir, "discord-ipc-0");
+
+  // If the standard socket already exists (Native Discord), do nothing.
+  if (fs.existsSync(standardSocket)) return;
+
+  /**
+   * Paths for known sandboxed Discord IPC sockets.
+   */
+  const flatpakSocket = path.join(xdgDir, "app/com.discordapp.Discord/discord-ipc-0");
+  const snapSocket = path.join(xdgDir, "snap.discord/discord-ipc-0");
+
+  let targetSocket = null;
+
+  if (fs.existsSync(flatpakSocket)) {
+    targetSocket = flatpakSocket;
+  } else if (fs.existsSync(snapSocket)) {
+    targetSocket = snapSocket;
+  }
+
+  // If a sandboxed socket is found, create the symlink stealthily.
+  if (targetSocket) {
+    try {
+      fs.symlinkSync(targetSocket, standardSocket);
+      logger.info(`Discord RPC bridge created automatically targeting: ${targetSocket}`);
+    } catch (err) {
+      logger.warn(`Failed to create Discord RPC bridge: ${err.message}`);
+    }
+  }
+}
+
+/**
+ * Initializes Discord Rich Presence (RPC) connection.
+ *
+ * Responsibilities:
+ * - Connect to Discord via IPC transport
+ * - Set application presence (title, state, timestamps, assets)
+ * - Handle connection errors gracefully via logger
+ *
+ * Triggered once during application startup.
+ */
+function startRPC() {
+
+  /**
+   * Patch that create Simlinks for Linux environment;
+   */
+  fixLinuxDiscordRPC();
+
+  /**
+   * Rich Presence payload describing current application state
+   * shown in Discord user profile.
+   */
+  rpc.on("ready", () => {
+    const presence = {
+      largeImageKey: "icon",
+      smallImageKey: "acnolo_pfp",
+      smallImageText: "By MasterAcnolo",
+      startTimestamp: new Date(),
+      details: `Open Source Download Tools - ${config.version}`,
+      state: "freedomloader.acnolo.fr",
+    };
+    rpc.clearActivity();
+    rpc.setActivity(presence);
+
+  });
+
+  rpc.login({ clientId }).catch(() => {
+    // Since 1.6.2, it no longer print the error. This is because if discord is not opened, it will send an error.
+    // logger.error("Unable to connect to the RPC:", err);
+    logger.info("Unable to connect to the Discord RPC. Discord is maybe not launched");
+  });
+}
+
+/**
+ * Gracefully stops Discord Rich Presence connection.
+ *
+ * Responsibilities:
+ * - Clear any running intervals
+ * - Remove current activity from Discord if connected
+ * - Destroy RPC transport connection
+ * - Handle cleanup errors safely
+ */
+async function stopRPC() {
+  if (rpc) {
+    try {
+      if (intervalId) clearInterval(intervalId);
+
+      await rpc.destroy();
+
+    } catch (err) {
+      // Since 1.6.2, it no longer print the error. This is because if discord is not opened, it will send an error.
+      // logger.error("Error while closing the RPC:", err);
+    }
+  }
+}
+
+
+module.exports = { startRPC, stopRPC};

app/ipcHandlers.js

@@ -0,0 +1,306 @@
+/**
+ * Electron IPC main process registry.
+ *
+ * Centralizes all IPC channels exposed to renderer process:
+ * - Application info (version, features)
+ * - Window controls (topbar actions)
+ * - File system interactions (theme, config, download paths)
+ * - UI state synchronization (progress bar)
+ *
+ * Acts as the bridge between renderer and privileged Node/Electron APIs.
+ */
+
+const { ipcMain, dialog, shell } = require("electron");
+const fs = require("fs");
+const { logger, logDir } = require("../server/logger");
+const { configFeatures, featuresPath, devMode } = require("../config");
+const { getThemes, reloadThemes } = require("./themeManager");
+const config = require("../config");
+const { validateDownloadPath, getDefaultDownloadPath } = require("./pathValidator");
+const { userThemesPath } = require("../server/helpers/path.helpers");
+const { createSystemTray, destroyTray } = require("./tray");
+const {sendReport, checkReportService, getReportServiceStatus} = require("./sendReport");
+const { isUpdateAvailable, downloadUpdate, installUpdate } = require("./autoUpdater");
+const { getChangelog, markChangelogSeen } = require("./changelogManager");
+
+/**
+ * Security whitelist for feature flags that can be modified at runtime.
+ *
+ * Prevents unauthorized or unexpected configuration keys from being persisted.
+ * Acts as a basic validation layer for IPC "set-feature".
+ */
+const FEATURE_WHITELIST = new Set([
+  "autoUpdate",
+  "systemTray",
+  "discordRPC",
+  "customTopBar",
+  "autoCheckInfo",
+  "addThumbnail",
+  "addMetadata",
+  "verboseLogs",
+  "autoDownloadPlaylist",
+  "keepPlaylistOrder",
+  "customCodec",
+  "theme",
+  "createPlaylistFolders",
+  "notifySystem",
+  "enableHardwareAcceleration"
+]);
+
+/**
+ * Absolute path to the configuration file storing feature flags.
+ */
+const configFolderPath = featuresPath;
+
+/**
+ * Directory containing user-installed themes.
+ */
+const themeFolderPath = userThemesPath;
+
+/**
+ * Registers all IPC handlers and event listeners for Electron main process.
+ *
+ * This function wires renderer → main communication channels:
+ * - synchronous queries (handle)
+ * - fire-and-forget events (on)
+ *
+ * @param {Function} getMainWindow - Function returning current BrowserWindow instance
+ */
+function registerIpcHandlers(getMainWindow) {
+  /**
+   * Returns application version from config.
+   */
+  ipcMain.handle("version", () => config.version);
+
+  /**
+   * Retrieves the changelog from cache or GitHub API.
+   */
+  ipcMain.handle("get-changelog", () => getChangelog());
+
+  /**
+   * Marks all changelog entries as seen and updates cache.
+   */
+  ipcMain.handle("mark-changelog-seen", () => markChangelogSeen());
+
+  /**
+   * Returns runtime feature configuration object.
+   */
+  ipcMain.handle("features", () => configFeatures);
+
+  /**
+   * Opens native folder selection dialog and validates selected path.
+   *
+   * Ensures:
+   * - user cancellation is handled safely
+   * - selected path is validated against security rules
+   * - unsafe directories are rejected
+   */
+  ipcMain.handle("select-download-folder", async () => {
+    const result = await dialog.showOpenDialog({ properties: ["openDirectory"] });
+    if (result.canceled) {
+      logger.info("Folder selection cancelled by user");
+      return null;
+    }
+    try {
+      const validated = validateDownloadPath(result.filePaths[0]);
+      logger.info(`Folder selected and validated: ${validated}`);
+      return validated;
+    } catch (err) {
+      logger.warn(`Unsafe or invalid folder rejected: ${err.message}`);
+      throw err;
+    }
+  });
+
+  ipcMain.handle("validate-download-path", (_, userPath) => validateDownloadPath(userPath));
+  ipcMain.handle("get-default-download-path", () => getDefaultDownloadPath());
+
+  /**
+   * Updates Windows/macOS taskbar progress indicator.
+   *
+   * @param {number} percent - Progress value (0–100)
+   */
+  ipcMain.on("set-progress", (_, percent) => {
+    getMainWindow()?.setProgressBar(percent / 100);
+  });
+
+  /**
+   * Window minimize request from renderer.
+   */
+  ipcMain.on("window-minimize", () => {
+    // Minimize to tray
+    if (configFeatures.systemTray) {
+      getMainWindow()?.hide();
+      logger.info("Window Minimized in SystemTray (Using Minimize Button)");
+    } else {
+      // Native minimize
+      getMainWindow()?.minimize();
+      logger.info("Window minimized normally");
+    }
+  });
+
+  /**
+   * Toggles maximize/unmaximize state of main window.
+   */
+  ipcMain.on("window-maximize", () => {
+    const win = getMainWindow();
+    if (!win) return;
+    win.isMaximized() ? win.unmaximize() : win.maximize();
+  });
+
+  /**
+   * Closes the main application window.
+   */
+  ipcMain.on("window-close", () => getMainWindow()?.close());
+
+  /**
+   * Opens Chromium DevTools in detached mode.
+   */
+  ipcMain.on("open-devtools", () =>
+    getMainWindow()?.webContents.openDevTools({ mode: "detach" })
+  );
+
+  /**
+   * Opens application logs directory in system file explorer.
+   */
+  ipcMain.on("open-logs", () => logDir && shell.openPath(logDir));
+
+  /**
+   * Opens external website in default browser.
+   */
+  ipcMain.on("open-website", () =>
+      shell.openExternal("https://freedomloader.acnolo.fr/")
+  );
+
+  /**
+   * Opens official wiki page in external browser.
+   */
+  ipcMain.on("open-wiki", () =>
+      shell.openExternal("https://freedomloader.acnolo.fr/wiki")
+  );
+
+  /**
+   * Opens workshop page in external browser.
+   */
+  ipcMain.on("open-workshop", () =>
+    shell.openExternal("https://masteracnolo.github.io/Freedom-Loader-Workshop")
+  );
+
+  /**
+   * Opens configuration folder in system file explorer.
+   */
+  ipcMain.on("open-config", () => shell.openPath(configFolderPath));
+
+  /**
+   * Front end logger
+   */
+  ipcMain.on("log-error", (_, message) => logger.error(`[Frontend] ${message}`));
+  ipcMain.on("log-info", (_, message) => logger.info(`[Frontend] ${message}`));
+  ipcMain.on("log-warn", (_, message) => logger.warn(`[Frontend] ${message}`));
+
+  /**
+   * Retrieves available themes from filesystem.
+   */
+  ipcMain.handle("get-themes", () => getThemes());
+
+  /**
+   * Opens theme directory in file explorer.
+   */
+  ipcMain.on("open-theme", () => shell.openPath(themeFolderPath));
+
+  /**
+   * Reloads themes from disk dynamically.
+   */
+  ipcMain.handle("reload-themes", async () => {
+    return await reloadThemes();
+  });
+
+  /**
+   * Send bug report
+   */
+  ipcMain.handle("send-report", async (_, params) => {
+    return await sendReport(params);
+  });
+
+  ipcMain.handle("get-report-service-status", async () => {
+    await checkReportService();
+    return getReportServiceStatus();
+  });
+
+  ipcMain.handle("is-update-available", () => {
+    return isUpdateAvailable();
+  });
+
+  ipcMain.handle("download-update", async () => {
+    return await downloadUpdate();
+  });
+
+  ipcMain.handle("install-update", async () => {
+    return installUpdate();
+  });
+
+  ipcMain.on("open-release-page", () => {
+    shell.openExternal(
+      "https://github.com/MasterAcnolo/Freedom-Loader/releases/latest",
+    );
+  });
+
+  /**
+   * Updates a runtime feature flag and persists it to disk.
+   *
+   * Flow:
+   * - Validates key against whitelist
+   * - Prevents unnecessary writes if value is unchanged
+   * - Updates in-memory config object
+   * - Persists to configuration file
+   *
+   * Security note:
+   * Only whitelisted keys can be modified via IPC to prevent config injection.
+   *
+   * @param {Electron.IpcMainEvent} event
+   * @param {{key: string, value: any}} payload
+   * @returns {boolean} success state
+   */
+  ipcMain.handle("set-feature", (event, { key, value }) => {
+    try {
+      if (!FEATURE_WHITELIST.has(key)) {
+        logger.warn(`Rejected feature (not whitelisted): ${key}`);
+        return false;
+      }
+
+      if (configFeatures[key] === value) {
+        return true;
+      }
+
+      /**
+       * Dynamically intercepts and applies System Tray state changes at runtime.
+       * Instantiates or destroys the tray icon immediately to prevent window
+       * lifecycle desynchronization (e.g., minimizing a window to a non-existent tray).
+       */
+      if (key === "systemTray") {
+        if (value === true) {
+          logger.info("System Tray enabled dynamically.");
+          createSystemTray(devMode);
+        } else {
+          logger.info("System Tray disabled dynamically.");
+          destroyTray();
+        }
+      }
+
+      configFeatures[key] = value;
+
+      fs.writeFileSync(
+        configFolderPath,
+        JSON.stringify(configFeatures, null, 2),
+        "utf-8",
+      );
+
+      logger.info(`Feature updated: ${key} = ${value}`);
+      return true;
+    } catch (err) {
+      logger.error(`set-feature failed (${key}): ${err.message}`);
+      return false;
+    }
+  });
+}
+
+module.exports = { registerIpcHandlers };

app/pathValidator.js

@@ -0,0 +1,85 @@
+const fs = require("fs");
+const path = require("path");
+const { logger } = require("../server/logger");
+
+/**
+ * Cached resolved default download path.
+ * Initialized lazily on first access to avoid unnecessary imports.
+ */
+let _defaultPath = null;
+
+/**
+ * Returns the application's default download directory.
+ *
+ * This value is lazily loaded and cached after first call.
+ * The path originates from server configuration helpers.
+ *
+ * @returns {string} Absolute default download path
+ */
+function getDefaultDownloadPath() {
+
+  if (!_defaultPath) {
+
+    /**
+     * Lazy-loaded dependency providing the configured default download folder.
+     * Required only when function is executed to reduce startup cost.
+     */
+    const { defaultDownloadFolder } = require("../server/helpers/path.helpers");
+
+    _defaultPath = defaultDownloadFolder;
+
+  }
+  return _defaultPath;
+}
+
+/**
+ * Validates and sanitizes a user-provided download path.
+ *
+ * Steps performed:
+ * - Resolves absolute real filesystem path
+ * - Normalizes symbolic links via realpathSync
+ * - Checks path safety rules (blocks system-critical directories)
+ * - Falls back to default path if input is empty
+ *
+ * @param {string} userPath - User-provided directory path
+ * @returns {string} Sanitized absolute path
+ * @throws Error If path is invalid, unsafe, or inaccessible
+ */
+function validateDownloadPath(userPath) {
+  
+  /**
+   * Lazy-loaded helper used to enforce safe directory constraints.
+   * Prevents writes to protected system folders.
+   */
+  const { isSafePath } = require("../server/helpers/validation.helpers");
+
+  if (!userPath) return getDefaultDownloadPath();
+
+  try {
+      const absolutePath = path.resolve(userPath);
+
+      if (!fs.existsSync(absolutePath)) {
+        fs.mkdirSync(absolutePath, { recursive: true });
+        logger.info(`Download folder created: ${absolutePath}`);
+      }
+
+      const real = fs.realpathSync(absolutePath);
+
+      if (!isSafePath(real)) {
+          logger.error("Path not allowed: system folders are blocked!");
+      }
+
+      return real;
+    }
+
+    catch (err) {
+      /**
+       * Handles invalid filesystem paths, permissions issues, or resolution failures.
+       * Logs diagnostic information before propagating a sanitized error.
+       */
+      logger.error(`Invalid download path: ${userPath} — ${err.message}`);
+      throw new Error(`Invalid or inaccessible path: ${err.message}`);
+    }
+}
+
+module.exports = { validateDownloadPath, getDefaultDownloadPath };

app/sendReport.js

@@ -0,0 +1,108 @@
+const fs = require("fs");
+const path = require("path");
+const {logger, logDir} = require("../server/logger");
+
+const REPORT_URL = "https://freedom-loader-report.acnolo.fr";
+const REPORT_SERVICE_TIMEOUT_MS = 5000;
+let reportServiceStatus = {
+    status: "checking",
+    message: "Checking bug report service..."
+};
+let reportServiceCheck = null;
+
+async function checkReportService() {
+    if (reportServiceCheck) {
+        return reportServiceCheck;
+    }
+
+    reportServiceCheck = (async () => {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), REPORT_SERVICE_TIMEOUT_MS);
+
+        try {
+            const response = await fetch(REPORT_URL, {
+                method: "GET",
+                signal: controller.signal
+            });
+
+            if (response.status >= 500) {
+                throw new Error(`Server responded with status ${response.status}`);
+            }
+
+            reportServiceStatus = {
+                status: "online",
+                message: "Bug report service is available."
+            };
+            logger.info(`Bug report service is reachable (status ${response.status}).`);
+        } catch (err) {
+            reportServiceStatus = {
+                status: "offline",
+                message: "Bug report service is unavailable. Reports may fail to send."
+            };
+            logger.warn(`Bug report service is unreachable: ${err.message}`);
+        } finally {
+            clearTimeout(timeout);
+        }
+
+        return reportServiceStatus;
+    })();
+
+    return reportServiceCheck;
+}
+
+function getReportServiceStatus() {
+    return reportServiceStatus;
+}
+
+async function sendReport(params) {
+    try {
+        const {title, description, includeLogs} = params;
+
+        if (!title || !description) {
+            throw new Error("Title and description are required.");
+        }
+
+        const formData = new FormData();
+        formData.append("title", title);
+        formData.append("context", description);
+
+        if (includeLogs === "yes" && logDir) {
+            // YYYY-MM-DD
+            const now = new Date();
+            const today = [
+                now.getFullYear(),
+                String(now.getMonth() + 1).padStart(2, "0"),
+                String(now.getDate()).padStart(2, "0")
+            ].join("-");
+
+            const logFilePath = path.join(logDir, `LOGS-${today}.log`);
+
+            if (fs.existsSync(logFilePath)) {
+                const logFileContent = fs.readFileSync(logFilePath);
+                const blob = new Blob([logFileContent], {type: "text/plain"});
+                formData.append("file", blob, `LOGS-${today}.log`);
+                logger.info("Logs attached to bug report.");
+            } else {
+                logger.warn(`Log file not found for today: ${logFilePath}`);
+            }
+        }
+
+        const response = await fetch(REPORT_URL, {
+            method: "POST",
+            body: formData
+        });
+
+        if (!response.ok) {
+            logger.error(`Server returned an error: ${response.status}`);
+            throw new Error(`Server responded with status ${response.status}`);
+        }
+
+        logger.info("Bug report successfully sent.");
+        return true;
+    } catch (err) {
+        logger.error(`Failed to send bug report: ${err.message}`);
+        throw err;
+    }
+}
+
+module.exports = {sendReport, checkReportService, getReportServiceStatus};

app/splashManager.js

@@ -0,0 +1,107 @@
+const { BrowserWindow, app } = require("electron");
+const path = require("path");
+
+/**
+ * Reference to the splash screen BrowserWindow instance.
+ * Used during application startup before main window is ready.
+ */
+let splashWindow = null;
+
+/**
+ * Creates and displays the splash screen window.
+ *
+ * Responsibilities:
+ * - Initializes a frameless, always-on-top splash window
+ * - Loads splash HTML UI
+ * - Dynamically injects banner image depending on dev/production mode
+ * - Acts as startup visual feedback before main window loads
+ */
+function createSplashWindow() {
+
+  /**
+   * Configuration for splash screen BrowserWindow.
+   * Optimized for minimal UI and fast startup display.
+   */
+  const splashOptions = {
+    width: 400,
+    height: 300,
+    frame: false,
+    transparent: true,
+    alwaysOnTop: true,
+    resizable: false,
+    skipTaskbar: true,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+  };
+
+  /**
+   * Instantiates the splash screen window.
+   */
+  splashWindow = new BrowserWindow(splashOptions);
+
+  /**
+   * Absolute path to splash HTML file used as initial UI.
+   * Loaded locally from application bundle or project folder.
+   */
+  const splashPath = path.join(__dirname, "../public/splash.html");
+  splashWindow.loadFile(splashPath);
+
+  /**
+   * Executes once splash HTML is fully loaded.
+   * Used here to inject dynamic assets (banner image path).
+   */
+  splashWindow.webContents.on('did-finish-load', () => {
+
+    /**
+     * Resolves splash banner image path depending on runtime mode:
+     * - Production: bundled resources directory
+     * - Development: local build directory
+     */
+    let bannerPath;
+    
+    // Check if app is packaged
+    if (app.isPackaged) {
+      bannerPath = path.join(process.resourcesPath, 'banner.png');
+    } else {
+      // In dev, use build folder
+      bannerPath = path.join(__dirname, '../build/banner.png');
+    }
+    
+    /**
+     * Injects runtime image source into splash DOM.
+     * Uses file:// protocol to load local image safely in Electron context.
+     */
+    splashWindow.webContents.executeJavaScript(`
+      document.querySelector('img[alt="Freedom Loader"]').src = 'file:///${bannerPath.replace(/\\/g, '/')}';
+    `);
+  });
+}
+
+/**
+ * Closes and cleans up the splash screen window.
+ *
+ * Should be called once main window is ready to display.
+ */
+function closeSplashWindow() {
+  if (splashWindow) {
+    splashWindow.close();
+    splashWindow = null;
+  }
+}
+
+/**
+ * Updates splash screen progress indicator from main process.
+ *
+ * Sends a step value to renderer via injected JS function.
+ *
+ * @param {number} step - Current initialization step or progress value
+ */
+function setSplashProgress(step) {
+  if (splashWindow) {
+    splashWindow.webContents.executeJavaScript(`window.setProgress(${step})`);
+  }
+}
+
+module.exports = { createSplashWindow, closeSplashWindow, setSplashProgress };

app/themeManager.js

@@ -0,0 +1,337 @@
+/**
+ * Theme loading and parsing system.
+ *
+ * Supports:
+ * - Folder-based themes
+ * - ZIP-based themes
+ * - Theme validation against required schema
+ * - Image embedding as base64 data URIs
+ * - Cached theme registry with sorted priority order
+ *
+ * Acts as the core theme ingestion pipeline for the application UI.
+ */
+
+const fs = require("fs");
+const path = require("path");
+const { logger } = require("../server/logger");
+const JSZip = require("jszip");
+
+/**
+ * Maximum allowed size (in bytes) for theme images.
+ * Prevents memory abuse from large embedded assets.
+ */
+const MAX_IMAGE_SIZE = 10 * 1024 * 1024;
+
+/**
+ * List of supported image file extensions for theme assets.
+ */
+const ALLOWED_IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".webp", ".gif", ".avif"];
+
+/**
+ * Allowed base filenames for theme background/cover images.
+ * Restricts theme asset resolution to known conventions.
+ */
+const ALLOWED_IMAGE_NAMES = ["cover", "background"];
+
+/**
+ * Priority order used to sort themes in UI.
+ * Themes not listed are placed at the end.
+ */
+const THEME_ORDER = ["dark", "light"];
+
+/**
+ * Required JSON schema paths for a valid theme definition.
+ * Each entry represents a nested property path that must exist.
+ */
+const REQUIRED_KEYS = [
+  ["meta", "name"],
+  ["meta", "author"],
+  ["meta", "version"],
+  ["meta", "formatVersion"],
+  ["style", "colors", "background"],
+  ["style", "colors", "text", "default"],
+  ["style", "form", "button", "background"],
+  ["style", "progressBar", "fill"],
+];
+
+/**
+ * Safely retrieves a deeply nested value from an object using a key path array.
+ *
+ * @param {object} obj - Target object
+ * @param {string[]} keys - Property path segments
+ * @returns {*} value or undefined if path is invalid
+ */
+function getNestedValue(obj, keys) {
+  return keys.reduce((acc, key) => acc?.[key], obj);
+}
+
+/**
+ * Validates theme JSON structure against required schema.
+ *
+ * Ensures all mandatory configuration keys exist before theme is accepted.
+ *
+ * @param {object} json - Parsed theme JSON
+ * @returns {{valid: boolean, reason?: string}}
+ */
+function validateThemeJson(json) {
+  for (const keyPath of REQUIRED_KEYS) {
+    if (getNestedValue(json, keyPath) === undefined) {
+      return { valid: false, reason: `Missing key: ${keyPath.join(".")}` };
+    }
+  }
+  return { valid: true };
+}
+
+/**
+ * Normalizes raw theme JSON into application-ready theme object.
+ *
+ * @param {string} themeId
+ * @param {object} themeJson
+ * @param {string|null} imageData - Base64 encoded theme image
+ * @returns {object} normalized theme object
+ */
+function buildThemeObject(themeId, themeJson, imageData) {
+  return {
+    id: themeId.toLowerCase(),
+    name: themeJson.meta.name || themeId,
+    author: themeJson.meta.author || "Unknown",
+    version: themeJson.meta.version,
+    subtitle: themeJson.meta.subtitle || "",
+    style: themeJson.style,
+    image: imageData,
+  };
+}
+
+/**
+ * Extracts and encodes an image from theme archive into base64 data URI.
+ *
+ * Applies safety checks:
+ * - Rejects images exceeding MAX_IMAGE_SIZE
+ * - Converts file extension into valid MIME type
+ *
+ * @param {Buffer} buffer
+ * @param {string} filename
+ * @returns {string|null} data URI or null if invalid
+ */
+function extractImage(buffer, filename) {
+  if (buffer.length > MAX_IMAGE_SIZE) {
+    logger.warn(`Image too large, ignoring`);
+    return null;
+  }
+  const ext = path.extname(filename).toLowerCase().replace(".", "");
+  const mime = ext === "jpg" || ext === "jpeg" ? "jpeg" : ext;
+  return `data:image/${mime};base64,${buffer.toString("base64")}`;
+}
+
+/**
+ * Loads a theme from a ZIP archive.
+ *
+ * Steps:
+ * - Extract ZIP content
+ * - Locate .theme.json file
+ * - Validate JSON structure
+ * - Extract optional image asset
+ * - Build normalized theme object
+ *
+ * @param {string} zipPath
+ * @param {string} themeId
+ * @returns {Promise<object|null>}
+ */
+async function loadThemeFromZip(zipPath, themeId) {
+  try {
+    const zipBuffer = fs.readFileSync(zipPath);
+    const zip = await JSZip.loadAsync(zipBuffer);
+
+    const jsonFile = Object.keys(zip.files).find(f => f.endsWith(".theme.json"));
+    if (!jsonFile) { logger.warn(`Theme ${themeId}: no .theme.json, skipping`); return null; }
+
+    let themeJson;
+    try { themeJson = JSON.parse(await zip.files[jsonFile].async("string")); }
+    catch { logger.warn(`Theme ${themeId}: invalid JSON, skipping`); return null; }
+
+    const validation = validateThemeJson(themeJson);
+    if (!validation.valid) { logger.warn(`Theme ${themeId}: ${validation.reason}, skipping`); return null; }
+
+    let imageData = null;
+    const imageFile = Object.keys(zip.files).find(f => {
+      const ext = path.extname(f).toLowerCase();
+      const name = path.basename(f, ext).toLowerCase();
+      return ALLOWED_IMAGE_NAMES.includes(name) && ALLOWED_IMAGE_EXTENSIONS.includes(ext);
+    });
+
+    if (imageFile) {
+      const buf = await zip.files[imageFile].async("nodebuffer");
+      imageData = extractImage(buf, imageFile);
+    }
+
+    logger.info(`Theme loaded (zip): ${themeId}`);
+    return buildThemeObject(themeId, themeJson, imageData);
+
+  } catch (err) {
+    logger.warn(`Theme ${themeId}: failed to load zip — ${err.message}`);
+    return null;
+  }
+}
+
+/**
+ * Loads a theme from a directory structure.
+ *
+ * Equivalent to ZIP loader but works on filesystem directly.
+ *
+ * @param {string} folderPath
+ * @param {string} themeId
+ * @returns {Promise<object|null>}
+ */
+async function loadThemeFromFolder(folderPath, themeId) {
+  try {
+    const jsonFile = fs.readdirSync(folderPath).find(f => f.endsWith(".theme.json"));
+    if (!jsonFile) { logger.warn(`Theme ${themeId}: no .theme.json, skipping`); return null; }
+
+    let themeJson;
+    try { themeJson = JSON.parse(fs.readFileSync(path.join(folderPath, jsonFile), "utf-8")); }
+    catch { logger.warn(`Theme ${themeId}: invalid JSON, skipping`); return null; }
+
+    const validation = validateThemeJson(themeJson);
+    if (!validation.valid) { logger.warn(`Theme ${themeId}: ${validation.reason}, skipping`); return null; }
+
+    let imageData = null;
+    const imageFile = fs.readdirSync(folderPath).find(f => {
+      const ext = path.extname(f).toLowerCase();
+      const name = path.basename(f, ext).toLowerCase();
+      return ALLOWED_IMAGE_NAMES.includes(name) && ALLOWED_IMAGE_EXTENSIONS.includes(ext);
+    });
+
+    if (imageFile) {
+      const buf = fs.readFileSync(path.join(folderPath, imageFile));
+      imageData = extractImage(buf, imageFile);
+    }
+
+    logger.info(`Theme loaded (folder): ${themeId}`);
+    return buildThemeObject(themeId, themeJson, imageData);
+
+  } catch (err) {
+    logger.warn(`Theme ${themeId}: failed to load folder — ${err.message}`);
+    return null;
+  }
+}
+
+/**
+ * In-memory cache of loaded themes.
+ * Avoids re-parsing filesystem on every request.
+ */
+let cachedThemes = null;
+
+/**
+ * Active theme directory path used as source of truth.
+ */
+let themeFolderPath = null;
+
+/**
+ * Sets the active theme directory path.
+ *
+ * @param {string} folderPath
+ */
+function setThemeFolderPath(folderPath) {
+  themeFolderPath = folderPath;
+}
+
+/**
+ * Loads all themes from the configured theme directory.
+ *
+ * Supports:
+ * - ZIP themes (.zip)
+ * - Folder themes (directory-based)
+ *
+ * Iterates through filesystem entries and delegates parsing
+ * to the appropriate loader (ZIP or folder).
+ *
+ * @returns {Promise<object[]>} List of valid theme objects
+ */
+async function loadThemesFromFolder() {
+  const themes = [];
+
+  if (!fs.existsSync(themeFolderPath)) {
+    logger.warn(`Theme folder not found: ${themeFolderPath}`);
+    return themes;
+  }
+
+  const files = fs.readdirSync(themeFolderPath);
+
+  for (const file of files) {
+    const filePath = path.join(themeFolderPath, file);
+    const themeId = path.basename(file, path.extname(file));
+
+    if (file.endsWith(".zip")) {
+      const theme = await loadThemeFromZip(filePath, themeId);
+      if (theme) themes.push(theme);
+      continue;
+    }
+
+    if (fs.statSync(filePath).isDirectory()) {
+      const theme = await loadThemeFromFolder(filePath, themeId);
+      if (theme) themes.push(theme);
+    }
+  }
+
+  return themes;
+}
+
+/**
+ * Returns sorting priority for a theme ID.
+ *
+ * Lower index = higher priority.
+ * Themes not in THEME_ORDER are placed at the end.
+ *
+ * @param {string} id
+ * @returns {number}
+ */
+function getThemeOrder(id) {
+  const index = THEME_ORDER.indexOf(id);
+  return index === -1 ? Infinity : index;
+}
+
+/**
+ * Initializes the theme system.
+ *
+ * Steps:
+ * - Sets theme folder path
+ * - Loads all themes from disk
+ * - Sorts themes by priority order
+ * - Caches result in memory
+ *
+ * @param {string} folderPath
+ */
+async function initThemes(folderPath) {
+  setThemeFolderPath(folderPath);
+  const themes = await loadThemesFromFolder();
+  logger.info(`Themes before sort: ${themes.map(t => t.id).join(", ")}`);
+  cachedThemes = themes.sort((a, b) => getThemeOrder(a.id) - getThemeOrder(b.id));
+  logger.info(`Themes after sort: ${cachedThemes.map(t => t.id).join(", ")}`);
+}
+
+/**
+ * Returns cached themes.
+ *
+ * If themes are not loaded yet, returns empty array.
+ *
+ * @returns {object[]}
+ */
+function getThemes() {
+  return cachedThemes ?? [];
+}
+
+/**
+ * Reloads themes from disk and refreshes cache.
+ *
+ * Used when themes are modified at runtime without restart.
+ *
+ * @returns {Promise<object[]>}
+ */
+async function reloadThemes() {
+  const themes = await loadThemesFromFolder();
+  cachedThemes = themes.sort((a, b) => getThemeOrder(a.id) - getThemeOrder(b.id));
+  logger.info(`Themes reloaded: ${cachedThemes.length} theme(s)`);
+  return cachedThemes;
+}
+
+module.exports = { initThemes, getThemes , reloadThemes };

app/tray.js

@@ -0,0 +1,117 @@
+const {app, Menu, Tray, nativeImage} = require("electron");
+const path = require("path");
+const {logger} = require("../server/logger"); // Ajuste le chemin si besoin
+const fs = require("fs");
+const {getMainWindow} = require("./windowManager");
+
+/**
+ * Global reference to the Tray instance to prevent garbage collection.
+ * @type {Tray | null}
+ */
+let tray = null;
+
+/**
+ * Creates and configures the cross-platform System Tray.
+ *
+ * Responsibilities:
+ * - Loads the appropriate icon format based on the operating system.
+ * - Builds the right-click context menu.
+ * - Handles left-click behavior to toggle main window visibility.
+ *
+ * @param {boolean} devMode - Indicates whether the application is running in development mode.
+ * @returns {Tray} The created Tray instance.
+ */
+function createSystemTray(devMode) {
+    // Prevent creating multiple tray instances
+    if (tray) return tray;
+
+    const isWin = process.platform === "win32";
+    const iconName = isWin ? "app-icon.ico" : "app-icon-64x64.png"; 
+
+    // Attempt to load the icon from the local build directory first
+    let iconPath = path.join(__dirname, "..", "build", iconName);
+
+    // Fallback to the extracted resources path if running in production
+    if (!devMode && !fs.existsSync(iconPath)) {
+        iconPath = path.join(process.resourcesPath, iconName);
+    }
+
+    if (!fs.existsSync(iconPath)) {
+        logger.error(`System Tray icon not found at resolved path: ${iconPath}`);
+    } else {
+        logger.info("System Tray icon resolved successfully.");
+    }
+    
+    const icon = nativeImage.createFromPath(iconPath);    
+
+    if (icon.isEmpty()) {
+        logger.error("System Tray icon file was found but could not be decoded by Electron (image is empty).");
+    }
+
+    tray = new Tray(icon);
+    tray.setToolTip("Freedom Loader");
+
+    /**
+     * System Tray Context Menu (Right-click action).
+     */
+    const contextMenu = Menu.buildFromTemplate([
+        {
+            label: "Show Freedom Loader",
+            click: () => {
+                const window = getMainWindow();
+                if (window && !window.isDestroyed()) {
+                    window.show();
+                    window.focus();
+                    logger.info("Window Restored from SystemTray (Using Show Action)");
+                }
+            },
+        },
+        { type: "separator" },
+        {
+            label: "Quit",
+            click: () => {
+                /**
+                 * Flags the application for a deliberate exit,
+                 * bypassing the default "minimize to tray" behavior.
+                 */
+                app.isQuitting = true;
+                app.quit();
+            },
+        },
+    ]);
+
+    tray.setContextMenu(contextMenu);
+
+    /**
+     * Left-click behavior: Toggles main window visibility.
+     * but it remains standard practice for Windows and Linux environments.
+     */
+    tray.on("click", () => {
+        const window = getMainWindow();
+        if (!window || window.isDestroyed()) return;
+
+        if (window.isVisible()) {
+            window.hide();
+        } else {
+            window.show();
+            window.focus();
+            logger.info("Window Restored from SystemTray (Double Click on Tray Icon)");
+        }
+    });
+
+    return tray;
+}
+
+/**
+ * Safely destroys the tray icon to prevent OS-level crashes (especially on Linux/Wayland).
+ * Should be called right before the application quits.
+ */
+function destroyTray() {
+    if (tray && !tray.isDestroyed()) {
+        tray.destroy();
+        tray = null;
+        logger.info("System Tray destroyed cleanly.");
+    }
+}
+
+module.exports = {createSystemTray, destroyTray};

app/windowManager.js

@@ -0,0 +1,123 @@
+/**
+ * Electron main window module dependencies.
+ * Handles BrowserWindow lifecycle and application UI shell.
+ */
+
+const { BrowserWindow, app } = require("electron");
+const path = require("path");
+const { logger } = require("../server/logger");
+const { configFeatures } = require("../config");
+const config = require("../config");
+
+/**
+ * Singleton reference to the main Electron BrowserWindow instance.
+ * Ensures only one application window exists at runtime.
+ */
+let mainWindow = null;
+
+/**
+ * Creates and initializes the main Electron application window.
+ *
+ * Responsibilities:
+ * - Ensures singleton window instance (prevents duplicates)
+ * - Configures window options (size, icon, preload, security settings)
+ * - Loads frontend application from local dev server
+ * - Handles lifecycle events (close, errors)
+ *
+ * @returns {Promise<BrowserWindow>} The created or existing window instance
+ */
+async function createMainWindow() {
+
+  /**
+   * Prevents multiple instances of the main window.
+   * Returns existing instance if already created.
+   */
+  if (mainWindow) {
+    logger.warn("Window already exists, no new creation!");
+    return mainWindow;
+  }
+
+  /**
+   * Resolves application icon path depending on runtime mode:
+   * - Development: local build folder
+   * - Production: packaged Electron resources
+   */
+  const iconPath = config.devMode
+    ? path.join(__dirname, "../build/app-icon.ico")
+    : path.join(process.resourcesPath, "build/app-icon.ico");
+
+  /**
+   * Electron BrowserWindow configuration object.
+   * Defines UI behavior, security settings, and preload bridge.
+   */
+  const windowOptions = {
+    title: `Freedom Loader ${config.version}`,
+    icon: iconPath,
+    width: 750,
+    height: 800,
+    minWidth: 750,
+    minHeight: 800,
+    frame: !configFeatures.customTopBar,
+    devTools: !app.isPackaged,
+    show: false, 
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, "../preload.js"),
+    },
+  };
+
+  mainWindow = new BrowserWindow(windowOptions);
+
+  /**
+   * Loads the frontend application served by the local dev server.
+   * In production, this could be replaced with a file:// build.
+   */
+  try {
+    await mainWindow.loadURL(`http://localhost:${config.applicationPort}`);
+    logger.info("Window loaded");
+  } catch (err) {
+    logger.error("Window loading error:", err);
+    throw err;
+  }
+
+  /**
+   * Intercepts the window close event.
+   * If the app is not explicitly quitting (via Tray menu),
+   * cancels the destruction and hides the window instead.
+   */
+  mainWindow.on('close', (event) => {
+
+    if (!app.isQuitting && config.configFeatures.systemTray) {
+      event.preventDefault();
+      mainWindow.hide();
+      logger.info("Window Minimized in SystemTray (Using Close Button)");
+      return false;
+    }
+  });
+
+  /**
+   * Cleans up window reference when the main window is closed.
+   * Prevents memory leaks and allows recreation if needed.
+   */
+  mainWindow.on("closed", () => {
+    logger.info("Main window closed");
+    mainWindow = null;
+  });
+
+  return mainWindow;
+}
+
+/**
+ * Returns the current main window instance.
+ *
+ * Useful for IPC handlers and background services
+ * needing access to the renderer process.
+ *
+ * @returns {BrowserWindow | null}
+ */
+function getMainWindow() {
+  return mainWindow;
+}
+
+module.exports = { createMainWindow, getMainWindow };

app/ytDlpUpdater.js

@@ -0,0 +1,35 @@
+const { execFile } = require("child_process");
+const { logger } = require("../server/logger");
+
+/**
+ * Attempts to update the local yt-dlp binary using its built-in update command.
+ *
+ * This function:
+ * - Executes yt-dlp with the `-U` flag
+ * - Logs update output or warnings if update fails
+ * - Never throws: update failure is non-blocking by design
+ *
+ * @param {string} ytDlpPath - Absolute path to the yt-dlp executable
+ */
+function updateYtDlp(ytDlpPath) {
+
+  logger.info("yt-dlp update check starting...");
+
+  /**
+   * Executes yt-dlp CLI process in a non-interactive mode.
+   * Used here specifically for self-update via `-U` flag.
+   */
+  execFile(ytDlpPath, ["-U"], (err, stdout) => {
+
+    /**
+     * Handles yt-dlp update result:
+     * - Logs warning if update fails (network, binary issues, permissions)
+     * - Logs stdout output when update succeeds
+     */
+    if (err) logger.warn("yt-dlp update failed (continuing):", err.message);
+    
+    else logger.info(`yt-dlp update: ${stdout.trim()}`);
+  });
+}
+
+module.exports = { updateYtDlp };

config.js

@@ -3,25 +3,129 @@ const { app } = require("electron");
 const fs = require("fs");
 const path = require("path");
 
-const localMode = !app.isPackaged;
+/**
+ * Indicates whether the application is running in development mode.
+ * Determined by Electron's packaging state.
+ */
+const devMode = !app.isPackaged || process.env.NODE_ENV === "test";
 
-// Change path for JSON file
+/**
-const featuresPath =  path.join(path.join(`${localMode ? __dirname : process.resourcesPath}`,"config/" , "config.json"));
+ * Resolves the configuration file path depending on runtime environment.
+ *
+ * In development:
+ * - Uses local config/config.dev.json
+ * - Creates it from default if missing
+ *
+ * In production:
+ * - Uses app userData/config.json
+ * - Creates it from bundled default config if missing
+ *
+ * @returns {string} Absolute path to the active configuration file
+ */
+function resolveConfigPath() {
+  if (devMode) {
+    const devConfigPath = path.join(__dirname, "config", "config.dev.json");
 
-let features = {};
+    if (!fs.existsSync(devConfigPath)) {
+      const defaultConfigPath = path.join(
+        __dirname,
+        "config",
+        "config.default.json"
+      );
+      fs.copyFileSync(defaultConfigPath, devConfigPath);
+    }
 
-function loadFeatures() {
+    return devConfigPath;
-    const raw = fs.readFileSync(featuresPath, "utf-8");
+  }
-    features = JSON.parse(raw);
+
-    return features;
+  const userConfigPath = path.join(app.getPath("userData"), "config.json");
+
+  if (!fs.existsSync(userConfigPath)) {
+    const defaultConfigPath = path.join(
+      process.resourcesPath,
+      "config",
+      "config.default.json"
+    );
+    fs.copyFileSync(defaultConfigPath, userConfigPath);
+  }
+
+  return userConfigPath;
 }
 
-const configFeatures = loadFeatures();
+/**
+ * Path to the active configuration file used at runtime.
+ */
+const featuresPath = resolveConfigPath();
+
+/**
+ * Loads and parses the feature configuration file.
+ *
+ * @returns {Object} Parsed feature flags configuration
+ * @throws {Error} If the configuration file is missing or invalid
+ */
+function loadFeatures() {
+  const raw = fs.readFileSync(featuresPath, "utf-8");
+  return JSON.parse(raw);
+}
+
+/**
+ * Reloads feature flags from disk.
+ * Use this instead of the cached configFeatures snapshot
+ * when you need the latest user settings at call time.
+ *
+ * @returns {Object} Fresh feature flags from config file
+ */
+function reloadFeatures() {
+  try {
+    const raw = fs.readFileSync(featuresPath, "utf-8");
+    return JSON.parse(raw);
+  } catch (err) {
+    // Fallback to cached snapshot if file read fails
+    return configFeatures;
+  }
+}
+
+/**
+ * In-memory snapshot of application feature flags.
+ *
+ * Note: Changes to the config file are not automatically reflected.
+ * A restart or reload is required.
+ */
+let configFeatures = loadFeatures();
 
 module.exports = {
-    version: packageJson.version,
+  /**
-    applicationPort: "8787",
+   * Application version from package.json
-    localMode,
+   */
-    DiscordRPCID: "1410934537051181146",
+  version: devMode ? `dev-${packageJson.version}` : `v${packageJson.version}` ,
-    configFeatures
+
-}
+  /**
+   * Backend Express / internal server port
+   */
+  applicationPort: "8787",
+
+  /**
+   * Indicates whether the app is running in development mode
+   */
+  devMode,
+
+  /**
+   * Discord RPC application identifier
+   */
+  DiscordRPCID: "1410934537051181146",
+
+  /**
+   * Runtime feature flags loaded from configuration file
+   */
+  configFeatures,
+
+  /**
+   * Function to reload the config
+   */
+  reloadFeatures,
+
+  /**
+   * Path to the active configuration file
+   */
+  featuresPath,
+};

config/config.default.json

@@ -1,5 +1,6 @@
 {
   "autoUpdate": true,
+  "systemTray": false,
   "discordRPC": true,
   "customTopBar": true,
   "autoCheckInfo": true,
@@ -7,9 +8,13 @@
   "addMetadata": true,
   "verboseLogs": false,
   "autoDownloadPlaylist": true,
+  "keepPlaylistOrder": false,
+  "createPlaylistFolders": false,
   "customCodec": "h264",
   "logSystem": true,
   "outputTitleCheck": true,
   "downloadSystem": true,
-  "notifySystem": true
+  "notifySystem": true,
+  "enableHardwareAcceleration": true,
+  "theme": "dark" 
 }

eslint.config.js

@@ -0,0 +1,40 @@
+const js = require("@eslint/js");
+const globals = require("globals");
+
+module.exports = [
+    js.configs.recommended,
+
+    {ignores: ["node_modules/**", "srpm-out/**", "dist/**", "test/**"]},
+
+    {
+        languageOptions: {
+            ecmaVersion: "latest",
+            sourceType: "commonjs",
+        },
+        rules: {
+            "no-unused-vars": ["error", {argsIgnorePattern: "^_"}],
+            "no-console": "off",
+            "semi": ["error", "always"]
+        },
+
+
+    },
+    {
+        files: ["app/**", "server/**", "main.js"],
+        languageOptions: {
+            globals: {...globals.node}
+        }
+    },
+    {
+        files: ["public/**"],
+        languageOptions: {
+            globals: {...globals.browser}
+        }
+    },
+    {
+        files: ["preload.js"],
+        languageOptions: {
+            globals: {...globals.node, ...globals.browser}
+        }
+    }
+];

jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    testEnvironment: "node",
+    testMatch: ["**/test/unit/**/*.test.js"],
+    collectCoverageFrom: [
+        "server/**/*.js",
+        "app/**/*.js",
+        "!app/autoUpdater.js",
+    ],
+
+    modulePathIgnorePatterns: [
+        "<rootDir>/dist",
+        "<rootDir>/release",
+        "<rootDir>/build",
+    ],
+
+    watchPathIgnorePatterns: [
+        "<rootDir>/dist",
+        "<rootDir>/release",
+        "<rootDir>/build",
+    ],
+};

main.js

@@ -1,301 +1,201 @@
-const config = require("./config.js");
+/**
-const { app, BrowserWindow, ipcMain, dialog, Menu, shell } = require("electron");
+ * Handle crash application and avoid ghost instance
-const path = require("path");
+ */
-const fs = require("fs");
+const { app } = require("electron");
 
+process.on("uncaughtException", (err) => {
+  console.error("Uncaught exception:", err);
+  app.quit();
+});
+
+process.on("unhandledRejection", (reason) => {
+  console.error("Unhandled rejection:", reason);
+  app.quit();
+});
+
+if (process.platform === 'linux') {
+  app.setDesktopName('com.masteracnolo.freedomloader.desktop');
+}
+
+/**
+ * True if this is the primary instance (lock acquired successfully)
+ */
+const isPrimaryInstance = app.requestSingleInstanceLock();
+
+/**
+ * If we are on a second instance
+ */
+if (!isPrimaryInstance) {
+  app.quit();
+  process.exit(0);
+}
+
+/**
+ * Set App Name and AppID 
+ */
+app.setName("Freedom Loader");
+app.setAppUserModelId("com.masteracnolo.freedomloader");
+
+
+/**
+ * Load the app dependencies for hardware choice
+ */
 const { logger, logSessionStart, logSessionEnd, logDir } = require("./server/logger");
-const { AutoUpdater } = require("./server/update.js");
+const { configFeatures, devMode} = require("./config");
-const { configFeatures } = require("./config.js");
-const { startRPC, stopRPC} = require("./server/discordRPC");
 
-let mainWindow;
+/**
-const logsFolderPath = logDir;
+ * In-memory snapshot of application feature flags.
-
+ *
-const basePath = config.localMode
+ * Note: Changes to the config file are not automatically reflected.
-  ? path.join(__dirname )
+ * A restart could be required.
-  : path.join(path.dirname(process.execPath), "resources");
+ */
-
+if (!configFeatures.enableHardwareAcceleration){
-const configFolderPath = path.join(basePath, "config" ,"config.json");
+  app.disableHardwareAcceleration();
-
+  logger.info("Disabled Hardware Acceleration");
-// Default download path (centralized, lazy loaded)
+} else {
-let defaultDownloadPath;
+  logger.info("Enable Hardware Acceleration");
-
-app.setAppUserModelId("com.masteracnolo.freedomloader"); // pour notifications Windows
-app.disableHardwareAcceleration();
-
-ipcMain.handle("version", () => config.version);
-
-// Gestion single instance
-const gotLock = app.requestSingleInstanceLock();
-
-// Native dependencies check (yt-dlp.exe, ffmpeg.exe, ffprobe.exe, Deno)
-function checkNativeDependencies() {
-  // Import centralized paths after app initialization
-  const { binaryPaths } = require("./server/helpers/path.helpers.js");
-  
-  const deps = [
-    { name: "yt-dlp.exe", path: binaryPaths.ytDlp },
-    { name: "ffmpeg.exe", path: binaryPaths.ffmpeg },
-    { name: "ffprobe.exe", path: binaryPaths.ffprobe },
-    { name: "deno.exe", path: binaryPaths.deno },
-  ];
-  const missing = deps.filter(dep => !fs.existsSync(dep.path));
-  let errorMsg = "";
-  if (missing.length > 0) {
-    const missingList = missing.map(dep => dep.name).join(", ");
-    logger.error(`Missing dependencies: ${missingList}`);
-    errorMsg += `The following files are missing in the 'ressources' folder:\n${missingList}`;
-  }
-  if (errorMsg) {
-    app.whenReady().then(() => {
-      dialog.showErrorBox(
-        "Missing dependencies",
-        `${errorMsg}\n\nThe application will now exit. Try to reinstall`
-      );
-      app.quit();
-    });
-    return false;
-  }
-  return true;
 }
 
-if(!config.localMode){
+if(devMode){
-  if (!gotLock) {
+  /**
-    // Une instance existe déjà -> fermer l'ancienne et continuer la nouvelle
+   * Start devTron extensions - @see https://github.com/electron/devtron
-    // Ici la nouvelle instance continue normalement
+   */
-  } else {
+  const { devtron } = require('@electron/devtron');
-    if (!checkNativeDependencies()) {
+  devtron.install();
-      // Arrêt déjà géré dans la fonction
+  logger.info("Loaded DevTron Extension");
-    } else {
-      app.on("second-instance", () => {
-        // La vieille instance se ferme
-        if (mainWindow) {
-          logger.info("New Instance Detected, closing the older...");
-          mainWindow.destroy();
-          mainWindow = null;
-        }
-      });
-    }
-  }
 }
-// Création fenêtre principale
-async function createMainWindow() {
-  if (mainWindow) {
-    logger.warn("Window already exists, no new creation!");
-    return;
-  }
 
-  mainWindow = new BrowserWindow({
+/**
-    title: `Freedom Loader ${config.version}`,
+ * Load the app dependencies 
-    width: 750,
+ */
-    height: 800,
+const { initThemes } = require("./app/themeManager");
-    minWidth: 750,
-    minHeight: 800,
-    frame: !configFeatures.customTopBar,
-    devTools: `${app.isPackaged ? false : true}`,
-    webPreferences: {
-      nodeIntegration: false,
-      contextIsolation: true,
-      preload: path.join(__dirname, "preload.js"),
-    },
-  });
 
+const { initAutoUpdater } = require("./app/autoUpdater");
+const { startRPC, stopRPC } = require("./app/discordRPC");
+const { checkNativeDependencies } = require("./app/dependencyCheck");
+const { updateYtDlp } = require("./app/ytDlpUpdater");
+const { createMainWindow, getMainWindow } = require("./app/windowManager");
+const { registerIpcHandlers } = require("./app/ipcHandlers");
+const { createSplashWindow, closeSplashWindow, setSplashProgress } = require("./app/splashManager");
+const { userThemesPath, initUserThemes, validateBinaries, defaultDownloadFolder } = require("./server/helpers/path.helpers");
+const {createSystemTray, destroyTray} = require("./app/tray");
+const { stopServer } = require("./server/server");
+const {checkReportService} = require("./app/sendReport");
+
+/**
+ * Global flag indicating if the application is intentionally shutting down.
+ * Used across the app to bypass the "minimize to tray on close" behavior.
+ * @type {boolean}
+ */
+app.isQuitting = false;
+
+/**
+ * State flag to track the asynchronous cleanup process during shutdown.
+ * Prevents the application from exiting before services (RPC, Tray, Logs) are properly closed.
+ * @type {boolean}
+ */
+let isCleanedUp = false;
+
+/**
+ * Performs a graceful shutdown of all application services asynchronously.
+ * Once finished, it re-triggers the app.quit() process.
+ */
+async function cleanShutdown() {
   try {
-    await mainWindow.loadURL(`http://localhost:${config.applicationPort}`);
+    destroyTray();
-    logger.info("Window Loaded");
+    await stopRPC();
+    stopServer(); 
+
   } catch (err) {
-    logger.error("Window Loading Error:", err);
+    logger.error("Error during cleanup:", err);
-  }
 
-  mainWindow.on("closed", () => {
+  } finally {
-    logger.info("Main Window Closed");
+    logger.info("All services stopped. Have a nice day!");
-    mainWindow = null;
+    logSessionEnd();
-  });
-}
-
-function validateDownloadPath(userPath) {
-  const { isSafePath } = require("./server/helpers/validation.helpers.js");
-  
-  // Lazy load default path
-  if (!defaultDownloadPath) {
-    const { defaultDownloadFolder } = require("./server/helpers/path.helpers.js");
-    defaultDownloadPath = defaultDownloadFolder;
-  }
-
-  if (!userPath) return defaultDownloadPath;
-
-  try {
-    // Canonical resolution and symlink following
-    const resolved = fs.realpathSync(path.resolve(userPath));
     
-    // Use the same validation as backend (allows all drives except system folders)
+    isCleanedUp = true;
-    if (!isSafePath(resolved)) {
+    app.quit();
-      throw new Error("Path not allowed: system folders are blocked!");
-    }
-
-    return resolved;
-  } catch (err) {
-    logger.error(`Invalid download path: ${userPath} - ${err.message}`);
-    throw new Error(`Invalid or inaccessible path: ${err.message}`);
   }
 }
 
+/**
+ * If another instance want to run
+ */
+app.on("second-instance", () => {
+  logger.info("Second instance detected");
 
-// IPC
+  const mainWindow = require("./app/windowManager").getMainWindow();
-ipcMain.handle("select-download-folder", async () => {
+
-  const result = await dialog.showOpenDialog({ properties: ["openDirectory"] });
+  if (!mainWindow) return;
-  if (result.canceled) {
+
-    logger.info("Folder selection cancelled by user");
+  if (mainWindow.isMinimized()) mainWindow.restore();
-    return null;
+
-  }
+  mainWindow.show();
-  if (result.filePaths.length > 0) {
+  mainWindow.focus();
-    const selectedPath = result.filePaths[0];
-    try {
-      const validatedPath = validateDownloadPath(selectedPath);
-      logger.info(`Folder selected and validated: ${validatedPath}`);
-      return validatedPath;
-    } catch (err) {
-      logger.warn(`Unsafe or invalid folder rejected: ${err.message}`);
-      throw err; // Propagate error to UI
-    }
-  }
-  return null;
 });
 
-ipcMain.handle("validate-download-path", (event, userPath) => {
-  return validateDownloadPath(userPath);
-});
-
-
-ipcMain.handle("get-default-download-path", () => {
-  if (!defaultDownloadPath) {
-    const { defaultDownloadFolder } = require("./server/helpers/path");
-    defaultDownloadPath = defaultDownloadFolder;
-  }
-  return defaultDownloadPath;
-});
-
-ipcMain.on("set-progress", (event, percent) => {
-  if (mainWindow) mainWindow.setProgressBar(percent / 100); // Electron attend 0 → 1
-});
-
-// Topbar window controls
-ipcMain.on("window-minimize", () => {
-  if (mainWindow) mainWindow.minimize();
-});
-
-// Toggle Maximize -> UnMaximize
-ipcMain.on("window-maximize", () => {
-  if (mainWindow) {
-    if (mainWindow.isMaximized()) {
-      mainWindow.unmaximize();
-    } else {
-      mainWindow.maximize();
-    }
-  }
-});
-
-ipcMain.on("window-close", () => {
-  if (mainWindow) mainWindow.close();
-});
-
-// Topbar custom actions
-ipcMain.on("open-devtools", () => {
-  if (mainWindow) mainWindow.webContents.openDevTools({ mode: 'detach' });
-});
-ipcMain.on("open-logs", () => {
-  if (logsFolderPath) shell.openPath(logsFolderPath);
-});
-ipcMain.on("open-website", () => {
-  shell.openExternal("https://masteracnolo.github.io/FreedomLoader/index.html");
-});
-ipcMain.on("open-wiki", () => {
-  shell.openExternal("https://masteracnolo.github.io/FreedomLoader/pages/wiki.html");
-});
-ipcMain.on("open-config", () => {
-  if (configFolderPath) shell.openPath(configFolderPath);
-});
-
-
-// App ready
 app.whenReady().then(async () => {
-  logSessionStart();
+  logSessionStart(logDir, defaultDownloadFolder);
-  logger.info("App Ready, Server Express starting...");
+  checkReportService().catch((err) => {
+    logger.warn(`Bug report service startup check failed: ${err.message}`);
+  });
 
-  const serverPath = path.join(__dirname, "server", "server.js")
+  createSplashWindow();
 
-  const expressServer = require(serverPath);
+  if (!devMode && !checkNativeDependencies()) return;
+
+  const { userYtDlp } = require("./server/helpers/path.helpers");
+  updateYtDlp(userYtDlp);
 
   try {
-    await expressServer.startServer();
+    setSplashProgress(0); // Checking dependencies
-    logger.info("Express Server Started");
+    await require("./server/server").startServer();
 
-    ipcMain.handle("features", () => {
+    setSplashProgress(1); // Starting server
-        return configFeatures;
+    registerIpcHandlers(getMainWindow);
-    });
 
-    const featureWhitelist = new Set([
+    setSplashProgress(2); // Loading themes
-        "autoUpdate",
-        "discordRPC",
-        "customTopBar",
-        "autoCheckInfo",
-        "addThumbnail",
-        "addMetadata",
-        "verboseLogs",
-        "autoDownloadPlaylist",
-        "customCodec"
-      ]);
 
-    
+    validateBinaries();
-    ipcMain.handle("set-feature", (event, { key, value }) => {
-        try {
-          if (!featureWhitelist.has(key)) {
-            logger.warn(`Rejected feature (not whitelisted): ${key}`);
-            return false;
-          }
 
-          // optionnel mais propre
+    initUserThemes();
-          if (configFeatures[key] === value) {
+    await initThemes(userThemesPath);
-            return true;
-          }
-
-          configFeatures[key] = value;
-
-          fs.writeFileSync(
-            configFolderPath,
-            JSON.stringify(configFeatures, null, 2),
-            "utf-8"
-          );
-
-          logger.info(`Feature updated: ${key} = ${value}`);
-          return true;
-
-        } catch (err) {
-          logger.error(`set-feature failed (${key}): ${err.message}`);
-          return false;
-        }
-      });
-
-
-    if (configFeatures.discordRPC) startRPC(); // Discord RPC
 
+    setSplashProgress(3); // Almost ready
     await createMainWindow();
+    
+    closeSplashWindow();
+    getMainWindow().show();
 
-    if (configFeatures.autoUpdate) AutoUpdater(mainWindow); // Auto Update
+    if (configFeatures.systemTray) {
+      createSystemTray(devMode);
+    }
+
+    if (configFeatures.discordRPC) startRPC();
+
+    if (configFeatures.autoUpdate) initAutoUpdater(getMainWindow());
 
   } catch (err) {
-    logger.error("Window or Server error :", err);
+    logger.error("Boot error:", err);
     app.quit();
   }
 });
 
 app.on("window-all-closed", () => {
-  logger.info("Shuting Down App...");
+  if (app.isQuitting || !configFeatures.systemTray) {
-  app.quit();
+    logger.info("Shutting down...");
+    app.quit();
+  } else if (process.platform !== "darwin") {
+    logger.info("Main window closed, app running in background (Tray).");
+  }
 });
 
-app.on("before-quit", async () => {
+app.on("before-quit", (event) => {
-  await stopRPC();
+  app.isQuitting = true;
-  logger.info("All Services Stopped. Have a nice day!")
+
-  logSessionEnd(); 
+  if (!isCleanedUp) {
-});
+    event.preventDefault(); 
+
+    cleanShutdown();
+  }
+});

package.json

@@ -1,13 +1,42 @@
 {
   "name": "freedom-loader",
+  "desktopName": "com.masteracnolo.freedomloader",
   "productName": "Freedom Loader",
-  "version": "1.4.6",
+  "version": "1.6.4",
-  "author": "MasterAcnolo",
+  "author": "MasterAcnolo <MasterAcnolo@users.noreply.github.com>",
-  "description": "Freedom Loader",
+  "description": "Free and open-source GUI for yt-dlp — download video and audio from hundreds of platforms",
+  "homepage": "https://freedomloader.acnolo.fr/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MasterAcnolo/Freedom-Loader.git"
+  },
+  "license": "GPL-3.0-only",
+  "bugs": {
+    "url": "https://github.com/MasterAcnolo/Freedom-Loader/issues"
+  },
   "main": "main.js",
   "scripts": {
-    "start": "electron --trace-warnings .",
+    "clean:dist": "rm -rf dist/ && rm -rf srpm-out/",
+    "start": "electron --no-warnings .",
+    "start:warn": "electron --trace-warnings .",
+    "start:debug": "WAYLAND_DEBUG=1 ELECTRON_ENABLE_LOGGING=1 ELECTRON_ENABLE_STACK_DUMPING=1 electron --enable-logging --v=1 .",
+    "dev": "nodemon --watch server --watch app --watch main.js --watch config.js --ext js,json --exec \"electron --no-warnings .\"",
+    "dev:warn": "nodemon --watch server --watch app --watch main.js --watch config.js --ext js,json --exec \"electron --trace-warnings .\"",
+    "dev:debug": "nodemon --watch server --watch app --watch main.js --watch config.js --ext js,json --exec \"WAYLAND_DEBUG=1 ELECTRON_ENABLE_LOGGING=1 ELECTRON_ENABLE_STACK_DUMPING=1 electron --enable-logging --v=1 .\"",
     "build": "electron-builder",
+    "build:win": "electron-builder --win",
+    "build:linux": "electron-builder --linux",
+    "build:rpm": "npm run clean:dist && npm run build:linux && bash scripts/create-copr-package.sh",
+    "build:all": "electron-builder -wl",
+    "release": "bash scripts/release.sh",
+    "release:publish": "bash scripts/release.sh --publish",
+    "release:dry-run": "bash scripts/release.sh --dry-run",
+    "test": "jest",
+    "test:unit": "jest test/unit",
+    "test:metainfo": "appstreamcli validate package/com.masteracnolo.freedomloader.metainfo.xml",
+    "test:desktop": "desktop-file-validate package/com.masteracnolo.freedomloader.desktop",
+    "lint": "eslint . --format pretty",
+    "lint:fix": "eslint . --fix --format pretty",
     "update": "npm update"
   },
   "dependencies": {
@@ -17,28 +46,47 @@
     "electron-updater": "^6.6.2",
     "express": "^5.1.0",
     "express-rate-limit": "^8.2.1",
+    "jszip": "^3.10.1",
     "webidl-conversions": "^8.0.0",
     "winston": "^3.17.0",
     "winston-daily-rotate-file": "^5.0.0"
   },
   "devDependencies": {
-    "electron": "^37.1.0",
+    "@electron/devtron": "^2.1.1",
-    "electron-builder": "^26.8.1"
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^30.4.1",
+    "@playwright/test": "^1.62.1",
+    "electron": "^44.3.0",
+    "electron-builder": "^26.15.3",
+    "eslint": "^10.10.0",
+    "eslint-formatter-pretty": "^7.1.0",
+    "globals": "^17.12.0",
+    "jest": "^30.4.2",
+    "nodemon": "^3.1.14",
+    "playwright": "^1.62.1"
   },
   "build": {
     "appId": "com.masteracnolo.freedomloader",
+    "artifactName": "Freedom-Loader-${version}.${ext}",
     "productName": "Freedom Loader",
     "publish": [
       {
         "provider": "github",
         "owner": "MasterAcnolo",
-        "repo": "Freedom-Loader"
+        "repo": "Freedom-Loader",
+        "releaseType": "draft"
       }
     ],
     "files": [
-      "**/*",
+      "app/**/*",
-      "node_modules/**/*",
+      "public/**/*",
-      "!logs/*.json"
+      "server/**/*",
+      "build/**/*",
+      "config/config.default.json",
+      "config.js",
+      "main.js",
+      "preload.js",
+      "package.json"
     ],
     "directories": {
       "buildResources": "build"
@@ -46,45 +94,42 @@
     "asar": true,
     "extraResources": [
       {
-        "from": "build/confirm-icon.png",
+        "from": "theme",
-        "to": "confirm-icon.png"
+        "to": "theme"
       },
       {
-        "from": "build/app-icon.ico",
+        "from": "config/config.default.json",
-        "to": "app-icon.ico"
+        "to": "config/config.default.json"
       },
       {
-        "from": "build/banner.bmp",
+        "from": "build",
-        "to": "banner.bmp"
+        "to": ".",
-      },
+        "filter": [
-      {
+          "app-icon.ico",
-        "from": "build/error.png",
+          "app-icon-64x64.png",
-        "to": "error.png"
+          "confirm-icon.png",
-      },
+          "banner.bmp",
-      {
+          "banner.png",
-        "from": "ressources/yt-dlp.exe",
+          "error.png"
-        "to": "binaries/yt-dlp.exe"
+        ]
-      },
-      {
-        "from": "ressources/ffmpeg.exe",
-        "to": "binaries/ffmpeg.exe"
-      },
-      {
-        "from": "ressources/ffprobe.exe",
-        "to": "binaries/ffprobe.exe"
-      },
-      {
-        "from": "ressources/deno.exe",
-        "to": "binaries/deno.exe"
-      },
-      {
-        "from": "config/config.json",
-        "to": "config/config.json"
       }
     ],
     "win": {
       "target": "nsis",
-      "icon": "build/app-icon.ico"
+      "icon": "build/app-icon.ico",
+      "artifactName": "Freedom-Loader-Setup-${version}.${ext}",
+      "extraResources": [
+        {
+          "from": "resources/binaries/win-32",
+          "to": "binaries",
+          "filter": [
+            "yt-dlp.exe",
+            "ffmpeg.exe",
+            "ffprobe.exe",
+            "deno.exe"
+          ]
+        }
+      ]
     },
     "nsis": {
       "oneClick": false,
@@ -96,6 +141,47 @@
       "createDesktopShortcut": true,
       "createStartMenuShortcut": true,
       "shortcutName": "Freedom Loader"
+    },
+    "linux": {
+      "target": [
+        "AppImage",
+        "deb",
+        "snap"
+      ],
+      "category": "Utility",
+      "synopsis": "GUI for yt-dlp to download video and audio with metadata",
+      "maintainer": "MasterAcnolo",
+      "icon": "build/app-icon.png",
+      "executableName": "freedom-loader",
+      "extraResources": [
+        {
+          "from": "resources/binaries/linux",
+          "to": "binaries",
+          "filter": [
+            "yt-dlp",
+            "ffmpeg",
+            "ffprobe",
+            "deno"
+          ]
+        }
+      ]
+    },
+    "deb": {
+      "fpm": [
+        "./package/com.masteracnolo.freedomloader.metainfo.xml=/usr/share/metainfo/com.masteracnolo.freedomloader.metainfo.xml"
+      ]
+    },
+    "rpm": {
+      "fpm": [
+        "./package/com.masteracnolo.freedomloader.metainfo.xml=/usr/share/metainfo/com.masteracnolo.freedomloader.metainfo.xml"
+      ]
+    },
+    "snap": {
+      "confinement": "strict",
+      "plugs": [
+        "default",
+        "removable-media"
+      ]
     }
   }
 }

package/com.masteracnolo.freedomloader.desktop

@@ -0,0 +1,8 @@
+[Desktop Entry]
+Name=Freedom Loader
+Exec=/opt/freedom-loader/freedom-loader %U
+Icon=freedom-loader
+Type=Application
+Categories=AudioVideo;
+Comment=Free and open-source GUI for yt-dlp
+StartupWMClass=com.masteracnolo.freedomloader

package/com.masteracnolo.freedomloader.metainfo.xml

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<component type="desktop-application">
+    <id>com.masteracnolo.freedomloader</id>
+
+    <name>Freedom Loader</name>
+
+    <summary>GUI for yt-dlp to download video and audio with metadata</summary>
+
+    <metadata_license>CC0-1.0</metadata_license>
+    <project_license>GPL-3.0-only</project_license>
+
+    <developer id="com.masteracnolo">
+        <name>MasterAcnolo</name>
+    </developer>
+
+    <description>
+        <p>
+            Freedom Loader is a free and open-source graphical interface built
+            around yt-dlp, the powerful command-line media downloader. It lets
+            you download video and audio from hundreds of supported websites
+            without ever touching a terminal, with no ads, no tracking, and
+            no questionable third-party services.
+        </p>
+        <p>
+            Under the hood, Freedom Loader bundles yt-dlp and ffmpeg directly,
+            so there is nothing extra to install: paste a link, choose a
+            format and quality, and the app handles fetching, converting
+            and tagging the file for you.
+        </p>
+        <p>Features include:</p>
+        <ul>
+            <li>MP4 video or MP3 audio downloads with embedded metadata and thumbnails</li>
+            <li>Quality selection from best to specific resolutions (1080p, 720p, 480p)</li>
+            <li>Codec choice: H.264, H.265, AV1, VP9 and Theora</li>
+            <li>Playlist downloads with automatic per-playlist folders</li>
+            <li>Cookie-based access to age-restricted and member-only content</li>
+            <li>Custom theme system with a web-based theme creator</li>
+            <li>Real-time download progress with network speed indicator</li>
+            <li>Optional Discord Rich Presence integration</li>
+            <li>Automatic application and download-engine updates</li>
+        </ul>
+        <p>
+            DRM-protected content is not supported and cannot be downloaded.
+        </p>
+    </description>
+
+    <launchable type="desktop-id">com.masteracnolo.freedomloader.desktop</launchable>
+
+    <url type="homepage">https://github.com/MasterAcnolo/Freedom-Loader</url>
+    <url type="bugtracker">https://github.com/MasterAcnolo/Freedom-Loader/issues</url>
+    <url type="vcs-browser">https://github.com/MasterAcnolo/Freedom-Loader</url>
+
+    <categories>
+        <category>AudioVideo</category>
+        <category>Utility</category>
+        <category>Network</category>
+    </categories>
+
+    <releases>
+        <release version="1.6.0" date="2026-06-23">
+            <description>
+                <p>Latest stable release.</p>
+            </description>
+        </release>
+    </releases>
+
+    <content_rating type="oars-1.1"/>
+
+    <provides>
+        <binary>freedom-loader</binary>
+    </provides>
+</component>

package/copr-build.sh

@@ -0,0 +1,9 @@
+#!/bin/sh -xe
+git clone --depth 1 https://github.com/MasterAcnolo/Freedom-Loader.git src
+cd src
+npm ci
+npx electron-builder --linux dir
+
+VERSION=$(node -p "require('./package.json').version")
+tar czf "$resultdir/freedom-loader-$VERSION.tar.gz" -C dist linux-unpacked
+sed "s/__VERSION__/$VERSION/" package/freedom-loader.spec > "$resultdir/freedom-loader.spec"

package/freedom-loader.spec

@@ -0,0 +1,25 @@
+Name:           freedom-loader
+Version:        __VERSION__
+Release:        1%{?dist}
+Summary:        GUI for yt-dlp media downloads
+License:        GPL-3.0-only
+Source0:        freedom-loader-__VERSION__.x86_64.rpm
+BuildArch:      x86_64
+Requires:       glibc, gtk3, nss, libXScrnSaver
+
+%description
+GUI for yt-dlp media downloads.
+
+%install
+rpm2cpio %{SOURCE0} | (cd %{buildroot} && cpio -idmv)
+mkdir -p %{buildroot}/usr/bin
+ln -sf "/opt/Freedom Loader/freedom-loader" %{buildroot}/usr/bin/freedom-loader
+
+%files
+/opt/*
+/usr/bin/freedom-loader
+/usr/share/applications/*
+/usr/share/metainfo/*
+/usr/share/icons/hicolor
+
+%changelog

preload.js

@@ -1,23 +1,232 @@
 const { contextBridge, ipcRenderer } = require("electron");
 
+/**
+ * Exposes the main application API to the renderer process.
+ *
+ * This API acts as a secure bridge between the renderer and the
+ * Electron main process using IPC (Inter-Process Communication).
+ * All calls are explicitly whitelisted.
+ */
 contextBridge.exposeInMainWorld("electronAPI", {
+  /**
+   * Sends error log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logError: (...args) => ipcRenderer.send("log-error", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
+
+  /**
+   * Sends info log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logInfo: (...args) => ipcRenderer.send("log-info", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
+
+  /**
+   * Sends warning log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logWarn: (...args) => ipcRenderer.send("log-warn", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
+
+  /**
+   * Return process.platform to renderer
+   */
+  getProcessPlatform: () => process.platform,
+
+  /**
+   * Returns the default system download directory.
+   */
   getDefaultDownloadPath: () => ipcRenderer.invoke("get-default-download-path"),
+
+  /**
+   * Opens a native dialog allowing the user to select a download folder.
+   */
   selectDownloadFolder: () => ipcRenderer.invoke("select-download-folder"),
+
+  /**
+   * Sends download progress value to the main process (used for taskbar / UI sync).
+   *
+   * @param {number} percent - Download progress percentage (0–100)
+   */
   setProgress: (percent) => ipcRenderer.send("set-progress", percent),
+
+  /**
+   * Retrieves application feature flags (runtime configuration).
+   */
   getFeatures: () => ipcRenderer.invoke("features"),
+
+  /**
+   * Updates a feature flag dynamically at runtime.
+   *
+   * @param {string} key - Feature name
+   * @param {any} value - Feature value
+   */
   setFeature: (key, value) => ipcRenderer.invoke("set-feature", { key, value }),
+
+  /**
+   * Returns the current application version.
+   */
   getVersion: () => ipcRenderer.invoke("version"),
-  getValidatedDownloadPath: (path) => ipcRenderer.invoke("validate-download-path", path)
+
+  /**
+   * Returns the changelog data 
+   */
+  getChangelog: () => ipcRenderer.invoke("get-changelog"),
+
+  /**
+   * Marks the current changelog version as seen by the user.
+   */
+  markChangelogSeen: () => ipcRenderer.invoke("mark-changelog-seen"),
+
+  /**
+   * Validates a download path before using it for file operations.
+   *
+   * @param {string} path - Path to validate
+   */
+  getValidatedDownloadPath: (path) =>
+    ipcRenderer.invoke("validate-download-path", path),
+
+  /**
+   * Retrieves available themes from the filesystem or config layer.
+   */
+  getThemes: () => ipcRenderer.invoke("get-themes"),
+
+  /**
+   * Forces a reload of theme files (useful after modification/import).
+   */
+  reloadThemes: () => ipcRenderer.invoke("reload-themes"),
+
+  /*
+   * ==========================================
+   * Auto Updater IPC
+   * ==========================================
+   */
+
+  /**
+   * Checks if an update has already been detected by the main process.
+   *
+   * @returns {Promise<boolean>} Resolves to true if an update is available.
+   */
+  isUpdateAvailable: () => ipcRenderer.invoke("is-update-available"),
+
+  /**
+   * Subscribes to the update available event pushed by the main process.
+   *
+   * @param {Function} callback - Function executed with update info when an update is found.
+   */
+  onUpdateAvailable: (callback) =>
+    ipcRenderer.on("update-available", (_, info) => callback(info)),
+
+  /**
+   * Instructs the main process to start downloading the available update.
+   *
+   * @returns {Promise<void>}
+   */
+  downloadUpdate: () => ipcRenderer.invoke("download-update"),
+
+  /**
+   * Instructs the main process to quit the application and install the downloaded update.
+   *
+   * @returns {Promise<void>}
+   */
+  installUpdate: () => ipcRenderer.invoke("install-update"),
+
+  /**
+   * Subscribes to the update error event.
+   *
+   * @param {Function} callback - Function executed with error information when an update error occurs.
+   * @returns {Electron.IpcRenderer}
+   */
+  onUpdateError: (callback) => ipcRenderer.on("update-error", (_, err) => callback(err)),
+
+  /**
+   * Subscribes to the download progress event.
+   *
+   * @param {Function} callback - Function executed with progress metrics (percent, bytesPerSecond, transferred, total).
+   * @returns {Electron.IpcRenderer}
+   */
+  onDownloadProgress: (callback) =>
+    ipcRenderer.on("update-progress", (_, progress) => callback(progress)),
+
+  /**
+   * Subscribes to the update downloaded event.
+   * Triggered when the update file is fully downloaded and ready to install.
+   *
+   * @param {Function} callback - Function executed with update info.
+   */
+  onUpdateDownloaded: (callback) =>
+    ipcRenderer.on("update-downloaded", (_, info) => callback(info)),
+
+  openReleasePage: () => ipcRenderer.send("open-release-page"),
 });
 
-// Contrôles de fenêtre et outils custom pour la topbar
+/**
+ * Exposes window control and developer utilities for the custom topbar UI.
+ *
+ * These methods forward commands to the Electron main process via IPC.
+ */
 contextBridge.exposeInMainWorld("topbarAPI", {
+  /**
+   * Minimizes the application window.
+   */
   minimize: () => ipcRenderer.send("window-minimize"),
+
+  /**
+   * Toggles maximize/restore state of the application window.
+   */
   maximize: () => ipcRenderer.send("window-maximize"),
+
+  /**
+   * Closes the application window.
+   */
   close: () => ipcRenderer.send("window-close"),
+
+  /**
+   * Opens Chromium DevTools for debugging.
+   */
   openDevTools: () => ipcRenderer.send("open-devtools"),
+
+  /**
+   * Opens application logs directory or log viewer.
+   */
   openLogs: () => ipcRenderer.send("open-logs"),
+
+  /**
+   * Opens the official website or project homepage.
+   */
   openWebsite: () => ipcRenderer.send("open-website"),
+
+  /**
+   * Opens the theme directory or theme editor interface.
+   */
+  openTheme: () => ipcRenderer.send("open-theme"),
+
+  /**
+   * Opens project wiki/documentation.
+   */
   openWiki: () => ipcRenderer.send("open-wiki"),
-  openConfig: () => ipcRenderer.send("open-config")
+
-});
+  /**
+   * Opens the workshop or external content library.
+   */
+  openWorkshop: () => ipcRenderer.send("open-workshop"),
+
+  /**
+   * Opens configuration/settings panel.
+   */
+  openConfig: () => ipcRenderer.send("open-config"),
+
+  /**
+   * Send Bug Report
+   *
+   * @param params
+   * @returns {Promise<any>}
+   */
+  sendReport: (params) => ipcRenderer.invoke("send-report", params),
+
+  /**
+   * Returns the startup health status of the bug report service.
+   */
+  getReportServiceStatus: () => ipcRenderer.invoke("get-report-service-status"),
+});

public/index.html

@@ -9,28 +9,35 @@
     font-src https://fonts.gstatic.com;
     img-src 'self' data: https:;
     ">
-    <title></title>
 
     <link rel="stylesheet" href="styles/styles.css">
     <link rel="stylesheet" href="styles/layout/topbar.css">
-    
+
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
 </head>
 <body>
 
-    <div class="topbar" id="topbar">
+    <header>
-        <div class="custom-controls">
+        <div class="topbar" id="topbar">
-            <button id="devtools-btn" title="Dev Tools">Tools</button>
+            <div class="custom-controls">
-            <button id="logs-btn" title="Logs">Logs</button>
+                <button id="devtools-btn" title="Dev Tools">Tools</button>
-            <button id="website-btn" title="Website">Website</button>
+                <button id="logs-btn" title="Logs">Logs</button>
-            <button id="wiki-btn" title="Wiki">Wiki</button>
+                <button id="report-bug-btn" title="Report a bug">Report a Bug</button> <!-- TODO: Find a better place -->
+                <button id="website-btn" title="Website">Website</button>
+                <button id="wiki-btn" title="Wiki">Wiki</button>
+                <button id="workshop-btn" title="Workshop">Theme Workshop</button>
+                <button id="changelog-btn" title="Changelog">Changelog</button>
+                <!-- <button id="theme-btn" title="Theme">Theme</button> -->
+            </div>
+            <div class="window-controls">
+                <button id="minimize-btn" title="Réduire"><img src="assets/icon/minimize.svg"></button>
+                <button id="maximize-btn" title="Maximiser"><img src="assets/icon/maximize.svg"></button>
+                <button id="close-btn" title="Fermer"><img src="assets/icon/close.svg"></button>
+            </div>
         </div>
-        <div class="window-controls">
+    </header>
-            <button id="minimize-btn" title="Réduire"><img src="assets/icon/minimize.svg"></button>
+
-            <button id="maximize-btn" title="Maximiser"><img src="assets/icon/maximize.svg"></button>
-            <button id="close-btn" title="Fermer"><img src="assets/icon/close.svg"></button>
-        </div>
-    </div>
-    
     <button class="settings-button" id="settings-button">
         <svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-q</title><path d="M262.29,192.31a64,64,0,1,0,57.4,57.4A64.13,64.13,0,0,0,262.29,192.31ZM416.39,256a154.34,154.34,0,0,1-1.53,20.79l45.21,35.46A10.81,10.81,0,0,1,462.52,326l-42.77,74a10.81,10.81,0,0,1-13.14,4.59l-44.9-18.08a16.11,16.11,0,0,0-15.17,1.75A164.48,164.48,0,0,1,325,400.8a15.94,15.94,0,0,0-8.82,12.14l-6.73,47.89A11.08,11.08,0,0,1,298.77,470H213.23a11.11,11.11,0,0,1-10.69-8.87l-6.72-47.82a16.07,16.07,0,0,0-9-12.22,155.3,155.3,0,0,1-21.46-12.57,16,16,0,0,0-15.11-1.71l-44.89,18.07a10.81,10.81,0,0,1-13.14-4.58l-42.77-74a10.8,10.8,0,0,1,2.45-13.75l38.21-30a16.05,16.05,0,0,0,6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16,16,0,0,0-6.07-13.94l-38.19-30A10.81,10.81,0,0,1,49.48,186l42.77-74a10.81,10.81,0,0,1,13.14-4.59l44.9,18.08a16.11,16.11,0,0,0,15.17-1.75A164.48,164.48,0,0,1,187,111.2a15.94,15.94,0,0,0,8.82-12.14l6.73-47.89A11.08,11.08,0,0,1,213.23,42h85.54a11.11,11.11,0,0,1,10.69,8.87l6.72,47.82a16.07,16.07,0,0,0,9,12.22,155.3,155.3,0,0,1,21.46,12.57,16,16,0,0,0,15.11,1.71l44.89-18.07a10.81,10.81,0,0,1,13.14,4.58l42.77,74a10.8,10.8,0,0,1-2.45,13.75l-38.21,30a16.05,16.05,0,0,0-6.05,14.08C416.17,247.67,416.39,251.83,416.39,256Z" style="fill:none;stroke:var(--settings-button-text-color);stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
     </button>
@@ -52,12 +59,18 @@
 
                 <div class="setting-item" id="theme" style="margin-left: 32px;">
                     <div class="setting-info">
-                        <div style="display: flex;">
+                        <div style="display: flex; align-items: center; gap: 10px;">
-                        <span class="setting-title">Thème</span>
+                        <span class="setting-title">Theme</span>
 
-                        <select id="themeSelect" data-key="theme" aria-label="Choisir le thème">
+                        <select id="themeSelect" data-key="theme" aria-label="Choose the theme">
 
                         </select>
+                        <button id="refresh-themes-btn" title="Refresh themes" class="refresh-themes-btn">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M1 4v6h6M23 20v-6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </button>
                         </div>
                         <small>Choose the theme of the application</small>
                     </div>
@@ -80,27 +93,27 @@
                     </div>
                 </div>
 
-                <!-- <div class="setting-item">
+                <div class="setting-item">
+                    <input type="checkbox" data-key="createPlaylistFolders" id="createPlaylistFolders">
+                    <div class="setting-info">
+                    <span class="setting-title">Create Playlist Folders</span>
+                    <small>Create a dedicated folder for each playlist with its name.</small>
+                    </div>
+                </div>
+
+                <div class="setting-item">
                     <input type="checkbox" data-key="notifySystem" id="notifySystem">
                     <div class="setting-info">
                     <span class="setting-title">Notification at the end</span>
                     <small>Notify when a download finishes.</small>
                     </div>
-                </div> -->
-
-                <div class="setting-item">
-                    <input type="checkbox" data-key="customTopBar" id="customTopBar">
-                    <div class="setting-info">
-                    <span class="setting-title">Custom Top bar</span>
-                    <small>Use this if the topbar is missing or you prefer a custom one.</small>
-                    </div>
                 </div>
 
                 <div class="setting-item">
-                    <input type="checkbox" data-key="autoCheckInfo" id="autoCheckInfo">
+                    <input data-key="keepPlaylistOrder" id="keepPlaylistOrder" type="checkbox">
                     <div class="setting-info">
-                    <span class="setting-title">Auto Fetch Info</span>
+                        <span class="setting-title">Keep Playlist Order</span>
-                    <small>Automatically fetch information for new downloads.</small>
+                        <small>Add index before output file, to keep the order.</small>
                     </div>
                 </div>
             </div>
@@ -118,15 +131,31 @@
                     </div>
                 </div>
 
-                <!-- <div class="setting-item">
+                    <div class="setting-item">
-                    <input type="checkbox" data-key="outputTitleCheck" id="outputTitleCheck">
+                        <input data-key="systemTray" id="systemTray" type="checkbox">
-                    <div class="setting-info">
+                        <div class="setting-info">
-                    <span class="setting-title">Output title (special chars)</span>
+                            <span class="setting-title">System Tray</span>
-                    <small>Check for unusual characters in output titles.</small>
+                            <small>Minimize app on close, in the System Tray. [EXPERIMENTAL]</small>
+                        </div>
                     </div>
-                </div> -->
 
-                <div class="setting-item">
+                    <!-- <div class="setting-item">
+                        <input type="checkbox" data-key="outputTitleCheck" id="outputTitleCheck">
+                        <div class="setting-info">
+                        <span class="setting-title">Output title (special chars)</span>
+                        <small>Check for unusual characters in output titles.</small>
+                        </div>
+                    </div> -->
+
+                    <div class="setting-item">
+                        <input data-key="autoCheckInfo" id="autoCheckInfo" type="checkbox">
+                        <div class="setting-info">
+                            <span class="setting-title">Auto Fetch Info</span>
+                            <small>Automatically fetch information for new downloads.</small>
+                        </div>
+                    </div>
+
+                    <div class="setting-item">
                     <input type="checkbox" data-key="addMetadata" id="addMetadata">
                     <div class="setting-info">
                     <span class="setting-title">Add Metadata</span>
@@ -142,6 +171,14 @@
                     </div>
                 </div>
 
+                <div class="setting-item">
+                    <input type="checkbox" data-key="customTopBar" id="customTopBar">
+                    <div class="setting-info">
+                    <span class="setting-title">Custom Top bar</span>
+                    <small>Use this if the topbar is missing or you prefer a custom one.</small>
+                    </div>
+                </div>
+
                 <div class="setting-item" style="margin-left: 32px; margin-top: 20px;">
                     <div class="setting-info">
                         <span class="setting-title">Custom Codec</span>
@@ -158,28 +195,20 @@
                     </div>
                 </div>
 
+                <div class="setting-item">
+                    <input type="checkbox" data-key="enableHardwareAcceleration" id="enableHardwareAcceleration">
+                    <div class="setting-info">
+                    <span class="setting-title">Enable Hardware Acceleration</span>
+                    <small>Uses GPU acceleration for rendering when available. <br> (Be effective on next launch)</small>
+                    </div>
+                </div>
+
                 </details>
 
                 <!-- Developer Settings -->
                 <details class="settings-section">
                 <summary>Developer Settings</summary>
 
-                <!-- <div class="setting-item">
-                    <input type="checkbox" data-key="downloadSystem" id="downloadSystem">
-                    <div class="setting-info">
-                    <span class="setting-title">Download System</span>
-                    <small>Enable/disable the internal download system.</small>
-                    </div>
-                </div> -->
-
-                <!-- <div class="setting-item">
-                    <input type="checkbox" data-key="logSystem" id="logSystem">
-                    <div class="setting-info">
-                    <span class="setting-title">Log System</span>
-                    <small>Enable logging system.</small>
-                    </div>
-                </div> -->
-
                 <div class="setting-item">
                     <input type="checkbox" data-key="verboseLogs" id="verboseLogs">
                     <div class="setting-info">
@@ -191,6 +220,7 @@
                 </details>
 
                 <div class="settings-footer">
+                <button id="open-theme">Open Theme Folder</button>
                 <button id="open-json-btn">Open JSON Configuration</button>
             </div>
 
@@ -198,78 +228,127 @@
         </div>
     </div>
  
-    <div class="container" id="container">
+    <main>
+        <div class="container" id="container">
+            <h1 id="title"> Freedom Loader </h1>
+            <p id="subtitle"> Because why not? </p>
+            
+            <form action="/download" method="POST" id="downloadForm">
+                <div class="url-input-container">
+                    <input type="text" name="url" placeholder="URL" id="UrlInput">
+                    <button type="button" id="pasteBtn" class="paste-btn" title="Paste from clipboard">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15M9 5C9 6.10457 9.89543 7 11 7H13C14.1046 7 15 6.10457 15 5M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5M12 12H15M12 16H15M9 12H9.01M9 16H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
 
-    <header>
+                <label class="checkbox-inline">
-        <h1 id="title"> Freedom Loader </h1>
-        <p id="subtitle"> Because why not? </p>
-    </header>
-    
-    <form action="/download" method="POST" id="downloadForm">
-        <div class="url-input-container">
-            <input type="text" name="url" placeholder="URL" id="UrlInput">
-            <button type="button" id="pasteBtn" class="paste-btn" title="Paste from clipboard">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15M9 5C9 6.10457 9.89543 7 11 7H13C14.1046 7 15 6.10457 15 5M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5M12 12H15M12 16H15M9 12H9.01M9 16H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-            </button>
-        </div>
 
-        <label class="checkbox-inline">
+                    <label class="checkbox-mp3">
+                        <input type="checkbox" name="audioOnly" value="1">
+                        <div class="checkmark"></div>
+                    </label>
+                    Audio Only (MP3)
+                </label>
+                <select name="quality">
+                    <option value="best">Best Quality</option>
+                    <option value="medium">Medium Quality</option>
+                    <option value="worst">Lowest Quality</option>
+                    <option value="1080">1080p</option>
+                    <option value="720">720p</option>
+                    <option value="480">480p</option>
+                </select>
 
-            <label class="checkbox-mp3">
+                <button type="submit" onclick="startProgress()">Download</button>
-                <input type="checkbox" name="audioOnly" value="1">
+            </form>
-                <div class="checkmark"></div>
-            </label>
-            Audio Only (MP3)
-        </label>
-        <select name="quality">
-            <option value="best">Best Quality</option>
-            <option value="medium">Medium Quality</option>
-            <option value="worst">Lowest Quality</option>
-            <option value="1080">1080p</option>
-            <option value="720">720p</option>
-            <option value="480">480p</option>
-        </select>
 
-        <button type="submit" onclick="startProgress()">Download</button>
+            </div>
-    </form>
+
+            <div class="download-path">
+                Will be saved in <span id="savePath"></span>
+                    <button id="changePath">Edit</button>
+            </div>
+
+            <div class="progress-container">
+                <div id="downloadStage" style="display: none; font-size: 0.85rem; color: var(--default-text-color); margin-top: 8px;"></div>
+                <div id="downloadProgressWrapper">
+                    <div id="downloadProgress"></div>   
+                </div>
+                <div style="display: flex; gap: 20px; align-items: center;">
+                    <div id="downloadProgressText"></div> 
+                    <div id="downloadSpeedText"></div>
+                    <div id="playlistInfoText" style="display: none; font-size: 0.9rem;"></div>
+                    <button type="button" id="stopBtn" onclick="stopDownload()" class="stop-btn" style="display:none;" title="Stop download">■</button>
+                </div>
+            </div>
+
+            <div id="downloadStatus" style="display: none;"></div>
+
+            <div class="infos-container">
+
+                <div id="loaderBox" class="loader-box" style="display:none;">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <span>Fetching info...</span>
+                </div>
+
+                <div id="videoInfo" style="margin-top: 20px;"></div>
+            </div>
+
+            <span id="version-badge" class="version-badge"></span>
+
+    </main>
+
+    <!-- Toast Container -->
+    <div id="toast-container"></div>
+
+    <div class="changelog-overlay" id="changelog-overlay" hidden>
+        <section class="changelog-modal" role="dialog" aria-modal="true" aria-labelledby="changelog-title">
+            <div class="changelog-header">
+                <div>
+                    <span class="changelog-eyebrow">Freedom Loader</span>
+                    <h2 id="changelog-title">What's new</h2>
+                </div>
+                <button class="changelog-close" id="changelog-close" type="button" title="Close changelog" aria-label="Close changelog">&times;</button>
+            </div>
+            <div class="changelog-list" id="changelog-list">
+                <p class="changelog-loading">Loading changelog...</p>
+            </div>
+        </section>
     </div>
 
-    <div class="download-path">
-            Will be save on <span id="savePath"></span> 
-            <button id="changePath">Edit</button>
-    </div>
-
-    <div id="downloadProgressWrapper">
-        <div id="downloadProgress"></div>   
-    </div>
-
-    <div style="display: flex; gap: 20px;">
-        <div id="downloadProgressText"></div> 
-        <div id="downloadSpeedText"></div>
-    </div>
-
-    <div id="downloadStatus"></div>
-
-    <div class="infos-container">
-
-        <div id="loaderBox" class="loader-box" style="display:none;">
-            <div></div>
-            <div></div>
-            <div></div>
-            <span>Fetching info...</span>
-        </div>
-
-        <div id="videoInfo" style="margin-top: 20px;"></div>
-    </div>
-
-    <span id="version-badge" class="version-badge"></span>
-
     <h2 id="reference"> Because Why Not ? </h2>
 
+    <div id="updateAvailable" style="display:none">
+        <div class="update-banner">
+            <div class="banner-row">
+                <div class="banner-left">
+                    <div class="icon-wrap">
+                        <span class="material-symbols-outlined" id="update-icon">download</span>
+                    </div>
+                    <div class="text-block">
+                        <span class="update-title" id="update-title">Update available</span>
+                        <span class="update-sub" id="update-sub">A new version is ready</span>
+                    </div>
+                </div>
+                <button class="btn-update" id="btn-update">Download</button>
+            </div>
+            <div class="progress-wrap" id="progress-wrap" style="display:none">
+                <div class="progress-track">
+                    <div class="progress-fill" id="progress-fill"></div>
+                </div>
+                <div class="progress-meta">
+                    <span id="progress-pct">0%</span>
+                    <span id="progress-eta"></span>
+                </div>
+            </div>
+        </div>
+    </div>
     
     <!-- Scripts -->
+    <script src="script/toast.js"></script>
     <script src="script/clipboardPaste.js"></script>
     <script src="script/custompath.js"></script>
     <script src="script/settingsPanel.js"></script>
@@ -278,6 +357,9 @@
     <script src="script/fetchinfo.js"></script>
     <script src="script/progressBar.js"></script>
     <script src="script/customthemes.js"></script>
+    <script src="script/reportBug.js"></script>
+    <script src="script/autoUpdate.js"></script>
+    <script type="module" src="script/changelog.js"></script>
     <script type="module" src="script/topbar.js"></script>
 
 </body>

public/script/appVersion.js

@@ -1,8 +1,54 @@
-async function versionLabel(){
+/**
-    const appVersion = await window.electronAPI.getVersion();
+ * Retrieves the application version and build state from the backend.
+ * Displays a formatted string indicating packaging state and preview status.
+ * Hides the "Packaged" state for production builds to keep the UI clean.
+ *
+ * Example outputs: "Not Packaged Preview v1.6.2" or "Preview v1.6.2"
+ *
+ * @returns {Promise<void>}
+ */
+async function displayVersionLabel() {
+  /**
+   * Raw version string from the backend (e.g., "dev-1.6.2-preview" or "v1.6.2")
+   * @type {string}
+   */
+  const appVersion = await window.electronAPI.getVersion();
 
-    // Write in front the app version for debugging (bottom right)
+  /**
-    document.getElementById("version-badge").textContent = `v${appVersion}`;
+   * UI element displaying the current application version.
-};
+   * @type {HTMLElement | null}
+   */
+  const versionBadge = document.getElementById("version-badge");
 
-versionLabel();
+  if (!versionBadge) return;
+
+  /**
+   * Extracts the numeric semantic version (e.g., "1.6.2").
+   * @type {RegExpMatchArray | null}
+   */
+  const versionMatch = appVersion.match(/(\d+\.\d+\.\d+)/);
+  const baseVersion = versionMatch ? versionMatch[0] : "Unknown";
+
+  /**
+   * Determines the packaging state. The backend prepends "dev-" if unpackaged.
+   * @type {boolean}
+   */
+  const isPackaged = !appVersion.includes("dev-");
+
+  /**
+   * Determines if the current build is a preview version.
+   * @type {boolean}
+   */
+  const isPreview = appVersion.includes("preview");
+
+  /**
+   * Construct the final display string.
+   * If packaged, we don't mention it. If not, we explicitly say "Not Packaged ".
+   */
+  const packageStateStr = isPackaged ? "" : "Not Packaged ";
+  const previewStr = isPreview ? "Preview " : "";
+
+  versionBadge.textContent = `${packageStateStr}${previewStr}v${baseVersion}`;
+}
+
+displayVersionLabel();

public/script/autoUpdate.js

@@ -0,0 +1,109 @@
+async function initUpdateUI() {
+  const container = document.getElementById("updateAvailable");
+
+  const hasUpdate = await window.electronAPI.isUpdateAvailable();
+  if (hasUpdate) {
+    setupAndShowUpdateUI();
+  }
+
+  window.electronAPI.onUpdateAvailable((info) => {
+    setupAndShowUpdateUI(info);
+  });
+
+  function setupAndShowUpdateUI(info) {
+    container.style.display = "block";
+
+    const btn = document.getElementById("btn-update");
+    const icon = document.getElementById("update-icon");
+    const title = document.getElementById("update-title");
+    const sub = document.getElementById("update-sub");
+    const progressWrap = document.getElementById("progress-wrap");
+    const progressFill = document.getElementById("progress-fill");
+    const progressPct = document.getElementById("progress-pct");
+    const progressEta = document.getElementById("progress-eta");
+
+    if (info && info.version) {
+      sub.textContent = `A new version (${info.version}) is ready`;
+    }
+
+    if (info && info.environment && info.environment !== "auto") {
+      icon.textContent = "open_in_new";
+
+      if (info.environment === "snap") {
+        sub.textContent = `Version ${info.version} is out. Use the Snap Store or run "snap refresh".`;
+        btn.textContent = "View Release";
+      } else {
+        sub.textContent = `Version ${info.version} is out. Update via your package manager or download it manually.`;
+        btn.textContent = "Download manually";
+      }
+
+      btn.onclick = () => {
+        window.electronAPI.openReleasePage();
+        container.style.display = "none";
+      };
+
+      return;
+    }
+
+    const initialButtonText = btn.textContent;
+    const initialIconText = icon.textContent;
+    const initialTitleText = title.textContent;
+    const initialSubText = sub.textContent;
+
+    const resetUI = () => {
+      btn.disabled = false;
+      btn.textContent = initialButtonText;
+      icon.textContent = initialIconText;
+      title.textContent = initialTitleText;
+      sub.textContent = initialSubText;
+      progressWrap.style.display = "none";
+      progressFill.style.width = "0%";
+      progressPct.textContent = "0%";
+      progressEta.textContent = "";
+    };
+
+    window.electronAPI.onUpdateError((err) => {
+      console.error("Update failed asynchronously:", err);
+      resetUI();
+    });
+
+    btn.onclick = async () => {
+
+      btn.disabled = true;
+      btn.textContent = "Downloading...";
+      icon.textContent = "download";
+      title.textContent = "Downloading update";
+      progressWrap.style.display = "flex";
+
+      try {
+        await window.electronAPI.downloadUpdate();
+      } catch {
+        resetUI();
+      }
+    };
+
+    window.electronAPI.onDownloadProgress((progress) => {
+      const pct = Math.round(progress.percent);
+      progressFill.style.width = pct + "%";
+      progressPct.textContent = pct + "%";
+
+      const remaining = (progress.total - progress.transferred) / progress.bytesPerSecond;
+      progressEta.textContent =
+        remaining > 0 ? `~${Math.ceil(remaining)}s left` : "almost done";
+    });
+
+    window.electronAPI.onUpdateDownloaded(() => {
+      progressFill.style.width = "100%";
+      progressPct.textContent = "100%";
+      progressEta.textContent = "Done";
+      icon.textContent = "check";
+      title.textContent = "Ready to install";
+      sub.textContent = "Restart to apply the update";
+      btn.textContent = "Restart";
+      btn.disabled = false;
+      btn.onclick = () => window.electronAPI.installUpdate();
+    });
+  }
+}
+
+initUpdateUI();

public/script/changelog.js

@@ -0,0 +1,277 @@
+/** DOM elements used by the changelog modal. */
+const UI = {
+  overlay: document.getElementById("changelog-overlay"),
+  list: document.getElementById("changelog-list"),
+  closeBtn: document.getElementById("changelog-close"),
+  openBtn: document.getElementById("changelog-btn")
+};
+
+/** Changelog payload loaded from the Electron main process. */
+let changelogData = null;
+
+/**
+ * Formats an ISO release date for the current locale.
+ *
+ * @param {string} dateString - Release date returned by GitHub
+ * @returns {string} Localized date or an empty string
+ */
+function formatDate(dateString) {
+  if (!dateString) return "";
+  return new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(new Date(dateString));
+}
+
+/**
+ * Parses inline Markdown and appends safe DOM nodes to a parent element.
+ *
+ * @param {HTMLElement} parent - Element receiving the parsed content
+ * @param {string} value - Inline Markdown text
+ */
+function parseInline(parent, value) {
+    const tokenPattern = /(\*\*|__)(.+?)\1|(?<!\*)\*([^*]+)\*(?!\*)|(?<!_)_([^_]+)_(?!_)|`([^`]+)`|~~([^~]+)~~|\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
+    let lastIndex = 0;
+    let match;
+
+    while ((match = tokenPattern.exec(value)) !== null) {
+      if (match.index > lastIndex) {
+        parent.appendChild(document.createTextNode(value.slice(lastIndex, match.index)));
+      }
+
+      const element = match[7]
+          ? document.createElement("a")
+          : document.createElement(match[1] ? "strong" : match[3] || match[4] ? "em" : match[5] ? "code" : "del");
+
+      element.textContent = match[7] || match[2] || match[3] || match[4] || match[5] || match[6];
+
+      if (match[7]) {
+        element.href = match[8];
+        element.target = "_blank";
+        element.rel = "noopener noreferrer";
+      }
+
+      parent.appendChild(element);
+      lastIndex = tokenPattern.lastIndex;
+    }
+
+    if (lastIndex < value.length) {
+      parent.appendChild(document.createTextNode(value.slice(lastIndex)));
+    }
+}
+
+/**
+ * Parses block-level Markdown such as headings, lists, quotes and code blocks.
+ *
+ * @param {HTMLElement} parent - Element receiving the parsed content
+ * @param {string} markdown - Release body in Markdown format
+ */
+function parseBlock(parent, markdown) {
+    const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+    let paragraph = [];
+    let list = null;
+    let codeBlock = null;
+
+    const flushParagraph = () => {
+      if (!paragraph.length) return;
+      const element = document.createElement("p");
+      paragraph.forEach((line, index) => {
+        if (index) element.appendChild(document.createElement("br"));
+        parseInline(element, line);
+      });
+      parent.appendChild(element);
+      paragraph = [];
+    };
+
+    const closeList = () => {
+      if (list) {
+        parent.appendChild(list);
+        list = null;
+      }
+    };
+
+    lines.forEach((line) => {
+      if (line.trim().startsWith("```")) {
+        flushParagraph();
+        closeList();
+        if (codeBlock) {
+          const code = document.createElement("code");
+          code.textContent = codeBlock.join("\n");
+          const pre = document.createElement("pre");
+          pre.appendChild(code);
+          parent.appendChild(pre);
+          codeBlock = null;
+        } else {
+          codeBlock = [];
+        }
+        return;
+      }
+
+      if (codeBlock) {
+        codeBlock.push(line);
+        return;
+      }
+
+      const heading = line.match(/^(#{1,6})\s+(.+)$/);
+      const unorderedItem = line.match(/^\s*[-*+]\s+(.+)$/);
+      const orderedItem = line.match(/^\s*\d+[.]\s+(.+)$/);
+      const quote = line.match(/^\s*>\s?(.*)$/);
+
+      if (!line.trim()) {
+        flushParagraph();
+        closeList();
+      } else if (heading) {
+        flushParagraph();
+        closeList();
+        const element = document.createElement(`h${heading[1].length}`);
+        parseInline(element, heading[2]);
+        parent.appendChild(element);
+      } else if (unorderedItem || orderedItem) {
+        flushParagraph();
+        const isOrdered = Boolean(orderedItem);
+        if (!list || list.tagName.toLowerCase() !== (isOrdered ? "ol" : "ul")) {
+          closeList();
+          list = document.createElement(isOrdered ? "ol" : "ul");
+        }
+        const item = document.createElement("li");
+        parseInline(item, (unorderedItem || orderedItem)[1]);
+        list.appendChild(item);
+      } else if (quote) {
+        flushParagraph();
+        closeList();
+        const element = document.createElement("blockquote");
+        parseInline(element, quote[1]);
+        parent.appendChild(element);
+      } else if (/^\s*([-*_])\s*\1\s*\1\s*$/.test(line)) {
+        flushParagraph();
+        closeList();
+        parent.appendChild(document.createElement("hr"));
+      } else {
+        paragraph.push(line);
+      }
+    });
+
+    flushParagraph();
+    closeList();
+    if (codeBlock) {
+      const code = document.createElement("code");
+      code.textContent = codeBlock.join("\n");
+      const pre = document.createElement("pre");
+      pre.appendChild(code);
+      parent.appendChild(pre);
+    }
+}
+
+/** Renders the empty state when no releases are available. */
+function renderEmpty() {
+  const emptyMessage = document.createElement("p");
+  emptyMessage.className = "changelog-empty";
+  emptyMessage.textContent = "No changelog available.";
+  UI.list.appendChild(emptyMessage);
+}
+
+/**
+ * Renders one release entry in the changelog list.
+ *
+ * @param {object} release - Release data from the backend
+ */
+function renderEntry(release) {
+    const article = document.createElement("article");
+    article.className = "changelog-entry";
+
+    const heading = document.createElement("div");
+    heading.className = "changelog-entry-heading";
+
+    const title = document.createElement("h3");
+    title.textContent = release.name;
+
+    const metadata = document.createElement("span");
+    metadata.textContent = [release.version, formatDate(release.date)]
+        .filter(Boolean)
+        .join(" · ");
+
+    heading.append(title, metadata);
+
+    const body = document.createElement("div");
+    body.className = "changelog-body";
+    parseBlock(body, release.body);
+
+    article.append(heading, body);
+  UI.list.appendChild(article);
+}
+
+/** Renders all releases, replacing the current modal contents. */
+function renderReleases(releases) {
+  UI.list.replaceChildren();
+  if (!releases.length) {
+    renderEmpty();
+    return;
+  }
+  releases.forEach((release) => renderEntry(release));
+}
+
+/** Opens the changelog modal and moves focus to its close button. */
+function openChangelog(releases) {
+  renderReleases(releases);
+  UI.overlay.hidden = false;
+  UI.closeBtn?.focus();
+}
+
+/** Closes the modal and records the current version as seen. */
+async function closeChangelog() {
+  UI.overlay.hidden = true;
+  await window.electronAPI.markChangelogSeen();
+}
+
+/** Loads changelog data and opens the modal when unread releases exist. */
+async function loadChangelog() {
+  try {
+    changelogData = await window.electronAPI.getChangelog();
+    if (!changelogData.error && changelogData.hasUnread) {
+      openChangelog(changelogData.unreadReleases);
+    }
+  } catch (error) {
+    console.error("Unable to load changelog:", error);
+  }
+}
+
+/** Handles a click on the button that opens the changelog. */
+async function handleOpenClick() {
+  if (!changelogData || changelogData.error) {
+    changelogData = await window.electronAPI.getChangelog();
+  }
+
+  if (changelogData.error) {
+    window.showError("Unable to load changelog. Please check your network connection.");
+    return;
+  }
+
+  openChangelog(changelogData.releases);
+}
+
+/** Closes the modal when the user clicks on the overlay background. */
+function handleOverlayClick(event) {
+  if (event.target === UI.overlay) closeChangelog();
+}
+
+/** Closes the modal when Escape is pressed. */
+function handleKeydown(event) {
+  if (event.key === "Escape" && !UI.overlay.hidden) closeChangelog();
+}
+
+/** Registers all changelog modal event listeners. */
+function bindEvents() {
+  UI.openBtn?.addEventListener("click", handleOpenClick);
+  UI.closeBtn?.addEventListener("click", closeChangelog);
+  UI.overlay?.addEventListener("click", handleOverlayClick);
+  document.addEventListener("keydown", handleKeydown);
+}
+
+/** Initializes the changelog data flow and modal interactions. */
+function init() {
+  bindEvents();
+  loadChangelog();
+}
+
+init();

public/script/clipboardPaste.js

@@ -1,35 +1,40 @@
-// Clipboard paste functionality for URL input
+/**
-document.addEventListener('DOMContentLoaded', () => {
+ * Initializes clipboard paste functionality for the URL input field.
-    const pasteBtn = document.getElementById('pasteBtn');
+ *
-    const urlInput = document.getElementById('UrlInput');
+ * When the user clicks the paste button, the system attempts to read
+ * the clipboard content and inject it into the URL input field.
+ * It also triggers an input event to notify any bound listeners.
+ */
+document.addEventListener("DOMContentLoaded", () => {
+  const pasteBtn = document.getElementById("pasteBtn");
+  const urlInput = document.getElementById("UrlInput");
 
-    if (pasteBtn && urlInput) {
+  if (!pasteBtn || !urlInput) return;
-        pasteBtn.addEventListener('click', async () => {
+
-            try {
+  /**
-                // Read text from clipboard
+   * Handles clipboard paste action triggered by the paste button.
-                const text = await navigator.clipboard.readText();
+   * Reads clipboard text and inserts it into the URL input field.
-                
+   */
-                // Paste into the URL input
+  pasteBtn.addEventListener("click", async () => {
-                urlInput.value = text;
+    try {
-                
+      urlInput.value = await navigator.clipboard.readText();
-                // Trigger input event to ensure any listeners are notified
+
-                urlInput.dispatchEvent(new Event('input', { bubbles: true }));
+      // Notify frameworks / listeners bound to input changes
-                
+      urlInput.dispatchEvent(new Event("input", { bubbles: true }));
-                // Optional: Focus the input
+
-                urlInput.focus();
+      urlInput.focus();
-                
+
-                // Visual feedback
+      // Temporary UI feedback on paste action
-                pasteBtn.style.backgroundColor = 'var(--form-button-bg-hover-color)';
+      pasteBtn.style.backgroundColor = "var(--form-button-bg-hover-color)";
-                setTimeout(() => {
+      setTimeout(() => {
-                    pasteBtn.style.backgroundColor = '';
+        pasteBtn.style.backgroundColor = "";
-                }, 200);
+      }, 200);
-                
+    } catch (err) {
-            } catch (err) {
+      console.error("Clipboard access failed:", err);
-                console.error('Failed to read clipboard:', err);
+
-                
+      alert(
-                // Fallback: prompt user if clipboard API fails
+        "Unable to access clipboard. Please paste manually using Ctrl+V."
-                alert('Unable to access clipboard. Please paste manually using Ctrl+V.');
+      );
-            }
-        });
     }
-});
+  });
+});

public/script/custompath.js

@@ -1,9 +1,24 @@
+/**
+ * Initializes the download path system once the UI is ready.
+ *
+ * Responsibilities:
+ * - Restore last known user-selected download path (localStorage)
+ * - Validate it against backend rules
+ * - Synchronize with backend authoritative path
+ * - Setup folder selection UI interaction
+ */
 window.addEventListener("DOMContentLoaded", async () => {
   const savePathElem = document.getElementById("savePath");
   const form = document.getElementById("downloadForm");
 
-  // input caché = DERNIER chemin validé par le back
+  /**
+   * Hidden form field storing the validated download path
+   * used during download submission.
+   *
+   * Created dynamically if not already present in DOM.
+   */
   let hidden = document.getElementById("savePathInput");
+  
   if (!hidden) {
     hidden = document.createElement("input");
     hidden.type = "hidden";
@@ -12,12 +27,32 @@ window.addEventListener("DOMContentLoaded", async () => {
     form.appendChild(hidden);
   }
 
+  /**
+   * Applies a validated download path received from backend.
+   *
+   * Updates:
+   * - UI display (visible path)
+   * - tooltip (full path)
+   * - hidden form input (used for submission)
+   * - localStorage cache (UX persistence only, not authoritative)
+   *
+   * @param {string} path - validated absolute download path
+   */
   async function applyPathFromBack(path) {
     savePathElem.textContent = path;
+    savePathElem.title = path; 
     hidden.value = path;
     localStorage.setItem("customDownloadPath", path); // UX only
   }
 
+  /**
+   * Loads the initial download path on application startup.
+   *
+   * Priority order:
+   * 1. cached localStorage value (UX only, not trusted)
+   * 2. backend validated version of cached path
+   * 3. backend default fallback path if validation fails
+   */
   async function loadInitialPath() {
     // On affiche ce que le user a vu la dernière fois (UX)
     const cached = localStorage.getItem("customDownloadPath");
@@ -41,13 +76,16 @@ window.addEventListener("DOMContentLoaded", async () => {
 
   await loadInitialPath();
 
-  document
+  /**
-    .getElementById("changePath")
+   * Opens system folder selector and updates download path.
-    .addEventListener("click", async () => {
+   *
+   * The selected folder is validated by Electron backend
+   * before being applied to the UI and persisted.
+   */
+  document.getElementById("changePath").addEventListener("click", async () => {
       try {
         // selectDownloadFolder already returns a validated path
-        const validatedPath =
+        const validatedPath = await window.electronAPI.selectDownloadFolder();
-          await window.electronAPI.selectDownloadFolder();
 
         if (!validatedPath) return; // cancelled
 

public/script/customthemes.js

@@ -1,62 +1,256 @@
-const themes = {
-  dark:       { label: "Sombre", subtitle: "Darkness is my ally" },
-  light:      { label: "Clair", subtitle: "Qui aime ce thème ?" },
-  neon:       { label: "Purple", subtitle: "How was your day ?"},
-  nf:         { label: "NF", subtitle: "You call it music, i call it my Therapist" },
-  songbird:   { label: "Songbird", subtitle: "From Her to Eternity" },
-  drift:      { label: "Drift", subtitle: "Si la route t'appelle, contre appel" },
-  fanatic:    { label: "Fanatic", subtitle: "Always Fnatic !" },
-  chirac:     { label: "Chirac", subtitle: "J'aime les pommes" },
-  spicy:      { label: "Spicy", subtitle: "The Spiciest One" },
-};
-
 const themeSelect = document.getElementById("themeSelect");
+/**
+ * Currently selected themes loaded from backend.
+ * Used as cache for UI theme switching.
+ */
+let loadedThemes = [];
 
-function populateThemeSelect() {
+/**
-  for (const [themeKey, themeInfo] of Object.entries(themes)) {
+ * Applies a theme object to the application UI by mapping
+ * theme configuration values to CSS variables and DOM properties.
+ *
+ * This function mutates:
+ * - document.body (background styling)
+ * - :root CSS variables (design system tokens)
+ * - subtitle DOM element (theme metadata display)
+ *
+ * @param {Object} theme - Theme definition object
+ * @param {Object} theme.style - Style configuration
+ */
+function applyTheme(theme) {
+  const root = document.documentElement;
+  const style = theme.style;
+
+  // Background
+  if (theme.image) {
+    document.body.style.backgroundImage = `url('${theme.image}')`;
+    document.body.style.backgroundSize = style.background?.size || "cover";
+    document.body.style.backgroundPosition = style.background?.position || "center";
+    document.body.style.backgroundAttachment = style.background?.attachment || "fixed";
+  } else {
+    document.body.style.backgroundImage = "";
+  }
+
+  // CSS variables (design tokens)
+  root.style.setProperty("--background-color", style.colors?.background || "#121212");
+  root.style.setProperty("--default-text-color", style.colors?.text?.default || "#e0e0e0");
+  root.style.setProperty("--subtitle-color", style.colors?.text?.subtitle || "#2196f3");
+  root.style.setProperty("--audio-only-label-color", style.colors?.text?.audioOnly || "#f5f5f5");
+
+  root.style.setProperty("--form-bg-color", style.form?.background || "#1e1e1e");
+  root.style.setProperty("--form-input-bg-color", style.form?.input?.background || "#2a2a2a");
+  root.style.setProperty("--form-input-border-color", style.form?.input?.border || "#444444");
+  root.style.setProperty("--form-input-border-focus-color", style.form?.input?.borderFocus || "#2196f3");
+  root.style.setProperty("--form-input-text-color", style.form?.input?.text || "#f5f5f5");
+  root.style.setProperty("--form-input-placeholder-color", style.form?.input?.placeholder || "#888888");
+  root.style.setProperty("--form-button-bg-color", style.form?.button?.background || "#2196f3");
+  root.style.setProperty("--form-button-text-color", style.form?.button?.text || "#ffffff");
+  root.style.setProperty("--form-button-bg-hover-color", style.form?.button?.hover || "#1976d2");
+  root.style.setProperty("--paste-button-icon-color", style.form?.pasteButtonIcon || "#ffffff");
+
+  root.style.setProperty("--checkbox-unchecked-bg-color", style.checkbox?.background?.unchecked || "#555555");
+  root.style.setProperty("--checkbox-checked-bg-color", style.checkbox?.background?.checked || "#2196f3");
+  root.style.setProperty("--checkbox-checkmark-border-color", style.checkbox?.checkmarkBorder || "#ffffff");
+  root.style.setProperty("--checkbox-pulse-color", style.checkbox?.pulse || "rgba(33, 150, 243, 0.5)");
+
+  root.style.setProperty("--download-status-color", style.download?.status || "#2196f3");
+
+  root.style.setProperty("--progress-bar-bg-color", style.progressBar?.background || "#444444");
+  root.style.setProperty("--progress-bar-fill-color", style.progressBar?.fill || "#2196f3");
+
+  root.style.setProperty("--video-info-bg-color", style.videoInfo?.background || "#1a1a1a");
+  root.style.setProperty("--video-info-text-color", style.videoInfo?.text || "#e0e0e0");
+  root.style.setProperty("--video-info-heading-color", style.videoInfo?.heading || "#2196f3");
+  root.style.setProperty("--video-info-list-color", style.videoInfo?.list || "#cccccc");
+  root.style.setProperty("--video-info-list-strong-color", style.videoInfo?.strong || "#ffffff");
+  root.style.setProperty("--video-info-link-color", style.videoInfo?.link || "#2196f3");
+  root.style.setProperty("--video-info-link-hover-color", style.videoInfo?.linkHover || "#1976d2");
+
+  root.style.setProperty("--playlist-background-color", style.playlist?.background || "#303030");
+
+  root.style.setProperty("--settings-button-bg-color", style.settings?.button?.background || "#1e1e1e");
+  root.style.setProperty("--settings-button-text-color", style.settings?.button?.text || "#e0e0e0");
+  root.style.setProperty("--open-theme-button-bg-color", style.settings?.openThemeButton?.background || "#2196f3");
+  root.style.setProperty("--open-theme-button-text-color", style.settings?.openThemeButton?.text || "#ffffff");
+  root.style.setProperty("--open-json-button-bg-color", style.settings?.openJsonButton?.background || style.settings?.button?.background || "#1e1e1e");
+  root.style.setProperty("--open-json-button-text-color", style.settings?.openJsonButton?.text || style.settings?.button?.text || "#e0e0e0");
+  root.style.setProperty("--settings-modal-bg-color", style.settings?.background?.modal || "#1e1e1e");
+  root.style.setProperty("--settings-section-bg-color", style.settings?.background?.section || "#2a2a2a");
+  root.style.setProperty("--settings-text-color", style.settings?.text || "#e0e0e0");
+  root.style.setProperty("--settings-subtitle-color", style.settings?.subtitle || "#aaaaaa");
+
+  const subtitleEl = document.getElementById("subtitle");
+  if (subtitleEl) subtitleEl.textContent = theme.subtitle || theme.name;
+}
+
+/**
+ * Persists selected theme ID into Electron backend features storage.
+ *
+ * @param {string} themeId
+ */
+function saveTheme(themeId) {
+  window.electronAPI.setFeature("theme", themeId);
+}
+
+/**
+ * Populates theme dropdown selector with available themes.
+ *
+ * @param {Array} themes
+ */
+function populateThemeSelect(themes) {
+  themeSelect.innerHTML = "";
+
+  for (const theme of themes) {
     const option = document.createElement("option");
-    option.value = themeKey;        
+    option.value = theme.id;
-    option.textContent = themeInfo.label; 
+    option.textContent = theme.name;
     themeSelect.appendChild(option);
   }
 }
 
-function applyTheme(themeKey) {
+/**
-  document.body.classList.remove(...Object.keys(themes));
+ * Initializes theme system:
-  document.body.classList.add(themeKey);
+ * - loads themes from backend
+ * - restores saved theme
+ * - applies selected theme
+ */
+async function initThemes() {
+  loadedThemes = await window.electronAPI.getThemes();
 
-  const subtitleElement = document.getElementById("subtitle");
+  if (!loadedThemes.length) {
-  if (subtitleElement && themes[themeKey]) {
+    const defaultTheme = {
-    subtitleElement.textContent = themes[themeKey].subtitle;
+      id: "dark",
+      name: "Dark",
+      subtitle: "Because Why Not ?",
+      style: {
+        background: {
+          size: "cover",
+          position: "center",
+          attachment: "fixed"
+        },
+
+        colors: {
+          background: "#121212",
+          text: {
+            default: "#e0e0e0",
+            subtitle: "#2196f3",
+            audioOnly: "#f5f5f5"
+          }
+        },
+
+        form: {
+          background: "#1e1e1e",
+          input: {
+            background: "#2a2a2a",
+            border: "#444444",
+            borderFocus: "#2196f3",
+            text: "#f5f5f5",
+            placeholder: "#888888"
+          },
+          button: {
+            background: "#2196f3",
+            text: "#ffffff",
+            hover: "#1976d2"
+          },
+          pasteButtonIcon: "#ffffff"
+        },
+
+        checkbox: {
+          background: {
+            unchecked: "#555555",
+            checked: "#2196f3"
+          },
+          checkmarkBorder: "#ffffff",
+          pulse: "rgba(33, 150, 243, 0.5)"
+        },
+
+        download: {
+          status: "#2196f3"
+        },
+
+        progressBar: {
+          background: "#444444",
+          fill: "#2196f3"
+        },
+
+        videoInfo: {
+          background: "#1a1a1a",
+          text: "#e0e0e0",
+          heading: "#2196f3",
+          list: "#cccccc",
+          strong: "#ffffff",
+          link: "#2196f3",
+          linkHover: "#1976d2"
+        },
+
+        playlist: {
+          background: "#303030"
+        },
+
+        settings: {
+          button: {
+            background: "#1e1e1e",
+            text: "#e0e0e0"
+          },
+          openThemeButton: {
+            background: "#2196f3",
+            text: "#ffffff"
+          },
+          openJsonButton: {
+            background: "#2196f3",
+            text: "#ffffff"
+          },
+          background: {
+            modal: "#1e1e1e",
+            section: "#2a2a2a"
+          },
+          text: "#e0e0e0",
+          subtitle: "#aaaaaa"
+        }
+      }
+    };
+
+    loadedThemes = [defaultTheme];
   }
 
+  populateThemeSelect(loadedThemes);
+
+  const features = await window.electronAPI.getFeatures();
+  const savedId = features.theme;
+
+  const theme = loadedThemes.find(t => t.id === savedId) || loadedThemes[0];
+
+  themeSelect.value = theme.id;
+  applyTheme(theme);
 }
 
-function saveTheme(themeKey) {
+/**
-  localStorage.setItem("selectedTheme", themeKey);
+ * Handles theme selection change from UI dropdown.
-}
+ */
+themeSelect.addEventListener("change", (e) => {
+  const theme = loadedThemes.find(t => t.id === e.target.value);
+  if (!theme) return;
 
-function loadTheme() {
+  applyTheme(theme);
-  const savedTheme = localStorage.getItem("selectedTheme");
+  saveTheme(theme.id);
-
-  if (savedTheme && themes[savedTheme]) {
-    applyTheme(savedTheme);
-    themeSelect.value = savedTheme;
-  } else {
-    applyTheme("dark");
-    themeSelect.value = "dark";
-  }
-}
-
-// When the user changes the theme from the select
-themeSelect.addEventListener("change", (event) => {
-  const selectedTheme = event.target.value;
-  if (themes[selectedTheme]) {
-    applyTheme(selectedTheme);
-    saveTheme(selectedTheme);
-  }
 });
 
-// Initialisation
+/**
-populateThemeSelect();
+ * Reloads themes from backend and reapplies current selection.
-loadTheme();
+ */
+async function refreshThemes() {
+  loadedThemes = await window.electronAPI.reloadThemes();
+  populateThemeSelect(loadedThemes);
+
+  const features = await window.electronAPI.getFeatures();
+  const savedId = features.theme;
+
+  const theme = loadedThemes.find(t => t.id === savedId) || loadedThemes[0];
+
+  themeSelect.value = theme.id;
+  applyTheme(theme);
+}
+
+window.refreshThemes = refreshThemes;
+
+initThemes();

public/script/downloadstatus.js

@@ -1,11 +1,55 @@
 const form = document.getElementById("downloadForm");
 const statusDiv = document.getElementById("downloadStatus");
-const button = form.querySelector("button");
+const button = form.querySelector("button[type=\"submit\"]");
+const stopBtn = document.getElementById("stopBtn");
 
+/**
+ * Indicates whether a download process is currently active.
+ * Used to prevent duplicate submissions and to gate UI actions
+ * such as disabling the form or showing progress.
+ */
+let isDownloading = false;
+
+/**
+ * Indicates whether the current download was explicitly
+ * stopped by the user via the cancel action.
+ *
+ * Used to differentiate between:
+ * - user-initiated cancellation
+ * - failures or natural completion
+ */
+let userStoppedDownload = false;
+
+
+
+/**
+ * Handles download form submission.
+ *
+ * - Validates user input (URL)
+ * - Disables UI during download
+ * - Sends request to backend `/download`
+ * - Manages success / error states
+ * - Restores UI state after completion
+ */
 form.addEventListener("submit", async (e) => {
   e.preventDefault();
-  button.disabled = true; // Avoid multiple clicks
+  
-  statusDiv.textContent = "Download in progress...";
+  const urlInput = form.querySelector("input[name='url']");
+  const url = urlInput.value.trim();
+  
+  // Basic URL validation
+  if (!url) {
+    window.showError("Please enter a URL");
+    return;
+  }
+  
+  button.disabled = true;
+  statusDiv.style.display = "none";
+  isDownloading = true;
+  userStoppedDownload = false;
+
+  // Show progress UI immediately with initial message
+  showInitialProgress();
 
   const formData = new FormData(form);
   const params = new URLSearchParams(formData);
@@ -18,20 +62,113 @@ form.addEventListener("submit", async (e) => {
     });
 
     if (!res.ok) {
-      statusDiv.textContent = res;
+      if (!userStoppedDownload) {
+        const errorText = await res.text();
+        window.showError(errorText);
+        resetProgressBar();
+      }
       return;
     }
 
-    const text = await res.text();
+    // Download successful - check if notifications are enabled
-    statusDiv.textContent = text;
+    const features = await window.electronAPI.getFeatures();
+    if (features.notifySystem) {
+      window.showSuccess("Download completed!");
+    }
 
-  } catch {
+  } catch (err) {
-    statusDiv.textContent = "❌ An Error has Occured.";
+    if (!isDownloading && !userStoppedDownload) {
+      statusDiv.style.display = "none";
+    }
   } finally {
+    isDownloading = false;
     button.disabled = false;
-
+    stopBtn.style.display = "none";
-    setTimeout(() => {
-      statusDiv.textContent = "";
-    }, 5000);
   }
-});
+});
+
+/**
+ * Displays initial download progress UI immediately
+ * when a download starts.
+ *
+ * Initializes progress bar, speed indicator, stage text
+ * and shows the stop button.
+ */
+function showInitialProgress() {
+  const progressWrapper = document.getElementById("downloadProgressWrapper");
+  const progressBarText = document.getElementById("downloadProgressText");
+  const speedElement = document.getElementById("downloadSpeedText");
+  const stageElement = document.getElementById("downloadStage");
+  const stopBtn = document.getElementById("stopBtn");
+  
+  if (progressWrapper) progressWrapper.style.display = "block";
+  if (progressBarText) {
+    progressBarText.style.display = "block";
+    progressBarText.innerHTML = "0%";
+  }
+  if (speedElement) {
+    speedElement.style.display = "block";
+    speedElement.textContent = "0 Mib/s";
+  }
+  if (stageElement) {
+    stageElement.style.display = "block";
+    stageElement.textContent = "Retrieving data...";
+  }
+  if (stopBtn) stopBtn.style.display = "inline-flex";
+}
+
+/**
+ * Cancels the current download process.
+ *
+ * Sends a request to backend `/download/cancel`,
+ * updates UI state and resets progress indicators.
+ *
+ * Prevents duplicate calls if no download is active.
+ */
+async function stopDownload() {
+  if (!isDownloading) return;
+
+  userStoppedDownload = true;
+  button.disabled = true;
+  stopBtn.disabled = true;
+
+  try {
+    await fetch("/download/cancel", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    });
+    
+    window.showWarning("Download stopped");
+  } catch (err) {
+    console.error("Error stopping download:", err);
+  } finally {
+    isDownloading = false;
+    button.disabled = false;
+    stopBtn.disabled = false;
+    stopBtn.style.display = "none";
+    resetProgressBar();
+  }
+}
+
+/**
+ * Resets all download progress UI elements to their
+ * default hidden state.
+ *
+ * Used after completion or cancellation of a download.
+ */
+function resetProgressBar() {
+  const progressWrapper = document.getElementById("downloadProgressWrapper");
+  if (progressWrapper) progressWrapper.style.display = "none";
+  
+  const progressBar = document.getElementById("downloadProgress");
+  if (progressBar) progressBar.style.width = "0%";
+
+  const progressBarText = document.getElementById("downloadProgressText");
+  if (progressBarText) progressBarText.style.display = "none";
+
+  const speedElement = document.getElementById("downloadSpeedText");
+  if (speedElement) speedElement.style.display = "none";
+
+  const playlistInfoElement = document.getElementById("playlistInfoText");
+  if (playlistInfoElement) playlistInfoElement.style.display = "none";
+}

public/script/fetchinfo.js

@@ -1,23 +1,44 @@
+/**
+ * Converts a raw upload date string (format YYYYMMDD)
+ * into a human-readable format (DD/MM/YYYY).
+ *
+ * Returns "Inconnue" if the input is invalid or malformed.
+ */
 function formatDate(dateStr) {
   if (!dateStr || dateStr.length !== 8) return "Inconnue";
   return `${dateStr.slice(6,8)}/${dateStr.slice(4,6)}/${dateStr.slice(0,4)}`;
 }
 
+/**
+ * Converts a file size in bytes into megabytes (MB).
+ *
+ * Returns a formatted string with 2 decimals (e.g. "12.34 Mo").
+ * If input is falsy, returns "Inconnue".
+ */
 function formatSize(bytes) {
   return bytes ? (bytes / (1024*1024)).toFixed(2) + " Mo" : "Inconnue";
 }
 
+/**
+ * Fetches video or playlist metadata from the backend `/info` endpoint.
+ *
+ * Sends a POST request with URL-encoded body.
+ * Handles network errors, HTTP errors and JSON parsing safely.
+ *
+ * @param {string} url - Video or playlist URL
+ * @returns {Promise<Object>} Parsed metadata or error object
+ */
 async function fetchVideoInfo(url) {
   try {
-    const res = await fetch("/info", {
+    const res = await fetch(`/info?url=${encodeURIComponent(url)}`, {
-      method: "POST",
+      method: "GET",
-      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      headers: {"Accept": "application/json"}
-      body: new URLSearchParams({ url }),
     });
 
-    if (!res.ok) return { error: `An Error occured when fetching info` };
-
     const data = await res.json();
+
+    if (!res.ok) return {error: `An Error occured when fetching info`};
+
     if (!data) return { error: "Data is Missing" };
 
     return data;
@@ -26,13 +47,34 @@ async function fetchVideoInfo(url) {
   }
 }
 
-
+/**
+ * Initializes the video info system UI.
+ *
+ * - Listens to URL input changes
+ * - Automatically fetches video/playlist metadata if enabled
+ * - Renders either playlist UI or single video UI
+ * - Handles loading states and caching (lastFetchedUrl)
+ *
+ * Also manages dynamic playlist title injection into the form.
+ */
 async function init() {
 
+  // Main input listener: triggers auto-fetch when URL changes
   document.addEventListener("DOMContentLoaded", () => {
     const urlInput = document.getElementById("UrlInput");
     const infoDiv = document.getElementById("videoInfo");
     const loaderBox = document.getElementById("loaderBox");
+    const form = document.getElementById("downloadForm");
+
+    // Input caché pour stocker le titre de la playlist
+    let playlistTitleInput = document.getElementById("playlistTitle");
+    if (!playlistTitleInput) {
+      playlistTitleInput = document.createElement("input");
+      playlistTitleInput.type = "hidden";
+      playlistTitleInput.name = "playlistTitle";
+      playlistTitleInput.id = "playlistTitle";
+      form.appendChild(playlistTitleInput);
+    }
 
     let lastFetchedUrl = "";
 
@@ -47,6 +89,7 @@ async function init() {
       if (!url || url.length < 2) {
         infoDiv.innerHTML = "";
         infoDiv.classList.remove("visible", "playlist-mode");
+        playlistTitleInput.value = "";
         lastFetchedUrl = "";
         return;
       }
@@ -70,12 +113,14 @@ async function init() {
         `;
         infoDiv.classList.add("visible");
         infoDiv.classList.remove("playlist-mode");
+        playlistTitleInput.value = "";
         loaderBox.style.display = "none";
         return;
       }
 
       // ---------- PLAYLIST ----------
       if (data.type === "playlist") {
+        playlistTitleInput.value = data.title;
         infoDiv.classList.add("playlist-mode");
         infoDiv.innerHTML = `
           <div class="playlist-header">
@@ -194,6 +239,7 @@ async function init() {
       }
 
       infoDiv.classList.remove("playlist-mode");
+      playlistTitleInput.value = "";
 
       // ---------- VIDEO NORMALE ----------
       const durationStr = data.duration
@@ -223,8 +269,8 @@ async function init() {
       infoDiv.classList.add("visible");
     });
 
-  })
+  });
 
-};
+}
 
 init();

public/script/progressBar.js

@@ -1,25 +1,65 @@
+/**
+ * DOM elements used for download progress UI rendering.
+ * These elements are updated in real-time via SSE streams.
+ */
 const progressWrapper = document.getElementById("downloadProgressWrapper");
 const progressBar = document.getElementById("downloadProgress");
-const progressBarText = document.getElementById("downloadProgressText")
+const progressBarText = document.getElementById("downloadProgressText");
 
 const speedElement = document.getElementById("downloadSpeedText");
+const stageElement = document.getElementById("downloadStage");
+const playlistInfoElement = document.getElementById("playlistInfoText");
+
+/**
+ * Server-Sent Events streams for real-time download updates.
+ * Each stream is responsible for a specific aspect of the download state.
+ */
 const speedEvt = new EventSource("/download/speed");
+const stageEvt = new EventSource("/download/stage");
+const playlistInfoEvt = new EventSource("/download/playlist-info");
 
+/**
+ * Resets the progress UI to its initial state.
+ * Hides all dynamic elements and clears displayed values.
+ */
 function startProgress() {
-  progressWrapper.style.display = "block";
   progressBar.style.width = "0%";
-  progressBarText.style.display = "block";
   progressBarText.innerHTML = "0%";
-
-  speedElement.style.display = "block";
   speedElement.innerHTML = "0 Mib/s";
 }
 
+/**
+ * Makes the progress UI visible and enables related controls
+ * such as the stop button.
+ */
+function showProgress() {
+  progressWrapper.style.display = "block";
+  progressBarText.style.display = "block";
+  speedElement.style.display = "block";
+
+  const stopBtn = document.getElementById("stopBtn");
+  if (stopBtn) stopBtn.style.display = "inline-flex";
+}
+
+/**
+ * Updates the progress bar UI with the given percentage.
+ * Automatically triggers UI visibility if not already shown.
+ *
+ * @param {number} percent - Download progress percentage (0–100)
+ */
 function updateProgress(percent) {
+  if (percent > 0 && progressWrapper.style.display !== "block") {
+    showProgress();
+  }
+
   progressBar.style.width = `${percent}%`;
   progressBarText.innerHTML = `${percent}%`;
 }
 
+/**
+ * Fully resets the progress UI and hides all download indicators.
+ * Called after completion or cancellation.
+ */
 function resetProgress() {
   progressBar.style.width = "0%";
   progressBarText.textContent = "";
@@ -28,10 +68,26 @@ function resetProgress() {
 
   speedElement.textContent = "0 Mib/s";
   speedElement.style.display = "none";
+
+  stageElement.textContent = "";
+  stageElement.style.display = "none";
+
+  playlistInfoElement.textContent = "";
+  playlistInfoElement.style.display = "none";
+
+  const stopBtn = document.getElementById("stopBtn");
+  if (stopBtn) stopBtn.style.display = "none";
 }
 
-// SSE Connexion
+/**
+ * Main SSE stream handling download progress updates.
+ * Supports:
+ * - reset signal
+ * - done signal
+ * - percentage updates
+ */
 const evtSource = new EventSource("/download/progress");
+
 evtSource.onmessage = e => {
   if (e.data === "reset") {
     startProgress();
@@ -40,24 +96,41 @@ evtSource.onmessage = e => {
   }
 
   if (e.data === "done") {
-    resetProgress();
+    setTimeout(() => {
-    window.electronAPI.setProgress(-1); 
+      resetProgress();
+      window.electronAPI.setProgress(-1);
+    }, 2000);
     return;
   }
 
   const percent = parseFloat(e.data);
-  
+
   if (!isNaN(percent)) {
     updateProgress(percent);
-    window.electronAPI.setProgress(percent); // Update Task Bar
+    window.electronAPI.setProgress(percent);
-    if (percent >= 100) setTimeout(() => {
-      resetProgress();
-      window.electronAPI.setProgress(-1); // Remove the bar
-    }, 500);
   }
 };
 
+/**
+ * SSE stream: download speed updates (e.g. "5.2 MiB/s").
+ */
 speedEvt.onmessage = e => {
   speedElement.style.display = "block";
-  speedElement.textContent = e.data; // ex: "5.2MiB/s"
+  speedElement.textContent = e.data;
+};
+
+/**
+ * SSE stream: download stage updates (e.g. downloading, merging, extracting).
+ */
+stageEvt.onmessage = e => {
+  stageElement.style.display = "block";
+  stageElement.textContent = e.data;
+};
+
+/**
+ * SSE stream: playlist progress updates (e.g. "Item 1 of 15").
+ */
+playlistInfoEvt.onmessage = e => {
+  playlistInfoElement.style.display = "block";
+  playlistInfoElement.textContent = e.data;
 };

public/script/reportBug.js

@@ -0,0 +1,165 @@
+class BugReportModal {
+    constructor() {
+        this.modal = null;
+        this.form = null;
+        this.init();
+    }
+
+    init() {
+        this.modal = document.createElement("div");
+        this.modal.className = "bug-modal-overlay";
+        this.modal.style.cssText = "display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:99999; font-family:sans-serif;";
+
+        this.modal.innerHTML = `
+      <div class="bug-modal-content" style="background:#14141491 !important; color:#ffffff !important; padding:24px !important; border-radius:10px !important; width:420px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.8) !important; display:flex !important; flex-direction:column !important; gap:16px !important; border: 1px solid #333 !important; box-sizing: border-box !important;">
+        <h3 style="margin:0 !important; font-size:1.2rem !important; font-weight:600 !important; color:#ffffff !important;">Report a Bug</h3>
+        <form id="bugReportForm" style="display:flex !important; flex-direction:column !important; gap:12px !important; width:unset !important; margin:0 !important; background:transparent !important; box-shadow: unset !important;">
+          <div style="display:flex !important; flex-direction:column !important; gap:4px !important;">
+            <label style="font-size:0.85rem !important; color:#aaaaaa !important;">Title <span style="color: red; font-weight: bold" >*</span> </label>
+            <input type="text" id="bugTitle" required style="background:#2a2a2a !important; border:1px solid #444 !important; color:#ffffff !important; border-radius:6px !important; padding:8px 10px !important; outline:none !important; width:100% !important; box-sizing: border-box !important;" />
+          </div>
+          <div style="display:flex !important; flex-direction:column !important; gap:4px !important;">
+            <label style="font-size:0.85rem !important; color:#aaaaaa !important;">Description <span style="color: red; font-weight: bold" >*</span></label>
+            <textarea id="bugDescription" placeholder="Provide some details about the bug" required rows="4" style="background:#2a2a2a !important; border:1px solid #444 !important; color:#ffffff !important; border-radius:6px !important; padding:8px 10px !important; outline:none !important; resize:vertical !important; width:100% !important; box-sizing: border-box !important;"></textarea>
+          </div>
+          <div style="display:flex !important; flex-direction:column !important; gap:4px !important;">
+            <label style="font-size:0.85rem !important; color:#aaaaaa !important;">Include Logs From Today</label>
+            <select id="bugIncludeLogs" style="background:#2a2a2a !important; border:1px solid #444 !important; color:#ffffff !important; border-radius:6px !important; padding:8px 10px !important; outline:none !important; width:100% !important; box-sizing: border-box !important;">
+              <option value="yes" style="background:#2a2a2a !important; color:#ffffff !important;">Yes</option>
+              <option value="no" style="background:#2a2a2a !important; color:#ffffff !important;">No</option>
+            </select>
+          </div>
+          <div id="bugReportServiceStatus" role="status" aria-live="polite" style="display:none !important; align-items:center !important; gap:8px !important; color:#aaaaaa !important; font-size:0.8rem !important;">
+            <span id="bugReportServiceStatusDot" style="width:8px !important; height:8px !important; border-radius:50% !important; background:#f59e0b !important; flex-shrink:0 !important;"></span>
+            <span id="bugReportServiceStatusText">Checking bug report service...</span>
+          </div>
+          <div style="display:flex !important; justify-content:flex-end !important; gap:8px !important; margin-top:8px !important;">
+            <button type="button" id="bugCancelBtn" style="background:#333333 !important; border:none !important; color:#cccccc !important; padding:8px 14px !important; border-radius:6px !important; cursor:pointer !important;">Cancel</button>
+            <button type="submit" id="bugSendBtn" disabled style="background:#4f46e5 !important; border:none !important; color:#ffffff !important; padding:8px 16px !important; border-radius:6px !important; cursor:not-allowed !important; opacity:0.5 !important; font-weight:500 !important;">Send</button>
+          </div>
+        </form>
+      </div>
+    `;
+
+        document.body.appendChild(this.modal);
+        this.form = this.modal.querySelector("#bugReportForm");
+
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        const titleInput = this.modal.querySelector("#bugTitle");
+        const descInput = this.modal.querySelector("#bugDescription");
+        const sendButton = this.modal.querySelector("#bugSendBtn");
+
+        titleInput.addEventListener("input", () => {
+            localStorage.setItem("draft_bug_title", titleInput.value);
+        });
+
+        descInput.addEventListener("input", () => {
+            localStorage.setItem("draft_bug_desc", descInput.value);
+        });
+
+        this.modal.querySelector("#bugCancelBtn").addEventListener("click", () => {
+            this.close();
+        });
+
+        this.modal.addEventListener("click", (e) => {
+            if (e.target === this.modal) {
+                this.close();
+            }
+        });
+
+        this.form.addEventListener("submit", async (e) => {
+            e.preventDefault();
+            if (sendButton.disabled) {
+                return;
+            }
+
+            const data = {
+                title: titleInput.value,
+                description: descInput.value,
+                includeLogs: this.modal.querySelector("#bugIncludeLogs").value
+            };
+
+            window.electronAPI.logInfo("Submitting:", data);
+
+            try {
+                const success = await window.topbarAPI.sendReport(data);
+
+                if (success) {
+                    localStorage.removeItem("draft_bug_title");
+                    localStorage.removeItem("draft_bug_desc");
+                    this.form.reset();
+                    this.close();
+                    window.showSuccess("Bug report sent successfully!");
+                }
+            } catch (err) {
+                window.showError("Failed to send bug report.");
+                window.electronAPI.logError("Failed to send bug report:", err.message);
+            }
+        });
+    }
+
+    loadState() {
+        const savedTitle = localStorage.getItem("draft_bug_title");
+        const savedDesc = localStorage.getItem("draft_bug_desc");
+
+        if (savedTitle) {
+            this.modal.querySelector("#bugTitle").value = savedTitle;
+        }
+        if (savedDesc) {
+            this.modal.querySelector("#bugDescription").value = savedDesc;
+        }
+    }
+
+    open() {
+        this.loadState();
+        this.modal.style.display = "flex";
+        this.updateServiceStatus();
+    }
+
+    close() {
+        this.modal.style.display = "none";
+    }
+
+    async updateServiceStatus() {
+        const statusText = this.modal.querySelector("#bugReportServiceStatusText");
+        const statusDot = this.modal.querySelector("#bugReportServiceStatusDot");
+        const sendButton = this.modal.querySelector("#bugSendBtn");
+
+        sendButton.disabled = true;
+        sendButton.style.setProperty("cursor", "not-allowed", "important");
+        sendButton.style.setProperty("opacity", "0.5", "important");
+
+        try {
+            const serviceStatus = await window.topbarAPI.getReportServiceStatus();
+            const serviceAvailable = serviceStatus.status === "online";
+            const statusVisible = !serviceAvailable;
+            statusText.textContent = serviceStatus.message;
+            statusDot.style.background = "#ef4444";
+            statusText.style.color = "#fca5a5";
+            this.modal.querySelector("#bugReportServiceStatus").style.setProperty(
+                "display",
+                statusVisible ? "flex" : "none",
+                "important"
+            );
+            sendButton.disabled = !serviceAvailable;
+            sendButton.style.setProperty("cursor", serviceAvailable ? "pointer" : "not-allowed", "important");
+            sendButton.style.setProperty("opacity", serviceAvailable ? "1" : "0.5", "important");
+        } catch (err) {
+            statusText.textContent = "Unable to check bug report service.";
+            statusDot.style.background = "#ef4444";
+            statusText.style.color = "#fca5a5";
+            this.modal.querySelector("#bugReportServiceStatus").style.setProperty("display", "flex", "important");
+            sendButton.disabled = true;
+            window.electronAPI.logError("Failed to retrieve bug report service status:", err.message);
+        }
+    }
+}
+
+window.bugModal = new BugReportModal();
+
+document.getElementById("report-bug-btn").addEventListener("click", () => {
+    window.bugModal.open();
+});

public/script/settingsPanel.js

@@ -1,50 +1,104 @@
+/**
+ * Settings panel DOM elements used to control application feature flags
+ * and configuration UI interactions.
+ */
 const settingsPanel = document.getElementById("settings-panel");
 const settingsModal = document.querySelector(".settings-modal");
-
 const settingsButton = document.getElementById("settings-button");
 
+/**
+ * Tracks current settings panel state.
+ * NOTE: actual visibility is derived from DOM style in current implementation.
+ */
 let isOpen = false;
 
+/**
+ * Toggles visibility of the settings panel when clicking the settings button.
+ */
 settingsButton.addEventListener("click", () => {
-    const isOpen = settingsPanel.style.display === "block";
+    settingsPanel.classList.toggle("open");
-    settingsPanel.style.display = isOpen ? "none" : "block";
 });
 
+/**
+ * Closes the settings panel and resets internal state.
+ */
 function closePanel() {
-    isOpen = false;
+  isOpen = false;
-    settingsPanel.style.display = "none";
+    settingsPanel.classList.remove("open");
 }
 
-
+/**
+ * Loads feature flags from Electron backend and syncs them
+ * with corresponding UI controls (checkboxes, selects).
+ *
+ * Also registers change listeners to persist updates in real time.
+ */
 async function loadSettings() {
   const features = await window.electronAPI.getFeatures();
 
-  document.querySelectorAll(".settings-section input, .settings-section select").forEach(el => {
+  document
-    const key = el.dataset.key;
+    .querySelectorAll(".settings-section input, .settings-section select")
-    if (features[key] !== undefined) {
+    .forEach((el) => {
-      if (el.type === "checkbox") el.checked = features[key];
+      const key = el.dataset.key;
-      else if (el.tagName === "SELECT") el.value = features[key];
+      if (!key) return;
-    }
 
-    el.addEventListener("change", () => {
+      if (features[key] !== undefined) {
-      let value = el.type === "checkbox" ? el.checked : el.value;
+        if (el.type === "checkbox") el.checked = features[key];
-      window.electronAPI.setFeature(key, value);
+        else if (el.tagName === "SELECT") el.value = features[key];
+      }
+
+      el.addEventListener("change", () => {
+        if (key === "theme") return;
+
+        const value = el.type === "checkbox" ? el.checked : el.value;
+        window.electronAPI.setFeature(key, value);
+      });
     });
-  });
 }
 
-// Open The JSON
+/**
-document.getElementById("open-json-btn").addEventListener("click", () => {
+ * Opens configuration JSON file via Electron topbar API.
-  window.topbarAPI.openConfig(); // ton IPC existant
+ */
+document.getElementById("open-json-btn")
+  ?.addEventListener("click", () => {
+    window.topbarAPI.openConfig();
+  });
+
+/**
+ * Opens theme directory via Electron topbar API.
+ */
+document.getElementById("open-theme")
+  ?.addEventListener("click", () => {
+    window.topbarAPI.openTheme();
+  });
+
+/**
+ * Refreshes theme list and updates UI selector with a short animation.
+ */
+document.getElementById("refresh-themes-btn")
+  ?.addEventListener("click", function () {
+    this.classList.add("spinning");
+    window.refreshThemes();
+
+    setTimeout(() => {
+      this.classList.remove("spinning");
+    }, 600);
+  });
+
+/**
+ * Clicking the overlay outside the modal closes the settings panel.
+ */
+settingsPanel?.addEventListener("click", closePanel);
+
+/**
+ * Prevents modal clicks from closing the settings panel
+ * by stopping event propagation to the overlay.
+ */
+settingsModal?.addEventListener("click", (e) => {
+  e.stopPropagation();
 });
 
-
+/**
-/* clic sur l'overlay = fermer */
+ * Initializes settings UI by loading backend feature flags.
-settingsPanel.addEventListener("click", closePanel);
+ */
-
+loadSettings();
-/* clic dans la modal = stop propagation */
-settingsModal.addEventListener("click", (e) => {
-    e.stopPropagation();
-});
-
-loadSettings();

public/script/toast.js

@@ -0,0 +1,85 @@
+/**
+ * Displays a toast notification in the global UI container.
+ *
+ * Toasts are automatically appended to `#toast-container`,
+ * support multiple visual types, and can auto-dismiss after a delay.
+ *
+ * @param {string} message - Message displayed inside the toast
+ * @param {"success"|"error"|"warning"|"info"} [type="info"] - Visual style of the toast
+ * @param {number} [duration=4000] - Auto-dismiss delay in milliseconds (0 disables auto removal)
+ * @returns {HTMLElement|null} The created toast element or null if container is missing
+ */
+window.showToast = function (message, type = "info", duration = 4000) {
+  const container = document.getElementById("toast-container");
+  if (!container) return null;
+
+  const toast = document.createElement("div");
+  toast.classList.add("toast", type);
+
+  const icons = {
+    success: "check_circle",
+    error: "error",
+    warning: "warning",
+    info: "info"
+  };
+
+  const icon = icons[type] || icons.info;
+
+  toast.style.setProperty("--toast-duration", `${duration}ms`);
+  toast.innerHTML = `
+    <span class="toast-icon material-icons-round">${icon}</span>
+    <span class="toast-message">${message}</span>
+    <button class="toast-close" title="Close">×</button>
+    <div class="toast-progress"></div>
+  `;
+
+  const closeBtn = toast.querySelector(".toast-close");
+  closeBtn.addEventListener("click", () => removeToast(toast));
+
+  container.appendChild(toast);
+
+  if (duration > 0) {
+    setTimeout(() => removeToast(toast), duration);
+  }
+
+  return toast;
+};
+
+/**
+ * Removes a toast element with a small exit animation.
+ *
+ * @param {HTMLElement} toast
+ */
+function removeToast(toast) {
+  if (!toast?.parentElement) return;
+
+  toast.classList.add("removing");
+
+  setTimeout(() => {
+    toast.remove();
+  }, 300);
+}
+
+/**
+ * Shortcut: success toast
+ */
+window.showSuccess = (message, duration = 4000) =>
+  window.showToast(message, "success", duration);
+
+/**
+ * Shortcut: error toast
+ */
+window.showError = (message, duration = 5000) =>
+  window.showToast(message, "error", duration);
+
+/**
+ * Shortcut: warning toast
+ */
+window.showWarning = (message, duration = 4000) =>
+  window.showToast(message, "warning", duration);
+
+/**
+ * Shortcut: info toast
+ */
+window.showInfo = (message, duration = 4000) =>
+  window.showToast(message, "info", duration);

public/script/topbar.js

@@ -1,34 +1,59 @@
-// Ajout des listeners pour la topbar
+/**
-function setupTopbarListeners() {
+ * Initializes topbar button event listeners and binds them
-  document.addEventListener('DOMContentLoaded', () => {
+ * to the Electron preload API exposed in `window.topbarAPI`.
-    const { topbarAPI } = window;
+ *
-    if (!topbarAPI) return;
+ * This function is safe to call once DOM is ready.
-    const minBtn = document.getElementById('minimize-btn');
+ * It silently aborts if the API or elements are missing.
-    const maxBtn = document.getElementById('maximize-btn');
+ */
-    const closeBtn = document.getElementById('close-btn');
+export function initTopBar() {
-    const devtoolsBtn = document.getElementById('devtools-btn');
+  const { topbarAPI } = window;
-    const logsBtn = document.getElementById('logs-btn');
+  if (!topbarAPI) return;
-    const websiteBtn = document.getElementById('website-btn');
+
-    const wikiBtn = document.getElementById('wiki-btn');
+  const minBtn = document.getElementById("minimize-btn");
-    const configBtn = document.getElementById('config-btn');
+  if (minBtn) minBtn.onclick = () => topbarAPI.minimize();
+
+  const maxBtn = document.getElementById("maximize-btn");
+  if (maxBtn) maxBtn.onclick = () => topbarAPI.maximize();
+
+  const closeBtn = document.getElementById("close-btn");
+  if (closeBtn) closeBtn.onclick = () => topbarAPI.close();
+  
+  const devtoolsBtn = document.getElementById("devtools-btn");
+  if (devtoolsBtn) devtoolsBtn.onclick = () => topbarAPI.openDevTools();
+  
+  const logsBtn = document.getElementById("logs-btn");
+  if (logsBtn) logsBtn.onclick = () => topbarAPI.openLogs();
+  
+  const websiteBtn = document.getElementById("website-btn");
+  if (websiteBtn) websiteBtn.onclick = () => topbarAPI.openWebsite();
+  
+  const wikiBtn = document.getElementById("wiki-btn");
+  if (wikiBtn) wikiBtn.onclick = () => topbarAPI.openWiki();
+  
+  const workshopBtn = document.getElementById("workshop-btn");
+  if (workshopBtn) workshopBtn.onclick = () => topbarAPI.openWorkshop();
 
-    if (minBtn) minBtn.onclick = () => topbarAPI.minimize();
-    if (maxBtn) maxBtn.onclick = () => topbarAPI.maximize();
-    if (closeBtn) closeBtn.onclick = () => topbarAPI.close();
-    if (devtoolsBtn) devtoolsBtn.onclick = () => topbarAPI.openDevTools();
-    if (logsBtn) logsBtn.onclick = () => topbarAPI.openLogs();
-    if (websiteBtn) websiteBtn.onclick = () => topbarAPI.openWebsite();
-    if (wikiBtn) wikiBtn.onclick = () => topbarAPI.openWiki();
-    if (configBtn) configBtn.onclick = () => topbarAPI.openConfig();
-  });
 }
 
-setupTopbarListeners(); // IF it put it the if check. It don't work. Why ?
+async function attachListeners(){
+  try{
+    const featuresList = await window.electronAPI.getFeatures();
+  
+    if (!featuresList.customTopBar) {
+      const topbar = document.getElementById("topbar");
+      const container = document.getElementById("container");
+      const themeSwitcher = document.getElementById("theme-switcher");
+  
+      if (topbar) topbar.style.display = "none";
+      if (container) container.style.marginTop = "0";
+      if (themeSwitcher) themeSwitcher.style.top = "30px";
+    }
+    
+  } catch (error) {
+    console.error("Failed to load layout features for topbar:", error);
+  }
 
-const features = await window.electronAPI.getFeatures();
+}
 
-if(!features.customTopBar){
+initTopBar()
-  document.getElementById("topbar").style.display = "none"; 
+document.addEventListener("DOMContentLoaded", attachListeners)
-  document.getElementById("container").style.marginTop = "0";
-  document.getElementById("theme-switcher").style.top = "30px";  
-} 

public/splash.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body {
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      overflow: hidden;
+    }
+    .splash-container {
+      width: 100%;
+      height: 100%;
+      background: #D9D9D9;
+      border-radius: 12px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 28px;
+      font-family: "Segoe UI", sans-serif;
+    }
+    .progress-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+    .progress-track {
+      width: 180px;
+      height: 3px;
+      background: #d0d0d0;
+      border-radius: 99px;
+      overflow: hidden;
+    }
+    .progress-bar {
+      height: 100%;
+      width: 0%;
+      background: #1a1a1a;
+      border-radius: 99px;
+      transition: width 0.3s ease;
+    }
+    .status {
+      font-size: 14px;
+      color: #6d6d6d;
+      letter-spacing: 0.5px;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="splash-container">
+    <img src="./banner.png" alt="Freedom Loader" style="width: 90%;">
+    <div class="progress-wrapper">
+      <div class="progress-track">
+        <div class="progress-bar" id="progress-bar"></div>
+      </div>
+      <span class="status" id="status">Starting...</span>
+    </div>
+  </div>
+
+  <script>
+    const steps = [
+      "Checking dependencies...",
+      "Starting server...",
+      "Loading themes...",
+      "Almost ready...",
+    ];
+    let current = 0;
+    const bar = document.getElementById("progress-bar");
+    const status = document.getElementById("status");
+
+    function advance(label, percent) {
+      bar.style.width = percent + "%";
+      status.textContent = label;
+    }
+
+    window.setProgress = (step) => {
+      if (step >= steps.length) {
+        advance("", 100);
+        return;
+      }
+      const percent = Math.round(((step + 1) / steps.length) * 100);
+      advance(steps[step], percent);
+    };
+
+    window.setProgress(0);
+  </script>
+
+</body>
+</html>

public/styles/components/autoUpdate.css

@@ -0,0 +1,128 @@
+:root {
+    --border-accent: #0ea5e966;
+    --bg-accent: #0ea5e915;
+    --fill-accent: #0ea5e9;
+    --text-accent: #0369a1;
+    --text-secondary: #64748b;
+}
+
+#updateAvailable {
+    display: none;
+    width: fit-content;
+    max-width: 420px;
+    position: absolute;
+    right: 18px;
+    bottom: 5%;
+    z-index: 50;
+}
+
+.update-banner {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 10px;
+    border: 0.5px solid var(--border-accent);
+    background: var(--bg-accent);
+    backdrop-filter: blur(8px);
+}
+
+.banner-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.banner-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+}
+
+.icon-wrap {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: var(--fill-accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.icon-wrap i {
+    font-size: 16px;
+    color: #fff;
+}
+
+.text-block {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.update-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-accent);
+}
+
+.update-sub {
+    font-size: 11px;
+    color: var(--text-secondary);
+    line-height: 1.4;
+}
+
+.btn-update {
+    font-size: 12px;
+    font-weight: 500;
+    padding: 6px 14px;
+    border-radius: 8px;
+    background: var(--fill-accent);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: opacity 0.2s;
+}
+
+.btn-update:hover:not(:disabled) {
+    opacity: 0.9;
+}
+
+.btn-update:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.progress-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.progress-track {
+    height: 4px;
+    border-radius: 99px;
+    background: var(--border-accent);
+    overflow: hidden;
+    width: 100%;
+}
+
+.progress-fill {
+    height: 100%;
+    border-radius: 99px;
+    background: var(--fill-accent);
+    width: 0%;
+    transition: width 0.3s ease;
+}
+
+.progress-meta {
+    font-size: 11px;
+    color: var(--text-secondary);
+    display: flex;
+    justify-content: space-between;
+}

public/styles/components/changelog.css

@@ -0,0 +1,229 @@
+.changelog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: rgba(5, 10, 16, 0.72);
+    backdrop-filter: blur(8px);
+}
+
+.changelog-overlay[hidden] {
+    display: none;
+}
+
+.changelog-modal {
+    display: flex;
+    flex-direction: column;
+    width: min(680px, 100%);
+    max-height: min(720px, 88vh);
+    overflow: hidden;
+    color: var(--settings-text-color, #f8fafc);
+    background: var(--settings-modal-bg-color, #18212b);
+    border: 1px solid rgba(148, 163, 184, 0.28);
+    border-radius: 14px;
+    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
+}
+
+.changelog-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 24px 28px 18px;
+    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.changelog-eyebrow {
+    color: var(--fill-accent, #0ea5e9);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+.changelog-header h2 {
+    margin: 5px 0 0;
+    font-size: 26px;
+}
+
+.changelog-close {
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    color: inherit;
+    font-size: 24px;
+    line-height: 1;
+    background: transparent;
+    border: 1px solid rgba(148, 163, 184, 0.28);
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.changelog-close:hover {
+    background: rgba(148, 163, 184, 0.14);
+}
+
+.changelog-list {
+    overflow-y: auto;
+    padding: 20px 28px 28px;
+    scrollbar-color: var(--fill-accent, #0ea5e9) transparent;
+    scrollbar-width: thin;
+}
+
+.changelog-list::-webkit-scrollbar,
+.changelog-body pre::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+}
+
+.changelog-list::-webkit-scrollbar-track,
+.changelog-body pre::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.changelog-list::-webkit-scrollbar-thumb,
+.changelog-body pre::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--fill-accent, #0ea5e9) 70%, transparent);
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background-clip: padding-box;
+}
+
+.changelog-list::-webkit-scrollbar-thumb:hover,
+.changelog-body pre::-webkit-scrollbar-thumb:hover {
+    background: var(--fill-accent, #0ea5e9);
+    background-clip: padding-box;
+}
+
+.changelog-entry {
+    padding: 18px 0;
+    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+}
+
+.changelog-entry:first-child {
+    padding-top: 0;
+}
+
+.changelog-entry:last-child {
+    border-bottom: 0;
+}
+
+.changelog-entry-heading {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.changelog-entry-heading h3 {
+    margin: 0;
+    font-size: 17px;
+}
+
+.changelog-entry-heading span {
+    flex-shrink: 0;
+    color: var(--settings-subtitle-color, #94a3b8);
+    font-size: 12px;
+}
+
+.changelog-body {
+    margin: 12px 0 0;
+    color: var(--settings-subtitle-color, #cbd5e1);
+    font-size: 13px;
+    line-height: 1.55;
+    overflow-wrap: anywhere;
+}
+
+.changelog-body p {
+    margin: 0 0 10px;
+}
+
+.changelog-body p:last-child {
+    margin-bottom: 0;
+}
+
+.changelog-body h1,
+.changelog-body h2,
+.changelog-body h3,
+.changelog-body h4,
+.changelog-body h5,
+.changelog-body h6 {
+    margin: 14px 0 8px;
+    color: var(--settings-text-color, #f8fafc);
+}
+
+.changelog-body h1 { font-size: 20px; }
+.changelog-body h2 { font-size: 18px; }
+.changelog-body h3 { font-size: 16px; }
+.changelog-body h4,
+.changelog-body h5,
+.changelog-body h6 { font-size: 14px; }
+
+.changelog-body ul,
+.changelog-body ol {
+    margin: 8px 0 12px;
+    padding-left: 22px;
+}
+
+.changelog-body li + li {
+    margin-top: 4px;
+}
+
+.changelog-body code {
+    padding: 2px 5px;
+    color: var(--settings-text-color, #f8fafc);
+    background: rgba(148, 163, 184, 0.16);
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+.changelog-body pre {
+    padding: 10px 12px;
+    overflow-x: auto;
+    background: rgba(15, 23, 42, 0.45);
+    border-radius: 6px;
+}
+
+.changelog-body pre code {
+    padding: 0;
+    background: transparent;
+    white-space: pre;
+}
+
+.changelog-body blockquote {
+    margin: 10px 0;
+    padding-left: 12px;
+    color: var(--settings-subtitle-color, #cbd5e1);
+    border-left: 3px solid var(--fill-accent, #0ea5e9);
+}
+
+.changelog-body a {
+    color: var(--fill-accent, #0ea5e9);
+}
+
+.changelog-loading,
+.changelog-empty {
+    margin: 0;
+    color: var(--settings-subtitle-color, #cbd5e1);
+}
+
+@media (max-width: 780px) {
+    .changelog-overlay {
+        padding: 12px;
+    }
+
+    .changelog-header,
+    .changelog-list {
+        padding-left: 18px;
+        padding-right: 18px;
+    }
+
+    .changelog-entry-heading {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 5px;
+    }
+}

public/styles/components/checkbox.css

@@ -15,13 +15,13 @@
 }
 
 .checkmark {
-  --clr: var(--checkbox-bg-checked);
+  --clr: var(--checkbox-checked-bg-color);
   position: relative;
   top: 0;
   left: 0;
   height: 1.3em;
   width: 1.3em;
-  background-color: var(--checkbox-bg-default);
+  background-color: var(--checkbox-unchecked-bg-color);
   border-radius: .5rem;
   transition: background-color 300ms, border-radius 300ms;
 }

public/styles/components/editpathbutton.css

@@ -17,9 +17,11 @@
   border-radius: 6px;
   font-family: monospace;
   border: 1px dashed var(--form-input-border-color);
-  word-break: break-all;
+  display: inline-flex;
-  display: inline-block;
+  max-width: clamp(200px, 60vw, 600px);
-  max-width: 80%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 

public/styles/components/loader.css

@@ -4,9 +4,9 @@
   gap: 10px;
   padding: 10px 20px;
   background: var(--form-bg-color);
-  border: 2px solid var(--mp3-text-color);
+  border: 2px solid var(--audio-only-label-color);
   border-radius: 8px;
-  color: var(--mp3-text-color);
+  color: var(--audio-only-label-color);
   font-weight: bold;
   animation: pulse 1.2s infinite;
 }

public/styles/components/progressBar.css

@@ -1,22 +1,34 @@
+/* Container pour isoler la progress bar */
+.progress-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+  margin-top: 20px;
+}
+
 /* Wrapper de la barre de téléchargement */
 #downloadProgressWrapper {
   width: 100%;
   max-width: 400px;
   height: 12px;
-  background-color: #444;
+  background-color: var(--progress-bar-bg-color, #cccccc);
-  border-radius: 6px;
+  border-radius: 10px;
   overflow: hidden;
-  margin: 10px auto;
+  margin: 0;
   display: none;
   box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+  box-sizing: border-box;
 }
 
 /* Barre de progression */
 #downloadProgress {
   height: 100%;
   width: 0%;
-  background-color: var(--video-info-link-color, #4caf50);
+  background-color: var(--progress-bar-fill-color, #007bff);
-  border-radius: 6px 0 0 6px;
+  border-radius: 10px;
   transition: width 0.2s ease;
 }
 
@@ -25,7 +37,7 @@
   font-size: 0.8rem;
   color: #fff;
   content: "";
-
+  display: none;
 }
 
 /* Responsive pour mobile */
@@ -39,3 +51,39 @@
     font-size: 0.7rem;
   }
 }
+
+/* Stop Button */
+.stop-btn {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background-color: var(--form-button-bg-color);
+  color: var(--form-button-text-color);
+  font-size: 20px;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.stop-btn:hover:not(:disabled) {
+  background-color: var(--form-button-bg-hover-color);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
+  transform: scale(1.05);
+}
+
+.stop-btn:active:not(:disabled) {
+  transform: scale(0.96);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.stop-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

public/styles/components/toast.css

@@ -0,0 +1,162 @@
+/* Toast Container */
+#toast-container {
+  position: fixed;
+  top: 140px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+/* Toast */
+.toast {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background-color: rgba(30, 30, 30, 0.9);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  color: #f3f4f6;
+  font-family: inherit;
+  font-size: 0.875rem;
+  max-width: 320px;
+  min-width: 220px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
+  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+/* Toast Icon */
+.toast-icon {
+  flex-shrink: 0;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.toast.success .toast-icon {
+  color: #22c55e;
+}
+
+.toast.error .toast-icon {
+  color: #ef4444;
+}
+
+.toast.warning .toast-icon {
+  color: #f59e0b;
+}
+
+.toast.info .toast-icon {
+  color: #0ea5e9;
+}
+
+/* Toast Message */
+.toast-message {
+  flex: 1;
+  font-weight: 400;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+/* Toast Close Button */
+.toast-close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  font-size: 16px;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.toast-close:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.1);
+  animation: progress var(--toast-duration, 4000ms) linear forwards;
+}
+
+.toast.success .toast-progress {
+  background-color: #22c55e;
+}
+
+.toast.error .toast-progress {
+  background-color: #ef4444;
+}
+
+/* Animations */
+@keyframes slideIn {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+}
+
+@keyframes progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+.toast.removing {
+  animation: slideOut 0.25s ease-in forwards;
+}
+
+@media (max-width: 480px) {
+  #toast-container {
+    top: auto;
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .toast {
+    max-width: none;
+    min-width: auto;
+  }
+}

public/styles/layout/container.css

@@ -4,7 +4,6 @@
   left: 0;
   right: 0;
   padding: 1em;
-  z-index: 1000;        
   display: flex;
   flex-direction: column;
   align-items: center;

public/styles/layout/form.css

@@ -40,8 +40,7 @@ form button:hover {
 form#downloadForm {
     display: flex;
     gap: 0.5em;
-    max-width: 600px;
+    width: 350px;
-    width: 100%;
     justify-content: center;
 }
 
@@ -50,7 +49,7 @@ form#downloadForm {
     align-items: center;
     align-self: center;
     gap: 0.5em;
-    color: var(--form-input-text-color);
+    color: var(--audio-only-label-color);
 }
 
 #UrlInput {
@@ -108,6 +107,7 @@ form#downloadForm {
 }
 
 .paste-btn svg {
+    color: var(--paste-button-icon-color);
     width: 30px;
     height: 30px;
 }

public/styles/layout/header.css

@@ -1,11 +1,13 @@
 header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 48px;
+    z-index: 1100;
     display: flex;
-    flex-direction: column;
+    align-items: center;
-    align-items: center;  
-    margin-bottom: 2vw;
 }
 
-
+#title {
-header h1{
+    color: var(--default-text-color);
-    margin-bottom: 0.2vw;
 }

public/styles/layout/settingsPanel.css

@@ -7,6 +7,7 @@
     top: 60px;
     right: 20px;
     opacity: 0.8;
+    z-index: 15;
     background-color: var(--settings-button-bg-color);
     border-radius: 14px;
     padding: 8px;
@@ -40,15 +41,26 @@
     width: 40vw;
     max-width: 320px;
     max-height: 80vh;
-    background-color: var(--settings-bg-primary-color);
+    background-color: var(--settings-modal-bg-color);
     border-radius: 12px;
     padding: 20px;
     box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-    display: none;
     overflow-y: auto;
     z-index: 9999;
-    animation: slideIn 0.2s ease-out;
+    /*animation: slideIn 0.2s ease-out; */
     color: var(--settings-text-color);
+
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(20px);
+    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+
+.settings-panel.open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
 }
 
 .settings-panel::-webkit-scrollbar {
@@ -89,7 +101,7 @@
     flex-direction: column;
     margin-bottom: 20px;
     padding: 10px 15px;
-    background: var(--settings-bg-secondary-color);
+    background: var(--settings-section-bg-color);
     border-radius: 12px;
     gap: 6px;
 }
@@ -190,8 +202,18 @@ details summary {
     border: none;
     cursor: pointer;
     font-weight: 600;
-    background-color: var(--form-button-bg-color);
+    background-color: var(--open-json-button-bg-color);
-    color: #fff;
+    color: var(--open-json-button-text-color);
+}
+
+#open-theme {
+    padding: 10px 14px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+    background-color: var(--open-theme-button-bg-color);
+    color: var(--open-theme-button-text-color);
 }
 
 #experimental-args {
@@ -222,6 +244,33 @@ details summary {
     opacity: 1;
 }
 
+/* REFRESH THEMES BUTTON */
+.refresh-themes-btn {
+    padding: 6px 8px;
+    border-radius: 6px;
+    border: 1px solid var(--form-input-border-color);
+    background-color: var(--form-input-bg-color);
+    color: var(--form-input-text-color);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.refresh-themes-btn:hover {
+    background-color: var(--form-button-bg-hover-color);
+}
+
+.refresh-themes-btn.spinning svg {
+    animation: spin 0.6s ease-in-out;
+}
+
+.refresh-themes-btn svg {
+    color: currentColor;
+    transition: transform 0.6s ease-in-out;
+}
+
 /* ANIMATION */
 @keyframes popIn {
     from { transform: scale(0.95); opacity: 0; }
@@ -231,4 +280,9 @@ details summary {
 @keyframes slideIn {
     from { transform: translateX(20px); opacity: 0; }
     to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 }

public/styles/layout/topbar.css

@@ -2,28 +2,20 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-
-  position: fixed;
-  top: 0;
-  z-index: 1100;
-
-  height: 48px;
   width: 100%;
-
+  height: 100%;
   background: #1f1f1f98;
   color: #eaeaea;
-
   -webkit-app-region: drag;
   user-select: none;
-
 }
 
 /* LEFT - custom buttons */
 .custom-controls {
     display: flex;
     align-items: center;
-    gap: 6px;
+  gap: 4px;
-    padding-left: 12px;
+  padding-left: 10px;
 }
 
 /* RIGHT - window buttons */
@@ -51,11 +43,11 @@
 
 /* Custom buttons (Logs / Wiki / etc.) */
 .custom-controls button {
-  height: 32px;
+  height: 28px;
-  padding: 0 14px;
+  padding: 0 10px;
 
-  font-size: 15px;
+  font-size: 14px;
-  border-radius: 8px;
+  border-radius: 7px;
 }
 
 .custom-controls button:hover {

public/styles/layout/videoinfo.css

@@ -4,7 +4,7 @@
   margin-left: auto;
   margin-right: auto;
   padding: 1.5em 2em;
-  background-color: var(--infos-box-color);
+  background-color: var(--video-info-bg-color);
   border-radius: 12px;
   box-shadow: 0 8px 16px rgba(0,0,0,0.1);
   color: var(--video-info-text-color);

public/styles/styles.css

@@ -1,29 +1,43 @@
 /* Layout */
-@import url("layout/form.css");
+@import url("layout/topbar.css");
-@import url("layout/settingsPanel.css");
-@import url("layout/container.css");
 @import url("layout/header.css");
+@import url("layout/form.css");
+@import url("layout/container.css");
+@import url("layout/settingsPanel.css");
 @import url("layout/videoinfo.css");
 
 /* Components */
 @import url("components/checkbox.css");
 @import url("components/loader.css");
-
-@import url("theme/themeimport.css");
 @import url("components/editpathbutton.css");
 @import url("components/progressBar.css");
+@import url("components/toast.css");
+@import url("components/autoUpdate.css");
+@import url("components/changelog.css");
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-#app {
+
-  display: block; 
+/* Mark element as disabled */
-  opacity: 0;
+.disabled {
-  transition: opacity 0.6s ease;
+  pointer-events: none;
+  opacity: 0.5;
+  filter: grayscale(40%);
+  cursor: not-allowed;
 }
-#app.visible {
+
-  opacity: 1;
+/* Because why not */
+#reference{
+  position: fixed;
+  pointer-events: none;
+  bottom:0vh;
+  left: 10px;
+  font-size: 1em;
+  color: #b0b0b02f;
+  z-index: 9999;
 }
 
+
 html,body{
     margin: 0;
     padding: 0;
@@ -34,43 +48,45 @@ html,body{
     font-style: normal;
 }
 
-body {
+body{
-    margin: 0;
+  background-color: var(--background-color);
-    background-color: var(--background-color);
+  color: var(--default-text-color);
+}
+
+header {
+    position: fixed;
+    top: 0;
     width: 100%;
-    height: 100%;
+    z-index: 1100;
-    color: var(--default-text-color);
+    height: 48px;
-    display: flex;
+}
-    justify-content: center;
+
-    align-items: center;   
+main {
+    width: 100%;
+    height: calc(100vh - 48px);
+    margin-top: 48px;
+    overflow-y: auto;
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
+    justify-content: flex-start;
     align-items: center;
-
+    padding: 0;
+    gap: 0;
 }
 
-/* Because why not */
+/* Scrollbar pour main */
-#reference{
+main::-webkit-scrollbar {
-  position: fixed;
-  pointer-events: none;
-  bottom:0vh;
-  left: 10px;
-  font-size: 1em;
-  color: #b0b0b02f;
-}
-
-/* Scrollbar globale pour Chromium/Electron */
-body::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
-body::-webkit-scrollbar-track {
+main::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.03);
   border-radius: 5px;
 }
 
-body::-webkit-scrollbar-thumb {
+main::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.2);
   border-radius: 5px;
   border: 2px solid transparent;
@@ -78,36 +94,32 @@ body::-webkit-scrollbar-thumb {
   transition: background-color 0.2s ease, transform 0.2s ease;
 }
 
-body::-webkit-scrollbar-thumb:hover {
+main::-webkit-scrollbar-thumb:hover {
   background-color: rgba(255, 255, 255, 0.35);
   transform: scaleX(1.05);
 }
 
 /* Thème clair */
-body.light::-webkit-scrollbar-track {
+body.light main::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.05);
 }
 
-body.light::-webkit-scrollbar-thumb {
+body.light main::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.25);
 }
 
-body.light::-webkit-scrollbar-thumb:hover {
+body.light main::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 0, 0, 0.45);
 }
 
 .container{
-  margin-top: 50px;
+  margin-top: 0px;
 }
 
-header p{
+#subtitle{
   color: var(--subtitle-color);
 }
 
-.checkbox-inline{
-  color: var(--mp3-text-color);
-}
-
 body, 
 .container, 
 input, 

public/styles/theme/chirac-theme.css

@@ -1,103 +0,0 @@
-body.chirac {
-  
-  background-image: url('../../assets/images/Chirac.png'); 
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-attachment: fixed;
-  
-
-  --background-color: rgba(255, 255, 255, 0.85); 
-  --default-text-color: #002395;
-  --subtitle-color: #EF4135;
-  --mp3-text-color: #002395;
-  
-  /* Formulaire */
-  --form-bg-color: rgba(255, 255, 255, 0.9);
-  --form-input-bg-color: #f5f5f5;
-  --form-input-border-color: #002395;
-  --form-input-border-focus-color: #EF4135;
-  --form-input-text-color: #002395;
-  --form-input-placeholder-color: #999999;
-  --form-button-bg-color: #002395; 
-  --form-button-text-color: #ffffff;
-  --form-button-bg-hover-color: #EF4135;
-  
-  /* Checkbox */
-  --checkbox-bg-default: #cccccc;
-  --checkbox-bg-checked: #002395;
-  --checkbox-checkmark-border-color: #ffffff;
-  --checkbox-pulse-color: rgba(0, 35, 149, 0.5);
-  
-  /* Download status */
-  --download-status-color: #002395;
-  
-  /* Video Info Box */
-  --infos-box-color: rgba(255, 255, 255, 0.9);
-  --video-info-text-color: #000000;
-  --video-info-heading-color: #EF4135;
-  --video-info-list-color: #444444;
-  --video-info-list-strong-color: #000000;
-  --video-info-link-color: #002395;
-  --video-info-link-hover-color: #EF4135;
-
-  /* Playlist Color */
-  --playlist-background-color: #d1d1d1ca;
-
-  /* Settings */ 
-  --settings-button-bg-color: #00196a;
-  --settings-button-text-color: #dcdcdc;  
-
-  --settings-bg-primary-color: #0b0528;
-  --settings-bg-secondary-color: #1c1055;
-
-  --settings-text-color: #cecece; 
-  --settings-subtitle-color: #adadad;
-}
-
-
-/* 
-
-Je serai le président de tous les Français
-Tous les Français
-Tous les Français
-Tous les Français
-Tous les Français
-Tous les Français
-Tous les Français
-Tous les Français
-Tous les Français
-Tous les Français
-Mes chers compatriotes
-Je serai le président de tous les Français, de tous les Français
-Je mesure la difficulté de la tâche qui nous attend
-Tous les Français
-Tous les Français
-Je veux un État, je veux les Français
-Je veux un État, je veux
-Je veux un État-tat-tat-tat vigoureux
-Un État-tat-tat-tat impartial
-Un État-tat-tat-tat vigoureux
-Un État-tat-tat-tat exigeant
-Un État-tat-tat-tat
-Je serai le président de tous les Français
-Tous les Français
-Tous les Français
-Tous les Français
-Un État qui n'isole pas, tous, pas, pas
-Tous, pas, tous, pas, pas
-Tous, pas, tous, pas, pas (les Français)
-Tous, tous, pas, tous, tous, pas, pas
-Tous, tous, pas, tous, tous, pas, pas
-Tous, tous, tous, pas, tous, pas, pas (les Français)
-Tous, pas, tous, tous, pas, pas
-Tous, tous, tous, pas, tous, tous, pas, pas
-Tous, tous, pas, tous, tous, pas, pas
-Tous, tous, tous-tous, tous-tous, pas, pas
-Tous, tous-tous, tous-tous, pas, pas
-Un État-tat-tat-tat vigoureux
-Un État-tat-tat-tat impartial
-Un État-tat-tat-tat exigeant
-Un État-tat-tat-tat
-Je serai le président de tous les Français
-
-*/

public/styles/theme/dark-theme.css

@@ -1,49 +0,0 @@
-body.dark {
-  /* Couleurs générales */
-  --background-color: #121212;               /* noir/gris très foncé */
-  --default-text-color: #e0e0e0;             /* texte clair */
-  --subtitle-color: #2196f3;                 /* bleu accent */
-  --mp3-text-color: #f5f5f5;                 /* texte checkbox */
-
-  /* Formulaire */
-  --form-bg-color: #1e1e1e;                  /* fond formulaire */
-  --form-input-bg-color: #2a2a2a;            /* fond inputs */
-  --form-input-border-color: #444444;        /* bordure */
-  --form-input-border-focus-color: #2196f3;  /* focus bleu */
-  --form-input-text-color: #f5f5f5;          /* texte clair */
-  --form-input-placeholder-color: #888888;   /* placeholder gris */
-  --form-button-bg-color: #2196f3;           /* bouton bleu */
-  --form-button-text-color: #ffffff;         /* texte bouton */
-  --form-button-bg-hover-color: #1976d2;     /* hover bleu plus foncé */
-
-  /* Checkbox */
-  --checkbox-bg-default: #555555;             /* gris moyen */
-  --checkbox-bg-checked: #2196f3;             /* bleu accent */
-  --checkbox-checkmark-border-color: #ffffff; /* blanc */
-  --checkbox-pulse-color: rgba(33, 150, 243, 0.5);
-
-  /* Download status */
-  --download-status-color: #2196f3;
-
-  /* Video Info Box */
-  --infos-box-color: #1a1a1a;
-  --video-info-text-color: #e0e0e0;
-  --video-info-heading-color: #2196f3;
-  --video-info-list-color: #cccccc;
-  --video-info-list-strong-color: #ffffff;
-  --video-info-link-color: #2196f3;
-  --video-info-link-hover-color: #1976d2;
-
-  /* Playlist Color */
-  --playlist-background-color: #303030;
-
-  /* Settings */
-  --settings-button-bg-color: #1e1e1e;
-  --settings-button-text-color: var(--default-text-color);  
-
-  --settings-bg-primary-color: #1e1e1e;
-  --settings-bg-secondary-color: #2a2a2a;
-  --settings-text-color: var(--default-text-color); 
-  --settings-subtitle-color: #aaa;
-
-}

public/styles/theme/drift-theme.css

@@ -1,61 +0,0 @@
-body.drift {
-
-    background-image: url('../../assets/images/Drift.jpg');
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-
-    /* Palette principale */
-    --background-color: #0f1218;
-    --default-text-color: #3d4b61;
-    --subtitle-color: #1a1a1a;
-    --mp3-text-color: #c0d4ff;
-
-    /* Formulaire */
-    --form-bg-color: #1e222a;         
-    --form-input-bg-color: #13171d; 
-    --form-input-border-color: #3b4b6d;
-    --form-input-border-focus-color: #6ea8ff; 
-    --form-input-text-color: #f0f4ff;
-    --form-input-placeholder-color: #7a8fae;
-    --form-button-bg-color: #2a2979;
-    --form-button-text-color: #ffffff;
-    --form-button-bg-hover-color: #353393;
-
-    /* Checkbox */
-    --checkbox-bg-default: #2a2e38;
-    --checkbox-bg-checked: #2a2979;
-    --checkbox-checkmark-border-color: #ffffff;
-    --checkbox-pulse-color: rgba(76,108,255,0.3);
-
-    /* Download status */
-    --download-status-color: #ff8e8e;
-
-    /* Video Info Box */
-    --infos-box-color: #1e222ad0;
-    --video-info-text-color: #e8e8f0;
-    --video-info-heading-color: #9ab6ff;
-    --video-info-list-color: #c0d4ff;
-    --video-info-list-strong-color: #ffffff;
-    --video-info-link-color: #4c6cff;
-    --video-info-link-hover-color: #6c8dff;
-
-    /* Playlist Color */
-    --playlist-background-color: #424b5cc2;
-
-    /* Settings */
-    --settings-button-bg-color: #1e222ace;
-    --settings-button-text-color: #b3b3b4;  
-
-    --settings-bg-primary-color: #1e222a;
-    --settings-bg-secondary-color: #272d38;
-
-    --settings-text-color: #bababa; 
-    --settings-subtitle-color: #cacaca;
-}
-
-
-
-body.drift .download-path{
-    color: #ededed;
-}

public/styles/theme/fanatic-theme.css

@@ -1,49 +0,0 @@
-body.fanatic{
-  /* Couleurs générales */
-  --background-color: #121212;
-  --default-text-color: #eee;
-  --subtitle-color: #FF5900;
-  --mp3-text-color: #ffffff;
-
-  /* Formulaire */
-  --form-bg-color: #1e1e1e;
-  --form-input-bg-color: #2b2b2b;
-  --form-input-border-color: #333333;
-  --form-input-border-focus-color: #FF5900;
-  --form-input-text-color: #eeeeee;
-  --form-input-placeholder-color: #666666;
-  --form-button-bg-color: #FF5900;
-  --form-button-text-color: #121212;
-  --form-button-bg-hover-color: #e65500;
-
-  /* Checkbox */
-  --checkbox-bg-default: #555555;
-  --checkbox-bg-checked: #ff6600;
-  --checkbox-checkmark-border-color: #eee;
-  --checkbox-pulse-color: rgba(255, 102, 0, 0.5);
-
-  /* Download status */
-  --download-status-color: #FF5900;
-
-  /* Video Info Box */
-  --infos-box-color: #222222;
-  --video-info-text-color: #eee;
-  --video-info-heading-color: #FF5900;
-  --video-info-list-color: #ccc;
-  --video-info-list-strong-color: #fff;
-  --video-info-link-color: #FF5900;
-  --video-info-link-hover-color: #e65500;
-
-  /* Playlist Color */
-  --playlist-background-color: #2b2b2b;
-
-  /* Settings */
-  --settings-button-bg-color: #1e1e1e;
-  --settings-button-text-color: #dcdcdc;  
-
-  --settings-bg-primary-color: #1e1e1e;
-  --settings-bg-secondary-color: #2d2d2d;
-
-  --settings-text-color: #cecece; 
-  --settings-subtitle-color: #adadad;
-}

public/styles/theme/light-theme.css

@@ -1,48 +0,0 @@
-body.light {
-  /* Couleurs générales */
-  --background-color: #dadada;
-  --default-text-color: #222222;
-  --subtitle-color: #007bff;
-  --mp3-text-color: #000000;
-
-  /* Formulaire */
-  --form-bg-color: #ffffff;
-  --form-input-bg-color: #fafafa;
-  --form-input-border-color: #cccccc;
-  --form-input-border-focus-color: #007bff;
-  --form-input-text-color: #333333;
-  --form-input-placeholder-color: #888888;
-  --form-button-bg-color: #007bff;
-  --form-button-text-color: #ffffff;
-  --form-button-bg-hover-color: #0056b3;
-
-  /* Checkbox */
-  --checkbox-bg-default: #cccccc;
-  --checkbox-bg-checked: #007bff;
-  --checkbox-checkmark-border-color: #ffffff;
-  --checkbox-pulse-color: rgba(0, 123, 255, 0.4);
-
-  /* Download status */
-  --download-status-color: #007bff;
-
-  /* Video Info Box */
-  --infos-box-color: #ffffff;
-  --video-info-text-color: #222222;
-  --video-info-heading-color: #007bff;
-  --video-info-list-color: #444444;
-  --video-info-list-strong-color: #000000;
-  --video-info-link-color: #007bff;
-  --video-info-link-hover-color: #0056b3;
-
-  /* Playlist Color */
-  --playlist-background-color: #c5c5c5b2;
-
-  /* Settings */
-  --settings-button-bg-color: #e4e4e4;
-  --settings-button-text-color: var(--default-text-color);  
-
-  --settings-bg-primary-color: #cbcbcb;
-  --settings-bg-secondary-color: #cbcbcb;
-  --settings-text-color: var(--default-text-color); 
-  --settings-subtitle-color: #656565; 
-}

public/styles/theme/neon-theme.css

@@ -1,59 +0,0 @@
-body.neon {
-
-    background: (url("../../assets/images/drift.jpg"));
-    background-image: linear-gradient(135deg, #0f0c29, #302b63, #24243e); /* dégradé sombre violet/bleu */
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-
-    /* Couleurs générales */
-    --background-color: #1b1b2f;
-    --default-text-color: #e0e0ff;
-    --subtitle-color: #a3a3ff;
-    --mp3-text-color: #c0c0ff;
-
-    /* Formulaire */
-    --form-bg-color: #2c2c4a;
-    --form-input-bg-color: #1f1f3a;
-    --form-input-border-color: #5858f0;
-    --form-input-border-focus-color: #a3a3ff;
-    --form-input-text-color: #ffffff;
-    --form-input-placeholder-color: #8888ff;
-    --form-button-bg-color: #5858f0;
-    --form-button-text-color: #ffffff;
-    --form-button-bg-hover-color: #7a7aff;
-
-    /* Checkbox */
-    --checkbox-bg-default: #302b63;
-    --checkbox-bg-checked: #5858f0;
-    --checkbox-checkmark-border-color: #ffffff;
-    --checkbox-pulse-color: rgba(88,88,240,0.3);
-
-    /* Download status */
-    --download-status-color: #a3a3ff;
-
-    /* Video Info Box */
-    --infos-box-color: #2c2c4a;
-    --video-info-text-color: #e0e0ff;
-    --video-info-heading-color: #a3a3ff;
-    --video-info-list-color: #c0c0ff;
-    --video-info-list-strong-color: #ffffff;
-    --video-info-link-color: #5858f0;
-    --video-info-link-hover-color: #7a7aff;
-
-    /* Playlist Color */
-    --playlist-background-color: #3e3e64;
-
-    /* Settings */
-    --settings-button-bg-color: #202038;
-    --settings-button-text-color: var(--default-text-color);  
-
-    --settings-bg-primary-color: #242454;
-    --settings-bg-secondary-color: #2f2f6f;
-    --settings-text-color: var(--default-text-color); 
-    --settings-subtitle-color: #d2d2d2; 
-}
-
-body.neon .download-path {
-  color: var(--default-text-color);
-}

public/styles/theme/nf-theme.css

@@ -1,58 +0,0 @@
-body.nf {
-
-  background-image: url('../../assets/images/NF.jpg');
-  background-size: cover;
-  background-position: 70% center; 
-  background-attachment: fixed;
-
-  /* Couleurs générales */
-  --background-color: #1a1a1a;
-  --default-text-color: #e6dfd5;
-  --subtitle-color: #f5f0e6;
-  --mp3-text-color: #d8cfc2;
-
-  /* Formulaire */
-  --form-bg-color: #2a2a2a;
-  --form-input-bg-color: #222222;
-  --form-input-border-color: #4a4036;
-  --form-input-border-focus-color: #cbb89d;
-  --form-input-text-color: #f0e8dd;
-  --form-input-placeholder-color: #9a8f80;
-  --form-button-bg-color: #cbb89d;
-  --form-button-text-color: #1a1a1a;
-  --form-button-bg-hover-color: #b7a588;
-
-  /* Checkbox */
-  --checkbox-bg-default: #4a4036;
-  --checkbox-bg-checked: #cbb89d;
-  --checkbox-checkmark-border-color: #1a1a1a;
-  --checkbox-pulse-color: rgba(203,184,157,0.3);
-
-  /* Download status */
-  --download-status-color: #cbb89d;
-
-  /* Video Info Box */
-  --infos-box-color: #2a2a2a;
-  --video-info-text-color: #e6dfd5;
-  --video-info-heading-color: #f5f0e6;
-  --video-info-list-color: #d8cfc2;
-  --video-info-list-strong-color: #ffffff;
-  --video-info-link-color: #cbb89d;
-  --video-info-link-hover-color: #b7a588;
-
-  /* Playlist Color */
-  --playlist-background-color: #4f4f4f;
-
-  /* Settings */
-  --settings-button-bg-color: #2a2a2a;
-  --settings-button-text-color: var(--default-text-color);  
-
-  --settings-bg-primary-color: #2a2a2a;
-  --settings-bg-secondary-color: #313131;
-  --settings-text-color: var(--default-text-color); 
-  --settings-subtitle-color: #7a7979; 
-}
-
-body.nf .download-path {
-  color: var(--default-text-color);
-}

public/styles/theme/songbird-theme.css

@@ -1,58 +0,0 @@
-body.songbird {
-
-  background-image: url('../../assets/images/Songbird.webp');
-  background-size: cover;
-  background-position: center center;
-  background-attachment: fixed;
-
-  /* Couleurs générales */
-  --background-color: #0a0a0a; /* noir profond */
-  --default-text-color: #ff2a2a; /* rouge néon */
-  --subtitle-color: #f2f2f2; /* rouge sombre */
-  --mp3-text-color: #ff4d4d; /* rouge un peu plus clair */
-
-  /* Formulaire */
-  --form-bg-color: rgba(20,0,0,0.85); /* noir semi-transparent avec rouge */
-  --form-input-bg-color: #1a0a0a;
-  --form-input-border-color: #ff2a2a;
-  --form-input-border-focus-color: #b30000;
-  --form-input-text-color: #ffffff;
-  --form-input-placeholder-color: #950404;
-  --form-button-bg-color: #b30000;
-  --form-button-text-color: #ffffff;
-  --form-button-bg-hover-color: #ff2a2a;
-
-  /* Checkbox */
-  --checkbox-bg-default: #630000;
-  --checkbox-bg-checked: #ff2a2a;
-  --checkbox-checkmark-border-color: #ffffff;
-  --checkbox-pulse-color: rgba(255,42,42,0.3);
-
-  /* Download status */
-  --download-status-color: #ff2a2a;
-
-  /* Video Info Box */
-  --infos-box-color: rgba(30,0,0,0.9);
-  --video-info-text-color: #ff4d4d;
-  --video-info-heading-color: #ff2a2a;
-  --video-info-list-color: #b30000;
-  --video-info-list-strong-color: #ffffff;
-  --video-info-link-color: #ff2a2a;
-  --video-info-link-hover-color: #b30000;
-
-  /* Playlist Color */
-  --playlist-background-color: #3f0000;
-  
-  /* Settings */
-  --settings-button-bg-color: rgba(29, 0, 0, 0.784);
-  --settings-button-text-color: var(--default-text-color);  
-
-  --settings-bg-primary-color: #121212;
-  --settings-bg-secondary-color: #1a1a1a;
-  --settings-text-color: var(--default-text-color); 
-  --settings-subtitle-color: #7a7979; 
-}
-
-body.cyberpunk .download-path {
-  color: var(--default-text-color);
-}

public/styles/theme/spicy-theme.css

@@ -1,59 +0,0 @@
-body.spicy {
-    /* Couleurs générales */
-    --background-color: #121212;             /* fond noir profond */
-    --default-text-color: #ffffff;           /* texte clair */
-    --subtitle-color: #f87918;               /* accent rouge piment */
-    --mp3-text-color: #ffffff;               /* texte checkbox inline */
-
-    /* Formulaire */
-    --form-bg-color: #1a1a1a;                /* fond formulaire gris très foncé */
-    --form-input-bg-color: #2b2b2b;          /* fond inputs gris foncé */
-    --form-input-border-color: #444444;      /* bordure gris */
-    --form-input-border-focus-color: #ff1a1a; /* focus rouge piment */
-    --form-input-text-color: #eeeeee;        /* texte inputs */
-    --form-input-placeholder-color: #888888; /* placeholder gris moyen */
-    --form-button-bg-color: #ff1a1a;         /* bouton rouge vif */
-    --form-button-text-color: #ffffff;       /* texte bouton blanc */
-    --form-button-bg-hover-color: #cc0000;   /* hover rouge foncé */
-
-    /* Checkbox */
-    --checkbox-bg-default: #555555;            /* gris moyen */
-    --checkbox-bg-checked: #ff1a1a;            /* rouge piment */
-    --checkbox-checkmark-border-color: #f5f5f5; /* blanc cassé */
-    --checkbox-pulse-color: rgba(255, 26, 26, 0.5); /* pulse rouge translucide */
-
-    /* Download status */
-    --download-status-color: #ffffff;          /* rouge vif */
-
-    /* Video Info Box */
-    --infos-box-color: #1a1a1a;                /* fond infos gris foncé */
-    --video-info-text-color: #f5f5f5;          /* texte clair */
-    --video-info-heading-color: #ff1a1a;       /* titres rouges */
-    --video-info-list-color: #cccccc;          /* texte liste gris clair */
-    --video-info-list-strong-color: #ffffff;   /* texte important blanc */
-    --video-info-link-color: #ff1a1a;          /* liens rouges */
-    --video-info-link-hover-color: #cc0000;    /* liens hover rouge foncé */
-
-    /* Playlist Color */
-    --playlist-background-color: #353232;
-
-    /* Settings */ 
-    --settings-button-bg-color: #1a1a1a;
-    --settings-button-text-color: #dcdcdc;  
-
-    --settings-bg-primary-color: #1a1a1a;
-    --settings-bg-secondary-color: #292929;
-
-    --settings-text-color: #cecece; 
-    --settings-subtitle-color: #adadad;
-
-}
-
-/* Optionnel: background piments */
-body.spicy {
-  background-image: url('../../assets/images/Spicy.png');  
-  background-size:cover;
-  background-position: center;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-}

public/styles/theme/themeimport.css

@@ -1,9 +0,0 @@
-@import url("chirac-theme.css");
-@import url("dark-theme.css");
-@import url("fanatic-theme.css");
-@import url("light-theme.css");
-@import url("nf-theme.css");
-@import url("drift-theme.css");
-@import url("neon-theme.css");
-@import url("songbird-theme.css");
-@import url("spicy-theme.css")

public/styles/variables.css

@@ -3,7 +3,7 @@
   --background-color: #001224;
   --default-text-color: #eee;
   --subtitle-color: #007bff;
-  --mp3-text-color: #000000;
+  --audio-only-label-color: #000000;
 
   /* Formulaire */
   --form-bg-color: #ffffff;
@@ -15,18 +15,23 @@
   --form-button-bg-color: #007bff;
   --form-button-text-color: #ffffff;
   --form-button-bg-hover-color: #0056b3;
+  --paste-button-icon-color: #ffffff;
 
   /* Checkbox */
-  --checkbox-bg-default: #cccccc;
+  --checkbox-unchecked-bg-color: #cccccc;
-  --checkbox-bg-checked: #3B82F6;
+  --checkbox-checked-bg-color: #3B82F6;
   --checkbox-checkmark-border-color: #E0E0E2;
   --checkbox-pulse-color: rgba(59, 130, 246, 0.5);
 
   /* Download status */
   --download-status-color: #007bff;
 
+  /* Progress bar */
+  --progress-bar-bg-color: #cccccc;
+  --progress-bar-fill-color: #007bff;
+
   /* Video Info Box */
-  --infos-box-color: #f0f0f0;
+  --video-info-bg-color: #f0f0f0;
   --video-info-text-color: #222222;
   --video-info-heading-color: #007bff;
   --video-info-list-color: #444444;
@@ -34,12 +39,15 @@
   --video-info-link-color: #007bff;
   --video-info-link-hover-color: #0056b3;
 
+  /* Playlist */
+  --playlist-background-color: #4f4f4f;
+
   /* Settings */
   --settings-button-bg-color: var(--form-bg-color);
   --settings-button-text-color: var(--default-text-color);  
 
-  --settings-bg-primary-color: var(--form-bg-color);
+  --settings-modal-bg-color: var(--form-bg-color);
-  --settings-bg-secondary-color: var(--form-bg-color);
+  --settings-section-bg-color: var(--form-bg-color);
   --settings-text-color: var(--default-text-color);  
   --settings-subtitle-color: #aaa;
 

scripts/RELEASE-CHANGELOG.md

@@ -0,0 +1,21 @@
+### Features
+- **In-App Feedback**: Added a built-in feedback form allowing users to send feedback, bug reports, and daily logs directly to the development team.
+- **Community Contributions**: GitHub issues are now better maintained on the repository. If you want to contribute to the project, feel free to drop by and check out the `good first issue` tags!
+
+### Improvements
+- **Bundle Size**: Optimized assets and dependencies, reducing the overall application bundle size by approximately 50% on specific version.
+- **Updater UI**: Reworked the update notification for better clarity. Windows and AppImage users can download updates seamlessly in-app, while unsupported Linux package users are gracefully redirected to the manual download page. Flatpak (.rpm) and Snap (.snap) users are not informed, because that updates are handled by their respective package managers.
+- **Toast Notifications**: Refactored the style and overall UX of toast alerts.
+- **Code Quality**: Implemented a linter to enforce coding standards.
+
+### Bug Fixes
+- **Auto-Updater**: Fixed a major issue causing 404 Not Found errors when attempting to download updates for `.AppImage` releases.
+- **Linux Updates**: Fixed update crashes on `.rpm` and `.snap` packages. In-app update flows are now disabled for these formats to let the OS natively handle the process.
+- **Windows Logs**: Fixed a file naming issue with the log transport system on Windows.
+- **Desktop Entry Name**: Fixed the desktop entry name for Linux users, ensuring it displays correctly in application menus.
+
+### Chores
+- **Dependencies**: Removed `dotenv` from the project.
+- **URL**: A new URL for the website is now available ! [freedomloader.acnolo.fr](https://freedomloader.acnolo.fr)
+- **Dev**: Add new npm script. To check linux file quality
+    

scripts/create-copr-package.sh

@@ -0,0 +1,101 @@
+#!/bin/bash
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+VERSION=$(node -p "require('$ROOT_DIR/package.json').version")
+RPM_OUT="$ROOT_DIR/dist/freedom-loader-${VERSION}.x86_64.rpm"
+
+# ------------------------------------------------------------
+# Resolve fpm from electron-builder cache
+# Excludes Ruby gem wrappers, targets standalone binaries only
+# Prefers fpm@2.x over legacy fpm-1.9.x
+# ------------------------------------------------------------
+FPM=$(find ~/.cache/electron-builder -name "fpm" -type f 2>/dev/null \
+    | grep -v "/gems/bin/fpm" \
+    | grep -v "/gems/gems/" \
+    | grep -v "/lib/app/bin/fpm" \
+    | grep "fpm@" \
+    | head -1)
+
+# Fallback to legacy fpm-1.9.x if fpm@2.x not found
+if [ -z "$FPM" ]; then
+    FPM=$(find ~/.cache/electron-builder -name "fpm" -type f 2>/dev/null \
+        | grep -v "/gems/" \
+        | grep -v "/lib/app/bin/fpm" \
+        | head -1)
+fi
+
+if [ -z "$FPM" ]; then
+    echo "Error: fpm not found in electron-builder cache. Run 'npm run build:linux' once first to download it."
+    exit 1
+fi
+
+echo "Using fpm: $FPM"
+
+# Check that linux-unpacked exists
+if [ ! -d "$ROOT_DIR/dist/linux-unpacked" ]; then
+    echo "Error: dist/linux-unpacked not found. Run 'npm run build:linux' first."
+    exit 1
+fi
+
+# ------------------------------------------------------------
+# Prepare staging files
+# fpm requires exact file-to-destination mappings to avoid
+# scanning system directories (which causes permission errors)
+# ------------------------------------------------------------
+
+# Shell wrapper for /usr/bin/freedom-loader
+TMP_WRAPPER="$ROOT_DIR/.rpm-pkg-tmp-wrapper"
+mkdir -p "$TMP_WRAPPER"
+cat > "$TMP_WRAPPER/freedom-loader" << 'EOF'
+#!/bin/sh
+exec /opt/freedom-loader/freedom-loader "$@"
+EOF
+chmod +x "$TMP_WRAPPER/freedom-loader"
+
+# ------------------------------------------------------------
+# Step 1 - Build .rpm from linux-unpacked via fpm
+# ------------------------------------------------------------
+echo "Building RPM..."
+"$FPM" -s dir -t rpm --force \
+    --rpm-use-file-permissions \
+    --name freedom-loader \
+    --version "$VERSION" \
+    --architecture x86_64 \
+    --description "Free and open-source GUI for yt-dlp" \
+    --url "https://freedomloader.acnolo.fr/" \
+    --maintainer "MasterAcnolo <MasterAcnolo@users.noreply.github.com>" \
+    --license "GPL-3.0-only" \
+    --depends gtk3 \
+    --depends nss \
+    --depends libXScrnSaver \
+    --depends at-spi2-core \
+    --rpm-attr "4755,root,root:/opt/freedom-loader/chrome-sandbox" \
+    --package "$RPM_OUT" \
+    "$ROOT_DIR/dist/linux-unpacked/=/opt/freedom-loader" \
+    "$TMP_WRAPPER/freedom-loader=/usr/bin/freedom-loader" \
+    "$ROOT_DIR/build/app-icon.png=/usr/share/icons/hicolor/512x512/apps/freedom-loader.png" \
+    "$ROOT_DIR/package/com.masteracnolo.freedomloader.metainfo.xml=/usr/share/metainfo/com.masteracnolo.freedomloader.metainfo.xml" \
+    "$ROOT_DIR/package/com.masteracnolo.freedomloader.desktop=/usr/share/applications/com.masteracnolo.freedomloader.desktop" 
+rm -rf "$TMP_WRAPPER"
+echo "RPM built: $RPM_OUT"
+
+# ------------------------------------------------------------
+# Step 2 - Build SRPM for COPR
+# Wraps the .rpm above into a source RPM for COPR submission
+# ------------------------------------------------------------
+echo "Building SRPM for COPR..."
+mkdir -p "$ROOT_DIR/srpm-out"
+
+TMP_DIR="$ROOT_DIR/.copr-build-tmp"
+mkdir -p "$TMP_DIR"
+TMP_SPEC="$TMP_DIR/freedom-loader.spec"
+sed "s/__VERSION__/$VERSION/g" "$ROOT_DIR/package/freedom-loader.spec" > "$TMP_SPEC"
+
+rpmbuild -bs "$TMP_SPEC" \
+    --define "_sourcedir $ROOT_DIR/dist" \
+    --define "_srcrpmdir $ROOT_DIR/srpm-out"
+
+rm -rf "$TMP_DIR"
+echo "SRPM built: $ROOT_DIR/srpm-out/freedom-loader-$VERSION-1*.src.rpm"

scripts/release.sh

@@ -0,0 +1,198 @@
+#!/bin/bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+VERSION=$(node -p "require('$ROOT_DIR/package.json').version")
+
+if [[ "$VERSION" == *"-preview"* ]]; then
+    echo "Error: The current version ($VERSION) is a 'preview"
+    echo "Unable to launch release pipeline. Please update the package.json with a stable version.."
+    exit 1
+fi
+
+TAG="$VERSION"
+
+# Parse arguments
+PUBLISH_SNAP=false
+PUBLISH_COPR=false
+DRY_RUN=false
+
+for arg in "$@"; do
+    case $arg in
+        --snap)    PUBLISH_SNAP=true ;;
+        --copr)    PUBLISH_COPR=true ;;
+        --publish) PUBLISH_SNAP=true; PUBLISH_COPR=true ;;
+        --dry-run) DRY_RUN=true ;;
+        *) echo "Unknown Argument : $arg" ; exit 1 ;;
+    esac
+done
+
+echo ""
+echo "============================================"
+echo "  Freedom Loader - Release Pipeline"
+echo "  Version  : $VERSION"
+echo "  Tag      : $TAG"
+echo "  Snap     : $PUBLISH_SNAP"
+echo "  COPR     : $PUBLISH_COPR"
+echo "  Dry run  : $DRY_RUN"
+echo "============================================"
+echo ""
+
+# ------------------------------------------------------------
+# Step 0.1 - Check Dependencies
+# ------------------------------------------------------------
+echo "[0/5] Checking dependencies..."
+
+command -v gh >/dev/null 2>&1 || { echo "'gh' CLI missing, need to be installed (https://cli.github.com/)."; exit 1; }
+
+if [ "$PUBLISH_SNAP" = true ] && [ "$DRY_RUN" = false ]; then
+    command -v snapcraft >/dev/null 2>&1 || { echo "'snapcraft' missing, need to be installed."; exit 1; }
+fi
+
+if [ "$PUBLISH_COPR" = true ] && [ "$DRY_RUN" = false ]; then
+    command -v copr-cli >/dev/null 2>&1 || { echo "'copr-cli' missing, need to be installed."; exit 1; }
+fi
+
+echo "All dependencies found"
+
+# ------------------------------------------------------------
+# Step 0.2 - Clean Workspace
+# ------------------------------------------------------------
+echo "[0/5] Cleaning workspace..."
+# On supprime les dossiers générés lors des builds précédents
+rm -rf "$ROOT_DIR/dist" "$ROOT_DIR/srpm-out"
+echo "Workspace cleaned (dist/ and srpm-out/ removed)"
+
+# ------------------------------------------------------------
+# Step 0.3 - Retrieve Changelog
+# ------------------------------------------------------------
+if [ ! -f "$ROOT_DIR/scripts/RELEASE-CHANGELOG.md" ]; then
+    echo "Warning: RELEASE-CHANGELOG.md not found, release notes will be empty."
+    CHANGELOG=""
+else
+    CHANGELOG="$(cat "$ROOT_DIR/scripts/RELEASE-CHANGELOG.md")"
+    echo "Changelog retrieved successfully"
+fi
+# ------------------------------------------------------------
+# Step 1 - Build Linux packages (AppImage, deb, snap)
+# ------------------------------------------------------------
+echo "[1/5] Building Linux packages..."
+cd "$ROOT_DIR"
+npm run build:linux
+echo "Linux packages built"
+
+# ------------------------------------------------------------
+# Step 2 - Build RPM binary + SRPM for COPR
+# Uses the create-copr-package.sh script which handles:
+# - fpm binary resolution from electron-builder cache
+# - .rpm generation from linux-unpacked
+# - .src.rpm generation for COPR submission
+# ------------------------------------------------------------
+echo "[2/5] Building RPM and SRPM..."
+bash "$ROOT_DIR/scripts/create-copr-package.sh"
+echo "RPM and SRPM built"
+
+# ------------------------------------------------------------
+# Step 3 - Build Windows installer
+# Note: requires Windows binaries to be present locally under
+# resources/binaries/win-32/ (not committed to the repo)
+# ------------------------------------------------------------
+echo "[3/5] Building Windows installer..."
+npm run build:win
+echo " Windows installer built"
+
+# ------------------------------------------------------------
+# Step 4 - Create a draft release on GitHub
+# Release notes are pre-filled with the standard template.
+# Edit and publish manually from the GitHub web interface.
+# Requires gh CLI to be installed and authenticated.
+# ------------------------------------------------------------
+echo "[4/5] Creating GitHub draft release $TAG..."
+
+# Utilise une méthode un peu plus robuste pour trouver l'ancien tag (ignore le HEAD actuel s'il est déjà tagué)
+PREV_TAG=$(git rev-list --tags --skip=1 --max-count=1 | xargs git describe --tags 2>/dev/null || echo "previous")
+
+RELEASE_NOTES="# Freedom Loader - $VERSION
+
+## Changelog
+
+$CHANGELOG
+
+## Found a bug or issue?
+Please report it in the [GitHub Issues](https://github.com/MasterAcnolo/Freedom-Loader/issues) section.
+
+**Full Changelog**: https://github.com/MasterAcnolo/Freedom-Loader/compare/${PREV_TAG}...${TAG}"
+
+if [ "$DRY_RUN" = false ]; then
+    gh release create "$TAG" \
+        --title "$TAG" \
+        --notes "$RELEASE_NOTES" \
+        --draft \
+        "$ROOT_DIR/dist/Freedom-Loader-Setup-${VERSION}.exe" \
+        "$ROOT_DIR/dist/Freedom-Loader-Setup-${VERSION}.exe.blockmap" \
+        "$ROOT_DIR/dist/freedom-loader-${VERSION}.x86_64.rpm" \
+        "$ROOT_DIR/dist/Freedom-Loader_${VERSION}_amd64.deb" \
+        "$ROOT_DIR/dist/Freedom-Loader-${VERSION}.AppImage" \
+        "$ROOT_DIR/dist/freedom-loader_${VERSION}_amd64.snap" \
+        "$ROOT_DIR/dist/latest.yml" \
+        "$ROOT_DIR/dist/latest-linux.yml"
+    echo "Draft release created: https://github.com/MasterAcnolo/Freedom-Loader/releases"
+else
+    echo "  [DRY RUN] gh release create $TAG (skipped)"
+fi
+
+# ------------------------------------------------------------
+# Step 5 - Publish to package stores
+# Snap and COPR are opt-in via --snap, --copr, or --publish.
+# Without these flags, this step is skipped entirely.
+# Run after the GitHub release is published (not the draft),
+# so store users always get the same version as GitHub users.
+# ------------------------------------------------------------
+echo "[5/5] Publishing to package stores..."
+
+if [ "$PUBLISH_SNAP" = true ]; then
+    echo "  Publishing to Snap Store..."
+    if [ "$DRY_RUN" = false ]; then
+        export PATH=$PATH:/var/lib/snapd/snap/bin
+        snapcraft upload \
+            "$ROOT_DIR/dist/freedom-loader_${VERSION}_amd64.snap" \
+            --release=stable
+        echo " Snap published"
+    else
+        echo "  [DRY RUN] snapcraft upload (skipped)"
+    fi
+else
+    echo "  Snap: skipped (use --snap or --publish to enable)"
+fi
+
+if [ "$PUBLISH_COPR" = true ]; then
+    echo "  Publishing to COPR..."
+    if [ "$DRY_RUN" = false ]; then
+        copr-cli build freedom-loader \
+            "$ROOT_DIR/srpm-out/freedom-loader-${VERSION}-1"*.src.rpm
+        echo "COPR build triggered"
+    else
+        echo "  [DRY RUN] copr-cli build (skipped)"
+    fi
+else
+    echo "  COPR: skipped (use --copr or --publish to enable)"
+fi
+
+# ------------------------------------------------------------
+# Done - Summary
+# ------------------------------------------------------------
+echo ""
+echo "============================================"
+echo "  Release pipeline complete."
+echo ""
+echo "  Next steps:"
+echo "  1. Fill in the release notes on GitHub"
+echo "  2. Publish the draft release"
+if [ "$PUBLISH_SNAP" = false ] || [ "$PUBLISH_COPR" = false ]; then
+echo ""
+echo "  Store publishing (not done yet):"
+[ "$PUBLISH_SNAP" = false ] && echo "  - Snap  : bash scripts/release.sh --snap"
+[ "$PUBLISH_COPR" = false ] && echo "  - COPR  : bash scripts/release.sh --copr"
+fi
+echo "============================================"

server/controller/download.controller.js

@@ -1,11 +1,50 @@
-const { fetchDownload } = require("../services/download.services");
+const { fetchDownload, cancelDownload } = require("../services/download.services");
 const { logger } = require("../logger");
 const { isValidUrl, isSafePath } = require("../helpers/validation.helpers");
 const { notifyDownloadFinished } = require("../helpers/notify.helpers");
+const { configFeatures } = require("../../config");
 
-const listeners = [];
+/**
+ * Active Server-Sent Event subscribers receiving
+ * download progress updates.
+ *
+ * Each listener receives a percentage value between
+ * 0 and 100 during the download lifecycle.
+ */
+const progressListeners = [];
+
+/**
+ * Active Server-Sent Event subscribers receiving
+ * download speed updates.
+ */
 const speedListeners = [];
 
+/**
+ * Active Server-Sent Event subscribers receiving
+ * download stage updates.
+ */
+const stageListeners = [];
+
+/**
+ * Active Server-Sent Event subscribers receiving
+ * playlist progress information.
+ */
+const playlistListeners = [];
+
+/**
+ * Handles download requests and starts a yt-dlp download.
+ *
+ * Validates user input, prepares download options and
+ * delegates the download process to the download service.
+ *
+ * Once the download completes successfully, a desktop
+ * notification may be displayed depending on the
+ * application configuration.
+ *
+ * @param {import("express").Request} req
+ * @param {import("express").Response} res
+ * @returns {Promise<void>}
+ */
 async function downloadController(req, res) {
   try {
     const options = {
@@ -13,25 +52,39 @@ async function downloadController(req, res) {
       audioOnly: req.body.audioOnly === "1",
       quality: req.body.quality || "best",
       outputFolder: req.body.savePath || undefined,
+      playlistTitle: req.body.playlistTitle || undefined,
     };
 
-    if (!options.url || !isValidUrl(options.url)) return res.status(400).send("❌ Invalid URL !");
+    if (!options.url || !isValidUrl(options.url)) return res.status(400).send("Invalid URL !");
     if (options.outputFolder && !isSafePath(options.outputFolder)) {
       logger.warn(`Unsafe download path rejected: ${options.outputFolder}`);
-      return res.status(400).send("❌ Save Path Not Allowed.");
+      return res.status(400).send("Save Path Not Allowed.");
     }
 
-    // Get output folder when the download is finished
+    const outputFolder = await fetchDownload(
-    const outputFolder = await fetchDownload(options, listeners, speedListeners);
+      options,
-    notifyDownloadFinished(outputFolder);
+      progressListeners,
-    res.send("✅ Download Done !");
+      speedListeners,
+      stageListeners,
+      playlistListeners
+    );
+    
+    notifyDownloadFinished(outputFolder, configFeatures.notifySystem);
+    res.send("Download Done !");
     
   } catch (err) {
-    logger.error(`Server Error in /download : ${err.message}`);
+    logger.error(`Server Error in /download: ${err?.message ?? err}`);
-    res.status(500).send(`❌ Server Error`);
+    res.status(500).send("Server Error");
   }
 }
 
+/**
+ * Opens a Server-Sent Events (SSE) connection used to
+ * stream download progress updates to the client.
+ *
+ * @param {import("express").Request} req
+ * @param {import("express").Response} res
+ */
 function progressController(req, res) {
   res.set({
     'Content-Type': 'text/event-stream',
@@ -40,14 +93,21 @@ function progressController(req, res) {
   });
 
   const sendProgress = percent => res.write(`data: ${percent}\n\n`);
-  listeners.push(sendProgress);
+  progressListeners.push(sendProgress);
 
   req.on('close', () => {
-    listeners.splice(listeners.indexOf(sendProgress), 1);
+    progressListeners.splice(progressListeners.indexOf(sendProgress), 1);
     res.end();
   });
 }
 
+/**
+ * Opens a Server-Sent Events (SSE) connection used to
+ * stream download speed updates to the client.
+ *
+ * @param {import("express").Request} req
+ * @param {import("express").Response} res
+ */
 function speedController(req, res) {
   res.set({
     'Content-Type': 'text/event-stream',
@@ -64,5 +124,75 @@ function speedController(req, res) {
   });
 }
 
+/**
+ * Opens a Server-Sent Events (SSE) connection used to
+ * stream download stage updates such as downloading,
+ * merging, extracting audio or embedding metadata.
+ *
+ * @param {import("express").Request} req
+ * @param {import("express").Response} res
+ */
+function stageController(req, res) {
+  res.set({
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    'Connection': 'keep-alive',
+  });
 
-module.exports = { downloadController, progressController, speedController};
+  const sendStage = stage => res.write(`data: ${stage}\n\n`);
+  stageListeners.push(sendStage);
+
+  req.on('close', () => {
+    stageListeners.splice(stageListeners.indexOf(sendStage), 1);
+    res.end();
+  });
+}
+
+/**
+ * Cancels the currently running download process.
+ *
+ * Returns an error response if no download is active.
+ *
+ * @param {import("express").Request} req
+ * @param {import("express").Response} res
+ */
+function cancelDownloadController(req, res) {
+  const cancelled = cancelDownload();
+  if (cancelled) {
+    logger.info("Download and queue cancelled by user");
+    res.send("Download stopped! Queue cleared.");
+  } else {
+    logger.warn("No download to cancel");
+    res.status(400).send("No download in progress !");
+  }
+}
+
+/**
+ * Opens a Server-Sent Events (SSE) connection used to
+ * stream playlist progress information to the client.
+ *
+ * Example:
+ * - Item 1 of 20
+ * - Item 12 of 20
+ * - Item 20 of 20
+ *
+ * @param {import("express").Request} req
+ * @param {import("express").Response} res
+ */
+function playlistInfoController(req, res) {
+  res.set({
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    'Connection': 'keep-alive',
+  });
+
+  const sendPlaylistInfo = info => res.write(`data: ${info}\n\n`);
+  playlistListeners.push(sendPlaylistInfo);
+
+  req.on('close', () => {
+    playlistListeners.splice(playlistListeners.indexOf(sendPlaylistInfo), 1);
+    res.end();
+  });
+}
+
+module.exports = { downloadController, progressController, speedController, stageController, cancelDownloadController, playlistInfoController};

server/controller/info.controller.js

@@ -2,46 +2,129 @@ const { fetchInfo } = require("../services/info.services");
 const { parseVideo, parsePlaylist } = require("../helpers/parseInfo.helpers");
 const { logger } = require("../logger");
 const { isValidUrl } = require("../helpers/validation.helpers");
+const {isUrlPlaylist} = require("../helpers/playlist.helpers");
 
-async function infoController(req, res){
+/**
+ * Handles metadata retrieval for a video or playlist.
+ *
+ * This controller:
+ * - Validates incoming URL (query or body)
+ * - Calls yt-dlp metadata extraction service
+ * - Detects playlist vs single video context
+ * - Applies fallback strategy if playlist extraction fails
+ * - Returns normalized parsed response (video or playlist)
+ *
+ * @param {import("express").Request} req
+ * @param {import("express").Response} res
+ */
+async function infoController(req, res) {
 
-    const url = req.body.url || req.query.url; // POST et GET
+    // Previously, i support both POST and GET element, but it's kinda weird. So now it only support GET.
+    const url = req.query.url;
+    const encodedUrl = encodeURIComponent(url)
 
-
+    /**
-    // If no url, non-string url or invalid url
+     * Basic validation:
-
+     * - URL must exist
-    if (!url || typeof url !== "string" || !isValidUrl(url)) return res.status(400).send("❌ Invalid URL Or Missing");
+     * - Must be a string
-
+     * - Must pass custom URL validation
-    logger.info(`/Info Request receive by the Info Controller. URL: ${url}`);
+     */
-
+    if (!url || typeof url !== "string" || !isValidUrl(url)) {
-    if (url.includes("&list") || url.includes("?list")) {
+        return res.status(400).send("Invalid URL Or Missing");
-        logger.info("Estimated Data Type: Playlist")
-
-    } else{
-        logger.info("Estimated Data Type: Video")
     }
 
+    logger.info(`Info request received. RAW URL: ${url}`);
+    logger.info(`Info request received. ENCODED: ${encodedUrl}`);
+
+    // Lightweight heuristic to detect playlist URLs. It works for Youtube.
+    const isPlaylistUrl = isUrlPlaylist(url);
+
+    logger.info(
+        isPlaylistUrl
+            ? "Estimated Data Type: Playlist"
+            : "Estimated Data Type: Video"
+    );
+
     try {
-    const data = await fetchInfo(url);
+        let data;
 
-    if (data._type === "playlist") {
+        /**
+         * Primary metadata fetch attempt
+         */
+        try {
+            data = await fetchInfo(url);
+        } catch (err) {
 
-        const playlist = parsePlaylist(data);
+            /**
-        logger.info(`Playlist : ${playlist.title} (${playlist.count} vidéos)`);
+             * Fallback strategy:
-        return res.json(playlist);
+             * If playlist extraction fails, retry as single video
+             */
+            if (isPlaylistUrl) {
 
-    } else{
+                logger.info(
-        const video = parseVideo(data);
+                    `Playlist fetch failed: ${err.message}. Retrying as single video...`
-        logger.info(`Unique Video: ${video.title}`);
+                );
-        return res.json(video);
-    }
 
+                // Remove playlist query parameter (best-effort cleanup)
+                const singleVideoUrl = url.split("&list")[0].split("?list")[0];
+
+                try {
+                    data = await fetchInfo(singleVideoUrl);
+                    logger.info("Single video fetch succeeded after playlist failure");
+                } catch (retryErr) {
+                    logger.error(
+                        `Single video fetch also failed: ${retryErr.message}`
+                    );
+
+                    // Preserve original error context
+                    logger.error(err);
+                }
+
+            } else {
+                logger.error(err);
+            }
+        }
+
+        /**
+         * Normalize response based on yt-dlp output type
+         */
+        if (data._type === "playlist") {
+
+            // If the playlist got only one video, show it as a video.
+            if (data.entries && data.entries.length === 1) {
+
+                const singleVideo = parseVideo(data.entries[0]);
+
+                logger.info(`Playlist with 1 item converted to video: ${singleVideo.title}`);
+
+                return res.json(singleVideo);
+            }
+
+            const playlist = parsePlaylist(data);
+
+            logger.info(
+                `Playlist fetched: ${playlist.title} (${playlist.count} videos)`
+            );
+
+            return res.json(playlist);
+
+        } else {
+
+            const video = parseVideo(data);
+
+            logger.info(`Video fetched: ${video.title}`);
+
+            return res.json(video);
+        }
 
     } catch (err) {
-        logger.error(`Info controller error: ${err && err.message ? err.message : err}`);
+
-        return res.status(500).send(`❌ Unable to fetch info`);
+        logger.error(
+            `Info controller error: ${err && err.message ? err.message : err}`
+        );
+
+        return res.status(500).send("Unable to fetch info");
     }
-    
 }
 
-module.exports = {infoController};
+module.exports = { infoController };

server/discordRPC.js

@@ -1,47 +0,0 @@
-const config = require('../config');
-const RPC = require("discord-rpc");
-const { logger } = require("./logger");
-
-const clientId = `${config.DiscordRPCID}`;
-const rpc = new RPC.Client({ transport: "ipc" });
-
-let intervalId;
-
-function startRPC() {
-  rpc.on("ready", () => {
-    const presence = {
-      largeImageKey: "icon",
-      smallImageKey: "acnolo_pfp",
-      smallImageText: "By MasterAcnolo",
-      startTimestamp: new Date(),
-      details: `Open Source Download Tools - ${config.version}`,
-      state: "masteracnolo.github.io/FreedomLoader",
-    };
-    rpc.clearActivity()
-    rpc.setActivity(presence);
-
-  });
-
-  rpc.login({ clientId }).catch(err => {
-    logger.error("Unable to connect to the RPC:", err);
-  });
-}
-
-async function stopRPC(){
-    try {
-      if (intervalId) clearInterval(intervalId);
-
-      if (rpc && rpc.transport) {
-        await rpc.clearActivity()
-        await rpc.destroy();
-      } else{
-        logger.error("Not Able to close RPC")
-      }
-      
-    } catch (err) {
-      logger.error("Error while closing the RPC:", err);
-    }
-  }
-
-
-module.exports = { startRPC, stopRPC};

server/helpers/buildArgs.helpers.js

@@ -1,10 +1,31 @@
 const path = require("path");
 
-const getUserBrowser = require("./getBrowser.helpers.js");
+const {getUserBrowser} = require("./getBrowser.helpers.js");
 const { ffmpegPath, denoPath} = require("./path.helpers.js");
 const { configFeatures } = require("../../config.js");
 const { logger } = require("../logger.js");
+const config  = require("../../config")
 
+/**
+ * Validates whether the provided codec is supported by the application.
+ *
+ * If the codec is supported, it is returned unchanged.
+ * Otherwise, a warning is logged and the default codec ("h264")
+ * is returned as a fallback.
+ *
+ * Supported codecs:
+ * - av01
+ * - vp9.2
+ * - vp9
+ * - h265
+ * - h264
+ * - vp8
+ * - h263
+ * - theora
+ *
+ * @param {string} codec - Codec identifier to validate.
+ * @returns {string} A valid codec identifier.
+ */
 function validateCodec(codec){
 
   const validCodec = [
@@ -20,7 +41,29 @@ function validateCodec(codec){
   }
 }
 
-function buildYtDlpArgs({ url, audioOnly, quality, outputFolder }) {
+/**
+ * Builds the complete yt-dlp argument list based on the
+ * application configuration and download options.
+ *
+ * The generated arguments include:
+ * - Browser cookie extraction
+ * - FFmpeg integration
+ * - Deno runtime configuration
+ * - Metadata and thumbnail embedding
+ * - Playlist handling
+ * - Video/audio format selection
+ * - Quality filtering
+ * - Output file destination
+ *
+ * @param {Object} options - Download configuration.
+ * @param {string} options.url - Video or playlist URL.
+ * @param {boolean} options.audioOnly - Whether to extract audio only.
+ * @param {string} options.quality - Requested quality preset.
+ * @param {string} options.outputFolder - Download destination folder.
+ *
+ * @returns {string[]} Array of arguments ready to be passed to yt-dlp.
+ */
+function buildYtDlpArgs({url, audioOnly, quality, outputFolder, isPlaylist}) {
 
   logger.info("--- CONFIGURATION ---");
 
@@ -28,6 +71,7 @@ function buildYtDlpArgs({ url, audioOnly, quality, outputFolder }) {
   logger.info(`CONFIG discordRPC: ${configFeatures.discordRPC}`);
   logger.info(`CONFIG customTopBar: ${configFeatures.customTopBar}`);
   logger.info(`CONFIG autoCheckInfo: ${configFeatures.autoCheckInfo}`);
+  logger.info(`CONFIG keepPlaylistOrder: ${configFeatures.keepPlaylistOrder}`);
   logger.info(`CONFIG addThumbnail: ${configFeatures.addThumbnail}`);
   logger.info(`CONFIG addMetadata: ${configFeatures.addMetadata}`);
   logger.info(`CONFIG verboseLogs: ${configFeatures.verboseLogs}`);
@@ -75,7 +119,27 @@ function buildYtDlpArgs({ url, audioOnly, quality, outputFolder }) {
   };
 
   args.push("-f", qualityMap[quality] || "best");
-  args.push("-o", path.join(outputFolder, "%(title)s.%(ext)s"));
+
+  /**
+   * Default title output template
+   * @type {string}
+   */
+  let outputTemplate = "%(title)s.%(ext)s";
+
+  // If it's a playlist, and we want to keep the playlist order. Add an index before the title.
+  if (isPlaylist && configFeatures.keepPlaylistOrder && configFeatures.autoDownloadPlaylist) {
+    outputTemplate = "%(playlist_index)02d - %(title)s.%(ext)s";
+  }
+
+  // Add a custom signature in each file downloaded with the app. It's a small things but i found it cool :)
+  if (configFeatures.addMetadata) {
+    args.push(
+        "--postprocessor-args",
+        `ffmpeg:-metadata comment="Downloaded with Freedom Loader ${config.version}"`
+    );
+}
+
+  args.push("-o", path.join(outputFolder, outputTemplate));
   args.push(url);
 
   return args.filter(Boolean);

server/helpers/getBrowser.helpers.js

@@ -1,39 +1,63 @@
 const fs = require("fs");
 const os = require("os");
-const path = require("path");
+const notify = require("./notify.helpers");
-const notify = require("./notify.helpers")
 const { logger } = require("../logger");
 
+/**
+ * Detects the first supported browser installed on the system.
+ *
+ * The detected browser is used by yt-dlp to import authentication
+ * cookies when required by certain platforms.
+ *
+ * Currently, Firefox is the only browser officially supported
+ * by the application.
+ *
+ * If no supported browser is found:
+ * - A warning is logged
+ * - A notification is displayed to the user
+ * - "firefox" is returned as a fallback to allow yt-dlp to
+ *   handle the error gracefully without crashing the application
+ *
+ * @returns {string} The detected browser identifier.
+ */
 function getUserBrowser() {
-  const userProfile = os.homedir();
+  const platform = process.platform;
+  let isFirefoxHere = false;
 
-  // List of browsers supported by yt-dlp (Currently I can only guarantee Firefox, Sorry)
+  if (platform === "win32") {
-  const browsers = [
+    const paths = [
-    { name: "firefox", path: path.join(userProfile, "AppData", "Roaming", "Mozilla", "Firefox", "Profiles") },
+      "C:\\Program Files\\Mozilla Firefox\\firefox.exe",
-    // { name: "chrome", path: path.join(userProfile, "AppData", "Local", "Google", "Chrome", "User Data", "Default") },
+      "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",
-    // { name: "brave", path: path.join(userProfile, "AppData", "Local", "BraveSoftware", "Brave-Browser", "User Data", "Default") },
+      `${process.env.LOCALAPPDATA}\\Mozilla Firefox\\firefox.exe`,
-    // { name: "edge", path: path.join(userProfile, "AppData", "Local", "Microsoft", "Edge", "User Data", "Default") },
+    ];
-    // { name: "opera", path: path.join(userProfile, "AppData", "Roaming", "Opera Software", "Opera Stable") },
-    // { name: "vivaldi", path: path.join(userProfile, "AppData", "Local", "Vivaldi", "User Data", "Default") },
-    // { name: "safari", path: path.join(userProfile, "AppData", "Local", "Apple Computer", "Safari") },
-    // { name: "whale", path: path.join(userProfile, "AppData", "Local", "Naver", "Naver Whale", "User Data", "Default") }
-  ];
 
-  // Search for an available browser
+    isFirefoxHere = paths.some(p => fs.existsSync(p));
-  for (const browser of browsers) {
-    if (fs.existsSync(browser.path)) {
-      logger.info(`Browser found: ${browser.name}`);
-      return browser.name;
-    }
   }
 
-  // No browser found - notify user
+  if (platform === "linux") {
-  logger.warn("No supported browser found on the system");
+    const paths = [
-  notify.notifyFirefoxBrowserMissing();
+      "/usr/bin/firefox",
-  
+      "/usr/bin/firefox-esr",
-  // Fallback: return "Firefox" to let YT-DLP manage error
+      "/usr/local/bin/firefox",
-  // this avoid app crash
+      "/snap/bin/firefox",
+      "/var/lib/flatpak/exports/bin/org.mozilla.firefox",
+      `${os.homedir()}/.local/share/flatpak/exports/bin/org.mozilla.firefox`,
+    ];
+    isFirefoxHere = paths.some(p => fs.existsSync(p));
+  }
+
+  if (!isFirefoxHere) {
+    // If you somehow managed to live without Firefox and need help installing it. - Don't applied to my Linux chad
+    // No supported browser found => Notify User
+    logger.warn("No supported browser found on the system");
+    notify.notifyFirefoxBrowserMissing();
+  } else {
+    logger.info("Browser found: firefox");
+  }
+
+  // Fallback to Firefox and let yt-dlp handle the error gracefully.
+  // This prevents the application from crashing
   return "firefox";
 }
 
-module.exports = getUserBrowser
+module.exports = {getUserBrowser};

server/helpers/notify.helpers.js

@@ -1,17 +1,65 @@
 const { Notification, shell } = require("electron");
 const { iconPaths } = require("./path.helpers");
+const { logger } = require("../logger");
+
+/**
+ * Set that is holding all notifications. Used to avoid Race Condition and notification crash
+ * @type {Set<any>}
+ */
+const activeNotifications = new Set();
+
+/**
+ * Displays a system notification when a download completes successfully.
+ *
+ * If enabled, clicking the notification opens the download folder
+ * using the system file explorer.
+ *
+ * @param {string} folder - Path to the completed download folder.
+ * @param {boolean} notifyEnabled - Whether notifications are enabled in config.
+ */
+function notifyDownloadFinished(folder, notifyEnabled = true) {
+  if (!notifyEnabled) return;
+  if (!folder) return;
 
-function notifyDownloadFinished(folder) {
   const notif = new Notification({
     title: "Freedom Loader",
     body: "Your download is complete, click here to open it.",
     icon: iconPaths.confirm,
   });
 
-  notif.on("click", () => shell.openPath(folder));
+  // Protect notification to garbage collection and race condition, by adding a 150ms timeout before trying to open the folder
+  activeNotifications.add(notif);
+
+  notif.on("click", () => {
+    activeNotifications.delete(notif);
+
+    setTimeout(() => {
+      shell.openPath(folder).then((errorMessage) => {
+        if (errorMessage) {
+          logger.error(`Impossible d'ouvrir le dossier : ${errorMessage}`);
+        }
+      }).catch(err => {
+        logger.error(`Erreur inattendue de shell.openPath : ${err}`);
+      });
+    }, 150);
+  });
+
+  notif.on("close", () => {
+    activeNotifications.delete(notif);
+  });
+
   notif.show();
 }
 
+/**
+ * Displays a notification when browser cookies cannot be extracted.
+ *
+ * This usually indicates:
+ * - User is not logged in to the browser
+ * - Browser profile is inaccessible
+ *
+ * Clicking the notification opens a tutorial link.
+ */
 function notifyCookiesBrowserError(){
   const notif = new Notification({
     title: "Cookies Error",
@@ -19,23 +67,51 @@ function notifyCookiesBrowserError(){
     icon: iconPaths.error,
   });
 
-  notif.on("click", () => shell.openExternal("https://youtube.com/shorts/cN9f4s1Mf88?si=519QCVd_-fzJqRf1"));
+  activeNotifications.add(notif);
+
+  notif.on("click", () => {
+    shell.openExternal("https://www.firefox.com/en-US/download/");
+    activeNotifications.delete(notif);
+  });
+
+  notif.on("close", () => {
+    activeNotifications.delete(notif);
+  });
+
   notif.show();
 }
 
-function notifyFirefoxBrowserMissing(){
+/**
+ * Displays a notification when Firefox is not detected
+ * on the user system.
+ *
+ * This is required for cookie extraction via yt-dlp.
+ *
+ * Clicking the notification opens an installation guide.
+ */
+function notifyFirefoxBrowserMissing() {
   const notif = new Notification({
     title: "Firefox Missing",
     body: "Firefox was not found on your system. Click here to follow the installation guide",
     icon: iconPaths.error,
   });
 
-  notif.on("click", () => shell.openExternal("https://youtube.com/shorts/cN9f4s1Mf88?si=519QCVd_-fzJqRf1"))
+  activeNotifications.add(notif);
+
+  notif.on("click", () => {
+    shell.openExternal("https://www.firefox.com/en-US/download/");
+    activeNotifications.delete(notif);
+  });
+
+  notif.on("close", () => {
+    activeNotifications.delete(notif);
+  });
+
   notif.show();
 }
 
 module.exports = {
-  notifyDownloadFinished, 
+  notifyDownloadFinished,
   notifyCookiesBrowserError,
-  notifyFirefoxBrowserMissing
+  notifyFirefoxBrowserMissing,
 };

server/helpers/parseInfo.helpers.js

@@ -1,27 +1,38 @@
+/**
+ * Normalizes a video payload by attaching the resource type.
+ *
+ * @param {Object} data - Raw video metadata.
+ * @returns {Object} Normalized video object.
+ */
 function parseVideo(data) {
-
+  return {
-    return {
+    type: "video",
-        type: "video",
+    ...data
-        ...data
+  };
-    };
 }
 
+/**
+ * Transforms a raw playlist payload into a normalized structure
+ * containing playlist metadata and a simplified list of videos.
+ *
+ * @param {Object} data - Raw playlist metadata.
+ * @returns {Object} Normalized playlist object.
+ */
 function parsePlaylist(data) {
-    
+  return {
-    return {
+    type: "playlist",
-        type: "playlist",
+    title: data.title || data.id,
-        title: data.title || data.id,
+    channel: data.uploader,
-        channel: data.uploader,
+    count: data.entries.length,
-        count: data.entries.length,
+    videos: (data.entries || []).map(v => ({
-        videos: (data.entries || []).map(v => ({
+      id: v.id,
-            id: v.id,
+      title: v.title,
-            title: v.title,
+      url: v.webpage_url,
-            url: v.webpage_url,
+      duration: v.duration,
-            duration: v.duration,
+      thumbnail: v.thumbnail,
-            thumbnail: v.thumbnail,
+      uploader: v.uploader
-            uploader: v.uploader
+    }))
-        }))
+  };
-    };
 }
 
-module.exports = { parseVideo, parsePlaylist };
+module.exports = { parseVideo, parsePlaylist };

server/helpers/path.helpers.js

@@ -1,57 +1,269 @@
 const path = require("path");
 const fs = require("fs");
-const os = require("os");
 const { app } = require("electron");
 const config = require("../../config.js");
 
-const { logger } = require("../logger.js");
+/**
+ * Is the OS windows
+ */
+const isWindows = process.platform === 'win32'
 
-// Centralized resource paths
+/**
-const resourcesPath = config.localMode 
+ * On windows the binaries are name.exe on Linux/macOS no
-  ? path.join(__dirname, "../../ressources")
+ */
+const ext = isWindows ? '.exe' : ''
+
+/**  Centralized resource paths */
+const resourcesPath = config.devMode
+  ? path.join(__dirname, "../../resources")
   : process.resourcesPath;
 
-// Default download folder (centralized)
+/**  Default download folder (centralized) */
-const defaultDownloadFolder = path.join(os.homedir(), "Downloads", "Freedom Loader");
+const defaultDownloadFolder = path.join(app.getPath("downloads"), "Freedom Loader");
+
+/**
+ * Current platform:
+ * win32 | linux | darwin
+ */
+const platform = process.platform;
+
+/**
+ * Dev source tree uses platform-named subfolders (matches resources/binaries/{win-32,linux,darwin}).
+ * Packaged builds flatten everything directly under binaries/, since each
+ * platform build only ships its own binaries — no subfolder needed.
+ */
+const devPlatformFolder = {
+  win32: "win-32",
+  linux: "linux",
+  darwin: "darwin"
+}[platform];
+
+const binariesPath = config.devMode
+    ? path.join(resourcesPath, "binaries", devPlatformFolder)
+    : path.join(resourcesPath, "binaries");
+
+
+/**
+ * Runtime-resolved binary paths.
+ * These values differ between development and production builds.
+ */
 
-// Binary paths
 let userYtDlp;
 let ffmpegPath;
 let denoPath;
 
-const sourceYtDlp = path.join(resourcesPath, "binaries","yt-dlp.exe");
+/** Source binary bundled inside application resources (used for first-time copy) */
+const sourceYtDlp = path.join(
+  binariesPath,
+  `yt-dlp${ext}`
+);
 
-if (config.localMode) {
+/**
-  userYtDlp = path.join(__dirname, "../../ressources/yt-dlp.exe");
+ * Resolve binary locations depending on environment:
-  ffmpegPath = path.join(__dirname, "../../ressources/"); // <- has ffmpeg.exe and ffprobe.exe
+ * - dev: local resources folder
-  denoPath = path.join(__dirname, "../../ressources/deno.exe"); 
+ * - prod: extracted userData + packaged resources
+ */
+if (config.devMode) {
+  userYtDlp = path.join(
+    binariesPath,
+    `yt-dlp${ext}`
+  );
+
+  ffmpegPath = path.join(
+    binariesPath,
+    `ffmpeg${ext}`
+  );
+
+  denoPath = path.join(
+    binariesPath,
+    `deno${ext}`
+  );
 } else {
-  userYtDlp = path.join(app.getPath("userData"),"yt-dlp.exe");
+  userYtDlp = path.join(
-  ffmpegPath = path.join(resourcesPath, "binaries","ffmpeg.exe"); 
+    app.getPath("userData"),
-  denoPath = path.join(resourcesPath, "binaries","deno.exe");
+    `yt-dlp${ext}`
+  );
 
-  if (!fs.existsSync(userYtDlp)) {
+  ffmpegPath = path.join(
+    binariesPath,
+    `ffmpeg${ext}`
+  );
+
+  denoPath = path.join(
+    binariesPath,
+    `deno${ext}`
+  );
+
+  if (!fs.existsSync(userYtDlp) && fs.existsSync(sourceYtDlp)) {
     fs.copyFileSync(sourceYtDlp, userYtDlp);
+
+    // Linux/macOS executable permission
+    if (!isWindows) {
+      try {
+        fs.chmodSync(userYtDlp, 0o755);
+      } catch (err) {
+          getLogger().warn(`Failed to chmod yt-dlp: ${err.message}`);
+      }
+    }
   }
 }
 
-// Notification icon paths
+/**
+ * Centralized notification and UI icon paths.
+ * Used by Electron notifications and UI components.
+ */
 const iconPaths = {
   confirm: path.join(resourcesPath, "confirm-icon.png"),
   error: path.join(resourcesPath, "error.png"),
   app: path.join(resourcesPath, "app-icon.ico")
 };
 
-// Binary paths for verification
+/**
+ * Static reference paths to bundled binaries.
+ * Used mainly for verification and diagnostics.
+ */
 const binaryPaths = {
-  ytDlp: path.join(resourcesPath, "binaries", "yt-dlp.exe"),
+  ytDlp: path.join(
-  ffmpeg: path.join(resourcesPath, "binaries", "ffmpeg.exe"),
+    binariesPath,
-  ffprobe: path.join(resourcesPath, "binaries", "ffprobe.exe"),
+    `yt-dlp${ext}`
-  deno: path.join(resourcesPath, "binaries", "deno.exe")
+  ),
+
+  ffmpeg: path.join(
+    binariesPath,
+    `ffmpeg${ext}`
+  ),
+
+  ffprobe: path.join(
+    binariesPath,
+    `ffprobe${ext}`
+  ),
+
+  deno: path.join(
+    binariesPath,
+    `deno${ext}`
+  )
 };
 
-if (!userYtDlp){ logger.error("Missing YT-DLP")}
+/**
-if (!ffmpegPath){ logger.error("Missing FFMPEG")}
+ * Theme storage system:
-if (!denoPath){ logger.error("Missing DENO")}
+ * - default themes come from app resources
+ * - user themes are persisted in userData to survive updates
+ */
+const userThemesPath = path.join(app.getPath("userData"), "themes");
+const defaultThemesSourcePath = path.join("theme");
 
-module.exports = { userYtDlp, ffmpegPath, denoPath, iconPaths, binaryPaths, resourcesPath, defaultDownloadFolder };
+/**
+ * Initializes user theme directory and ensures default themes exist.
+ *
+ * - Creates user themes folder if missing
+ * - Copies bundled themes from resources if not present
+ * - Applies permissive permissions for runtime modification
+ */
+function initUserThemes() {
+  try {
+    if (!fs.existsSync(userThemesPath)) {
+      fs.mkdirSync(userThemesPath, { recursive: true });
+      fs.chmodSync(userThemesPath, 0o777);
+      getLogger().info("Created user themes directory");
+    }
+
+    if (fs.existsSync(defaultThemesSourcePath)) {
+      const defaultThemes = fs.readdirSync(defaultThemesSourcePath);
+      for (const theme of defaultThemes) {
+        const srcPath = path.join(defaultThemesSourcePath, theme);
+        const destPath = path.join(userThemesPath, theme);
+        const srcIsFile = !fs.statSync(srcPath).isDirectory();
+
+        if (fs.existsSync(destPath)) {
+          const destIsDir = fs.statSync(destPath).isDirectory();
+          if (srcIsFile && destIsDir) {
+            getLogger().warn(`Corrupted theme entry: ${theme}, fixing...`);
+            fs.rmSync(destPath, { recursive: true, force: true });
+
+          } else {
+            continue;
+          }
+        }
+
+        try {
+          if (srcIsFile) {
+            fs.copyFileSync(srcPath, destPath);
+            fs.chmodSync(destPath, 0o666);
+          } else {
+            copyDirectory(srcPath, destPath);
+            fs.chmodSync(destPath, 0o777);
+          }
+          getLogger().info(`Copied default theme: ${theme}`);
+        } catch (copyErr) {
+          getLogger().warn(`Failed to copy theme ${theme}: ${copyErr.message}`);
+        }
+      }
+    } else {
+      getLogger().warn(`Default themes source path not found: ${defaultThemesSourcePath}`);
+    }
+  } catch (err) {
+    getLogger().error(`Failed to initialize user themes: ${err.message}`);
+  }
+}
+/**
+ * Recursively copies a directory and its contents.
+ *
+ * @param {string} src - Source directory
+ * @param {string} dest - Destination directory
+ * @throws Error If copy operation fails
+ */
+function copyDirectory(src, dest) {
+  try {
+    if (!fs.existsSync(dest)) {
+      fs.mkdirSync(dest, {
+        recursive: true,
+        mode: 0o777
+      });
+    }
+
+    const files = fs.readdirSync(src);
+
+    for (const file of files) {
+      const srcFile = path.join(src, file);
+      const destFile = path.join(dest, file);
+
+      if (fs.statSync(srcFile).isDirectory()) {
+        copyDirectory(srcFile, destFile);
+      } else {
+        fs.copyFileSync(srcFile, destFile);
+      }
+    }
+  } catch (err) {
+    throw new Error(`Copy error: ${err.message}`);
+  }
+}
+
+// Runtime validation of critical binaries
+// if (!userYtDlp) {
+//     getLogger().error("Missing yt-dlp binary");
+// }
+
+// if (!ffmpegPath) {
+//     getLogger().error("Missing ffmpeg binary");
+// }
+
+// if (!denoPath) {
+//     getLogger().error("Missing deno binary");
+// }
+
+
+function validateBinaries() {
+  if (!userYtDlp) getLogger().error("Missing yt-dlp binary");
+  if (!ffmpegPath) getLogger().error("Missing ffmpeg binary");
+  if (!denoPath) getLogger().error("Missing deno binary");
+}
+
+/**
+ * Helper to lazy load logger, avoid circular import
+ * @returns {import("winston").Logger}
+ */
+function getLogger() {
+    return require("../logger.js").logger;
+}
+
+module.exports = { userYtDlp, ffmpegPath, denoPath, iconPaths, binaryPaths, resourcesPath, defaultDownloadFolder, userThemesPath, initUserThemes, isWindows, validateBinaries };

server/helpers/playlist.helpers.js

@@ -0,0 +1,12 @@
+/**
+ * Determines whether a URL targets a playlist.
+ *
+ * The detection is based on the presence of the YouTube
+ * playlist query parameter (`list`).
+ *
+ * @param {string} url - URL to inspect.
+ * @returns {boolean} True if the URL appears to be a playlist.
+ */
+export function isUrlPlaylist(url) {
+    return url.includes("?list=") || url.includes("&list=") || url.includes("@");
+}