refactor: app display in front end. To make difference more obvious between bundled and not

public/script/appVersion.js

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