refactor: rpm package publish

Sync

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,35 @@
+---
+name: "Bug Report"
+about: Report something that doesn't work fine
+title: "[BUG]"
+labels: bug
+assignees: "MasterAcnolo"
+
+---
+
+## Check Before Reporting
+Make sure this bug doesn't already exist in the issues.
+
+## Describe the Bug
+A clear and concise description of the problem.
+
+## Steps to Reproduce
+1. Go to…
+2. Click on…
+3. See the error…
+
+## Expected Behavior
+What you expected the program to do.
+
+## Logs
+Add logs if possible. Available at `C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\LOGS-20xx-xx-xx.log`.
+
+## App Version
+State the version of the app you are using.
+
+## Environment
+- Version: [e.g. 1.2.4]
+- Browser / Other: [e.g. Chrome, Node.js 20]
+- Any others information that can be usefull for me
+
+## Screenshots (if applicable)

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,44 @@
+---
+name: Feature Request
+about: Suggest a new feature or enhancement
+title: "[FEATURE] "
+labels: enhancement
+assignees: 'MasterAcnolo'
+
+---
+
+## Feature Description
+
+A clear and concise description of the feature you'd like to see.
+
+## Problem it Solves
+
+Describe the problem or limitation this feature would address.
+
+## Proposed Solution
+
+Describe how you envision this feature working.
+
+## Alternative Solutions
+
+Have you considered any alternative approaches? Describe them here.
+
+## Use Case
+
+Provide specific examples of how you would use this feature.
+
+## Implementation Considerations
+
+Are there any technical challenges or dependencies you're aware of?
+
+## Priority
+
+How important is this feature to you?
+- [ ] Critical - Blocking my workflow
+- [ ] High - Would significantly improve my experience
+- [ ] Medium - Nice to have
+- [ ] Low - Minor improvement
+
+## Additional Context
+
+Add any other context, mockups, or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/performance-issue.md

@@ -0,0 +1,56 @@
+---
+name: Performance Issue
+about: Report slow downloads, high CPU/memory usage, or crashes
+title: "[PERFORMANCE] "
+labels: performance
+assignees: MasterAcnolo
+
+---
+
+## Performance Issue Type
+
+- [ ] Slow download speed
+- [ ] High CPU usage
+- [ ] High memory usage
+- [ ] Application freeze/hang
+- [ ] Application crash
+- [ ] Other (specify below)
+
+## Description
+
+Clear description of the performance issue.
+
+## System Information
+
+- **Freedom Loader Version**: [e.g. 1.4.1]
+- **Windows Version**: [e.g. Windows 11 22H2]
+- **CPU**: [e.g. Intel i7-9700K]
+- **RAM**: [e.g. 16GB]
+- **Storage**: [e.g. SSD/HDD]
+- **Other Applications Opened**: [e.g. Discord/Opera GX]
+
+## Reproduction Details
+
+- **Download URL**: [if applicable]
+- **File Size/Length**: [e.g. 2GB / 2 hours]
+- **Quality Setting**: [e.g. 1080p, Best]
+- **Audio Only**: Yes / No
+
+## Expected Performance
+
+What performance did you expect?
+
+## Actual Performance
+
+What performance are you experiencing? (Include metrics if possible: download speed, CPU %, memory usage)
+
+## Logs
+
+Attach logs with verbose mode enabled if possible:
+```
+C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\LOGS-YYYY-MM-DD.log
+```
+
+## Additional Context
+
+Any other relevant information (network speed, antivirus software, other running applications).

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,30 @@
+---
+name: Question or Support
+about: Ask a question about using Freedom Loader
+title: "[QUESTION] "
+labels: question
+assignees: 'MasterAcnolo'
+
+---
+
+## Pre-submission Checklist
+
+- [ ] I have checked the [FAQ](https://masteracnolo.github.io/Freedom-Loader-Site/pages/faq)
+- [ ] I have reviewed the [Wiki](https://masteracnolo.github.io/Freedom-Loader-Site/pages/wiki)
+- [ ] I have searched existing issues
+
+## Question
+
+What would you like to know?
+
+## What I've Tried
+
+Describe what you've already attempted to solve this yourself.
+
+## Environment (if relevant)
+
+- **Freedom Loader Version**: [e.g. 1.4.1]
+
+## Additional Context
+
+Any other information that might be helpful.

.github/PULL_REQUEST_TEMPLATE/contribution.md

@@ -0,0 +1,60 @@
+## Description
+
+Brief description of what this PR does.
+
+## Related Issue
+
+Fixes #(issue number)
+Closes #(issue number)
+Related to #(issue number)
+
+## Type of Change
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Code refactoring (no functional changes)
+- [ ] Documentation update
+- [ ] Performance improvement
+- [ ] UI/UX enhancement
+
+## Changes Made
+
+- Change 1
+- Change 2
+- Change 3
+
+## Testing
+
+- [ ] I have tested this code locally
+- [ ] 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
+
+## Screenshots (if applicable)
+
+**Before:**
+
+[Add screenshot]
+
+**After:**
+
+[Add screenshot]
+
+## Checklist
+
+- [ ] My code follows the project's code style
+- [ ] I have performed a self-review of my code
+- [ ] I have commented my code where necessary
+- [ ] I have updated the documentation (if applicable)
+- [ ] My changes generate no new warnings or errors
+- [ ] I have not modified the version number (this will be done during release)
+
+## Additional Notes
+
+Any additional information or context about the PR.
+
+---
+
+**Note for Maintainer:** This is a contribution PR and should NOT include version bumps.

.github/PULL_REQUEST_TEMPLATE/release.md

@@ -0,0 +1,10 @@
+# Freedom Loader - 1.X.Y
+
+## Changelog
+
+-
+
+## Found a bug or issue?
+- Please report it in the GitHub Issues section
+
+**Full Changelog**: https://github.com/MasterAcnolo/Freedom-Loader/compare/1.W.X...1.Y.Z

.gitignore

@@ -1,11 +1,24 @@
+# Dependencies
 /node_modules
-/downloads
+
+# Build Output Folder
 /dist
 /out
+/srpm-out
 
-/ressources/ffmpeg.exe
+# Config JSON File. Create it and fill it if you want to have dev only settings
-/ressources/ffprobe.exe
+config/config.dev.json
-/ressources/deno.exe
 
-logs/*.json
+# IDE
-logs/*.log
+/.idea
+/.vscode
+
+# Linux executable
+ffmpeg
+ffprobe
+deno
+
+# Windows Executable
+ffmpeg.exe
+ffprobe.exe
+deno.exe

.vscode/settings.json

@@ -1,15 +0,0 @@
-{
-  "editor.quickSuggestions": {
-    "comments": "off",
-    "strings": "off",
-    "other": "off"
-  },
-  "editor.suggestOnTriggerCharacters": false,
-  "editor.parameterHints.enabled": false,
-  "editor.codeLens": false,
-  "editor.lightbulb.enabled": "off",
-  "editor.inlineSuggest.enabled": false,
-  "github.copilot.enable": {
-    "*": false
-  }
-}

BINARIES.md

@@ -0,0 +1,96 @@
+# 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.

CODE_OF_CONDUCT.md

@@ -0,0 +1,111 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in the Freedom Loader community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall community
+* Supporting fellow contributors and helping newcomers feel welcome
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address, without their explicit permission
+* Sustained disruption of discussions, issues, or pull requests
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Enforcement Responsibilities
+
+Community leaders and project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, including:
+
+- GitHub repository (issues, pull requests, discussions, wiki)
+- Project documentation and website
+- Official communication channels (Discord, email, etc.)
+- Social media accounts representing the project
+- Project events and meetings (online or offline)
+
+This Code of Conduct also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at **masteracnolo25@gmail.com**.
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+## Our Commitment to Contributors
+
+At Freedom Loader, we value every contribution—whether it's a bug report, feature suggestion, code improvement, or documentation fix. We strive to:
+
+- Respond to issues and pull requests in a timely manner
+- Provide constructive feedback on contributions
+- Help new contributors get started
+- Maintain a welcoming environment for all skill levels
+- Credit contributors appropriately for their work
+
+## Questions and Clarifications
+
+If you have questions about this Code of Conduct or need clarification on what constitutes acceptable behavior, please:
+
+- Open a [discussion](https://github.com/MasterAcnolo/Freedom-Loader/discussions) on GitHub
+- Contact the maintainers at masteracnolo25@gmail.com
+- Review the [Contributing Guidelines](CONTRIBUTING.md)
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
+
+---
+
+**Remember**: Freedom Loader is built by people who care. Let's keep this community a place where everyone feels welcome to contribute.

CONTRIBUTING.md

@@ -0,0 +1,164 @@
+# Contributing to Freedom Loader
+
+Welcome! Thanks for your interest in Freedom Loader. Your contributions—bug reports, feature ideas, or code improvements—are always appreciated. Every contribution makes Freedom Loader better.
+
+---
+
+## Quick Links
+
+- [Code of Conduct](CODE_OF_CONDUCT.md)
+- [Issue Templates](.github/ISSUE_TEMPLATE/)
+- [Pull Request Templates](.github/PULL_REQUEST_TEMPLATE/)
+- [Security Policy](SECURITY.md)
+
+---
+
+## Ways to Contribute
+
+### 1. Report a Bug
+
+Found a bug or unexpected behavior? Open an [**issue**](https://github.com/MasterAcnolo/Freedom-Loader/issues) using the **Bug Report** template.
+
+**Please include:**
+- 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`
+- Screenshots if applicable
+
+### 2. Request a Feature
+
+Have an idea to improve Freedom Loader? Open a [**Feature Request**](https://github.com/MasterAcnolo/Freedom-Loader/issues/new/choose).
+
+**Tips:**
+- Describe the problem it solves
+- Explain your proposed solution
+- Include use cases and examples
+
+### 3. Submit Code Changes
+
+**Before starting:**
+- Check existing issues and PRs to avoid duplicates
+- For major changes, open an issue first to discuss
+- Follow the project's code style and conventions
+
+**Process:**
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/your-feature-name`
+3. Make your changes
+4. Test thoroughly on Windows 10/11
+5. Commit with clear messages: `git commit -m "Add feature X"`
+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
+- Comment complex logic
+- Keep commits focused and atomic
+- Update documentation if needed
+- Don't modify version numbers (done during release)
+
+### 4. Improve Documentation
+
+Documentation improvements are always welcome:
+- Fix typos or unclear sections
+- Add missing examples
+- Update outdated information
+- Improve README, wiki, or guides
+
+Small contributions matter—don't hesitate to submit documentation PRs.
+
+---
+
+## Development Setup
+
+### Prerequisites
+- Node.js 16.x or higher
+- npm or yarn
+- Git
+- Windows 10/11 (for testing)
+
+### Setup
+```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)
+└── resources/       # Binaries (yt-dlp, ffmpeg, etc.)
+```
+
+---
+
+## Testing
+
+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)
+- [ ] Tested on Windows 10 and/or Windows 11
+
+---
+
+## Pull Request Review Process
+
+1. **Submission**: Open PR with clear description using the template
+2. **Review**: Maintainers review code and provide feedback
+3. **Updates**: Address feedback and push updates
+4. **Approval**: Once approved, PR will be merged
+5. **Release**: Changes included in next release
+
+**Response times:**
+- Bug fixes: Usually reviewed within 2-3 days
+- Features: May take longer depending on complexity
+- Documentation: Often reviewed quickly
+
+---
+
+## Code of Conduct
+
+Be respectful and constructive in all interactions. We welcome everyone as long as discussions remain polite and productive.
+
+See [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) for details.
+
+---
+
+## Questions?
+
+- Check the [FAQ](https://masteracnolo.github.io/Freedom-Loader-Site/faq)
+- Review the [Wiki](https://masteracnolo.github.io/Freedom-Loader-Site/wiki)
+- Open a [Question issue](https://github.com/MasterAcnolo/Freedom-Loader/issues/new/choose)
+
+---
+
+## Credits
+
+Thanks to **Zakaria** for the website icon design.  
+Check out his work: [IG @designmark_studio](https://www.instagram.com/designmark_studio/)
+
+---
+
+**Thank you for contributing to Freedom Loader!**

README.md

@@ -1,173 +1,562 @@
 <div align="center">
-  <img
+
+  <a href="https://masteracnolo.github.io/Freedom-Loader-Site/"><img
     src="./build/banner.png"
     alt="Banner"
-    style="width: 50%;;"/>
+    style="width: 50%;"/></a>
+
+### **A clean, open-source multimedia downloader for Windows and Linux**
+
+[![Release](https://img.shields.io/badge/Release-1.6.0-blue?style=for-the-badge)](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/Freedom-Loader-Site/)
+[![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>
 
-<div align="center">
-  <a href="https://github.com/MasterAcnolo/Freedom-Loader/releases">
-    <img src="https://img.shields.io/badge/Release-1.3.0-blue?style=for-the-badge">
-  </a>
-  <a href="https://masteracnolo.github.io/No-Sense/FreedomLoader/index.html">
-    <img src="https://img.shields.io/badge/Freedom%20Loader-Open%20Page-111111?style=for-the-badge&logo=terminal&logoColor=white">
-  </a>
-  <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>
-<br>
-
-Freedom Loader is a **Windows desktop** application built with **Electron**.  
-It provides a simple and reliable way to download video or audio content with metadata and advanced options, without ads or questionable third-party services.  
-The goal is to offer a clean, user-friendly, and transparent download experience. It's important for me to make media content downloading accessible to people who love music or videos and don’t always have an internet connection.
-
 ---
 
+## 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://masteracnolo.github.io/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)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Preview](#preview)
+- [Configuration](#configuration)
+- [Project Structure](#project-structure)
+- [Theme Workshop](#Theme-Workshop)
+- [Technology Stack](#technology-stack)
+- [Development](#development)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [Submitting a community theme](#Submitting-a-community-theme)
+- [Support](#support)
+- [License](#license)
+
 ## Features
 
-- Video download with metadata (MP4)
+### Core Functionality
-- Audio-only download with thumbnail and tags (MP3)
-- Full playlist support and better display in UI
-- Automatic metadata retrieval (title, duration, author, etc.)
-- Detailed logs (console + rotating files for 7 days)
-- Progress Bar for download and network speed indicator
-- Better UX when fetching info
-- Custom output path with persistence
-- Automatic dependency updates (YT-DLP)
-- Automatic Application Update
-- Multiple UI themes
-- Simple, responsive interface
-- Notifications on download completion (click to open folder)
-- Discord Rich Presence
 
----
+- **Multi-format downloads** - MP4 video with full metadata or MP3 audio with embedded artwork
+- **Video information preview** - Fetch and display video metadata before downloading
+- **Quality selection** - Choose from best, medium, lowest quality or specific resolutions (1080p, 720p, 480p)
+- **Playlist support** - Download entire playlists with optional auto-download mode
+- **Metadata embedding** - Automatic retrieval and embedding of title, artist, duration, and thumbnail
+- **Video codec options** - Support for H.264, H.265, AV1, VP9, VP9.2, and Theora codecs
+- **Custom output directory** - User-configurable download location with path validation
+- **Cookie integration** - Firefox cookie support for accessing age-restricted and member-only content
+
+### User Interface
+
+- **Custom window controls** - Frameless window with custom top bar (optional)
+- **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
+- **Quick access toolbar** - Direct links to logs, website, wiki, and developer tools
+
+### System Features
+
+- **Automatic updates** - Electron-updater integration with GitHub releases
+- **YT-DLP auto-update** - Keeps the download engine up-to-date on startup
+- **Structured logging** - Winston-based logging with daily file rotation (7-day retention)
+- **Discord Rich Presence** - Optional integration showing current download activity
+- **Single instance enforcement** - Prevents multiple app instances from running simultaneously
+- **Native dependency validation** - Startup checks for yt-dlp, FFmpeg, FFprobe, and Deno binaries
+- **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
 
 ## Installation
 
-Download the latest installer from the **Releases** page and run it (Defender could stop you but click on "Run Anyway" and it's good).  
+[![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/)
-Actually, **Firefox Browser** is the only browser supported for get cookies. You should install it. Follow the tutorial in the wiki page if you need some help, Firefox Section. [Link](https://masteracnolo.github.io/FreedomLoader/pages/wiki.html)
+[![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]&#40;https://img.shields.io/badge/Snap-Store-82BEA0?style=for-the-badge&logo=snapcraft&logoColor=white&#41;]&#40;https://snapcraft.io/freedom-loader&#41;)
+[![AppImage](https://img.shields.io/badge/AppImage-Universal-1E88E5?style=for-the-badge&logo=linux&logoColor=white)](https://github.com/MasterAcnolo/Freedom-Loader/releases)
 
-## FAQ
+### Requirements
 
-### Where are my downloaded files stored?
+- **Windows**: Windows 10 or later
+- **Linux**: any modern x86_64 distribution
+- **Browser**: Mozilla Firefox ([download](https://www.firefox.com)) required for cookie extraction, on both platforms
 
-In your **Downloads** folder, inside **Freedom Loader**.  
+### Windows
-Example path:  
-`C:\Users\[YOUR NAME]\Downloads\Freedom Loader`
 
-### I get an error after launching the app
+1. Download the latest `.exe` from the [Releases page](https://github.com/MasterAcnolo/Freedom-Loader/releases)
+2. Run the installer (click "More info" → "Run anyway" if Windows Defender warns you)
+3. Follow the installation wizard
 
-Try restarting the application, checking the logs, or opening the developer console:  
+### Linux
-`CTRL + SHIFT + I` -> “Toggle Developer Tools”.
 
-<p align="center">
+#### Fedora (via Copr — recommended)
-  <img src="build/example-developertools.png" width="20%" />
-</p>
 
----
+Installing via Copr lets `dnf` handle future updates automatically:
 
-## Roadmap
+```bash
+sudo dnf copr enable masteracnolo/freedom-loader
+sudo dnf install freedom-loader
+```
 
-- [x] ~~Website for Freedom Loader~~
+#### Debian / Ubuntu (.deb)
-- [ ] More format options
-- [ ] Linux version
-- [x] ~~Auto-updating YT-DLP~~
-- [x] ~~Automatic project updates~~
-- [x] ~~Better download status~~
-- [ ] Better website support (currently only YouTube is fully supported, other site could work but i can't prove it)
-- [ ] Subtitle support
-- [x] ~~UI/UX improvements~~
-- [ ] Language selection
-- [ ] Download specific parts of a video
-- [ ] Custom file naming
-- [ ] Parallel downloads
-- [ ] Automatic sponsor skipping
-- [x] ~~Extract/split video using native chapters~~
-- [x] ~~Custom output path selection~~
 
----
+```bash
+# Download the latest .deb from the Releases page, then:
+sudo apt install ./freedom-loader_1.x.x_amd64.deb
+```
+
+[//]: # (#### Snap &#40;any distro with snapd&#41;)
+
+[//]: # ()
+[//]: # (```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
+
+|               | Windows                                                 | Linux                                |
+|---------------|---------------------------------------------------------|--------------------------------------|
+| **Downloads** | `C:\Users\[USERNAME]\Downloads\Freedom Loader`          | `~/Downloads/Freedom Loader`         |
+| **Logs**      | `C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\` | `~/.local/share/FreedomLoader/logs/` |
+
+> [!NOTE]
+> The download folder can be changed anytime via the "Edit" button in the UI, on both platforms.
+
+## Usage
+
+> [!TIP] 
+> On Linux, you can start Freedom Loader using `freedom-loader` command
+
+### Basic Download
+
+1. Launch Freedom Loader
+2. Paste a video or playlist URL into the input field
+3. Select the desired format (Video MP4 or Audio MP3)
+4. Click the download button
+5. Monitor progress in real-time
+6. Receive a notification when the download completes
+
+### Advanced Configuration
+
+The application supports various configuration options:
+
+- Custom download directory selection
+- Discord Rich Presence activation
+- Theme customization
+- Log level configuration
+
+### Troubleshooting
+
+If you encounter issues:
+
+1. Restart the application
+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
 
 ## Preview
 
-<p align="center">
+<div align="center">
-  <img src="build/apercu1.2.4.png" width="40%" />
+  <table>
-</p>
+    <tr>
-
+      <td width="50%" align="center">
----
+        <img src="https://github.com/user-attachments/assets/d4de9079-7c82-44d3-ba22-8246bb467db3" alt="Download Preview" width="75%" />
-
+        <p><em>Real-time download progress with network speed indicator</em></p>
-## Technologies
+      </td>
-
+      <td width="50%" align="center">
-This project uses:
+        <img src="https://github.com/user-attachments/assets/d59aff95-6754-486a-b880-d70730146dc3" alt="Settings Panel" width="40%" />
-
+        <p><em>Settings panel with theme and feature customization</em></p>
-<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
+      </td>
-
+    </tr>
-  <a href="https://github.com/yt-dlp/yt-dlp">
+  </table>
-    <img src="https://img.shields.io/badge/yt--dlp-Visit%20Repo-cf0000?style=for-the-badge&logo=github&logoColor=white">
-  </a>
-
-  <a href="https://github.com/FFmpeg/FFmpeg">
-    <img src="https://img.shields.io/badge/FFmpeg-Visit%20Repo-666666?style=for-the-badge&logo=ffmpeg&logoColor=white" />
-  </a>
-
-  <a href="https://nodejs.org/">
-    <img src="https://img.shields.io/badge/Node.js-Visit%20Repo-339933?style=for-the-badge&logo=node.js&logoColor=white" />
-  </a>
-
-  <a href="https://github.com/electron/electron">
-    <img src="https://img.shields.io/badge/Electron-Visit%20Repo-47848F?style=for-the-badge&logo=electron&logoColor=white" />
-  </a>
-
-  <a href="https://github.com/denoland/deno/">
-    <img src="https://img.shields.io/badge/Deno-Visit%20Repo-14e0cc?style=for-the-badge&logo=deno&logoColor=white" />
-  </a>
-
 </div>
 
----
+## Configuration
+
+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
+```
+%APPDATA%\Freedom Loader\config.json
+```
+
+#### Linux
+```
+~/.config/Freedom Loader/config.json
+```
+
+### Available Options
+```json
+{
+  "autoUpdate": true,
+  "discordRPC": true,
+  "customTopBar": true,
+  "autoCheckInfo": true,
+  "addThumbnail": true,
+  "addMetadata": true,
+  "verboseLogs": false,
+  "autoDownloadPlaylist": true,
+  "createPlaylistFolders": true,
+  "customCodec": "h264",
+  "logSystem": true,
+  "outputTitleCheck": true,
+  "downloadSystem": true,
+  "notifySystem": true,
+  "enableHardwareAcceleration": true,
+  "theme": "dark" 
+}
+```
+
+### Configuration Options
+
+| Option                       | Type    | Default  | Description                                                |
+|------------------------------|---------|----------|------------------------------------------------------------|
+| `autoUpdate`                 | boolean | `true`   | Enable automatic application updates                       |
+| `discordRPC`                 | boolean | `true`   | Enable Discord Rich Presence integration                   |
+| `customTopBar`               | boolean | `true`   | Use custom application top bar                             |
+| `autoCheckInfo`              | boolean | `true`   | Automatically fetch video information on URL paste         |
+| `addThumbnail`               | boolean | `true`   | Embed thumbnail in downloaded audio files                  |
+| `addMetadata`                | boolean | `true`   | Add metadata tags to downloaded files                      |
+| `verboseLogs`                | boolean | `false`  | Enable detailed logging for debugging                      |
+| `autoDownloadPlaylist`       | boolean | `true`   | Automatically download entire playlists                    |
+| `createPlaylistFolders`      | boolean | `true`   | Automatically create a folder for a playlist               |
+| `customCodec`                | string  | `"h264"` | Video codec for encoding (supported: h264, h265, vp9, av1) |
+| `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
+
+- `h264` - H.264/AVC (widely compatible, recommended default)
+- `h265` - H.265/HEVC (better compression, less compatible)
+- `av1` - AV1 (modern codec, excellent compression)
+- `av01` - AV1 variant
+- `vp9` - VP9 (open format, good quality)
+- `vp9.2` - VP9 Profile 2 (HDR support)
+- `theora` - Theora (legacy open codec)
+
+> [!NOTE]
+> Configuration changes may require an application restart to take effect.
+
+## Project Structure
+
+```
+Freedom-Loader/
+├── app/                     # Electron main process modules
+│   ├── autoUpdater.js
+│   ├── dependencyCheck.js
+│   ├── discordRPC.js
+│   ├── ipcHandlers.js
+│   ├── pathValidator.js
+│   ├── splashManager.js
+│   ├── themeManager.js
+│   ├── windowManager.js
+│   └── ytDlpUpdater.js
+├── build/                   # Build resources and assets
+├── config/                  # Configuration files
+│   ├── config.default.json
+│   └── config.dev.json
+├── public/                  # Frontend assets and UI
+│   ├── index.html
+│   ├── splash.html
+│   ├── assets/
+│   │   ├── icon/            # Application icons
+│   │   └── logo/            # Logo assets
+│   ├── script/              # Frontend JavaScript modules
+│   │   ├── appVersion.js
+│   │   ├── clipboardPaste.js
+│   │   ├── custompath.js
+│   │   ├── customthemes.js
+│   │   ├── downloadstatus.js
+│   │   ├── fetchinfo.js
+│   │   ├── progressBar.js
+│   │   ├── settingsPanel.js
+│   │   ├── toast.js
+│   │   └── topbar.js
+│   └── styles/              # CSS stylesheets
+│       ├── styles.css
+│       ├── variables.css
+│       ├── components/      # Component-specific styles
+│       │   ├── checkbox.css
+│       │   ├── editpathbutton.css
+│       │   ├── loader.css
+│       │   ├── progressBar.css
+│       │   └── toast.css
+│       └── layout/          # Layout styles
+│           ├── container.css
+│           ├── form.css
+│           ├── header.css
+│           ├── settingsPanel.css
+│           ├── topbar.css
+│           └── videoinfo.css
+├── resources/              # Internal resources (binaries)
+├── server/                  # Express backend server
+│   ├── logger.js
+│   ├── server.js
+│   ├── controller/          # Request handlers
+│   │   ├── download.controller.js
+│   │   └── info.controller.js
+│   ├── helpers/             # Utility functions
+│   │   ├── buildArgs.helpers.js
+│   │   ├── getBrowser.helpers.js
+│   │   ├── notify.helpers.js
+│   │   ├── parseInfo.helpers.js
+│   │   ├── path.helpers.js
+│   │   ├── rateLimit.helpers.js
+│   │   └── validation.helpers.js
+│   ├── routes/              # API route definitions
+│   │   ├── download.route.js
+│   │   └── info.route.js
+│   └── services/            # Business logic layer
+│       ├── download.services.js
+│       └── info.services.js
+├── theme/                   # Theme system
+│   ├── template.theme.json  # Theme template
+│   ├── Dark/                # Default dark theme
+│   │   └── dark.theme.json
+│   └── Light/               # Default light theme
+│       └── light.theme.json
+├── main.js                  # Electron main process entry point
+├── preload.js               # Electron preload script (IPC bridge)
+├── config.js                # Global configuration loader
+├── package.json             # Project metadata and dependencies
+├── CODE_OF_CONDUCT.md       # Community guidelines
+├── CONTRIBUTING.md          # Contribution guidelines
+├── LICENSE                  # GPLv3 license
+└── README.md                # This file
+```
+
+### Architecture Overview
+
+Freedom Loader uses a client-server architecture within a single Electron application:
+
+- **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
+
+[![yt-dlp](https://img.shields.io/badge/yt--dlp-cf0000?style=for-the-badge&logo=youtube&logoColor=white)](https://github.com/yt-dlp/yt-dlp)
+[![FFmpeg](https://img.shields.io/badge/FFmpeg-007808?style=for-the-badge&logo=ffmpeg&logoColor=white)](https://ffmpeg.org/)
+[![Electron](https://img.shields.io/badge/Electron-47848F?style=for-the-badge&logo=electron&logoColor=white)](https://www.electronjs.org/)
+[![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/)
+
+### Key Dependencies
+
+- **Electron**: Cross-platform desktop application framework
+- **Express**: Web framework for local HTTP server
+- **yt-dlp**: Media download engine
+- **FFmpeg**: Media processing and conversion
+- **Winston**: Logging library
+- **discord-rpc**: Discord Rich Presence integration
+- **electron-updater**: Automatic application updates
+
+## Development
+
+### Prerequisites
+
+- 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 `resources` folder, using the exact filenames listed below.
+
+#### Required binaries
+
+- **Deno**
+  - 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:
+
+```
+resources/
+├── 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
+- Test thoroughly before submitting changes
+- Update documentation when adding features
+- Maintain compatibility with Windows 10+ and Linux
+
+## Roadmap
+
+See the most recent Roadmap [Here](https://masteracnolo.github.io/Freedom-Loader-Site/Roadmap).
 
 ## Contributing
 
-Contributions are welcome.
+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 reproduction steps and logs when possible.  
+Use the GitHub Issues system and include:
-Logs can be found here:  
+
-`C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\LOGS-20xx-xx-xx.log`
+- Clear description of the issue
+- Steps to reproduce
+- Expected vs actual behavior
+- Relevant logs from `AppData\Local\FreedomLoader\logs\` or `~/.local/share/FreedomLoader/logs/`
+- Screenshots if applicable
 
 ### Feature Requests
 
-Open a feature request issue with a clear description and use cases.
+Open a feature request issue with:
+
+- Clear description of the proposed feature
+- Use cases and benefits
+- Potential implementation approach (if applicable)
 
 ### Pull Requests
 
-Fork the repository, make your changes, and submit a PR once everything is tested and clean.
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/your-feature`)
+3. Make your changes with clear, descriptive commits
+4. Test thoroughly
+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.
 
-## Support the Project
+## Support
 
-If you'd like to support development:
+If you find this project useful and want to support its development:
 
-<a href="https://paypal.me/axelnicolas25">
+[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://paypal.me/axelnicolas25)
-  <img src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white" />
-</a>
 
----
+Your support helps maintain infrastructure, develop new features, and keep the project free and ad-free.
 
 ## License
 
 Freedom Loader is released under the **GNU General Public License v3.0 (GPLv3)**.
-You are free to use, modify, and redistribute the software under the terms of this license.
 
-See the full license in the [LICENSE](./LICENSE) file.
+You are free to use, modify, and redistribute this software under the terms of the GPL-3.0 license. See the [LICENSE](LICENSE) file for complete details.
+
+## Acknowledgments
+
+- [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
+- [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
+- Zakaria for the website icon 
+- Jacques Chirac to love Apples
+- All users who test, report issues, and help improve the application
 
 ---
 
-## Note
+<div align="center">
 
-AI assistance was used occasionally to speed up development, but all code and decisions were reviewed and validated manually.
+**Freedom Loader** - Put freedom in your downloads
+
+[Website](https://masteracnolo.github.io/Freedom-Loader-Site/) • [Download](https://github.com/MasterAcnolo/Freedom-Loader/releases) • [Documentation](https://masteracnolo.github.io/Freedom-Loader-Site/wiki) • [Report Bug](https://github.com/MasterAcnolo/Freedom-Loader/issues)
+
+</div>

SECURITY.md

@@ -0,0 +1,160 @@
+# Security Policy
+
+## Supported Versions
+
+Freedom Loader follows a **latest-only** support model. Security fixes are applied to the current release only — no backports to older versions.
+
+| Version       | Supported          |
+| ------------- | ------------------ |
+| Latest stable | :white_check_mark: |
+| Older versions | :x:               |
+
+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
+
+If you discover a security vulnerability in Freedom Loader, please help us keep the project and its users safe by reporting it responsibly.
+
+### How to Report
+
+**DO NOT** open a public issue for security vulnerabilities.
+
+Instead, please report security issues privately by:
+
+1. **Email**: Send details to **masteracnolo25@gmail.com** with the subject line: `[SECURITY] Vulnerability Report`
+2. **Include**:
+   - Description of the vulnerability
+   - Steps to reproduce the issue
+   - Potential impact and severity
+   - Suggested fix (if available)
+   - Your contact information for follow-up
+
+### What to Expect
+
+- **Acknowledgment**: I will acknowledge receipt of your report within 48 hours
+- **Assessment**: I will assess the vulnerability and determine its severity
+- **Updates**: I will keep you informed of our progress
+- **Resolution**: I aim to release a fix within 7-14 days for critical vulnerabilities
+- **Credit**: I will credit you in the release notes (unless you prefer to remain anonymous)
+
+## Security Best Practices for Users
+
+When using Freedom Loader, I recommend:
+
+### General Security
+
+- **Keep Updated**: Always use the latest version of Freedom Loader — older versions receive no security patches
+- **Official Sources**: Download only from official sources:
+  - [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
+- **Cookies**: Be aware that Firefox cookies are used for authentication — keep Firefox secure
+- **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**: 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 in settings
+
+## Known Security Considerations
+
+### Browser Cookie Access
+
+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 outside your machine
+- **User Controlled**: You control what content you download
+
+### Native Dependencies
+
+Freedom Loader bundles the following official binaries:
+
+- **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.com](https://deno.com/)
+
+These dependencies are verified and updated regularly.
+
+### Windows Defender Warnings
+
+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 and will diminish as more users download the software.
+
+## Vulnerability Disclosure Policy
+
+### Our Commitment
+
+I am committed to:
+
+- Responding promptly to security reports
+- Working with security researchers to verify and address issues
+- Keeping users informed about security updates
+- Crediting researchers who report vulnerabilities responsibly
+
+### Disclosure Timeline
+
+1. **Day 0**: Vulnerability reported privately
+2. **Day 1–2**: Acknowledgment sent to reporter
+3. **Day 3–7**: Vulnerability assessed and fix developed
+4. **Day 7–14**: Fix released (critical vulnerabilities prioritized)
+5. **Day 14+**: Public disclosure (coordinated with reporter)
+
+### Scope
+
+Security issues we're most interested in:
+
+- **Code Execution**: Arbitrary code execution vulnerabilities
+- **Path Traversal**: Issues with file system access controls
+- **Injection**: Command injection or similar vulnerabilities
+- **Authentication**: Bypass of security controls
+- **Data Exposure**: Unintended exposure of sensitive data
+
+### Out of Scope
+
+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 directly)
+- 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.6.0 → 1.6.1)
+- **Automatic Updates**: Users are notified via the built-in update system
+- **Release Notes**: Security fixes are clearly marked in the changelog
+
+## Additional Resources
+
+- [Contributing Guidelines](CONTRIBUTING.md)
+- [Code of Conduct](CODE_OF_CONDUCT.md)
+- [GitHub Security Advisories](https://github.com/MasterAcnolo/Freedom-Loader/security/advisories)
+
+## Contact
+
+For security-related questions or concerns:
+
+- **Email**: masteracnolo25@gmail.com
+- **GitHub**: [@MasterAcnolo](https://github.com/MasterAcnolo)
+
+---
+
+**Thank you for helping keep Freedom Loader and its users safe!**

app/autoUpdater.js

@@ -0,0 +1,157 @@
+/**
+ * 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 { dialog } = require("electron");
+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;
+
+/**
+ * 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}`);
+
+    const { response } = await dialog.showMessageBox(mainWindow, {
+      type: "info",
+      title: "Update Available",
+      message: `Version ${info.version} is available.`,
+      detail: "Would you like to download and install it now?",
+      buttons: ["Install Update", "Maybe Later"],
+      defaultId: 0,
+      cancelId: 1,
+    });
+
+    if (response === 0) {
+      await autoUpdater.downloadUpdate();
+    } else {
+      mainWindow?.webContents.executeJavaScript(
+        `window.showUpdateBadge && window.showUpdateBadge("${info.version}")`
+      );
+    }
+  });
+
+  /**
+   * 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: Math.round(progress.percent),
+      speed: progress.bytesPerSecond,
+    });
+  });
+
+  /**
+   * 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}`);
+
+    const { response } = await dialog.showMessageBox(mainWindow, {
+      type: "info",
+      title: "Update Ready",
+      message: `Version ${info.version} has been downloaded.`,
+      detail: "The application will restart to apply the update.",
+      buttons: ["Install Now", "Later"],
+      defaultId: 0,
+      cancelId: 1,
+    });
+
+    if (response === 0) autoUpdater.quitAndInstall();
+  });
+
+  /**
+   * 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:", msg);
+  });
+
+  checkForUpdates();
+}
+
+/**
+ * Manually triggers update check on startup.
+ * Separated from init for reusability and testability.
+ */
+async function checkForUpdates() {
+
+  if (process.env.SNAP) {
+    logger.info("Running as Snap, update managed by snapd, skipping electron-updater");
+    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);
+  }
+}
+
+/**
+ * Immediately quits application and installs downloaded update.
+ */
+function installUpdate() {
+  autoUpdater.quitAndInstall();
+}
+
+module.exports = { initAutoUpdater, downloadUpdate, installUpdate };

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,87 @@
+const config = require('../config');
+const RPC = require("discord-rpc");
+const { logger } = require("../server/logger");
+
+/**
+ * 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;
+
+/**
+ * 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() {
+
+  /**
+   * 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: "masteracnolo.github.io/FreedomLoader",
+    };
+    rpc.clearActivity()
+    rpc.setActivity(presence);
+
+  });
+
+  rpc.login({ clientId }).catch(err => {
+    logger.error("Unable to connect to the RPC:", err);
+  });
+}
+
+/**
+ * Gracefully stops Discord Rich Presence connection.
+ *
+ * Responsibilities:
+ * - Clear any running intervals
+ * - Remove current activity from Discord
+ * - Destroy RPC transport connection
+ * - Handle cleanup errors safely
+ */
+async function stopRPC(){
+    try {
+      if (intervalId) clearInterval(intervalId);
+
+      /**
+       * Ensures RPC connection exists before attempting cleanup.
+       */
+      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};

app/ipcHandlers.js

@@ -0,0 +1,233 @@
+/**
+ * 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 } = require("../config");
+const { getThemes, reloadThemes } = require("./themeManager");
+const config = require("../config");
+const { validateDownloadPath, getDefaultDownloadPath } = require("./pathValidator");
+const { userThemesPath } = require("../server/helpers/path.helpers");
+
+/**
+ * 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",
+  "discordRPC",
+  "customTopBar",
+  "autoCheckInfo",
+  "addThumbnail",
+  "addMetadata",
+  "verboseLogs",
+  "autoDownloadPlaylist",
+  "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);
+
+  /**
+   * 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", () => getMainWindow()?.minimize());
+
+  /**
+   * 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://masteracnolo.github.io/Freedom-Loader-Site/")
+  );
+
+  /**
+   * Opens official wiki page in external browser.
+   */
+  ipcMain.on("open-wiki", () =>
+    shell.openExternal("https://masteracnolo.github.io/Freedom-Loader-Site/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));
+
+  
+  
+  /**
+   * 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();
+  });
+
+  /**
+   * 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;
+          }
+
+          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,90 @@
+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 {
+
+    /**
+     * Resolves filesystem symlinks to ensure canonical absolute path.
+     * Required to prevent path traversal or alias bypass.
+     */
+    const resolved = fs.realpathSync(path.resolve(userPath));
+
+    if (!fs.existsSync(resolved)) {
+      fs.mkdirSync(resolved, { recursive: true });
+      logger.info(`Download folder created: ${resolved}`);
+    }
+
+    const real = fs.realpathSync(resolved);
+
+    if (!isSafePath(resolved)) {
+      throw new 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/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/windowManager.js

@@ -0,0 +1,108 @@
+/**
+ * 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;
+  }
+
+  /**
+   * 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

@@ -1,10 +1,109 @@
 const packageJson = require("./package.json");
 const { app } = require("electron");
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * Indicates whether the application is running in development mode.
+ * Determined by Electron's packaging state.
+ */
+const devMode = !app.isPackaged;
+
+/**
+ * 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");
+
+    if (!fs.existsSync(devConfigPath)) {
+      const defaultConfigPath = path.join(
+        __dirname,
+        "config",
+        "config.default.json"
+      );
+      fs.copyFileSync(defaultConfigPath, devConfigPath);
+    }
+
+    return devConfigPath;
+  }
+
+  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;
+}
+
+/**
+ * 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);
+}
+
+/**
+ * In-memory snapshot of application feature flags.
+ *
+ * Note: Changes to the config file are not automatically reflected.
+ * A restart or reload is required.
+ */
+const configFeatures = loadFeatures();
 
 module.exports = {
-    version: packageJson.version,
+  /**
-    applicationPort: "8787",
+   * Application version from package.json
-    debugMode: true,
+   */
-    localMode: !app.isPackaged,
+  version: devMode ? `dev-${packageJson.version}` : `v${packageJson.version}` ,
-    DiscordRPCID: "1410934537051181146",
+
-}
+  /**
+   * 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,
+
+  /**
+   * Path to the active configuration file
+   */
+  featuresPath,
+};

config/config.default.json

@@ -0,0 +1,18 @@
+{
+  "autoUpdate": true,
+  "discordRPC": true,
+  "customTopBar": true,
+  "autoCheckInfo": true,
+  "addThumbnail": true,
+  "addMetadata": true,
+  "verboseLogs": false,
+  "autoDownloadPlaylist": true,
+  "createPlaylistFolders": true,
+  "customCodec": "h264",
+  "logSystem": true,
+  "outputTitleCheck": true,
+  "downloadSystem": true,
+  "notifySystem": true,
+  "enableHardwareAcceleration": true,
+  "theme": "dark" 
+}

main.js

@@ -1,156 +1,149 @@
-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 os = require("os");
+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();
+});
+
+
+/**
+ * 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 } = require("./config");
 
-let mainWindow;
+/**
-const logsFolderPath = logDir;
+ * On start, enable or disable hardWareAcceleration
-const defaultDownloadPath = path.join(os.homedir(), "Downloads", "Freedom Loader");
+ */
-
+if (!configFeatures.enableHardwareAcceleration){
-app.setAppUserModelId("com.masteracnolo.freedomloader"); // pour notifications Windows
+  app.disableHardwareAcceleration();
-app.disableHardwareAcceleration();
+  logger.info("Disabled Hardware Acceleration")
-
-// Gestion single instance
-const gotLock = app.requestSingleInstanceLock();
-
-if (!gotLock) {
-  // Une instance existe déjà -> fermer l'ancienne et continuer la nouvelle
-  // Ici la nouvelle instance continue normalement
 } else {
-  app.on("second-instance", () => {
+  logger.info("Enable Hardware Acceleration")
-    // 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() {
+ * In-memory snapshot of application feature flags.
-  if (mainWindow) {
+ *
-    logger.warn("Window already exists, no new creation!");
+ * Note: Changes to the config file are not automatically reflected.
-    return;
+ * A restart could be required.
-  }
+ */
+const config = require("./config");
 
-  mainWindow = new BrowserWindow({
+if(config.devMode){
-    title: `Freedom Loader ${config.version}`,
+  /**
-    width: 750,
+   * Start devTron extensions - @see https://github.com/electron/devtron
-    height: 800,
+   */
-    minWidth: 750,
+  const { devtron } = require('@electron/devtron');
-    minHeight: 800,
+  devtron.install(); 
-    webPreferences: {
+  logger.info("Loaded DevTron Extension")
-      nodeIntegration: false,
-      contextIsolation: true,
-      preload: path.join(__dirname, "preload.js"),
-    },
-  });
-
-  try {
-    await mainWindow.loadURL(`http://localhost:${config.applicationPort}`);
-    logger.info("Window Loaded");
-  } catch (err) {
-    logger.error("Window Loading Error:", err);
-  }
-
-  mainWindow.on("closed", () => {
-    logger.info("Main Window Closed");
-    mainWindow = null;
-  });
 }
 
-// IPC
+/**
-ipcMain.handle("select-download-folder", async () => {
+ * Load the app dependencies 
-  try {
+ */
-    const result = await dialog.showOpenDialog({ properties: ["openDirectory"] });
+const { initThemes } = require("./app/themeManager");
-    if (!result.canceled && result.filePaths.length > 0) {
+
-      logger.info(`Dossier sélectionné : ${result.filePaths[0]}`);
+const { initAutoUpdater } = require("./app/autoUpdater");
-      return result.filePaths[0];
+const { startRPC, stopRPC } = require("./app/discordRPC");
-    }
+const { checkNativeDependencies } = require("./app/dependencyCheck");
-    return null;
+const { updateYtDlp } = require("./app/ytDlpUpdater");
-  } catch (err) {
+const { createMainWindow, getMainWindow } = require("./app/windowManager");
-    logger.error(`Error when creating Output Folder : ${err.message}`);
+const { registerIpcHandlers } = require("./app/ipcHandlers");
-    return null;
+const { createSplashWindow, closeSplashWindow, setSplashProgress } = require("./app/splashManager");
-  }
+const { userThemesPath, initUserThemes, isWindows, validateBinaries, defaultDownloadFolder } = require("./server/helpers/path.helpers");
+
+
+/**
+ * If another instance want to run
+ */
+app.on("second-instance", () => {
+  logger.info("Second instance detected");
+
+  const mainWindow = require("./app/windowManager").getMainWindow();
+
+  if (!mainWindow) return;
+
+  if (mainWindow.isMinimized()) mainWindow.restore();
+
+  mainWindow.show();
+  mainWindow.focus();
 });
 
-ipcMain.handle("get-default-download-path", () => defaultDownloadPath);
-
-ipcMain.on("set-progress", (event, percent) => {
-  if (mainWindow) mainWindow.setProgressBar(percent / 100); // Electron attend 0 → 1
-});
-
-// Menu
-function setupMenu() {
-  const menuTemplate = [
-    {
-      label: "Logs",
-      submenu: [
-        {
-          label: "Open Logs",
-          click: () => shell.openPath(logsFolderPath),
-        },
-      ],
-    },
-    {
-      label: "Website",
-      submenu: [
-        {
-          label: "Go to Website",
-          click: () => shell.openExternal("https://masteracnolo.github.io/FreedomLoader/"),
-        },
-      ],
-    },
-    {
-      label: "Documentation",
-      submenu: [
-        {
-          label: "Go to Wiki",
-          click: () => shell.openExternal("https://masteracnolo.github.io/FreedomLoader/pages/wiki.html"),
-        },
-      ],
-    },
-    
-  ];
-
-  const defaultMenu = Menu.getApplicationMenu();
-  const mergedTemplate = defaultMenu
-    ? [...defaultMenu.items.map(item => item), ...menuTemplate]
-    : menuTemplate;
-
-  Menu.setApplicationMenu(Menu.buildFromTemplate(mergedTemplate));
-}
-
-// App ready
 app.whenReady().then(async () => {
-  logSessionStart();
+  logSessionStart(logDir, defaultDownloadFolder);
-  logger.info("App Ready, Server Express starting...");
 
-  const serverPath = path.join(__dirname, "server", "server.js");
+  createSplashWindow();
-  const expressServer = require(serverPath);
+
+  if (!config.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();
 
-    const { startRPC } = require("./server/discordRPC");
+    setSplashProgress(1); // Starting server
-    startRPC();
+    registerIpcHandlers(getMainWindow);
 
+    setSplashProgress(2); // Loading themes
+
+    validateBinaries();
+
+    initUserThemes();
+    await initThemes(userThemesPath);
+
+    setSplashProgress(3); // Almost ready
     await createMainWindow();
-    AutoUpdater(mainWindow);
+    
-    setupMenu();
+    closeSplashWindow();
+    getMainWindow().show();
+    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("All Window Closed, shuting down app");
+  logger.info("Shutting down...");
-  if (process.platform !== "darwin") app.quit();
+  app.quit();
 });
 
-app.on("before-quit", () => logSessionEnd());
+app.on("before-quit", async () => {
+  await stopRPC();
+  logger.info("All services stopped. Have a nice day!");
+  logSessionEnd();
+});

package.json

@@ -1,28 +1,45 @@
 {
   "name": "freedom-loader",
   "productName": "Freedom Loader",
-  "version": "1.3.0",
+  "version": "1.6.0",
-  "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://masteracnolo.github.io/Freedom-Loader-Site/",
+  "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 .",
-    "dist": "electron-builder"
+    "postinstall": "chmod +x resources/binaries/linux/* 2>/dev/null || true",
+    "build": "electron-builder",
+    "build:win": "electron-builder --win",
+    "build:linux": "electron-builder --linux",
+    "build:rpm": "bash scripts/create-copr-package.sh",
+    "build:all": "electron-builder -wl",
+    "update": "npm update"
   },
   "dependencies": {
     "chalk": "^4.1.2",
     "debug": "^4.4.1",
     "discord-rpc": "^4.0.1",
-    "electron-squirrel-startup": "^1.0.1",
     "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.0.12"
+    "electron": "^41.2.0",
+    "electron-builder": "^25.1.8"
   },
   "build": {
     "appId": "com.masteracnolo.freedomloader",
@@ -31,57 +48,68 @@
       {
         "provider": "github",
         "owner": "MasterAcnolo",
-        "repo": "Freedom-Loader"
+        "repo": "Freedom-Loader",
+        "releaseType": "draft"
       }
     ],
     "files": [
       "**/*",
       "node_modules/**/*",
-      "!logs/*.json",
+      "!config/config.dev.json",
-      "server/**/*",
+      "!theme/**/*"
-      "server/node_modules/**/*"
     ],
     "directories": {
       "buildResources": "build"
     },
     "asar": true,
     "extraResources": [
+      {
+        "from": "theme",
+        "to": "theme"
+      },
       {
         "from": "build/confirm-icon.png",
         "to": "confirm-icon.png"
       },
       {
-        "from": "build/app-icon.ico",
+        "from": "build/banner.bmp",
-        "to": "app-icon.ico"
+        "to": "banner.bmp"
+      },
+      {
+        "from": "build/banner.png",
+        "to": "banner.png"
       },
       {
         "from": "build/error.png",
         "to": "error.png"
       },
       {
-        "from": "ressources/yt-dlp.exe",
+        "from": "config/config.default.json",
-        "to": "yt-dlp.exe"
+        "to": "config/config.default.json"
-      },
-      {
-        "from": "ressources/ffmpeg.exe",
-        "to": "ffmpeg.exe"
-      },
-      {
-        "from": "ressources/ffprobe.exe",
-        "to": "ffprobe.exe"
-      },
-      {
-        "from": "ressources/deno.exe",
-        "to": "deno.exe"
-      },
-      {
-        "from": "server",
-        "to": "server"
       }
     ],
     "win": {
       "target": "nsis",
-      "icon": "build/app-icon.ico"
+      "icon": "build/app-icon.ico",
+      "artifactName": "${productName}-Setup-${version}.${ext}",
+      "extraResources": [
+        {
+          "from": "resources/binaries/win-32/yt-dlp.exe",
+          "to": "binaries/yt-dlp.exe"
+        },
+        {
+          "from": "resources/binaries/win-32/ffmpeg.exe",
+          "to": "binaries/ffmpeg.exe"
+        },
+        {
+          "from": "resources/binaries/win-32/ffprobe.exe",
+          "to": "binaries/ffprobe.exe"
+        },
+        {
+          "from": "resources/binaries/win-32/deno.exe",
+          "to": "binaries/deno.exe"
+        }
+      ]
     },
     "nsis": {
       "oneClick": false,
@@ -89,9 +117,62 @@
       "allowToChangeInstallationDirectory": true,
       "installerIcon": "build/app-icon.ico",
       "uninstallerIcon": "build/uninstaller-icon.ico",
+      "installerSidebar": "build/banner.bmp",
       "createDesktopShortcut": true,
       "createStartMenuShortcut": true,
       "shortcutName": "Freedom Loader"
+    },
+    "linux": {
+      "target": [
+        "AppImage",
+        "deb",
+        "snap"
+      ],
+      "category": "Utility",
+      "icon": "build/app-icon.png",
+      "executableName": "freedom-loader",
+      "extraResources": [
+        {
+          "from": "resources/binaries/linux/yt-dlp",
+          "to": "binaries/yt-dlp"
+        },
+        {
+          "from": "resources/binaries/linux/ffmpeg",
+          "to": "binaries/ffmpeg"
+        },
+        {
+          "from": "resources/binaries/linux/ffprobe",
+          "to": "binaries/ffprobe"
+        },
+        {
+          "from": "resources/binaries/linux/deno",
+          "to": "binaries/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",
+        "home",
+        "removable-media",
+        "network",
+        "audio-playback",
+        "desktop",
+        "desktop-legacy",
+        "x11",
+        "wayland"
+      ]
     }
   }
 }

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">freedom-loader.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,7 +1,129 @@
 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", {
+
+  /**
+   * 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"),
-  setProgress: (percent) => ipcRenderer.send("set-progress", percent)
+
+  /**
+   * 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"),
+
+  /**
+   * 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"),
+});
+
+
+/**
+ * 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"),
+
+  /**
+   * Opens the workshop or external content library.
+   */
+  openWorkshop: () => ipcRenderer.send("open-workshop"),
+
+  /**
+   * Opens configuration/settings panel.
+   */
+  openConfig: () => ipcRenderer.send("open-config"),
 });

public/assets/icon/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M128 128C92.7 128 64 156.7 64 192L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 192C576 156.7 547.3 128 512 128L128 128zM231 231C240.4 221.6 255.6 221.6 264.9 231L319.9 286L374.9 231C384.3 221.6 399.5 221.6 408.8 231C418.1 240.4 418.2 255.6 408.8 264.9L353.8 319.9L408.8 374.9C418.2 384.3 418.2 399.5 408.8 408.8C399.4 418.1 384.2 418.2 374.9 408.8L319.9 353.8L264.9 408.8C255.5 418.2 240.3 418.2 231 408.8C221.7 399.4 221.6 384.2 231 374.9L286 319.9L231 264.9C221.6 255.5 221.6 240.3 231 231z"/></svg>

public/assets/icon/maximize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M128 128C92.7 128 64 156.7 64 192L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 192C576 156.7 547.3 128 512 128L128 128zM152 192L488 192C501.3 192 512 202.7 512 216C512 229.3 501.3 240 488 240L152 240C138.7 240 128 229.3 128 216C128 202.7 138.7 192 152 192z"/></svg>

public/assets/icon/minimize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 480C64 462.3 78.3 448 96 448L544 448C561.7 448 576 462.3 576 480C576 497.7 561.7 512 544 512L96 512C78.3 512 64 497.7 64 480z"/></svg>

public/index.html

@@ -7,85 +7,299 @@
     default-src 'self' 'unsafe-inline' data:;
     style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
     font-src https://fonts.gstatic.com;
-    img-src 'self' data: https://i.ytimg.com;
+    img-src 'self' data: https:;
     ">
-    <title></title>
 
     <link rel="stylesheet" href="styles/styles.css">
+    <link rel="stylesheet" href="styles/layout/topbar.css">
     
 </head>
 <body>
 
-    <div class="theme-switcher">
-        <label for="themeSelect">Thème :</label>
-        <select id="themeSelect" aria-label="Choisir le thème"></select>
-        </div>
-
-    <div class="container">
-
     <header>
-        <h1 id="title"> Freedom Loader </h1>
+        <div class="topbar" id="topbar">
-        <p id="subtitle"> Because why not? </p>
+            <div class="custom-controls">
+                <button id="devtools-btn" title="Dev Tools">Tools</button>
+                <button id="logs-btn" title="Logs">Logs</button>
+                <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="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>
     </header>
 
-    <form action="/download" method="POST" id="downloadForm">
+    <button class="settings-button" id="settings-button">
-        <input name="url" placeholder="URL" id="UrlInput">
+        <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>
 
-        <label class="checkbox-inline">
 
-            <label class="checkbox-mp3">
+    <div class="settings-panel" id="settings-panel">
-                <input type="checkbox" name="audioOnly" value="1">
+        <div class="settings-modal">
-                <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>
+            <button class="close-btn" onclick="closePanel()">✕</button>
-    </form>
-    </div>
             
-    <div class="download-path">
+            <div class="settings-title">
-            Will be save on <span id="savePath"></span> 
+                <h2>SETTINGS</h2>
-            <button id="changePath">Edit</button>
+                <p style="font-size: 0.8em;">Changes are saved automatically. <br> Somes changes could need a restart</p>
-    </div>
+                </div>
 
-    <div id="downloadProgressWrapper">
+            <!-- Basic Settings visibles -->
-        <div id="downloadProgress"></div>   
+            <div class="settings-section">
-    </div>
+                <h3>Basic Settings</h3>
 
-    <div style="display: flex; gap: 20px;">
+                <div class="setting-item" id="theme" style="margin-left: 32px;">
-        <div id="downloadProgressText"></div> 
+                    <div class="setting-info">
-        <div id="downloadSpeedText"></div>
+                        <div style="display: flex; align-items: center; gap: 10px;">
-    </div>
+                        <span class="setting-title">Thème</span>
 
-    <div id="downloadStatus"></div>
+                        <select id="themeSelect" data-key="theme" aria-label="Choisir le thème">
+
+                        </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>
+                </div>
+
+
+                <div class="setting-item">
+                    <input type="checkbox" data-key="discordRPC" id="discordRPC">
+                    <div class="setting-info">
+                    <span class="setting-title">Discord RPC</span>
+                    <small>Enable/disable Discord Rich Presence for your app.</small>
+                    </div>
+                </div>
+
+                <div class="setting-item">
+                    <input type="checkbox" data-key="autoDownloadPlaylist" id="autoDownloadPlaylist">
+                    <div class="setting-info">
+                    <span class="setting-title">Download Playlist automatically?</span>
+                    <small>If enabled, playlists will download without confirmation.</small>
+                    </div>
+                </div>
+
+                <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="autoCheckInfo" id="autoCheckInfo">
+                    <div class="setting-info">
+                    <span class="setting-title">Auto Fetch Info</span>
+                    <small>Automatically fetch information for new downloads.</small>
+                    </div>
+                </div>
+            </div>
+
+
+            <!-- Advanced Settings -->
+                <details class="settings-section">
+                <summary>Advanced Settings</summary>
+
+                <div class="setting-item">
+                    <input type="checkbox" data-key="autoUpdate" id="autoUpdate">
+                    <div class="setting-info">
+                    <span class="setting-title">Auto Update</span>
+                    <small>Enable automatic app updates.</small>
+                    </div>
+                </div>
+
+                <!-- <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 type="checkbox" data-key="addMetadata" id="addMetadata">
+                    <div class="setting-info">
+                    <span class="setting-title">Add Metadata</span>
+                    <small>Include metadata in downloaded files.</small>
+                    </div>
+                </div>
+
+                <div class="setting-item">
+                    <input type="checkbox" data-key="addThumbnail" id="addThumbnail">
+                    <div class="setting-info">
+                    <span class="setting-title">Add Thumbnail</span>
+                    <small>Include thumbnails in downloaded files.</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" style="margin-left: 32px; margin-top: 20px;">
+                    <div class="setting-info">
+                        <span class="setting-title">Custom Codec</span>
+                        <select data-key="customCodec">
+                        <option value="h264">H264</option>
+                        <option value="av1">AV1</option>
+                        <option value="av01">AV01</option>
+                        <option value="vp9.2">VP9.2</option>
+                        <option value="vp9">VP9</option>
+                        <option value="h265">H265</option>
+                        <option value="theora">Theora</option>
+                        </select>
+                        <small>Choose your preferred video codec.</small>
+                    </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="verboseLogs" id="verboseLogs">
+                    <div class="setting-info">
+                    <span class="setting-title">Verbose Logs</span>
+                    <small>Show verbose logs for debugging purposes.</small>
+                    </div>
+                </div>
+
+                </details>
+
+                <div class="settings-footer">
+                <button id="open-theme">Open Theme Folder</button>
+                <button id="open-json-btn">Open JSON Configuration</button>
+            </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>
  
+    <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>
+
+                <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>
+
+                <button type="submit" onclick="startProgress()">Download</button>
+            </form>
+
+            </div>
+
+            <div class="download-path">
+                    Will be save on <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>
+
+        </div>
+    </main>
+
+    <!-- Toast Container -->
+    <div id="toast-container"></div>
+
+    <h2 id="reference"> Because Why Not ? </h2>
+
+    
     <!-- Scripts -->
+    <script src="script/toast.js"></script>
+    <script src="script/customConfiguration.js"></script>
+    <script src="script/clipboardPaste.js"></script>
     <script src="script/custompath.js"></script>
+    <script src="script/settingsPanel.js"></script>
+    <script src="script/appVersion.js"></script>
     <script src="script/downloadstatus.js"></script>
     <script src="script/fetchinfo.js"></script>
     <script src="script/progressBar.js"></script>
     <script src="script/customthemes.js"></script>
+    <script type="module" src="script/topbar.js"></script>
 
 </body>
 </html>

public/script/appVersion.js

@@ -0,0 +1,21 @@
+/**
+ * Retrieves the application version from the Electron main process
+ * and displays it in the UI version badge (bottom-right corner).
+ *
+ * This is mainly used for debugging and build identification.
+ */
+async function versionLabel() {
+  const appVersion = await window.electronAPI.getVersion();
+
+    /**
+     * UI element displaying the current application version.
+     * Updated at runtime after IPC call resolves.
+     */
+    const versionBadge = document.getElementById("version-badge");
+
+    if (!versionBadge) return;
+
+    versionBadge.textContent = `${appVersion}`;
+}
+
+versionLabel();

public/script/clipboardPaste.js

@@ -0,0 +1,40 @@
+/**
+ * Initializes clipboard paste functionality for the URL input field.
+ *
+ * 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) return;
+
+  /**
+   * Handles clipboard paste action triggered by the paste button.
+   * Reads clipboard text and inserts it into the URL input field.
+   */
+  pasteBtn.addEventListener("click", async () => {
+    try {
+      urlInput.value = await navigator.clipboard.readText();
+
+      // Notify frameworks / listeners bound to input changes
+      urlInput.dispatchEvent(new Event("input", { bubbles: true }));
+
+      urlInput.focus();
+
+      // Temporary UI feedback on paste action
+      pasteBtn.style.backgroundColor = "var(--form-button-bg-hover-color)";
+      setTimeout(() => {
+        pasteBtn.style.backgroundColor = "";
+      }, 200);
+    } catch (err) {
+      console.error("Clipboard access failed:", err);
+
+      alert(
+        "Unable to access clipboard. Please paste manually using Ctrl+V."
+      );
+    }
+  });
+});

public/script/customConfiguration.js

@@ -0,0 +1,27 @@
+async function initPlatformRestrictions() {
+  const platform = await window.electronAPI.getProcessPlatform();
+
+  const themeSelect = document.getElementById("themeSelect");
+  const refreshBtn = document.getElementById("refresh-themes-btn");
+
+  /**
+   * Is the OS windows
+   * @type {boolean}
+   */
+  const isWindows = platform === "win32";
+
+  console.log(isWindows);
+
+  // If it's windows, the button is not disabled.
+  themeSelect.disabled = !isWindows;
+  refreshBtn.disabled = !isWindows;
+
+  themeSelect.classList.toggle("disabled", !isWindows);
+  refreshBtn.classList.toggle("disabled", !isWindows);
+
+  if (!isWindows) {
+    themeSelect.title = "Themes are only available on Windows";
+    refreshBtn.title = "Themes are only available on Windows";
+  }
+}
+

public/script/custompath.js

@@ -1,41 +1,97 @@
+/**
+ * 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");
 
-  // Essayer de charger depuis le localStorage
+  /**
-  let savedPath = localStorage.getItem("customDownloadPath");
+   * Hidden form field storing the validated download path
-
+   * used during download submission.
-  // Sinon demander le chemin par défaut à l'API Electron
+   *
-  if (!savedPath) {
+   * Created dynamically if not already present in DOM.
-    savedPath = await window.electronAPI.getDefaultDownloadPath();
+   */
-  }
-
-  // Afficher le chemin
-  if (savePathElem) {
-    savePathElem.textContent = savedPath;
-  }
-
-  //  Créer l'input caché s'il n'existe pas déjà
   let hidden = document.getElementById("savePathInput");
+  
   if (!hidden) {
     hidden = document.createElement("input");
     hidden.type = "hidden";
     hidden.name = "savePath";
     hidden.id = "savePathInput";
-    document.getElementById("downloadForm").appendChild(hidden);
+    form.appendChild(hidden);
   }
-  hidden.value = savedPath;
 
-  //  Gestion du bouton de modification
+  /**
-  document.getElementById("changePath").addEventListener("click", async () => {
+   * Applies a validated download path received from backend.
-    const selectedPath = await window.electronAPI.selectDownloadFolder();
+   *
-    if (selectedPath) {
+   * Updates:
-      // Met à jour l'affichage
+   * - UI display (visible path)
-      savePathElem.textContent = selectedPath;
+   * - tooltip (full path)
-      hidden.value = selectedPath;
+   * - 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
+  }
 
-      // Et le stocke en localStorage pour la prochaine fois
+  /**
-      localStorage.setItem("customDownloadPath", selectedPath);
+   * 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");
+    if (cached) {
+      savePathElem.textContent = cached;
     }
-  });
-});
 
+    // MAIS la source de vérité reste le back
+    try {
+      const validatedPath = await window.electronAPI.getValidatedDownloadPath(
+        cached
+      );
+      await applyPathFromBack(validatedPath);
+    } catch {
+      // fallback sûr
+      const defaultPath =
+        await window.electronAPI.getDefaultDownloadPath();
+      await applyPathFromBack(defaultPath);
+    }
+  }
+
+  await loadInitialPath();
+
+  /**
+   * Opens system folder selector and updates download path.
+   *
+   * 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 = await window.electronAPI.selectDownloadFolder();
+
+        if (!validatedPath) return; // cancelled
+
+        await applyPathFromBack(validatedPath);
+      } catch (err) {
+        alert("This folder is not allowed. Only specific folders (Users, Downloads, Documents) are authorized for downloads.");
+      }
+    });
+});

public/script/customthemes.js

@@ -1,63 +1,256 @@
-const themes = {
-  default:    { label: "Default", subtitle: "Because why not?" },
-  dark:       { label: "Sombre", subtitle: "Darkness is my ally" },
-  light:      { label: "Clair", subtitle: "Qui aime ce thème ?" },
-  neon:       { label: "Néon", 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: "Darkness is my ally",
+      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");  // thème par défaut
-    themeSelect.value = "dark";
-  }
-}
-
-// Quand l'utilisateur change le thème depuis le 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; // Empêche les clics multiples
+  
-  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,12 +1,33 @@
+/**
+ * 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", {
@@ -26,155 +47,230 @@ async function fetchVideoInfo(url) {
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+/**
-  const urlInput = document.getElementById("UrlInput");
+ * Initializes the video info system UI.
-  const infoDiv = document.getElementById("videoInfo");
+ *
-  const loaderBox = document.getElementById("loaderBox");
+ * - 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() {
 
-  let lastFetchedUrl = "";
+  // 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");
 
-  urlInput.addEventListener("input", async () => {
+    // Input caché pour stocker le titre de la playlist
-    const url = urlInput.value.trim();
+    let playlistTitleInput = document.getElementById("playlistTitle");
-
+    if (!playlistTitleInput) {
-    // Si champ vide -> reset total
+      playlistTitleInput = document.createElement("input");
-    if (!url || url.length < 2) {
+      playlistTitleInput.type = "hidden";
-      infoDiv.innerHTML = "";
+      playlistTitleInput.name = "playlistTitle";
-      infoDiv.classList.remove("visible", "playlist-mode");
+      playlistTitleInput.id = "playlistTitle";
-      lastFetchedUrl = "";
+      form.appendChild(playlistTitleInput);
-      return;
     }
 
-    if (url === lastFetchedUrl) return;
+    let lastFetchedUrl = "";
-    lastFetchedUrl = url;
 
-    loaderBox.style.display = "flex";
+    urlInput.addEventListener("input", async () => {
-    const data = await fetchVideoInfo(url);
-    loaderBox.style.display = "none";
 
-    // Gestion des erreurs
+      const configFeatures = await window.electronAPI.getFeatures();
-    if (data.error) {
+      if (!configFeatures.autoCheckInfo) return;
-      infoDiv.innerHTML = `
+
-        <div style="
+      const url = urlInput.value.trim();
-          padding:7px;
+
-          background:var(----infos-box-color);
+      // IF field empty -> total reset
-        ">
+      if (!url || url.length < 2) {
-          <strong>${data.error}</strong> 
+        infoDiv.innerHTML = "";
-        </div>
+        infoDiv.classList.remove("visible", "playlist-mode");
-      `;
+        playlistTitleInput.value = "";
-      infoDiv.classList.add("visible");
+        lastFetchedUrl = "";
-      infoDiv.classList.remove("playlist-mode");
+        return;
+      }
+
+      if (url === lastFetchedUrl) return;
+      lastFetchedUrl = url;
+
+      loaderBox.style.display = "flex";
+      const data = await fetchVideoInfo(url);
       loaderBox.style.display = "none";
-      return;
-    }
 
-    // ---------- PLAYLIST ----------
-    if (data.type === "playlist") {
-      infoDiv.classList.add("playlist-mode");
-      infoDiv.innerHTML = `
-        <h3 style="color:var(--video-info-heading-color);"><strong>Playlist Detected: ${data.title}</strong></h3>
-        <h3 style="color:var(--video-info-heading-color);"><strong>Video Count: ${data.count}</strong></h3>
-        <p><strong>Channel :</strong> ${data.channel || "Unknown"}</p>
-        <div id="playlistVideos"></div>
-      `;
 
-      const listDiv = document.getElementById("playlistVideos");
+      if (data.error) {
-
+        infoDiv.innerHTML = `
-      data.videos.forEach(v => {
+          <div style="
-        const durationStr = v.duration
+            padding:7px;
-          ? `${Math.floor(v.duration / 60)}m ${(v.duration % 60).toString().padStart(2,"0")}s` : "Inconnue";
+            background:var(----infos-box-color);
-
+          ">
-        const videoUrl = v.id ? `https://www.youtube.com/watch?v=${v.id}` : v.url;
+            <strong>${data.error}</strong> 
-
-        listDiv.innerHTML += `
-          <div style="margin-bottom:12px;">
-            <img src="${v.thumbnail}" width="160" alt="Thumbnail">
-            <p><strong>${v.title}</strong></p>
-            <p>Duration : ${durationStr}</p>
-            <p><a href="${videoUrl}" target="_blank">URL</a>
-              <button class="copy-btn" data-url="${videoUrl}">📋</button>
-            </p>
           </div>
         `;
-      });
+        infoDiv.classList.add("visible");
+        infoDiv.classList.remove("playlist-mode");
+        playlistTitleInput.value = "";
+        loaderBox.style.display = "none";
+        return;
+      }
 
-      // Gestion du bouton copier
+      // ---------- PLAYLIST ----------
-      listDiv.addEventListener("click", (event) => {
+      if (data.type === "playlist") {
-        if (event.target.classList.contains("copy-btn")) {
+        playlistTitleInput.value = data.title;
-          const btn = event.target;
+        infoDiv.classList.add("playlist-mode");
-          if (btn.disabled) return;
+        infoDiv.innerHTML = `
+          <div class="playlist-header">
+            <div class="playlist-info">
+              <div class="playlist-badge">Detected Playlist</div>
+              <h3 class="playlist-title">${data.title}</h3>
+              <div class="playlist-meta">
+                <span class="playlist-count">
+                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4 6H20M4 12H20M4 18H11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  ${data.count} vidéos
+                </span>
+                ${data.channel ? `<span class="playlist-channel">
+                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
+                    <path d="M5 20C5 16.134 8.134 13 12 13C15.866 13 19 16.134 19 20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  ${data.channel}
+                </span>` : ''}
+              </div>
+            </div>
+          </div>
+          <div id="playlistVideos"></div>
+        `;
 
-          btn.disabled = true;
+        const listDiv = document.getElementById("playlistVideos");
-          const url = btn.dataset.url;
-          navigator.clipboard.writeText(url)
-            .then(() => {
-              const original = btn.textContent;
 
-              btn.style.opacity = 0;
+        data.videos.forEach(v => {
-              btn.style.transform = "scale(0.7)";
+          const durationStr = v.duration
+            ? `${Math.floor(v.duration / 60)}:${(v.duration % 60).toString().padStart(2,"0")}` : "--:--";
 
-              setTimeout(() => {
+          const videoUrl = v.id ? `https://www.youtube.com/watch?v=${v.id}` : v.url;
-                btn.textContent = "✅";
+
-                btn.style.opacity = 1;
+          listDiv.innerHTML += `
-                btn.style.transform = "scale(1)";
+            <div class="playlist-video-card">
+              <div class="video-thumbnail-wrapper">
+                <img src="${v.thumbnail}" alt="${v.title}" class="video-thumbnail">
+                <span class="video-duration">${durationStr}</span>
+              </div>
+              <div class="video-content">
+                <h4 class="video-title" title="${v.title}">${v.title}</h4>
+                ${v.uploader ? `<p class="video-uploader">${v.uploader}</p>` : ''}
+                <div class="video-actions">
+                  <a href="${videoUrl}" target="_blank" class="video-link">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                    Ouvrir
+                  </a>
+                  <button class="copy-btn" data-url="${videoUrl}" title="Copier l'URL">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect x="8" y="8" width="12" height="12" rx="2" stroke="currentColor" stroke-width="2"/>
+                      <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" stroke="currentColor" stroke-width="2"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          `;
+        });
+
+        // Copy Button
+        listDiv.addEventListener("click", (event) => {
+          if (event.target.classList.contains("copy-btn") || event.target.closest(".copy-btn")) {
+            const btn = event.target.closest(".copy-btn") || event.target;
+            if (btn.disabled) return;
+
+            btn.disabled = true;
+            const url = btn.dataset.url;
+            navigator.clipboard.writeText(url)
+              .then(() => {
+                const original = btn.innerHTML;
+
+                btn.style.opacity = 0;
+                btn.style.transform = "scale(0.7)";
 
                 setTimeout(() => {
-                  btn.style.opacity = 0;
+                  btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  btn.style.transform = "scale(0.7)";
+                    <path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>`;
+                  btn.style.opacity = 1;
+                  btn.style.transform = "scale(1)";
 
                   setTimeout(() => {
-                    btn.textContent = original;
+                    btn.style.opacity = 0;
-                    btn.style.opacity = 1;
+                    btn.style.transform = "scale(0.7)";
-                    btn.style.transform = "scale(1)";
-                    btn.disabled = false;
-                  }, 300);
 
-                }, 1000);
+                    setTimeout(() => {
+                      btn.innerHTML = original;
+                      btn.style.opacity = 1;
+                      btn.style.transform = "scale(1)";
+                      btn.disabled = false;
+                    }, 300);
 
-              }, 300);
+                  }, 1000);
-            })
+
-            .catch(() => {
+                }, 300);
-              const original = btn.textContent;
+              })
-              btn.textContent = "❌";
+              .catch(() => {
-              setTimeout(() => {
+                const original = btn.innerHTML;
-                btn.textContent = original;
+                btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                btn.disabled = false;
+                  <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
-              }, 1500);
+                </svg>`;
-            });
+                setTimeout(() => {
-        }
+                  btn.innerHTML = original;
-      });
+                  btn.disabled = false;
+                }, 1500);
+              });
+          }
+        });
+
+        infoDiv.classList.add("visible");
+        return;
+      }
+
+      infoDiv.classList.remove("playlist-mode");
+      playlistTitleInput.value = "";
+
+      // ---------- VIDEO NORMALE ----------
+      const durationStr = data.duration
+        ? `${Math.floor(data.duration/60)}m ${(data.duration%60).toString().padStart(2,"0")}s`
+        : "Unknown";
+
+      const sizeStr = formatSize(data.filesize_approx);
+      const readableDate = formatDate(data.upload_date);
+      const categories = data.categories?.join(", ") || "Non spécifiées";
+
+      infoDiv.innerHTML = `
+        <h3>${data.title}</h3>
+        <img src="${data.thumbnail}" width="320" alt="Thumbnail">
+        <ul>
+          <li><strong>Duration :</strong> ${durationStr}</li>
+          <li><strong>Uploader :</strong> ${data.uploader || "Inconnu"}</li>
+          <li><strong>Upload Date :</strong> ${readableDate}</li>
+          <li><strong>Views :</strong> ${data.view_count?.toLocaleString() || "?"}</li>
+          <li><strong>Likes :</strong> ${data.like_count?.toLocaleString() || "?"}</li>
+          <li><strong>URL :</strong> <a href="${data.webpage_url}" target="_blank">${data.webpage_url}</a></li>
+          <li><strong>Channel :</strong> <a href="${data.channel_url}" target="_blank">${data.channel_url}</a></li>
+          <li><strong>Estimed Size :</strong> ${sizeStr}</li>
+          <li><strong>Category :</strong> ${categories}</li>
+        </ul>
+      `;
 
       infoDiv.classList.add("visible");
-      return;
+    });
-    }
 
-    infoDiv.classList.remove("playlist-mode");
+  })
 
-    // ---------- VIDEO NORMALE ----------
+}
-    const durationStr = data.duration
-      ? `${Math.floor(data.duration/60)}m ${(data.duration%60).toString().padStart(2,"0")}s`
-      : "Unknown";
 
-    const sizeStr = formatSize(data.filesize_approx);
+init();
-    const readableDate = formatDate(data.upload_date);
-    const categories = data.categories?.join(", ") || "Non spécifiées";
-
-    infoDiv.innerHTML = `
-      <h3>${data.title}</h3>
-      <img src="${data.thumbnail}" width="320" alt="Thumbnail">
-      <ul>
-        <li><strong>Duration :</strong> ${durationStr}</li>
-        <li><strong>Uploader :</strong> ${data.uploader || "Inconnu"}</li>
-        <li><strong>Upload Date :</strong> ${readableDate}</li>
-        <li><strong>Views :</strong> ${data.view_count?.toLocaleString() || "?"}</li>
-        <li><strong>Likes :</strong> ${data.like_count?.toLocaleString() || "?"}</li>
-        <li><strong>URL :</strong> <a href="${data.webpage_url}" target="_blank">${data.webpage_url}</a></li>
-        <li><strong>Channel :</strong> <a href="${data.channel_url}" target="_blank">${data.channel_url}</a></li>
-        <li><strong>Estimed Size :</strong> ${sizeStr}</li>
-        <li><strong>Category :</strong> ${categories}</li>
-      </ul>
-    `;
-
-    infoDiv.classList.add("visible");
-  });
-
-})

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";
 }
 
-// Connexion SSE
+/**
+ * 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,8 +96,10 @@ evtSource.onmessage = e => {
   }
 
   if (e.data === "done") {
-    resetProgress();
+    setTimeout(() => {
-    window.electronAPI.setProgress(-1); 
+      resetProgress();
+      window.electronAPI.setProgress(-1);
+    }, 2000);
     return;
   }
 
@@ -49,15 +107,30 @@ evtSource.onmessage = e => {
 
   if (!isNaN(percent)) {
     updateProgress(percent);
-    window.electronAPI.setProgress(percent); // update barre des tâches
+    window.electronAPI.setProgress(percent);
-    if (percent >= 100) setTimeout(() => {
-      resetProgress();
-      window.electronAPI.setProgress(-1); // retire la barre
-    }, 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/settingsPanel.js

@@ -0,0 +1,105 @@
+/**
+ * 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 currentlyOpen = settingsPanel.style.display === "block";
+  settingsPanel.style.display = currentlyOpen ? "none" : "block";
+});
+
+/**
+ * Closes the settings panel and resets internal state.
+ */
+function closePanel() {
+  isOpen = false;
+  settingsPanel.style.display = "none";
+}
+
+/**
+ * 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) => {
+      const key = el.dataset.key;
+      if (!key) return;
+
+      if (features[key] !== undefined) {
+        if (el.type === "checkbox") el.checked = features[key];
+        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);
+      });
+    });
+}
+
+/**
+ * Opens configuration JSON file via Electron topbar API.
+ */
+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();
+});
+
+/**
+ * Initializes settings UI by loading backend feature flags.
+ */
+loadSettings();

public/script/toast.js

@@ -0,0 +1,83 @@
+/**
+ * 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: "✓",
+    error: "✕",
+    warning: "⚠",
+    info: "ℹ"
+  };
+
+  const icon = icons[type] || icons.info;
+
+  toast.innerHTML = `
+    <span class="toast-icon">${icon}</span>
+    <span class="toast-message">${message}</span>
+    <button class="toast-close" title="Close">×</button>
+  `;
+
+  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

@@ -0,0 +1,57 @@
+/**
+ * Initializes topbar button event listeners and binds them
+ * to the Electron preload API exposed in `window.topbarAPI`.
+ *
+ * This function is safe to call once DOM is ready.
+ * It silently aborts if the API or elements are missing.
+ */
+function setupTopbarListeners() {
+  const { topbarAPI } = window;
+  if (!topbarAPI) return;
+
+  const minBtn = document.getElementById("minimize-btn");
+  const maxBtn = document.getElementById("maximize-btn");
+  const closeBtn = document.getElementById("close-btn");
+  const devtoolsBtn = document.getElementById("devtools-btn");
+  const logsBtn = document.getElementById("logs-btn");
+  const websiteBtn = document.getElementById("website-btn");
+  const wikiBtn = document.getElementById("wiki-btn");
+  const workshopBtn = document.getElementById("workshop-btn");
+
+  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 (workshopBtn) workshopBtn.onclick = () => topbarAPI.openWorkshop();
+}
+
+/**
+ * Registers topbar event listeners after DOM is fully loaded.
+ */
+document.addEventListener("DOMContentLoaded", setupTopbarListeners);
+
+/**
+ * Applies UI layout adjustments depending on feature flags
+ * provided by the Electron backend.
+ *
+ * Specifically handles:
+ * - hiding custom topbar
+ * - adjusting layout spacing
+ * - repositioning theme switcher
+ */
+(async function applyFeatureLayout() {
+  const features = await window.electronAPI.getFeatures();
+
+  if (!features.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";
+  }
+})();

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/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/themebutton.css

@@ -1,38 +0,0 @@
-.theme-switcher {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: #242424;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: #fff;
-  font-family: sans-serif;
-  font-size: 0.9rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  z-index: 1000;
-}
-
-.theme-switcher label {
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.theme-switcher select {
-  background: #fff;
-  border: 1px solid #242424;
-  border-radius: 6px;
-  padding: 4px 8px;
-  color: #000;
-  cursor: pointer;
-  font-weight: 600;
-  transition: background 0.3s ease, color 0.3s ease;
-}
-
-.theme-switcher select:hover,
-.theme-switcher select:focus {
-  background: #474747;
-  color: #fff;
-  outline: none;
-}

public/styles/components/toast.css

@@ -0,0 +1,136 @@
+/* Toast Container */
+#toast-container {
+  position: fixed;
+  top: 140px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+/* Toast */
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background-color: rgba(50, 50, 50, 0.9);
+  border-radius: 6px;
+  color: #ffffff;
+  font-size: 0.9rem;
+  max-width: 220px;
+  min-width: 100px;
+  animation: slideIn 0.25s ease-out;
+  pointer-events: auto;
+  backdrop-filter: blur(8px);
+}
+
+.toast.success {
+  background-color: rgba(40, 167, 69, 0.15);
+}
+
+.toast.error {
+  background-color: rgba(220, 53, 69, 0.15);
+}
+
+.toast.warning {
+  background-color: rgba(255, 193, 7, 0.15);
+}
+
+.toast.info {
+  background-color: rgba(23, 162, 184, 0.15);
+}
+
+/* Toast Icon */
+.toast-icon {
+  flex-shrink: 0;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast.success .toast-icon {
+  color: #28a745;
+}
+
+.toast.error .toast-icon {
+  color: #dc3545;
+}
+
+.toast.warning .toast-icon {
+  color: #ffc107;
+}
+
+.toast.info .toast-icon {
+  color: #17a2b8;
+}
+
+/* Toast Message */
+.toast-message {
+  flex: 1;
+  font-weight: 500;
+}
+
+/* Toast Close Button */
+.toast-close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: currentColor;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
+}
+
+.toast-close:hover {
+  opacity: 1;
+}
+
+/* Animations */
+@keyframes slideIn {
+  from {
+    transform: translateX(350px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(350px);
+    opacity: 0;
+  }
+}
+
+.toast.removing {
+  animation: slideOut 0.25s ease-out;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  #toast-container {
+    bottom: 12px;
+    right: 12px;
+    left: 12px;
+  }
+
+  .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 {
@@ -62,6 +61,7 @@ form#downloadForm {
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
     background-color: var(--form-input-bg-color);
     color: var(--form-input-text-color);
+    flex: 1;
 }
 
 #UrlInput:focus {
@@ -74,3 +74,40 @@ form#downloadForm {
 #UrlInput::placeholder {
     color: var(--form-input-placeholder-color);
 }
+
+.url-input-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    width: 100%;
+}
+
+.paste-btn {
+    background-color: var(--form-button-bg-color);
+    color: var(--form-button-text-color);
+    border: none;
+    padding: 0.75em;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    height: 44px;
+}
+
+.paste-btn:hover {
+    background-color: var(--form-button-bg-hover-color);
+    transform: scale(1.05);
+}
+
+.paste-btn:active {
+    transform: scale(0.95);
+}
+
+.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;
-    margin-bottom: 2vw;
 }
 
-
+#title {
-header h1{
+    color: var(--default-text-color);
-    margin-bottom: 0.2vw;
 }

public/styles/layout/settingsPanel.css

@@ -0,0 +1,277 @@
+/* SETTINGS BUTTON */
+.settings-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 60px;
+    right: 20px;
+    opacity: 0.8;
+    z-index: 15;
+    background-color: var(--settings-button-bg-color);
+    border-radius: 14px;
+    padding: 8px;
+    border: none;
+    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.settings-button svg {
+    width: 40px;
+    height: 40px;
+    stroke: var(--settings-button-text-color);
+}
+
+.settings-button:hover {
+    transform: scale(1.1);
+    cursor: pointer;
+    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
+}
+
+.settings-button:active {
+    transform: scale(0.95);
+}
+
+
+/* SETTINGS PANEL */
+.settings-panel {
+    position: fixed;
+    top: 60px;
+    right: 40px;
+    width: 40vw;
+    max-width: 320px;
+    max-height: 80vh;
+    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;
+    color: var(--settings-text-color);
+}
+
+.settings-panel::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; 
+}
+
+.settings-modal {
+    width: 100%;
+    min-height: auto; 
+    max-height: none;
+    padding: 0;
+    background: none;
+    box-shadow: none;
+    border-radius: none;
+
+}
+
+/* TITLE */
+.settings-title {
+    margin-bottom: 20px;
+}
+
+.settings-title h2 {
+    margin: 0;
+    font-size: 24px;
+}
+
+.settings-title p {
+    font-size: 14px;
+    color: #ccc;
+    margin-top: 4px;
+}
+
+/* SECTION */
+.settings-section {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    background: var(--settings-section-bg-color);
+    border-radius: 12px;
+    gap: 6px;
+}
+
+.settings-section h3 {
+    margin: 0 0 10px 0;
+    font-size: 18px;
+}
+
+/* SETTING ITEM */
+.setting-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 8px;
+    margin-top: 8px;
+}
+
+.setting-item input[type="checkbox"] {
+    margin: 0;
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+}
+
+.setting-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.setting-title {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.setting-info small {
+    font-size: 12px;
+    color: var(--settings-subtitle-color);
+    margin-top: 2px;
+    font-style: italic;
+}
+
+#theme .settings-title{
+    display: flex;
+}
+
+.setting-item select {
+  width: 70%;
+  background: #fff;
+  border: 1px solid #242424;
+  border-radius: 6px;
+  padding: 4px 8px;
+  color: #000;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.setting-item select:hover,
+.setting-item select:focus {
+  background: #474747;
+  color: #fff;
+  outline: none;
+}
+
+/* SELECT */
+.settings-section select {
+    margin-left: 10px;
+}
+
+/* DETAILS / DROPDOWN */
+details {
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    background: #2a2a2a;
+    border-radius: 12px;
+}
+
+details[open] {
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+}
+
+details summary {
+    cursor: pointer;
+}
+
+/* FOOTER */
+.settings-footer {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#open-json-btn {
+    padding: 6px 12px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+    background-color: var(--open-json-button-bg-color);
+    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 {
+    width: 100%;
+    min-height: 80px;
+    background-color: #1e1e1e;
+    border-radius: 8px;
+    padding: 8px;
+    color: #fff;
+    border: 1px solid #333;
+    resize: vertical;
+}
+
+/* CLOSE BTN */
+.close-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.close-btn:hover {
+    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; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+@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

@@ -0,0 +1,108 @@
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  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;
+    padding-left: 12px;
+}
+
+/* RIGHT - window buttons */
+.window-controls {
+  display: flex;
+  align-items: center;
+}
+
+/* GLOBAL BUTTON RESET */
+.topbar button {
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+
+  -webkit-app-region: no-drag;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition: background 0.15s ease, transform 0.1s ease;
+
+}
+
+/* Custom buttons (Logs / Wiki / etc.) */
+.custom-controls button {
+  height: 32px;
+  padding: 0 14px;
+
+  font-size: 15px;
+  border-radius: 8px;
+}
+
+.custom-controls button:hover {
+    background: rgba(255, 255, 255, 0.12);
+}
+
+/* Window buttons (Windows style) */
+.window-controls button {
+  width: 46px;
+  height: 48px;
+
+  font-size: 12px;
+}
+
+.window-controls button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.window-controls img {
+  width: 27px;
+  height: 27px;
+  pointer-events: none;
+  filter: invert(100%);
+}
+
+
+#close-btn:hover {
+  background: #e81123;
+  color: #fff;
+}
+
+/* Active effect */
+.topbar button:active {
+  background: rgba(255, 255, 255, 0.18);
+  transform: scale(0.9);
+}
+
+#close-btn:active {
+  background: #c50f1f;
+  transform: scale(0.9);
+}
+
+.version-badge {
+  position: fixed;
+  right: 18px;
+  bottom: 12px;
+  z-index: 2000;
+  font-size: 0.85em;
+  color: #b0b0b0;
+  background: none;
+  font-weight: 500;
+  border-radius: 6px;
+  padding: 2px 8px;
+  opacity: 0.7;
+  pointer-events: none;
+  box-shadow: none;
+  user-select: none;
+}

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);
@@ -69,80 +69,293 @@
 
 /* --- Playlist Mode --- */
 #videoInfo.playlist-mode {
-  max-width: 900px; 
+  max-width: 95%; 
 }
 
-/* Style du bloc "Playlist détectée" */
+/* Playlist Header */
-#videoInfo.playlist-mode > p {
+.playlist-header {
-  text-align: center;
+  display: flex;
-  font-size: 1.1rem;
+  flex-direction: column;
+  padding: 2rem;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
+  border-radius: 16px;
+  margin-bottom: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(10px);
+}
+
+.playlist-badge {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 0.4rem 0.9rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  font-size: 0.8rem;
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--video-info-text-color);
+  margin-bottom: 1rem;
+}
+
+.playlist-info {
+  flex: 1;
+}
+
+.playlist-title {
+  font-size: 1.9rem;
+  margin: 0 0 0.6rem 0;
+  color: var(--video-info-heading-color);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.playlist-meta {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.95rem;
+  color: var(--video-info-text-color);
+  opacity: 0.85;
+  flex-wrap: wrap;
+}
+
+.playlist-count,
+.playlist-channel {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.8rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  font-weight: 500;
+}
+
+.playlist-count svg,
+.playlist-channel svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
 }
 
 /* Layout liste des vidéos */
 #playlistVideos {
   margin-top: 1em;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 18px;
+  gap: 1.5rem;
 }
 
-/* Un item de playlist */
+/* Carte vidéo playlist */
-#playlistVideos > div {
+.playlist-video-card {
   background: var(--playlist-background-color);
-  border-radius: 10px;
+  border-radius: 14px;
-  padding: 10px;
+  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
-  text-align: center;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  transition: transform 0.2s ease;
-}
-
-#playlistVideos > div p {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.1);
-  flex-wrap: wrap;
+  position: relative;
 }
 
-#videoInfo.playlist-mode {
+.playlist-video-card::before {
-  max-width: 95%;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--video-info-link-color), transparent);
+  opacity: 0;
+  transition: opacity 0.25s ease;
 }
 
-#playlistVideos > div:hover {
+.playlist-video-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.playlist-video-card:hover::before {
+  opacity: 1;
+}
+
+/* Thumbnail wrapper avec durée */
+.video-thumbnail-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: #000;
+}
+
+.video-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.3s ease;
+}
+
+.playlist-video-card:hover .video-thumbnail {
   transform: scale(1.05);
 }
 
-#playlistVideos img {
+.video-duration {
-  width: 100%;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
+  letter-spacing: 0.5px;
+  backdrop-filter: blur(4px);
+}
+
+/* Contenu vidéo */
+.video-content {
+  padding: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  flex: 1;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.02));
+}
+
+.video-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--video-info-heading-color);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 2.8em;
+  transition: color 0.2s ease;
+}
+
+.playlist-video-card:hover .video-title {
+  color: var(--video-info-link-color);
+}
+
+.video-uploader {
+  font-size: 0.9rem;
+  color: var(--video-info-text-color);
+  opacity: 0.7;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Actions vidéo */
+.video-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: auto;
+  padding-top: 0.8rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.video-link {
+  flex: 1;
+  text-decoration: none;
+  color: var(--video-info-link-color);
+  font-size: 0.9rem;
+  padding: 0.5rem 0.9rem;
   border-radius: 8px;
-  margin-bottom: 8px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: all 0.2s ease;
+  text-align: center;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+}
+
+.video-link svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.video-link:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.15);
+  text-decoration: none;
+  transform: translateY(-1px);
 }
 
 .copy-btn {
-  all: unset;
+  background: rgba(255, 255, 255, 0.06);
-  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.08);
-  border: none;
   cursor: pointer;
   display: inline-flex;          
   align-items: center;
   justify-content: center;
-  padding: 4px;
+  padding: 0.5rem;
-  vertical-align: middle;
+  border-radius: 8px;
-  transition: transform 0.1s ease, color 0.1s ease, opacity 0.15s ease;
+  transition: all 0.2s ease;
-  font-size: 1em;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
 }
 
-#playlistVideos > div p a{
+.copy-btn svg {
-  text-decoration: none;
+  width: 18px;
-  color: var(--video-info-link-color);
+  height: 18px;
+  color: var(--video-info-text-color);
 }
 
-#playlistVideos > div p a:hover{
+.copy-btn:hover {
-  text-decoration: underline;
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.15);
+  transform: translateY(-1px);
+}
+
+.copy-btn:active {
+  transform: scale(0.95);
+}
+
+.copy-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
 
 /* Responsive */
+@media (max-width: 768px) {
+  #playlistVideos {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 1rem;
+  }
+
+  .playlist-header {
+    padding: 1.5rem;
+  }
+
+  .playlist-title {
+    font-size: 1.5rem;
+  }
+
+  .playlist-meta {
+    gap: 0.8rem;
+  }
+}
+
 @media (max-width: 480px) {
   #videoInfo {
     padding: 1em;
@@ -152,4 +365,21 @@
   #videoInfo h3 {
     font-size: 1.4rem;
   }
+
+  #playlistVideos {
+    grid-template-columns: 1fr;
+  }
+
+  .playlist-header {
+    padding: 1.2rem;
+  }
+
+  .playlist-title {
+    font-size: 1.3rem;
+  }
+
+  .playlist-badge {
+    font-size: 0.75rem;
+    padding: 0.4rem 0.8rem;
+  }
 }

public/styles/styles.css

@@ -1,29 +1,41 @@
 /* Layout */
+@import url("layout/topbar.css");
+@import url("layout/header.css");
 @import url("layout/form.css");
 @import url("layout/container.css");
-@import url("layout/header.css");
+@import url("layout/settingsPanel.css");
 @import url("layout/videoinfo.css");
 
 /* Components */
 @import url("components/checkbox.css");
-@import url("components/themebutton.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('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,29 +46,78 @@ 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;
 }
 
-header p{
+/* Scrollbar pour main */
+main::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+main::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 5px;
+}
+
+main::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 5px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+main::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.35);
+  transform: scaleX(1.05);
+}
+
+/* Thème clair */
+body.light main::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+body.light main::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+body.light main::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.45);
+}
+
+.container{
+  margin-top: 0px;
+}
+
+#subtitle{
   color: var(--subtitle-color);
 }
 
-.checkbox-inline{
-  color: var(--mp3-text-color);
-}
-
 body, 
 .container, 
 input, 

public/styles/theme/chirac-theme.css

@@ -1,93 +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;
-}
-
-
-/* 
-
-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,39 +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;
-}

public/styles/theme/default-theme.css

@@ -1,43 +0,0 @@
-:root {
-  /* Couleurs générales */
-  --background-color: #001224;            /* body background bleu nuit */
-  --default-text-color: #eee;             /* texte clair principal */
-  --subtitle-color: #007bff;              /* sous-titres, header p */
-  --mp3-text-color: #000000;              /* couleur texte checkbox inline */
-
-  /* Formulaire */
-  --form-bg-color: #ffffff;               /* fond du formulaire */
-  --form-input-bg-color: #f9f9f9;         /* fond inputs */
-  --form-input-border-color: #cccccc;     /* bordure inputs */
-  --form-input-border-focus-color: #0056b3; /* bordure focus */
-  --form-input-text-color: #333333;       /* texte inputs */
-  --form-input-placeholder-color: #aaaaaa; /* placeholder */
-  --form-button-bg-color: #007bff;         /* bouton bg */
-  --form-button-text-color: #ffffff;       /* texte bouton */
-  --form-button-bg-hover-color: #0056b3;   /* bouton hover */
-
-  /* Checkbox */
-  --checkbox-bg-default: #cccccc;
-  --checkbox-bg-checked: #3B82F6;
-  --checkbox-checkmark-border-color: #E0E0E2;
-  --checkbox-pulse-color: rgba(59, 130, 246, 0.5);
-
-  /* Download status */
-  --download-status-color: #007bff;
-
-  /* Video Info Box */
-  --infos-box-color: #0c0140;
-  --video-info-text-color: #ffffff;
-  --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: #070823a3;
-}
-
-body.default .download-path #savePath {
-  color: #ffffff;
-}

public/styles/theme/drift-theme.css

@@ -1,51 +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;
-    }
-
-
-
-body.drift .download-path{
-    color: #ededed;
-}

public/styles/theme/fanatic-theme.css

@@ -1,39 +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;
-}

public/styles/theme/light-theme.css

@@ -1,39 +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;
-}

public/styles/theme/neon-theme.css

@@ -1,50 +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;
-}
-
-body.neon .download-path {
-  color: var(--default-text-color);
-}

public/styles/theme/nf-theme.css

@@ -1,49 +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;
-}
-
-body.nf .download-path {
-  color: var(--default-text-color);
-}

public/styles/theme/songbird-theme.css

@@ -1,49 +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;
-}
-
-body.cyberpunk .download-path {
-  color: var(--default-text-color);
-}

public/styles/theme/spicy-theme.css

@@ -1,48 +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;
-}
-
-/* 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,10 +0,0 @@
-@import url("chirac-theme.css");
-@import url("dark-theme.css");
-@import url("default-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,22 +15,40 @@
   --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;
   --video-info-list-strong-color: #000000;
   --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-modal-bg-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/create-copr-package.sh

@@ -0,0 +1,50 @@
+#!/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"
+
+# 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
+
+# Step 1 — Build .rpm from linux-unpacked via fpm
+echo "Building RPM..."
+fpm -s dir -t rpm --force \
+    --name freedom-loader \
+    --version "$VERSION" \
+    --architecture x86_64 \
+    --description "Free and open-source GUI for yt-dlp" \
+    --url "https://masteracnolo.github.io/Freedom-Loader-Site/" \
+    --maintainer "MasterAcnolo <MasterAcnolo@users.noreply.github.com>" \
+    --license "GPL-3.0-only" \
+    --depends gtk3 \
+    --depends nss \
+    --depends libXScrnSaver \
+    --depends at-spi2-core \
+    --package "$RPM_OUT" \
+    "$ROOT_DIR/dist/linux-unpacked/=/opt/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"
+
+echo "RPM built: $RPM_OUT"
+
+# Step 2 — Build SRPM for COPR (wraps the .rpm above)
+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"

server/controller/download.controller.js

@@ -1,12 +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");
+const { isValidUrl, isSafePath } = require("../helpers/validation.helpers");
-const { buildYtDlpArgs } = require("../helpers/buildArgs");
+const { notifyDownloadFinished } = require("../helpers/notify.helpers");
-const { notifyDownloadFinished } = require("../helpers/notify");
+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 = {
@@ -14,21 +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)) return res.status(400).send("❌ Save Path Not Allowed.");
+    if (options.outputFolder && !isSafePath(options.outputFolder)) {
+      logger.warn(`Unsafe download path rejected: ${options.outputFolder}`);
+      return res.status(400).send("Save Path Not Allowed.");
+    }
 
-    const filePath = await fetchDownload(options, listeners, speedListeners);
+    const outputFolder = await fetchDownload(
-    notifyDownloadFinished(filePath);
+      options,
-    res.send("✅ Download Done !");
+      progressListeners,
+      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(`❌ ${err.message}`);
+    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',
@@ -37,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',
@@ -61,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

@@ -1,48 +1,116 @@
-const express = require("express");
-const router = express.Router();
-
 const { fetchInfo } = require("../services/info.services");
-const { parseVideo, parsePlaylist } = require("../helpers/parseInfo");
+const { parseVideo, parsePlaylist } = require("../helpers/parseInfo.helpers");
 const { logger } = require("../logger");
-const { isValidUrl } = require("../helpers/validation");
+const { isValidUrl } = require("../helpers/validation.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; // Gérer POST et GET
+    const url = req.body.url || req.query.url; // Supports POST and GET requests
 
-
+    /**
-    /* Si pas d'url ou url invalide*/
+     * Basic validation:
-    if (!url || !isValidUrl(url)) return res.status(400).send("❌ Invalid URL Or Missing");
+     * - URL must exist
-
+     * - Must be a string
-    logger.info(`/Info Request receive by the Info Controller. URL: ${url}`);
+     * - Must pass custom URL validation
-
+     */
-    if (url.includes("?list")) {
+    if (!url || typeof url !== "string" || !isValidUrl(url)) {
-        logger.info("Estimated Data Type: Playlist")
+        return res.status(400).send("Invalid URL Or Missing");
-
-    } else{
-        logger.info("Estimated Data Type: Video")
     }
 
+    logger.info(`Info request received. URL: ${url}`);
+
+    // Lightweight heuristic to detect playlist URLs
+    const isPlaylistUrl = url.includes("&list") || url.includes("?list");
+
+    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
+                    throw err;
+                }
+
+            } else {
+                throw err;
+            }
+        }
+
+        /**
+         * Normalize response based on yt-dlp output type
+         */
+        if (data._type === "playlist") {
+
+            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) {
-        return res.status(500).send(`❌ ${err.message}`);
-    }
 
+        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,52 +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/No-Sense/FreedomLoader",
-    };
-
-    rpc.setActivity(presence);
-
-    // Met à jour la présence toutes les 15s
-    intervalId = setInterval(() => {
-      rpc.setActivity(presence);
-    }, 15000);
-  });
-
-  async function cleanExit() {
-    try {
-      if (intervalId) clearInterval(intervalId);
-
-      if (rpc && rpc.transport) {
-        await rpc.destroy();
-      }
-    } catch (err) {
-      logger.error("Error while closing the RPC:", err);
-    } finally {
-      process.exit();
-    }
-  }
-
-  process.on("exit", cleanExit);
-  process.on("SIGINT", cleanExit);
-  process.on("SIGTERM", cleanExit);
-
-  rpc.login({ clientId }).catch(err => {
-    logger.error("Unable to connect to the RPC:", err);
-  });
-}
-
-module.exports = { startRPC };

server/helpers/buildArgs.helpers.js

@@ -0,0 +1,127 @@
+const path = require("path");
+
+const getUserBrowser = require("./getBrowser.helpers.js");
+const { ffmpegPath, denoPath} = require("./path.helpers.js");
+const { configFeatures } = require("../../config.js");
+const { logger } = require("../logger.js");
+
+/**
+ * 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 = [
+    "av01","vp9.2", "vp9" , "h265" , "h264" , "vp8" , "h263", "theora" 
+  ]
+
+  if(validCodec.includes(codec)){
+      logger.info(`Codec Valid: ${codec}`)
+      return codec
+  } else{
+    logger.error(`Codec not valid: ${codec}. Using default codec`)
+    return "h264"
+  }
+}
+
+/**
+ * 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 }) {
+
+  logger.info("--- CONFIGURATION ---");
+
+  logger.info(`CONFIG autoUpdate: ${configFeatures.autoUpdate}`);
+  logger.info(`CONFIG discordRPC: ${configFeatures.discordRPC}`);
+  logger.info(`CONFIG customTopBar: ${configFeatures.customTopBar}`);
+  logger.info(`CONFIG autoCheckInfo: ${configFeatures.autoCheckInfo}`);
+  logger.info(`CONFIG addThumbnail: ${configFeatures.addThumbnail}`);
+  logger.info(`CONFIG addMetadata: ${configFeatures.addMetadata}`);
+  logger.info(`CONFIG verboseLogs: ${configFeatures.verboseLogs}`);
+  logger.info(`CONFIG autoDownloadPlaylist: ${configFeatures.autoDownloadPlaylist}`);
+  logger.info(`CONFIG customCodec: ${configFeatures.customCodec}`);
+
+  // ACTIVATE THEM WHEN THE FEATURE IS IMPLEMENTED
+  // logger.info(`CONFIG logSystem: ${configFeatures.logSystem}`);
+  // logger.info(`CONFIG outputTitleCheck: ${configFeatures.outputTitleCheck}`);
+  // logger.info(`CONFIG downloadSystem: ${configFeatures.downloadSystem}`);
+  // logger.info(`CONFIG notifySystem: ${configFeatures.notifySystem}`);
+
+  logger.info("---------------------");
+  
+  const args = [
+    configFeatures.verboseLogs ? "--verbose" : null, // Verbose Logs
+    "--cookies-from-browser", `${getUserBrowser()}`,
+    "--no-continue",
+    "--no-overwrites",
+    "--newline", // YT-DLP Logs Format 
+    configFeatures.addThumbnail ? "--embed-thumbnail" : null,
+    configFeatures.addMetadata ? "--add-metadata" : null,
+    "--concurrent-fragments", "8",
+    "--retries", "10",
+    "--fragment-retries", "10",
+    "--ffmpeg-location", ffmpegPath,
+    "--extractor-args","youtube:player_client=default",
+    "--js-runtimes", `deno:${denoPath}`,
+    "-S", 
+    `vcodec:${validateCodec(configFeatures.customCodec) || "h264"}`+
+    `,acodec:aac`,
+    configFeatures.autoDownloadPlaylist ? "--yes-playlist" : "--no-playlist"
+  ];
+
+  if (audioOnly) args.push("-f", "bestaudio", "--extract-audio", "--audio-format", "mp3");
+  else args.push("--merge-output", "mp4");
+
+  const qualityMap = {
+    best: "bestvideo+bestaudio/best/mp4",
+    medium: "bestvideo[height<=720]+bestaudio/best[height<=720]/mp4",
+    worst: "worstvideo+worstaudio/worst/mp4",
+    1080: "bestvideo[height<=1080]+bestaudio/best[height<=1080]/mp4",
+    720: "bestvideo[height<=720]+bestaudio/best[height<=720]/mp4",
+    480: "bestvideo[height<=480]+bestaudio/best[height<=480]/mp4",
+  };
+
+  args.push("-f", qualityMap[quality] || "best");
+  args.push("-o", path.join(outputFolder, "%(title)s.%(ext)s"));
+  args.push(url);
+
+  return args.filter(Boolean);
+}
+
+module.exports = { buildYtDlpArgs };
+

server/helpers/buildArgs.js

@@ -1,43 +0,0 @@
-const path = require("path");
-
-const getUserBrowser = require("./getBrowser");
-const { ffmpegPath, denoPath} = require("./path");
-
-
-function buildYtDlpArgs({ url, audioOnly, quality, outputFolder }) {
-  
-  const args = [
-    "--cookies-from-browser", `${getUserBrowser()}`,
-    "--no-continue",
-    "--no-overwrites",
-    "--embed-thumbnail",
-    "--add-metadata",
-    "--concurrent-fragments", "8",
-    "--retries", "10",
-    "--fragment-retries", "10",
-    "--ffmpeg-location", ffmpegPath,
-    "--extractor-args","youtube:player_client=default",
-    "--js-runtimes", `deno:${denoPath}`
-  ];
-
-  if (audioOnly) args.push("-f", "bestaudio", "--extract-audio", "--audio-format", "mp3");
-  else args.push("--merge-output", "mp4");
-
-  const qualityMap = {
-    best: "bestvideo+bestaudio/best/mp4",
-    medium: "bestvideo[height<=720]+bestaudio/best[height<=720]/mp4",
-    worst: "worstvideo+worstaudio/worst/mp4",
-    1080: "bestvideo[height<=1080]+bestaudio/best[height<=1080]/mp4",
-    720: "bestvideo[height<=720]+bestaudio/best[height<=720]/mp4",
-    480: "bestvideo[height<=480]+bestaudio/best[height<=480]/mp4",
-  };
-
-  args.push("-f", qualityMap[quality] || "best");
-  args.push("-o", path.join(outputFolder, "%(title)s.%(ext)s"));
-  args.push(url);
-
-  return args;
-}
-
-module.exports = { buildYtDlpArgs };
-

server/helpers/getBrowser.helpers.js

@@ -0,0 +1,102 @@
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+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 firefoxPath = getFirefoxProfilePath();
+
+  /**
+   * Browsers supported by yt-dlp cookie extraction.
+   *
+   * Only Firefox is currently enabled and tested.
+   * Additional browsers can be enabled in the future
+   * once compatibility has been verified.
+   */
+  const browsers = [
+    { name: "firefox", path: firefoxPath },
+    // { name: "chrome", path: path.join(userProfile, "AppData", "Local", "Google", "Chrome", "User Data", "Default") },
+    // { name: "brave", path: path.join(userProfile, "AppData", "Local", "BraveSoftware", "Brave-Browser", "User Data", "Default") },
+    // { 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 the first available browser profile.
+  for (const browser of browsers) {
+    if (browser.path && fs.existsSync(browser.path)) {
+      logger.info(`Browser found: ${browser.name}`);
+      return browser.name;
+    }
+  }
+
+  // No supported browser found => Notify User
+  logger.warn("No supported browser found on the system");
+
+  // If you somehow managed to live without Firefox and need help installing it. - Don't applied to my Linux chad
+  if (process.platform === "win32") {
+    notify.notifyFirefoxBrowserMissing();
+  }
+
+  // Fallback to Firefox and let yt-dlp handle the error gracefully.
+  // This prevents the application from crashing
+  return "firefox";
+}
+
+function getFirefoxProfilePath() {
+  const home = os.homedir();
+
+  if (process.platform === "win32") {
+    return path.join(
+      home,
+      "AppData",
+      "Roaming",
+      "Mozilla",
+      "Firefox",
+      "Profiles"
+    );
+  }
+
+  if (process.platform === "linux") {
+    return path.join(
+      "usr",
+      "bin",
+      "firefox"
+    );
+  }
+
+  if (process.platform === "darwin") {
+    return path.join(
+      home,
+      "Library",
+      "Application Support",
+      "Firefox",
+      "Profiles"
+    );
+  }
+
+  return null;
+}
+
+module.exports = getUserBrowser

server/helpers/getBrowser.js

@@ -1,32 +0,0 @@
-const fs = require("fs");
-const os = require("os");
-const path = require("path");
-const notify = require("./notify")
-
-function getUserBrowser() {
-  const userProfile = os.homedir();
-
-  // Liste des navigateurs supportés par yt-dlp (Actuellement je peux que garantir Firefox, Désolé)
-  const browsers = [
-    { name: "firefox", path: path.join(userProfile, "AppData", "Roaming", "Mozilla", "Firefox", "Profiles") },
-    // { name: "chrome", path: path.join(userProfile, "AppData", "Local", "Google", "Chrome", "User Data", "Default") },
-    // { name: "brave", path: path.join(userProfile, "AppData", "Local", "BraveSoftware", "Brave-Browser", "User Data", "Default") },
-    // { 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") }
-  ];
-
-  for (const browser of browsers) {
-    if (fs.existsSync(browser.path)) {
-      return browser.name;
-    } else{
-      notify.notifyFirefoxBrowserMissing();
-    }
-  }
-  notify.notifyCookiesBrowserError()
-  return ;
-}
-
-module.exports = getUserBrowser

server/helpers/notify.helpers.js

@@ -0,0 +1,81 @@
+const { Notification, shell } = require("electron");
+const { iconPaths } = require("./path.helpers");
+const { logger } = require("../logger");
+
+/**
+ * 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;
+  
+  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));
+  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",
+    body: "Unable to retrieve cookies. Please log in to your browser and click here to view the tutorial.",
+    icon: iconPaths.error,
+  });
+
+  notif.on("click", () =>
+    shell.openExternal(
+      "https://youtube.com/shorts/cN9f4s1Mf88?si=519QCVd_-fzJqRf1"
+    )
+  );
+
+  notif.show();
+}
+
+/**
+ * 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"
+    )
+  );
+
+  notif.show();
+}
+
+module.exports = {
+  notifyDownloadFinished,
+  notifyCookiesBrowserError,
+  notifyFirefoxBrowserMissing,
+};

server/helpers/notify.js

@@ -1,44 +0,0 @@
-const { Notification, shell } = require("electron");
-const path = require("path");
-
-function notifyDownloadFinished(folder) {
-  const iconPath = path.join(process.resourcesPath, "confirm-icon.png");
-  const notif = new Notification({
-    title: "Freedom Loader",
-    body: "Your download is complete, click here to open it.",
-    icon: iconPath,
-  });
-
-  notif.on("click", () => shell.openPath(folder));
-  notif.show();
-}
-
-function notifyCookiesBrowserError(){
-  const iconPath = path.join(process.resourcesPath, "error.png");
-  const notif = new Notification({
-    title: "Cookies Error",
-    body: "Unable to retrieve cookies. Please log in to your browser and click here to view the tutorial.",
-    icon: iconPath,
-  });
-
-  notif.on("click", () => shell.openExternal("https://youtube.com/shorts/cN9f4s1Mf88?si=519QCVd_-fzJqRf1"));
-  notif.show();
-}
-
-function notifyFirefoxBrowserMissing(){
-  const iconPath = path.join(process.ressourcesPath, "error.png");
-  const notif = new Notification({
-    title: "Firefox Missing",
-    body: "Firefox was not found on your system. Click here to follow the installation guide",
-    icon: iconPath,
-  });
-
-  notif.on("click", () => shell.openExternal("https://youtube.com/shorts/cN9f4s1Mf88?si=519QCVd_-fzJqRf1"))
-  notif.show();
-}
-
-module.exports = {
-  notifyDownloadFinished, 
-  notifyCookiesBrowserError,
-  notifyFirefoxBrowserMissing
-};

server/helpers/parseInfo.helpers.js

@@ -0,0 +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 {
+    type: "video",
+    ...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 {
+    type: "playlist",
+    title: data.title || data.id,
+    channel: data.uploader,
+    count: data.entries.length,
+    videos: (data.entries || []).map(v => ({
+      id: v.id,
+      title: v.title,
+      url: v.webpage_url,
+      duration: v.duration,
+      thumbnail: v.thumbnail,
+      uploader: v.uploader
+    }))
+  };
+}
+
+module.exports = { parseVideo, parsePlaylist };

server/helpers/parseInfo.js

@@ -1,33 +0,0 @@
-function parseVideo(data) {
-
-    return {
-        type: "video",
-        // id: data.id,
-        // title: data.title,
-        // url: data.webpage_url,
-        // duration: data.duration,
-        // thumbnail: data.thumbnail,
-        // uploader: data.uploader
-        ...data
-    };
-}
-
-function parsePlaylist(data) {
-    
-    return {
-        type: "playlist",
-        title: data.title || data.id,
-        channel: data.uploader,
-        count: data.entries.length,
-        videos: (data.entries || []).map(v => ({
-            id: v.id,
-            title: v.title,
-            url: v.webpage_url,
-            duration: v.duration,
-            thumbnail: v.thumbnail,
-            uploader: v.uploader
-        }))
-    };
-}
-
-module.exports = { parseVideo, parsePlaylist };

server/helpers/path.helpers.js

@@ -0,0 +1,269 @@
+const path = require("path");
+const fs = require("fs");
+const { app } = require("electron");
+const config = require("../../config.js");
+
+/**
+ * Is the OS windows
+ */
+const isWindows = process.platform === 'win32'
+
+/**
+ * On windows the binaries are name.exe on Linux/macOS no
+ */
+const ext = isWindows ? '.exe' : ''
+
+/**  Centralized resource paths */
+const resourcesPath = config.devMode
+  ? path.join(__dirname, "../../resources")
+  : process.resourcesPath;
+
+/**  Default download folder (centralized) */
+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.
+ */
+
+let userYtDlp;
+let ffmpegPath;
+let denoPath;
+
+/** Source binary bundled inside application resources (used for first-time copy) */
+const sourceYtDlp = path.join(
+  binariesPath,
+  `yt-dlp${ext}`
+);
+
+/**
+ * Resolve binary locations depending on environment:
+ * - dev: local resources folder
+ * - 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${ext}`
+  );
+
+  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}`);
+      }
+    }
+  }
+}
+
+/**
+ * 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")
+};
+
+/**
+ * Static reference paths to bundled binaries.
+ * Used mainly for verification and diagnostics.
+ */
+const binaryPaths = {
+  ytDlp: path.join(
+    binariesPath,
+    `yt-dlp${ext}`
+  ),
+
+  ffmpeg: path.join(
+    binariesPath,
+    `ffmpeg${ext}`
+  ),
+
+  ffprobe: path.join(
+    binariesPath,
+    `ffprobe${ext}`
+  ),
+
+  deno: path.join(
+    binariesPath,
+    `deno${ext}`
+  )
+};
+
+/**
+ * Theme storage system:
+ * - 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(resourcesPath, "theme");
+
+/**
+ * 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 {winston.Logger}
+ */
+function getLogger() {
+    return require("../logger.js").logger;
+}
+
+module.exports = { userYtDlp, ffmpegPath, denoPath, iconPaths, binaryPaths, resourcesPath, defaultDownloadFolder, userThemesPath, initUserThemes, isWindows, validateBinaries };

server/helpers/path.js

@@ -1,26 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-const { app } = require("electron");
-const config = require("../../config");
-
-let userYtDlp;
-let ffmpegPath;
-let denoPath;
-
-const sourceYtDlp = path.join(process.resourcesPath, "yt-dlp.exe");
-
-if (config.localMode) {
-  userYtDlp = path.join(__dirname, "../../ressources/yt-dlp.exe");
-  ffmpegPath = path.join(__dirname, "../../ressources"); // <- contient ffmpeg.exe et ffprobe.exe
-  denoPath = path.join(__dirname, "../../ressources/deno.exe"); 
-} else {
-  userYtDlp = path.join(app.getPath("userData"), "yt-dlp.exe");
-  ffmpegPath = path.join(process.resourcesPath, "ffmpeg.exe"); 
-  denoPath = path.join(process.resourcesPath, "deno.exe");
-
-  if (!fs.existsSync(userYtDlp)) {
-    fs.copyFileSync(sourceYtDlp, userYtDlp);
-  }
-}
-
-module.exports = { userYtDlp, ffmpegPath, denoPath };

server/helpers/rateLimit.helpers.js

@@ -0,0 +1,24 @@
+const RateLimit = require("express-rate-limit");
+
+
+/**
+ * Rate limiter middleware used to protect public endpoints
+ * against abusive or excessive requests.
+ *
+ * Restrictions:
+ * - 5 requests per IP address
+ * - 15-minute sliding window
+ *
+ * When the limit is exceeded, a HTTP 429 (Too Many Requests)
+ * response is returned.
+ */
+const rateLimit = RateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 5,
+  message: "Too many requests, please try again later.",
+  statusCode: 429,
+});
+
+module.exports = {
+    rateLimit
+}

server/helpers/validation.helpers.js

@@ -0,0 +1,43 @@
+const path = require("path");
+
+/**
+ * Validates whether the provided string is a well-formed URL.
+ *
+ * The validation relies on the native URL constructor and
+ * returns `true` only if the value can be successfully parsed.
+ *
+ * @param {string} url - URL to validate.
+ * @returns {boolean} True if the URL is valid, otherwise false.
+ */
+function isValidUrl(url) {
+  try {
+    new URL(url);
+    return true;
+
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Validates whether a folder path is considered safe for
+ * file operations.
+ *
+ * Security checks:
+ * - Rejects empty or very short paths.
+ * - Resolves the absolute path before validation.
+ * - Prevents access to sensitive Windows system directories.
+ *
+ * @param {string} folder - Folder path to validate.
+ * @returns {boolean} True if the path is considered safe, otherwise false.
+ */
+function isSafePath(folder) {
+  if (!folder || folder.length < 3) return false;
+
+  const unsafe = ["System32", "\\Windows"];
+  const resolved = path.resolve(folder);
+
+  return !unsafe.some(u => resolved.includes(u));
+}
+
+module.exports = { isValidUrl, isSafePath };

server/helpers/validation.js

@@ -1,21 +0,0 @@
-const path = require("path");
-
-function isValidUrl(url) { 
-  try { 
-      new URL(url); 
-      return true; 
-      
-    } catch { 
-      return false; 
-    } 
-
-}
-
-function isSafePath(folder) {
-  if (!folder || folder.length < 3) return false;
-  const unsafe = ["System32", "/etc", "\\Windows"];
-  const resolved = path.resolve(folder);
-  return !unsafe.some(u => resolved.includes(u));
-}
-
-module.exports = { isValidUrl, isSafePath };

server/logger.js

@@ -3,20 +3,34 @@ const DailyRotateFile = require("winston-daily-rotate-file");
 const fs = require("fs");
 const path = require("path");
 const os = require("os");
-const config = require("../config")
+const config = require("../config");
+const {isWindows} = require("./helpers/path.helpers");
+const { logSystemInfo } = require("./sysinfo");
 
-// Dossier de logs Windows
+// Logs folder in Windows
-const logDir = path.join(os.homedir(), "AppData", "Local", "FreedomLoader", "logs");
+const logDir = isWindows ? path.join(os.homedir(), "AppData", "Local", "FreedomLoader", "logs") : path.join(process.env.XDG_DATA_HOME || path.join(os.homedir(), ".local", "share"),  "FreedomLoader", "logs");
 
-// Création du dossier "logs" si nécessaire
+// Create "Logs" folder if needed
-fs.mkdirSync(logDir, { recursive: true });
+try {
+  fs.mkdirSync(logDir, { recursive: true });
+} catch (error) {
+  console.error(`Failed to create log directory: ${error.message}`);
+}
 
 const logFormat = format.combine(
   format.timestamp({ format: "YYYY-MM-DD HH:mm:ss" }),
   format.printf(({ timestamp, level, message }) => `${timestamp} | ${level.toUpperCase()} |  ${message}`)
 );
 
-// Configuration du logger
+/**
+ * Logger Instance with differents types
+ *  - info
+ *  - error
+ *  - warn 
+ * 
+ * You need to specify the text that need to be displayed
+ * @param string
+ */
 const logger = createLogger({
   level: "info",
   format: logFormat,
@@ -36,21 +50,20 @@ const logger = createLogger({
   ],
 });
 
-function getSessionStartLine() {
+/**
-  return `--- Starting session: ${new Date().toISOString()} ---`;
+ * Start Log Session 
-}
+ */
-
+function logSessionStart(logDir, downloadPath) {
-function getSessionEndLine() {
+  logger.info(`--- Starting session: ${new Date().toISOString()} ---`);
-  return `--- Ending session: ${new Date().toISOString()} ---`;
-}
-
-function logSessionStart() {
-  logger.info(getSessionStartLine());
   logger.info(`Application Version: ${config.version}`)
+  logSystemInfo(logger, logDir, downloadPath)
 }
 
+/**
+ * Stop Log Session
+ */
 function logSessionEnd() {
-  logger.info(getSessionEndLine());
+  logger.info(`--- Ending session: ${new Date().toISOString()} ---`);
 }
 
 module.exports = {