Added match counter

- Added match count logic
- Refactored menu order

src/views/cleaner/cleaner.html

@@ -9,7 +9,7 @@
                     Back
                 </button>
             </div>
-            <section class="py-5">
+            <section class="py-3">
                 <div class="container text-center">
                     <h1 class="display-4"><strong>Cooperate Cleaner</strong></h1>
                     <p class="lead mb-3">Enter your text, clear, done</p>
@@ -25,6 +25,7 @@
                     <div class="visually-hidden" id="output-container-div">
                         <h2 class="mt-5">Output:</h2>
                         <textarea class="form-control w-100" rows="10" id="output-textarea"></textarea>
+                        <p class="py-1"><span id="replace-count">XX</span> matches replaced.</p>
                     </div>
                 </div>
             </section>

src/views/cleaner/cleaner.js

@@ -56,20 +56,31 @@
         console.log("Cleaning...");
 
         let outputText = $("#input-textarea").val();
+        let totalMatches = 0;
 
         config.rules.forEach(rule => {
             if (rule.enabled) {
                 const searchValue = rule.ignoreCase ? new RegExp(rule.strToReplace, 'gi') : new RegExp(rule.strToReplace, 'g');
-                outputText = outputText.replace(searchValue, rule.replaceStr);
+                let matchCount = 0;
+
+                outputText = outputText.replace(searchValue, (match) => {
+                    matchCount++;
+                    return rule.replaceStr;
+                });
+
+                totalMatches += matchCount;
             }
         });
 
         $("#output-textarea").val(outputText);
         $("#output-container-div").removeClass("visually-hidden");
 
-        if($("#enable-auto-copy").prop("checked")) {
+        $("#replace-count").text(totalMatches);
+
+        if ($("#enable-auto-copy").prop("checked")) {
             console.log("Copying result to clipboard...")
             await Neutralino.clipboard.writeText(outputText);
         }
     }
+
 })();

src/views/home/home.html

@@ -24,11 +24,11 @@
                 </div>
             </div>
             <div class="col-lg-4 col-md-6 mb-4">
-                <div class="card app-card shadow-sm animate__animated animate__fadeIn" id="home-btn-about">
+                <div class="card app-card shadow-sm animate__animated animate__fadeIn" id="home-btn-sl">
-                    <img src="/icons/about.webp" alt="App 3" class="card-img-top">
+                    <img src="/icons/lineconv.webp" alt="App 1" class="card-img-top">
                     <div class="card-body">
-                        <h5 class="card-title">About</h5>
+                        <h5 class="card-title">Multiline to single line</h5>
-                        <p class="card-text">View license details</p>
+                        <p class="card-text">Convert multiline text to singleline</p>
                     </div>
                 </div>
             </div>
@@ -36,11 +36,11 @@
         </div>
         <div class="row">
             <div class="col-lg-4 col-md-6 mb-4">
-                <div class="card app-card shadow-sm animate__animated animate__fadeIn" id="home-btn-sl">
+                <div class="card app-card shadow-sm animate__animated animate__fadeIn" id="home-btn-about">
-                    <img src="/icons/lineconv.webp" alt="App 1" class="card-img-top">
+                    <img src="/icons/about.webp" alt="App 3" class="card-img-top">
                     <div class="card-body">
-                        <h5 class="card-title">Multiline to single line</h5>
+                        <h5 class="card-title">About</h5>
-                        <p class="card-text">Convert multiline text to singleline</p>
+                        <p class="card-text">View license details</p>
                     </div>
                 </div>
             </div>