release(v1.0.1): improve UX, fix backup validation, update filters, and refine documentation

dulanjayabhanu · dulanjayabhanu · commit c5e7807ea240 · 2025-10-01T19:15:42.000+05:30
- Enhanced "What is this app?" section for better clarity
- Disabled progress bar animation after reaching 100%
- Fixed spelling in progress indicator ("completed")
- Added strict validation for renamed and tampered backup files
- Improved error handling for backup decryption failures
- Updated FilterType display labels for better readability
- Added supportive guidance for passphrase input field
- Refined popover in filter section
- Removed outdated diagrams and prepared for updated versions
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,41 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.  
+This project adheres to [Semantic Versioning](https://semver.org/).
+
+---
+
+## [1.0.1] - 2025-10-01
+### Fixed
+- Corrected spelling in the data scanning progress indicator (`complete` → `completed`).
+- Fixed issue where uploading a renamed backup file incorrectly showed a success message and caused console errors. Now displays a proper warning message.
+- Fixed bug where modified backup files could be uploaded without showing the “Backup file decryption process failed” message. Application now blocks invalid files gracefully.
+- Adjusted manifest and resource paths for deployment to ensure correct loading of icons and manifest data.
+- Updated `What is this app?` section text for better clarity.
+
+### Changed
+- Updated progress bar behavior: animation now stops when progress reaches 100% to avoid confusion.
+- Improved display labels for filter types to be more user-friendly:
+  - **Unfollowers Only → Unfollowers**
+  - **Mixed Results → Mixed Connections**
+  - **Settled Results → Settled Connections**
+  - **Fans Only → Fans**
+- Added helper text to the passphrase input field to guide users on how to paste values (`Ctrl + V` / `Cmd + V`).
+- Enhanced popover content in the filter section for better user guidance.
+
+### Removed
+- Deleted outdated software architecture diagram images (to be replaced with updated versions containing borders and shadows).
+
+---
+
+## [1.0.0] - 2025-09-30
+### Added
+- Initial stable release of **GitHub Connection Visualizer**.
+- Core features:
+  - GitHub data scanning with support for large-scale accounts.
+  - Intelligent clustering into Unfollowers, Fans, and Settled Connections.
+  - Data scanning monitor with progress tracking.
+  - Encrypted backup and restore functionality.
+  - User-friendly filtering and sorting mechanisms.
+- Full documentation, including README, software architecture diagrams, and usage notes.
+- Production-grade UI/UX with dark theme and glassmorphism effects.
diff --git a/README.md b/README.md
@@ -47,10 +47,10 @@ The application integrates with the GitHub API to fetch user follower and follow
 ### Intelligent Data Sorting and Filtering
 Connections are automatically analyzed and classified into four categories:
 
-- **Unfollowers only**: Users you follow who do not follow you back.  
-- **Fans only**: Users who follow you but you do not follow back.  
-- **Mixed results**: A combined view of fans and unfollowers for quick review.  
-- **Settled results**: Mutual followers, showing balanced and established connections.  
+- **Unfollowers**: People you follow, but they do not follow you back.  
+- **Fans**: People who follow you, but you do not follow them back.  
+- **Mixed Connections**: Only shows Unfollowers and Fans.  
+- **Settled Connections**: People where you both follow each other.  
 
 This structured filtering allows users to focus on managing their GitHub relationships based on real needs.
 
diff --git a/index.html b/index.html
@@ -240,7 +240,7 @@
                                         </div>
                                         <div class="col-12 text-center">
                                             <span class="header-color text-capitalize">This app has a small learning
-                                                curve. For the best experience, we recommend reading the Usage Notes
+                                                curve. For the best experience, It is recommend reading the Usage Notes
                                                 before you start.</span>
                                         </div>
                                         <div class="col-12 pt-3">
@@ -275,8 +275,8 @@
                                                                     To handle this, the app uses a <strong
                                                                         class="text-color">Data Scanning
                                                                         Monitor</strong> and a <strong
-                                                                        class="text-color">progress tracking
-                                                                        mechanism</strong> that lets you gather data in
+                                                                        class="text-color">Progress Tracking
+                                                                        Mechanism</strong> that lets you gather data in
                                                                     safe, repeatable steps until the scan is complete.
                                                                 </li>
                                                                 <li class="text-color">You can also pause at any time by
@@ -458,10 +458,11 @@
                                                 </div>
                                                 <div class="col-12">
                                                     <div class="col-12 text-start">
-                                                        <span class="text-color">Backup Passphrase</span>
+                                                        <span class="text-color">Backup Passphrase</span><br/>
+                                                        <span class="muted-text-color">Paste your passphrase using <span class="badge badge-wrapper rounded-pill fw-normal px-2 py-1">Ctrl</span> <span class="text-color">+</span> <span class="badge badge-wrapper rounded-pill fw-normal px-2 py-1">V</span> on Windows/Linux or <span class="badge badge-wrapper rounded-pill fw-normal px-2 py-1">Cmd</span> <span class="text-color">+</span> <span class="badge badge-wrapper rounded-pill fw-normal px-2 py-1">V</span> on macOS.</span>
                                                     </div>
                                                     <div class="col-12 pt-2">
-                                                        <div class="input-group shadow-none pt-3">
+                                                        <div class="input-group shadow-none pt-2">
                                                             <input type="text"
                                                                 class="form-control rounded-start-5 shadow-none input-field pt-2 pb-2 ps-3 pe-3"
                                                                 placeholder="Enter Passphrase" minlength="24"
@@ -516,10 +517,10 @@
                                                 data-bs-custom-class="custom-popover"
                                                 data-bs-title="Info for Filter Options" data-bs-content="
                                             <ul style='margin:0; padding-left:18px;'>
-                                              <li><strong>Unfollowers Only:</strong> Shows users you follow who do not follow you back.</li>
-                                              <li><strong>Fans Only:</strong> Shows users who follow you but you do not follow back.</li>
-                                              <li><strong>Mixed Results:</strong> Displays only Unfollowers and Fans, excluding settled users.</li>
-                                              <li><strong>Settled Results:</strong> Shows users where both sides follow each other.</li>
+                                              <li><strong>Unfollowers:</strong> People you follow, but they do not follow you back.</li>
+                                              <li><strong>Fans:</strong> People who follow you, but you do not follow them back.</li>
+                                              <li><strong>Mixed Connections:</strong> Only shows Unfollowers and Fans.</li>
+                                              <li><strong>Settled Connections:</strong> People where you both follow each other.</li>
                                             </ul>">
                                                 <i class="bi bi-info-circle-fill text-color fs-5"></i>
                                             </button>
@@ -532,31 +533,31 @@
                                                 class="btn btn-secondary button-wrapper rounded-5 shadow-none ps-3 pe-3"
                                                 for="filter-type-1">
                                                 <i class="bi bi-heartbreak-fill"></i>&nbsp;
-                                                Unfollowers Only
+                                                Unfollowers
                                             </label>
                                             <input type="radio" class="btn-check" name="filter-type" id="filter-type-2"
                                                 autocomplete="off" value="FANS_ONLY">
                                             <label
                                                 class="btn btn-secondary button-wrapper rounded-5 shadow-none ps-3 pe-3"
                                                 for="filter-type-2">
                                                 <i class="bi bi-star-fill"></i>&nbsp;
-                                                Fans Only
+                                                Fans
                                             </label>
                                             <input type="radio" class="btn-check" name="filter-type" id="filter-type-3"
                                                 autocomplete="off" value="MIXED_RESULT">
                                             <label
                                                 class="btn btn-secondary button-wrapper rounded-5 shadow-none ps-3 pe-3"
                                                 for="filter-type-3">
                                                 <i class="bi bi-leaf-fill"></i>&nbsp;
-                                                Mixed Result
+                                                Mixed Connections
                                             </label>
                                             <input type="radio" class="btn-check" name="filter-type" id="filter-type-4"
                                                 autocomplete="off" value="SETTLED_RESULT">
                                             <label
                                                 class="btn btn-secondary button-wrapper rounded-5 shadow-none ps-3 pe-3"
                                                 for="filter-type-4">
                                                 <i class="bi bi-shield-lock-fill"></i>&nbsp;
-                                                Settled Resultes
+                                                Settled Connections
                                             </label>
                                         </div>
                                     </div>
diff --git a/js/service/EncryptDataManageService.js b/js/service/EncryptDataManageService.js
@@ -76,18 +76,18 @@ export class EncryptDataManageService{
     }
 
     async decryptData(encryptedPayload){
-        // get the salt value
-        const salt = CryptoRelatedValueGenerator.convertFromBase64(encryptedPayload.salt);
-        // get the initialize vector value
-        const iv = CryptoRelatedValueGenerator.convertFromBase64(encryptedPayload.iv);
-        // get the data value
-        const data = CryptoRelatedValueGenerator.convertFromBase64(encryptedPayload.cipher);
-        // construct the key
-        const key = await this.#generateDeriveKey(salt);
-
         let decodedAndDecryptedPayload = null;
         
         try{
+            // get the salt value
+            const salt = CryptoRelatedValueGenerator.convertFromBase64(encryptedPayload.salt);
+            // get the initialize vector value
+            const iv = CryptoRelatedValueGenerator.convertFromBase64(encryptedPayload.iv);
+            // get the data value
+            const data = CryptoRelatedValueGenerator.convertFromBase64(encryptedPayload.cipher);
+            // construct the key
+            const key = await this.#generateDeriveKey(salt);
+
             // construct the plainBuffer
             const plainBuffer = await crypto.subtle.decrypt(
                 {
diff --git a/js/service/ImportExportFileManageService.js b/js/service/ImportExportFileManageService.js
@@ -87,7 +87,17 @@ export class ImportExportFileManageService{
         // check if the UserSession available or not
         if(userSession != null){
             // UserSession available and get the upload file extension
-            const uploadfileExtension = fileUploadEvent.target.files[0].name.split(".")[3].toLowerCase();
+            let uploadfileExtension = "";
+
+            // get the file name detail combination array
+            const uploadFileNameDetailCombinationArray = fileUploadEvent.target.files[0].name.split(".");
+            
+            // check if the upload file name has a valid extracable detail length for extact the file extenstion 
+            if (uploadFileNameDetailCombinationArray.length > 1) {
+                // upload file name has a valid extracable detail length and assign the file extenstion 
+                uploadfileExtension = uploadFileNameDetailCombinationArray[uploadFileNameDetailCombinationArray.length - 1].toLowerCase();
+            }
+
             // get the upload file MIME type
             const uploadfileMimeType = fileUploadEvent.target.files[0].type;
             
diff --git a/js/ui/ComponentRenderer.js b/js/ui/ComponentRenderer.js
@@ -244,22 +244,29 @@ export class ComponentRenderer{
             // check if the following scan process complete or not
             if(followingPresentage >= 100){
                 // following scan process complete
-                this.#followingScanCompleteIndicator.innerHTML = "Complete";
+                this.#followingScanCompleteIndicator.innerHTML = "Completed";
+                // remove the following scan complete indicator progressbar animation bahavior to stable 
+                this.#followingProgressRepresenter.className = "progress-bar progress-bar-striped";
                 
             }else{
                 // following scan process not complete and still have to scan user data
                 this.#followingScanCompleteIndicator.innerHTML = "Remaning User Data...";
-                
+                // implement the following scan complete indicator progressbar animation bahavior 
+                this.#followingProgressRepresenter.className = "progress-bar progress-bar-striped progress-bar-animated";
             }
             
             // check if the follower scan process complete or not
             if(followerPresentage >= 100){
                 // follower scan process complete
-                this.#followerScanCompleteIndicator.innerHTML = "Complete";
+                this.#followerScanCompleteIndicator.innerHTML = "Completed";
+                // remove the follower scan complete indicator progressbar animation bahavior to stable 
+                this.#followerProgressRepresenter.className = "progress-bar progress-bar-striped";
                 
             }else{
                 // follower scan process not complete and still have to scan user data
                 this.#followerScanCompleteIndicator.innerHTML = "Remaning User Data...";
+                // implement the follower scan complete indicator progressbar animation bahavior 
+                this.#followerProgressRepresenter.className = "progress-bar progress-bar-striped progress-bar-animated";
             }
 
             // update the inner content of the follower progress wrapper
diff --git a/js/util/CryptoRelatedValueGenerator.js b/js/util/CryptoRelatedValueGenerator.js
@@ -1,30 +1,29 @@
-export class CryptoRelatedValueGenerator{
-    
-    static generateRandomBytes(targetLength){
+export class CryptoRelatedValueGenerator {
+
+    static generateRandomBytes(targetLength) {
         // created the unitArray
         const unitArray = new Uint8Array(targetLength);
         crypto.getRandomValues(unitArray);
 
         return unitArray;
     }
 
-    static convertToBase64(bufferValue){
+    static convertToBase64(bufferValue) {
         // covert the ArrayBuffer into byte array
         const bytes = new Uint8Array(bufferValue);
-        
+
         let binary = "";
 
-        for(const byte of bytes){
+        for (const byte of bytes) {
             binary += String.fromCharCode(byte);
         }
 
         return btoa(binary);
     }
 
-    static convertFromBase64(targetString){
-        // decode the Base64 binary string
+    static convertFromBase64(targetString) {
         const binary = atob(targetString);
-        
+
         const bytes = new Uint8Array(binary.length);
 
         for(let i = 0; i < binary.length; i++){
@@ -34,20 +33,20 @@ export class CryptoRelatedValueGenerator{
         return bytes;
     }
 
-    static generatePassphrase(targetLength){
-        if(targetLength < 24){
+    static generatePassphrase(targetLength) {
+        if (targetLength < 24) {
             targetLength = 24;
         }
 
         // create all the character collection
         const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?";
-        
+
         const randomValues = new Uint32Array(targetLength);
         crypto.getRandomValues(randomValues);
 
         let passphrase = "";
 
-        for(let x = 0; x < targetLength; x++){
+        for (let x = 0; x < targetLength; x++) {
             passphrase += characters[randomValues[x] % characters.length];
         }
 
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "short_name": "GHCV",
   "description": "Discover And Manage Your GitHub Connections With Ease.",
   "start_url": "./",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "display": "standalone",
   "background_color": "#131315",
   "theme_color": "#191d24",
