Merge pull request #58 from MasterAcnolo/1.6.4

1.6.4 Version

.github/ISSUE_TEMPLATE/question.md

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

.gitignore

@@ -6,12 +6,21 @@
 /out
 /srpm-out
 
+# .env
+*.env
+
 # Config JSON File. Create it and fill it if you want to have dev only settings
 config/config.dev.json
 
 # IDE
-/.idea
+.idea/
-/.vscode
+.vscode/
+.zed/
+
+# OS generated files
+.DS_Store
+.DS_Store?
+Thumbs.db
 
 # Linux executable
 ffmpeg

CONTRIBUTING.md

@@ -112,8 +112,8 @@ See [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) for details.
 
 ## Questions?
 
-- Check the [FAQ](https://masteracnolo.github.io/Freedom-Loader-Site/faq)
+- Check the [FAQ](https://freedomloader.acnolo.fr/faq)
-- Review the [Wiki](https://masteracnolo.github.io/Freedom-Loader-Site/wiki)
+- Review the [Wiki](https://freedomloader.acnolo.fr/wiki)
 - Open a [Question issue](https://github.com/MasterAcnolo/Freedom-Loader/issues/new/choose)
 
 ---

README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-  <a href="https://masteracnolo.github.io/Freedom-Loader-Site/"><img
+<a href="https://freedomloader.acnolo.fr/"><img
     src="./build/banner.png"
     alt="Banner"
     style="width: 50%;"/></a>
@@ -9,7 +9,7 @@
 
 [![Release](https://img.shields.io/github/v/release/MasterAcnolo/Freedom-Loader?style=for-the-badge&color=blue)](https://github.com/MasterAcnolo/Freedom-Loader/releases)
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-red.svg?style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0)
-[![Website](https://img.shields.io/badge/Website-Visit-404040?style=for-the-badge)](https://masteracnolo.github.io/Freedom-Loader-Site/)
+[![Website](https://img.shields.io/badge/Website-Visit-404040?style=for-the-badge)](https://freedomloader.acnolo.fr/)
 [![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>
 
@@ -56,7 +56,7 @@ The primary goal is to make media downloading accessible to users who want offli
 
 ### User Interface
 
-- **Custom window controls** - Frameless window with custom top bar (optional)
+- **Custom window controls** - Frameless window with custom top bar
 - **Custom themes** - ZIP-based theme system with live preview
 - **Theme Workshop** - web-based theme creator and browser
 - **Toast notifications** - in-app feedback system
@@ -151,6 +151,7 @@ freedom-loader
 |---------------|---------------------------------------------------------|--------------------------------------|
 | **Downloads** | `C:\Users\[USERNAME]\Downloads\Freedom Loader`          | `~/Downloads/Freedom Loader`         |
 | **Logs**      | `C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\` | `~/.local/share/FreedomLoader/logs/` |
+| **Cache**     | ``
 
 > [!NOTE]
 > The download folder can be changed anytime via the "Edit" button in the UI, on both platforms.
@@ -224,10 +225,8 @@ Freedom Loader can be configured either through the settings panel in the UI or
 ### Available Options
 ```json
 {
-  "autoUpdate": true,
   "systemTray": true,
   "discordRPC": true,
-  "customTopBar": true,
   "autoCheckInfo": true,
   "addThumbnail": true,
   "addMetadata": true,
@@ -241,6 +240,7 @@ Freedom Loader can be configured either through the settings panel in the UI or
   "downloadSystem": true,
   "notifySystem": true,
   "enableHardwareAcceleration": true,
+  "showChanglogsAfterUpdate": true,
   "theme": "dark" 
 }
 ```
@@ -249,10 +249,8 @@ Freedom Loader can be configured either through the settings panel in the UI or
 
 | Option                       | Type    | Default  | Description                                                |
 |------------------------------|---------|----------|------------------------------------------------------------|
-| `autoUpdate`                 | boolean | `true`   | Enable automatic application updates                       |
+| `systemTray`                 | boolean | `false`  | Allow app to minimize on close                             |
-| `systemTray`                 | boolean | `false`   | Allow app to minimize on close [EXPERIMENTAL]              |
 | `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                      |
@@ -266,6 +264,7 @@ Freedom Loader can be configured either through the settings panel in the UI or
 | `downloadSystem`             | boolean | `true`   | Enable download system                                     |
 | `notifySystem`               | boolean | `true`   | Enable system notifications                                |
 | `enableHardwareAcceleration` | boolean | `true`   | Enable Hardware Acceleration                               |
+| `showChanglogsAfterUpdate`   | boolean | `true`   | Auto-display changelog popup after and update              |
 | `theme`                      | string  | `dark`   | Current Theme Name                                         |
 
 ### Supported Codecs
@@ -354,7 +353,7 @@ See [BINARIES.md](./BINARIES.md) for how to setup the binaries.
 
 ## Roadmap
 
-See the most recent Roadmap [Here](https://masteracnolo.github.io/Freedom-Loader-Site/Roadmap).
+See the most recent Roadmap [Here](https://freedomloader.acnolo.fr/Roadmap).
 
 ## Contributing
 
@@ -367,13 +366,29 @@ Head over to the [Freedom Loader Workshop repository](https://github.com/MasterA
 
 ### Bug Reports
 
-Use the GitHub Issues system and include:
+You can report bugs either using the built-in application system or via the GitHub Issues system.
+
+#### Using the Built-in Report Tool
+
+1. Open Freedom Loader.
+2. Trigger the bug report interface.
+3. Fill in the title and description of the issue.
+4. Choose whether to include today's logs automatically.
+5. Submit the report.
+
+> [!NOTE]
+> If you need to attach extra context like screenshots or screen recordings, it is recommended to use the GitHub Issues
+system instead.
+
+#### Using GitHub Issues
+
+Open a new issue on the GitHub repository and include:
 
 - Clear description of the issue
 - Steps to reproduce
 - Expected vs actual behavior
 - Relevant logs from `AppData\Local\FreedomLoader\logs\` or `~/.local/share/FreedomLoader/logs/`
-- Screenshots if applicable
+- Screenshots or recordings if applicable
 
 ### Feature Requests
 
@@ -418,6 +433,6 @@ You are free to use, modify, and redistribute this software under the terms of t
 
 **Freedom Loader** - Put freedom in your downloads
 
-[Website](https://masteracnolo.github.io/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)
+[Website](https://freedomloader.acnolo.fr/) • [Download](https://github.com/MasterAcnolo/Freedom-Loader/releases) • [Documentation](https://freedomloader.acnolo.fr/wiki) • [Report Bug](https://github.com/MasterAcnolo/Freedom-Loader/issues)
 
 </div>

app/autoUpdater.js

@@ -9,7 +9,6 @@
  */
 
 const { autoUpdater } = require("electron-updater");
-const { dialog } = require("electron");
 const { logger } = require("../server/logger");
 
 /**
@@ -21,6 +20,26 @@ const { logger } = require("../server/logger");
 autoUpdater.autoDownload = false;
 autoUpdater.autoInstallOnAppQuit = false;
 
+let updateAvailable = false;
+
+/**
+ * Determines how the update should be handled based on the platform
+ * @returns {"auto" | "snap" | "flatpak" | "linux-native"}
+ */
+function getUpdateEnvironment() {
+  if (
+    process.env.APPIMAGE ||
+    process.platform === "win32" ||
+    process.platform === "darwin"
+  ) {
+    return "auto";
+  }
+  if (process.env.SNAP) return "snap";
+  if (process.env.FLATPAK_ID) return "flatpak";
+
+  return "linux-native";
+}
+
 /**
  * Initializes application auto-update lifecycle.
  *
@@ -32,7 +51,6 @@ autoUpdater.autoInstallOnAppQuit = false;
  * @param {BrowserWindow} mainWindow - main Electron window instance
  */
 function initAutoUpdater(mainWindow) {
-
   /**
    * Triggered when a new version is detected.
    * Prompts user to install or defer update.
@@ -40,23 +58,12 @@ function initAutoUpdater(mainWindow) {
   autoUpdater.on("update-available", async (info) => {
     logger.info(`Update available: ${info.version}`);
 
-    const { response } = await dialog.showMessageBox(mainWindow, {
+    mainWindow?.webContents.send("update-available", {
-      type: "info",
+      version: info.version,
-      title: "Update Available",
+      environment: getUpdateEnvironment(),
-      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,
     });
+    updateAvailable = true;
 
-    if (response === 0) {
-      await autoUpdater.downloadUpdate();
-    } else {
-      mainWindow?.webContents.executeJavaScript(
-        `window.showUpdateBadge && window.showUpdateBadge("${info.version}")`
-      );
-    }
   });
 
   /**
@@ -66,8 +73,10 @@ function initAutoUpdater(mainWindow) {
   autoUpdater.on("download-progress", (progress) => {
     logger.info(`Download progress: ${Math.round(progress.percent)}%`);
     mainWindow?.webContents.send("update-progress", {
-      percent: Math.round(progress.percent),
+      percent: progress.percent,
-      speed: progress.bytesPerSecond,
+      bytesPerSecond: progress.bytesPerSecond,
+      transferred: progress.transferred,
+      total: progress.total,
     });
   });
 
@@ -78,17 +87,9 @@ function initAutoUpdater(mainWindow) {
   autoUpdater.on("update-downloaded", async (info) => {
     logger.info(`Update downloaded: ${info.version}`);
 
-    const { response } = await dialog.showMessageBox(mainWindow, {
+    mainWindow?.webContents.send("update-downloaded", info);
-      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();
   });
 
   /**
@@ -102,14 +103,16 @@ function initAutoUpdater(mainWindow) {
      * 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);
+    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);
+    logger.error("Auto update error:", err);
+    mainWindow?.webContents.send("update-error", msg);
   });
 
   checkForUpdates();
@@ -121,18 +124,9 @@ function initAutoUpdater(mainWindow) {
  */
 async function checkForUpdates() {
 
-  /**
+  // If app is was installed from SNAP or Flatpak.
-   * Prevents electron-updater from running inside sandboxed environments.
+  if (process.env.SNAP || process.env.FLATPAK_ID) return;
-   * Snap and Flatpak lock the file system in read-only mode, causing the updater to crash.
+  if (!require("electron").app.isPackaged) return;
-   * In these environments, updates are safely handled by snapd or the Flatpak runtime.
-   * Standalone Linux packages (.deb, .rpm, AppImage) will bypass this and update normally.
-   */
-  if (process.env.SNAP || process.env.FLATPAK_ID) {
-    logger.info("Running as Snap or Flatpak. Updates are managed by the OS store. Skipping electron-updater.");
-    return;
-  }
-
-  if (!require("electron").app.isPackaged) return ;
 
   try {
     await autoUpdater.checkForUpdates();
@@ -150,6 +144,7 @@ async function downloadUpdate() {
     await autoUpdater.downloadUpdate();
   } catch (err) {
     logger.error("Download failed:", err.message);
+    throw err;
   }
 }
 
@@ -160,4 +155,13 @@ function installUpdate() {
   autoUpdater.quitAndInstall();
 }
 
-module.exports = { initAutoUpdater, downloadUpdate, installUpdate };
+function isUpdateAvailable() {
+  return updateAvailable;
+}
+
+module.exports = {
+  initAutoUpdater,
+  downloadUpdate,
+  installUpdate,
+  isUpdateAvailable,
+};

app/changelogManager.js

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

app/discordRPC.js

@@ -95,9 +95,9 @@ function startRPC() {
       smallImageText: "By MasterAcnolo",
       startTimestamp: new Date(),
       details: `Open Source Download Tools - ${config.version}`,
-      state: "masteracnolo.github.io/FreedomLoader",
+      state: "freedomloader.acnolo.fr",
     };
-    rpc.clearActivity()
+    rpc.clearActivity();
     rpc.setActivity(presence);
 
   });

app/ipcHandlers.js

@@ -13,12 +13,15 @@
 const { ipcMain, dialog, shell } = require("electron");
 const fs = require("fs");
 const { logger, logDir } = require("../server/logger");
-const {configFeatures, featuresPath, devMode} = require("../config");
+const { configFeatures, featuresPath, devMode } = require("../config");
 const { getThemes, reloadThemes } = require("./themeManager");
 const config = require("../config");
 const { validateDownloadPath, getDefaultDownloadPath } = require("./pathValidator");
 const { userThemesPath } = require("../server/helpers/path.helpers");
 const { createSystemTray, destroyTray } = require("./tray");
+const {sendReport, checkReportService, getReportServiceStatus} = require("./sendReport");
+const { isUpdateAvailable, downloadUpdate, installUpdate } = require("./autoUpdater");
+const { getChangelog, markChangelogSeen } = require("./changelogManager");
 
 /**
  * Security whitelist for feature flags that can be modified at runtime.
@@ -27,10 +30,8 @@ const { createSystemTray, destroyTray } = require("./tray");
  * Acts as a basic validation layer for IPC "set-feature".
  */
 const FEATURE_WHITELIST = new Set([
-  "autoUpdate",
   "systemTray",
   "discordRPC",
-  "customTopBar",
   "autoCheckInfo",
   "addThumbnail",
   "addMetadata",
@@ -41,7 +42,8 @@ const FEATURE_WHITELIST = new Set([
   "theme",
   "createPlaylistFolders",
   "notifySystem",
-  "enableHardwareAcceleration"
+  "enableHardwareAcceleration",
+  "showChanglogsAfterUpdate"
 ]);
 
 /**
@@ -64,12 +66,21 @@ const themeFolderPath = userThemesPath;
  * @param {Function} getMainWindow - Function returning current BrowserWindow instance
  */
 function registerIpcHandlers(getMainWindow) {
-    
   /**
    * Returns application version from config.
    */
   ipcMain.handle("version", () => config.version);
 
+  /**
+   * Retrieves the changelog from cache or GitHub API.
+   */
+  ipcMain.handle("get-changelog", () => getChangelog());
+
+  /**
+   * Marks all changelog entries as seen and updates cache.
+   */
+  ipcMain.handle("mark-changelog-seen", () => markChangelogSeen());
+
   /**
    * Returns runtime feature configuration object.
    */
@@ -117,15 +128,14 @@ function registerIpcHandlers(getMainWindow) {
   ipcMain.on("window-minimize", () => {
     // Minimize to tray
     if (configFeatures.systemTray) {
-          getMainWindow()?.hide()
+      getMainWindow()?.hide();
       logger.info("Window Minimized in SystemTray (Using Minimize Button)");
     } else {
       // Native minimize
-          getMainWindow()?.minimize()
+      getMainWindow()?.minimize();
       logger.info("Window minimized normally");
     }
-      }
+  });
-  );
 
   /**
    * Toggles maximize/unmaximize state of main window.
@@ -141,7 +151,6 @@ function registerIpcHandlers(getMainWindow) {
    */
   ipcMain.on("window-close", () => getMainWindow()?.close());
 
-
   /**
    * Opens Chromium DevTools in detached mode.
    */
@@ -158,14 +167,14 @@ function registerIpcHandlers(getMainWindow) {
    * Opens external website in default browser.
    */
   ipcMain.on("open-website", () =>
-    shell.openExternal("https://masteracnolo.github.io/Freedom-Loader-Site/")
+      shell.openExternal("https://freedomloader.acnolo.fr/")
   );
 
   /**
    * Opens official wiki page in external browser.
    */
   ipcMain.on("open-wiki", () =>
-    shell.openExternal("https://masteracnolo.github.io/Freedom-Loader-Site/wiki")
+      shell.openExternal("https://freedomloader.acnolo.fr/wiki")
   );
 
   /**
@@ -180,7 +189,12 @@ function registerIpcHandlers(getMainWindow) {
    */
   ipcMain.on("open-config", () => shell.openPath(configFolderPath));
 
-  
+  /**
+   * Front end logger
+   */
+  ipcMain.on("log-error", (_, message) => logger.error(`[Frontend] ${message}`));
+  ipcMain.on("log-info", (_, message) => logger.info(`[Frontend] ${message}`));
+  ipcMain.on("log-warn", (_, message) => logger.warn(`[Frontend] ${message}`));
 
   /**
    * Retrieves available themes from filesystem.
@@ -199,6 +213,36 @@ function registerIpcHandlers(getMainWindow) {
     return await reloadThemes();
   });
 
+  /**
+   * Send bug report
+   */
+  ipcMain.handle("send-report", async (_, params) => {
+    return await sendReport(params);
+  });
+
+  ipcMain.handle("get-report-service-status", async () => {
+    await checkReportService();
+    return getReportServiceStatus();
+  });
+
+  ipcMain.handle("is-update-available", () => {
+    return isUpdateAvailable();
+  });
+
+  ipcMain.handle("download-update", async () => {
+    return await downloadUpdate();
+  });
+
+  ipcMain.handle("install-update", async () => {
+    return installUpdate();
+  });
+
+  ipcMain.on("open-release-page", () => {
+    shell.openExternal(
+      "https://github.com/MasterAcnolo/Freedom-Loader/releases/latest",
+    );
+  });
+
   /**
    * Updates a runtime feature flag and persists it to disk.
    *
@@ -246,12 +290,11 @@ function registerIpcHandlers(getMainWindow) {
       fs.writeFileSync(
         configFolderPath,
         JSON.stringify(configFeatures, null, 2),
-            "utf-8"
+        "utf-8",
       );
 
       logger.info(`Feature updated: ${key} = ${value}`);
       return true;
-
     } catch (err) {
       logger.error(`set-feature failed (${key}): ${err.message}`);
       return false;

app/sendReport.js

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

app/tray.js

@@ -95,7 +95,7 @@ function createSystemTray(devMode) {
         } else {
             window.show();
             window.focus();
-            logger.info("Window Restored from SystemTray (Double Click on Tray Icon)")
+            logger.info("Window Restored from SystemTray (Double Click on Tray Icon)");
         }
     });
 

app/windowManager.js

@@ -57,7 +57,7 @@ async function createMainWindow() {
     height: 800,
     minWidth: 750,
     minHeight: 800,
-    frame: !configFeatures.customTopBar,
+    frame: false, // Force custom topbar for consistent UI across platforms, and less maintenance headaches with native titlebar actions
     devTools: !app.isPackaged,
     show: false, 
     webPreferences: {

config/config.default.json

@@ -1,8 +1,6 @@
 {
-  "autoUpdate": true,
   "systemTray": false,
   "discordRPC": true,
-  "customTopBar": true,
   "autoCheckInfo": true,
   "addThumbnail": true,
   "addMetadata": true,
@@ -16,5 +14,6 @@
   "downloadSystem": true,
   "notifySystem": true,
   "enableHardwareAcceleration": true,
+  "showChanglogsAfterUpdate": true,
   "theme": "dark" 
 }

eslint.config.js

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

main.js

@@ -13,6 +13,9 @@ process.on("unhandledRejection", (reason) => {
   app.quit();
 });
 
+if (process.platform === 'linux') {
+  app.setDesktopName('com.masteracnolo.freedomloader.desktop');
+}
 
 /**
  * True if this is the primary instance (lock acquired successfully)
@@ -48,9 +51,9 @@ const { configFeatures, devMode} = require("./config");
  */
 if (!configFeatures.enableHardwareAcceleration){
   app.disableHardwareAcceleration();
-  logger.info("Disabled Hardware Acceleration")
+  logger.info("Disabled Hardware Acceleration");
 } else {
-  logger.info("Enable Hardware Acceleration")
+  logger.info("Enable Hardware Acceleration");
 }
 
 if(devMode){
@@ -59,7 +62,7 @@ if(devMode){
    */
   const { devtron } = require('@electron/devtron');
   devtron.install();
-  logger.info("Loaded DevTron Extension")
+  logger.info("Loaded DevTron Extension");
 }
 
 /**
@@ -77,6 +80,7 @@ const { createSplashWindow, closeSplashWindow, setSplashProgress } = require("./
 const { userThemesPath, initUserThemes, validateBinaries, defaultDownloadFolder } = require("./server/helpers/path.helpers");
 const {createSystemTray, destroyTray} = require("./app/tray");
 const { stopServer } = require("./server/server");
+const {checkReportService} = require("./app/sendReport");
 
 /**
  * Global flag indicating if the application is intentionally shutting down.
@@ -132,6 +136,9 @@ app.on("second-instance", () => {
 
 app.whenReady().then(async () => {
   logSessionStart(logDir, defaultDownloadFolder);
+  checkReportService().catch((err) => {
+    logger.warn(`Bug report service startup check failed: ${err.message}`);
+  });
 
   createSplashWindow();
 
@@ -166,7 +173,7 @@ app.whenReady().then(async () => {
 
     if (configFeatures.discordRPC) startRPC();
 
-    if (configFeatures.autoUpdate) initAutoUpdater(getMainWindow());
+    initAutoUpdater(getMainWindow());
 
   } catch (err) {
     logger.error("Boot error:", err);

package.json

@@ -2,10 +2,10 @@
   "name": "freedom-loader",
   "desktopName": "com.masteracnolo.freedomloader",
   "productName": "Freedom Loader",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "author": "MasterAcnolo <MasterAcnolo@users.noreply.github.com>",
   "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/",
+  "homepage": "https://freedomloader.acnolo.fr/",
   "repository": {
     "type": "git",
     "url": "https://github.com/MasterAcnolo/Freedom-Loader.git"
@@ -16,6 +16,7 @@
   },
   "main": "main.js",
   "scripts": {
+    "clean:dist": "rm -rf dist/ && rm -rf srpm-out/",
     "start": "electron --no-warnings .",
     "start:warn": "electron --trace-warnings .",
     "start:debug": "WAYLAND_DEBUG=1 ELECTRON_ENABLE_LOGGING=1 ELECTRON_ENABLE_STACK_DUMPING=1 electron --enable-logging --v=1 .",
@@ -25,13 +26,17 @@
     "build": "electron-builder",
     "build:win": "electron-builder --win",
     "build:linux": "electron-builder --linux",
-    "build:rpm": "bash scripts/create-copr-package.sh",
+    "build:rpm": "npm run clean:dist && npm run build:linux && bash scripts/create-copr-package.sh",
     "build:all": "electron-builder -wl",
     "release": "bash scripts/release.sh",
     "release:publish": "bash scripts/release.sh --publish",
     "release:dry-run": "bash scripts/release.sh --dry-run",
     "test": "jest",
     "test:unit": "jest test/unit",
+    "test:metainfo": "appstreamcli validate package/com.masteracnolo.freedomloader.metainfo.xml",
+    "test:desktop": "desktop-file-validate package/com.masteracnolo.freedomloader.desktop",
+    "lint": "eslint . --format pretty",
+    "lint:fix": "eslint . --fix --format pretty",
     "update": "npm update"
   },
   "dependencies": {
@@ -48,16 +53,21 @@
   },
   "devDependencies": {
     "@electron/devtron": "^2.1.1",
+    "@eslint/js": "^10.0.1",
     "@jest/globals": "^30.4.1",
     "@playwright/test": "^1.62.1",
     "electron": "^44.3.0",
     "electron-builder": "^26.15.3",
+    "eslint": "^10.10.0",
+    "eslint-formatter-pretty": "^7.1.0",
+    "globals": "^17.12.0",
     "jest": "^30.4.2",
     "nodemon": "^3.1.14",
     "playwright": "^1.62.1"
   },
   "build": {
     "appId": "com.masteracnolo.freedomloader",
+    "artifactName": "Freedom-Loader-${version}.${ext}",
     "productName": "Freedom Loader",
     "publish": [
       {
@@ -68,10 +78,15 @@
       }
     ],
     "files": [
-      "**/*",
+      "app/**/*",
-      "node_modules/**/*",
+      "public/**/*",
-      "!config/config.dev.json",
+      "server/**/*",
-      "!theme/**/*"
+      "build/**/*",
+      "config/config.default.json",
+      "config.js",
+      "main.js",
+      "preload.js",
+      "package.json"
     ],
     "directories": {
       "buildResources": "build"

package/com.masteracnolo.freedomloader.desktop

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

package/com.masteracnolo.freedomloader.metainfo.xml

@@ -45,7 +45,7 @@
         </p>
     </description>
 
-    <launchable type="desktop-id">freedom-loader.desktop</launchable>
+    <launchable type="desktop-id">com.masteracnolo.freedomloader.desktop</launchable>
 
     <url type="homepage">https://github.com/MasterAcnolo/Freedom-Loader</url>
     <url type="bugtracker">https://github.com/MasterAcnolo/Freedom-Loader/issues</url>

preload.js

@@ -8,6 +8,26 @@ const { contextBridge, ipcRenderer } = require("electron");
  * All calls are explicitly whitelisted.
  */
 contextBridge.exposeInMainWorld("electronAPI", {
+  /**
+   * Sends error log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logError: (...args) => ipcRenderer.send("log-error", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
+
+  /**
+   * Sends info log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logInfo: (...args) => ipcRenderer.send("log-info", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
+
+  /**
+   * Sends warning log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logWarn: (...args) => ipcRenderer.send("log-warn", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
 
   /**
    * Return process.platform to renderer
@@ -42,14 +62,23 @@ contextBridge.exposeInMainWorld("electronAPI", {
    * @param {string} key - Feature name
    * @param {any} value - Feature value
    */
-  setFeature: (key, value) =>
+  setFeature: (key, value) => ipcRenderer.invoke("set-feature", { key, value }),
-    ipcRenderer.invoke("set-feature", { key, value }),
 
   /**
    * Returns the current application version.
    */
   getVersion: () => ipcRenderer.invoke("version"),
 
+  /**
+   * Returns the changelog data 
+   */
+  getChangelog: () => ipcRenderer.invoke("get-changelog"),
+
+  /**
+   * Marks the current changelog version as seen by the user.
+   */
+  markChangelogSeen: () => ipcRenderer.invoke("mark-changelog-seen"),
+
   /**
    * Validates a download path before using it for file operations.
    *
@@ -67,8 +96,70 @@ contextBridge.exposeInMainWorld("electronAPI", {
    * Forces a reload of theme files (useful after modification/import).
    */
   reloadThemes: () => ipcRenderer.invoke("reload-themes"),
-});
 
+  /*
+   * ==========================================
+   * Auto Updater IPC
+   * ==========================================
+   */
+
+  /**
+   * Checks if an update has already been detected by the main process.
+   *
+   * @returns {Promise<boolean>} Resolves to true if an update is available.
+   */
+  isUpdateAvailable: () => ipcRenderer.invoke("is-update-available"),
+
+  /**
+   * Subscribes to the update available event pushed by the main process.
+   *
+   * @param {Function} callback - Function executed with update info when an update is found.
+   */
+  onUpdateAvailable: (callback) =>
+    ipcRenderer.on("update-available", (_, info) => callback(info)),
+
+  /**
+   * Instructs the main process to start downloading the available update.
+   *
+   * @returns {Promise<void>}
+   */
+  downloadUpdate: () => ipcRenderer.invoke("download-update"),
+
+  /**
+   * Instructs the main process to quit the application and install the downloaded update.
+   *
+   * @returns {Promise<void>}
+   */
+  installUpdate: () => ipcRenderer.invoke("install-update"),
+
+  /**
+   * Subscribes to the update error event.
+   *
+   * @param {Function} callback - Function executed with error information when an update error occurs.
+   * @returns {Electron.IpcRenderer}
+   */
+  onUpdateError: (callback) => ipcRenderer.on("update-error", (_, err) => callback(err)),
+
+  /**
+   * Subscribes to the download progress event.
+   *
+   * @param {Function} callback - Function executed with progress metrics (percent, bytesPerSecond, transferred, total).
+   * @returns {Electron.IpcRenderer}
+   */
+  onDownloadProgress: (callback) =>
+    ipcRenderer.on("update-progress", (_, progress) => callback(progress)),
+
+  /**
+   * Subscribes to the update downloaded event.
+   * Triggered when the update file is fully downloaded and ready to install.
+   *
+   * @param {Function} callback - Function executed with update info.
+   */
+  onUpdateDownloaded: (callback) =>
+    ipcRenderer.on("update-downloaded", (_, info) => callback(info)),
+
+  openReleasePage: () => ipcRenderer.send("open-release-page"),
+});
 
 /**
  * Exposes window control and developer utilities for the custom topbar UI.
@@ -76,7 +167,6 @@ contextBridge.exposeInMainWorld("electronAPI", {
  * These methods forward commands to the Electron main process via IPC.
  */
 contextBridge.exposeInMainWorld("topbarAPI", {
-
   /**
    * Minimizes the application window.
    */
@@ -126,4 +216,17 @@ contextBridge.exposeInMainWorld("topbarAPI", {
    * Opens configuration/settings panel.
    */
   openConfig: () => ipcRenderer.send("open-config"),
+
+  /**
+   * Send Bug Report
+   *
+   * @param params
+   * @returns {Promise<any>}
+   */
+  sendReport: (params) => ipcRenderer.invoke("send-report", params),
+
+  /**
+   * Returns the startup health status of the bug report service.
+   */
+  getReportServiceStatus: () => ipcRenderer.invoke("get-report-service-status"),
 });

public/index.html

@@ -13,6 +13,8 @@
     <link rel="stylesheet" href="styles/styles.css">
     <link rel="stylesheet" href="styles/layout/topbar.css">
 
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
 </head>
 <body>
 
@@ -21,9 +23,11 @@
             <div class="custom-controls">
                 <button id="devtools-btn" title="Dev Tools">Tools</button>
                 <button id="logs-btn" title="Logs">Logs</button>
+                <button id="report-bug-btn" title="Report a bug">Report a Bug</button> <!-- TODO: Find a better place -->
                 <button id="website-btn" title="Website">Website</button>
                 <button id="wiki-btn" title="Wiki">Wiki</button>
                 <button id="workshop-btn" title="Workshop">Theme Workshop</button>
+                <button id="changelog-btn" title="Changelog">Changelog</button>
                 <!-- <button id="theme-btn" title="Theme">Theme</button> -->
             </div>
             <div class="window-controls">
@@ -120,10 +124,10 @@
                 <summary>Advanced Settings</summary>
 
                 <div class="setting-item">
-                    <input type="checkbox" data-key="autoUpdate" id="autoUpdate">
+                    <input type="checkbox" data-key="showChanglogsAfterUpdate" id="showChanglogsAfterUpdate">
                     <div class="setting-info">
-                    <span class="setting-title">Auto Update</span>
+                    <span class="setting-title">Show Changelogs After Update</span>
-                    <small>Enable automatic app updates.</small>
+                    <small>Display changelogs after each update.</small>
                     </div>
                 </div>
 
@@ -131,7 +135,7 @@
                     <input data-key="systemTray" id="systemTray" type="checkbox">
                     <div class="setting-info">
                         <span class="setting-title">System Tray</span>
-                            <small>Minimize app on close, in the System Tray. [EXPERIMENTAL]</small>
+                        <small>Minimize app on close, in the System Tray.</small>
                     </div>
                 </div>
 
@@ -167,13 +171,13 @@
                     </div>
                 </div>
 
-                <div class="setting-item">
+                <!-- <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> -->
 
                 <div class="setting-item" style="margin-left: 32px; margin-top: 20px;">
                     <div class="setting-info">
@@ -295,14 +299,53 @@
 
             <span id="version-badge" class="version-badge"></span>
 
-        </div>
     </main>
 
     <!-- Toast Container -->
     <div id="toast-container"></div>
 
+    <div class="changelog-overlay" id="changelog-overlay" hidden>
+        <section class="changelog-modal" role="dialog" aria-modal="true" aria-labelledby="changelog-title">
+            <div class="changelog-header">
+                <div>
+                    <span class="changelog-eyebrow">Freedom Loader</span>
+                    <h2 id="changelog-title">What's new</h2>
+                </div>
+                <button class="changelog-close" id="changelog-close" type="button" title="Close changelog" aria-label="Close changelog">&times;</button>
+            </div>
+            <div class="changelog-list" id="changelog-list">
+                <p class="changelog-loading">Loading changelog...</p>
+            </div>
+        </section>
+    </div>
+
     <h2 id="reference"> Because Why Not ? </h2>
 
+    <div id="updateAvailable" style="display:none">
+        <div class="update-banner">
+            <div class="banner-row">
+                <div class="banner-left">
+                    <div class="icon-wrap">
+                        <span class="material-symbols-outlined" id="update-icon">download</span>
+                    </div>
+                    <div class="text-block">
+                        <span class="update-title" id="update-title">Update available</span>
+                        <span class="update-sub" id="update-sub">A new version is ready</span>
+                    </div>
+                </div>
+                <button class="btn-update" id="btn-update">Download</button>
+            </div>
+            <div class="progress-wrap" id="progress-wrap" style="display:none">
+                <div class="progress-track">
+                    <div class="progress-fill" id="progress-fill"></div>
+                </div>
+                <div class="progress-meta">
+                    <span id="progress-pct">0%</span>
+                    <span id="progress-eta"></span>
+                </div>
+            </div>
+        </div>
+    </div>
     
     <!-- Scripts -->
     <script src="script/toast.js"></script>
@@ -314,6 +357,9 @@
     <script src="script/fetchinfo.js"></script>
     <script src="script/progressBar.js"></script>
     <script src="script/customthemes.js"></script>
+    <script src="script/reportBug.js"></script>
+    <script src="script/autoUpdate.js"></script>
+    <script type="module" src="script/changelog.js"></script>
     <script type="module" src="script/topbar.js"></script>
 
 </body>

public/script/autoUpdate.js

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

public/script/changelog.js

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

public/script/fetchinfo.js

@@ -269,7 +269,7 @@ async function init() {
       infoDiv.classList.add("visible");
     });
 
-  })
+  });
 
 }
 

public/script/reportBug.js

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

public/script/settingsPanel.js

@@ -16,8 +16,7 @@ let isOpen = false;
  * Toggles visibility of the settings panel when clicking the settings button.
  */
 settingsButton.addEventListener("click", () => {
-  const currentlyOpen = settingsPanel.style.display === "block";
+    settingsPanel.classList.toggle("open");
-  settingsPanel.style.display = currentlyOpen ? "none" : "block";
 });
 
 /**
@@ -25,7 +24,7 @@ settingsButton.addEventListener("click", () => {
  */
 function closePanel() {
   isOpen = false;
-  settingsPanel.style.display = "none";
+    settingsPanel.classList.remove("open");
 }
 
 /**

public/script/toast.js

@@ -17,18 +17,20 @@ window.showToast = function (message, type = "info", duration = 4000) {
   toast.classList.add("toast", type);
 
   const icons = {
-    success: "✓",
+    success: "check_circle",
-    error: "✕",
+    error: "error",
-    warning: "⚠",
+    warning: "warning",
-    info: "ℹ"
+    info: "info"
   };
 
   const icon = icons[type] || icons.info;
 
+  toast.style.setProperty("--toast-duration", `${duration}ms`);
   toast.innerHTML = `
-    <span class="toast-icon">${icon}</span>
+    <span class="toast-icon material-icons-round">${icon}</span>
     <span class="toast-message">${message}</span>
     <button class="toast-close" title="Close">×</button>
+    <div class="toast-progress"></div>
   `;
 
   const closeBtn = toast.querySelector(".toast-close");

public/script/topbar.js

@@ -35,25 +35,26 @@ export function initTopBar() {
 
 }
 
-async function attachListeners(){
+//* Disabled because i disabled native topbar for now, but keeping the code in case i want to re-enable it later
-  try{
+// async function attachListeners(){
-    const featuresList = await window.electronAPI.getFeatures();
+//   try{
+//     const featuresList = await window.electronAPI.getFeatures();
   
-    if (!featuresList.customTopBar) {
+//     if (!featuresList.customTopBar) {
-      const topbar = document.getElementById("topbar");
+//       const topbar = document.getElementById("topbar");
-      const container = document.getElementById("container");
+//       const container = document.getElementById("container");
-      const themeSwitcher = document.getElementById("theme-switcher");
+//       const themeSwitcher = document.getElementById("theme-switcher");
   
-      if (topbar) topbar.style.display = "none";
+//       if (topbar) topbar.style.display = "none";
-      if (container) container.style.marginTop = "0";
+//       if (container) container.style.marginTop = "0";
-      if (themeSwitcher) themeSwitcher.style.top = "30px";
+//       if (themeSwitcher) themeSwitcher.style.top = "30px";
-    }
+//     }
     
-  } catch (error) {
+//   } catch (error) {
-    console.error("Failed to load layout features for topbar:", error);
+//     console.error("Failed to load layout features for topbar:", error);
-  }
+//   }
 
-}
+// }
 
 initTopBar()
-document.addEventListener("DOMContentLoaded", attachListeners)
+//document.addEventListener("DOMContentLoaded", attachListeners)

public/styles/components/autoUpdate.css

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

public/styles/components/changelog.css

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

public/styles/components/toast.css

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

public/styles/layout/settingsPanel.css

@@ -45,11 +45,22 @@
     border-radius: 12px;
     padding: 20px;
     box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-    display: none;
     overflow-y: auto;
     z-index: 9999;
-    animation: slideIn 0.2s ease-out;
+    /*animation: slideIn 0.2s ease-out; */
     color: var(--settings-text-color);
+
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(20px);
+    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+
+.settings-panel.open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
 }
 
 .settings-panel::-webkit-scrollbar {

public/styles/layout/topbar.css

@@ -14,8 +14,8 @@
 .custom-controls {
     display: flex;
     align-items: center;
-    gap: 6px;
+  gap: 4px;
-    padding-left: 12px;
+  padding-left: 10px;
 }
 
 /* RIGHT - window buttons */
@@ -43,11 +43,11 @@
 
 /* Custom buttons (Logs / Wiki / etc.) */
 .custom-controls button {
-  height: 32px;
+  height: 28px;
-  padding: 0 14px;
+  padding: 0 10px;
 
-  font-size: 15px;
+  font-size: 14px;
-  border-radius: 8px;
+  border-radius: 7px;
 }
 
 .custom-controls button:hover {

public/styles/styles.css

@@ -12,6 +12,8 @@
 @import url("components/editpathbutton.css");
 @import url("components/progressBar.css");
 @import url("components/toast.css");
+@import url("components/autoUpdate.css");
+@import url("components/changelog.css");
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 

scripts/RELEASE-CHANGELOG.md

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

scripts/create-copr-package.sh

@@ -54,20 +54,6 @@ exec /opt/freedom-loader/freedom-loader "$@"
 EOF
 chmod +x "$TMP_WRAPPER/freedom-loader"
 
-# Desktop entry file
-TMP_DESKTOP="$ROOT_DIR/.rpm-pkg-tmp-desktop"
-mkdir -p "$TMP_DESKTOP"
-cat > "$TMP_DESKTOP/freedom-loader.desktop" << 'EOF'
-[Desktop Entry]
-Name=Freedom Loader
-Exec=/opt/freedom-loader/freedom-loader %U
-Icon=freedom-loader
-Type=Application
-Categories=AudioVideo;Utility;Network;
-Comment=Free and open-source GUI for yt-dlp
-StartupWMClass=Freedom Loader
-EOF
-
 # ------------------------------------------------------------
 # Step 1 - Build .rpm from linux-unpacked via fpm
 # ------------------------------------------------------------
@@ -78,7 +64,7 @@ echo "Building RPM..."
     --version "$VERSION" \
     --architecture x86_64 \
     --description "Free and open-source GUI for yt-dlp" \
-    --url "https://masteracnolo.github.io/Freedom-Loader-Site/" \
+    --url "https://freedomloader.acnolo.fr/" \
     --maintainer "MasterAcnolo <MasterAcnolo@users.noreply.github.com>" \
     --license "GPL-3.0-only" \
     --depends gtk3 \
@@ -89,11 +75,10 @@ echo "Building RPM..."
     --package "$RPM_OUT" \
     "$ROOT_DIR/dist/linux-unpacked/=/opt/freedom-loader" \
     "$TMP_WRAPPER/freedom-loader=/usr/bin/freedom-loader" \
-    "$TMP_DESKTOP/freedom-loader.desktop=/usr/share/applications/freedom-loader.desktop" \
     "$ROOT_DIR/build/app-icon.png=/usr/share/icons/hicolor/512x512/apps/freedom-loader.png" \
-    "$ROOT_DIR/package/com.masteracnolo.freedomloader.metainfo.xml=/usr/share/metainfo/com.masteracnolo.freedomloader.metainfo.xml"
+    "$ROOT_DIR/package/com.masteracnolo.freedomloader.metainfo.xml=/usr/share/metainfo/com.masteracnolo.freedomloader.metainfo.xml" \
-
+    "$ROOT_DIR/package/com.masteracnolo.freedomloader.desktop=/usr/share/applications/com.masteracnolo.freedomloader.desktop" 
-rm -rf "$TMP_WRAPPER" "$TMP_DESKTOP"
+rm -rf "$TMP_WRAPPER"
 echo "RPM built: $RPM_OUT"
 
 # ------------------------------------------------------------

scripts/release.sh

@@ -5,7 +5,7 @@ SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
 VERSION=$(node -p "require('$ROOT_DIR/package.json').version")
 
-f [[ "$VERSION" == *"-preview"* ]]; then
+if [[ "$VERSION" == *"-preview"* ]]; then
     echo "Error: The current version ($VERSION) is a 'preview"
     echo "Unable to launch release pipeline. Please update the package.json with a stable version.."
     exit 1
@@ -64,6 +64,16 @@ echo "[0/5] Cleaning workspace..."
 rm -rf "$ROOT_DIR/dist" "$ROOT_DIR/srpm-out"
 echo "Workspace cleaned (dist/ and srpm-out/ removed)"
 
+# ------------------------------------------------------------
+# Step 0.3 - Retrieve Changelog
+# ------------------------------------------------------------
+if [ ! -f "$ROOT_DIR/scripts/RELEASE-CHANGELOG.md" ]; then
+    echo "Warning: RELEASE-CHANGELOG.md not found, release notes will be empty."
+    CHANGELOG=""
+else
+    CHANGELOG="$(cat "$ROOT_DIR/scripts/RELEASE-CHANGELOG.md")"
+    echo "Changelog retrieved successfully"
+fi
 # ------------------------------------------------------------
 # Step 1 - Build Linux packages (AppImage, deb, snap)
 # ------------------------------------------------------------
@@ -105,6 +115,10 @@ PREV_TAG=$(git rev-list --tags --skip=1 --max-count=1 | xargs git describe --tag
 
 RELEASE_NOTES="# Freedom Loader - $VERSION
 
+## Changelog
+
+$CHANGELOG
+
 ## Found a bug or issue?
 Please report it in the [GitHub Issues](https://github.com/MasterAcnolo/Freedom-Loader/issues) section.
 
@@ -118,8 +132,8 @@ if [ "$DRY_RUN" = false ]; then
         "$ROOT_DIR/dist/Freedom-Loader-Setup-${VERSION}.exe" \
         "$ROOT_DIR/dist/Freedom-Loader-Setup-${VERSION}.exe.blockmap" \
         "$ROOT_DIR/dist/freedom-loader-${VERSION}.x86_64.rpm" \
-        "$ROOT_DIR/dist/freedom-loader_${VERSION}_amd64.deb" \
+        "$ROOT_DIR/dist/Freedom-Loader_${VERSION}_amd64.deb" \
-        "$ROOT_DIR/dist/Freedom Loader-${VERSION}.AppImage" \
+        "$ROOT_DIR/dist/Freedom-Loader-${VERSION}.AppImage" \
         "$ROOT_DIR/dist/freedom-loader_${VERSION}_amd64.snap" \
         "$ROOT_DIR/dist/latest.yml" \
         "$ROOT_DIR/dist/latest-linux.yml"

server/helpers/buildArgs.helpers.js

@@ -67,9 +67,7 @@ function buildYtDlpArgs({url, audioOnly, quality, outputFolder, isPlaylist}) {
 
   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 keepPlaylistOrder: ${configFeatures.keepPlaylistOrder}`);
   logger.info(`CONFIG addThumbnail: ${configFeatures.addThumbnail}`);

test/unit/buildArgs.test.js

@@ -11,7 +11,6 @@ jest.mock("../../server/helpers/path.helpers.js", () => ({
 
 jest.mock("../../config.js", () => ({
     configFeatures: {
-        autoUpdate: false,
         discordRPC: false,
         customTopBar: false,
         autoCheckInfo: false,