From bec8fc847c4d3c5a2682ebaef0e0b389a69966be Mon Sep 17 00:00:00 2001
From: alanfoster <alan@alanfoster.me>
Date: Sat, 2 Dec 2023 03:48:56 +0000
Subject: [PATCH] Update each tab to have a searchbar and filter present

---
 index.html   | 107 ++++++++++++++++++++++-----------------------------
 js/script.js |   9 ++++-
 2 files changed, 54 insertions(+), 62 deletions(-)

diff --git a/index.html b/index.html
index 5545342..c64115e 100644
--- a/index.html
+++ b/index.html
@@ -202,44 +202,44 @@
             </li> -->
         </ul>
 
-        <div class="tab-content">
-            <!-- Reverse Shell Tab-->
-            <div class="tab-pane active" id="reverse" role="tabpanel" aria-labelledby="reverse-tab">
-                <div class="card shadow mb-5">
-                    <div class="card-body">
-                        <!-- Top configuration bar -->
-                        <div class="d-md-flex">
-                            <!---Filters-->
-                            <label for="os-options" class="col-auto col-form-label"
-                                style="font-size:1rem">OS</label>
-                            <div class="col-auto">
-                                <select id="os-options" class="custom-select">
-                                    <option class="os-item" value="all">All</option>
-                                    <option class="os-item" value="linux">Linux</option>
-                                    <option class="os-item" value="windows">Windows</option>
-                                    <option class="os-item" value="mac">Mac</option>
-                                </select>
-                            </div>
+        <div class="card shadow mb-5">
+            <div class="card-body">
+                <!-- Top configuration bar -->
+                <div class="d-md-flex">
+                    <!---Filters-->
+                    <label for="os-options" class="col-auto col-form-label"
+                        style="font-size:1rem">OS</label>
+                    <div class="col-auto">
+                        <select id="os-options" class="custom-select">
+                            <option class="os-item" value="all">All</option>
+                            <option class="os-item" value="linux">Linux</option>
+                            <option class="os-item" value="windows">Windows</option>
+                            <option class="os-item" value="mac">Mac</option>
+                        </select>
+                    </div>
 
-                            <label for="os-options" class="col-auto col-form-label"
-                                style="font-size:1rem">Name</label>
-                            <div class="col-auto flex-grow-1">
-                                <input type="text" id="searchBox" placeholder="Search..." class="form-control form-control-md text-left">
-                            </div>
-                            <!---/Filters-->
+                    <label for="os-options" class="col-auto col-form-label"
+                        style="font-size:1rem">Name</label>
+                    <div class="col-auto flex-grow-1">
+                        <input type="text" id="searchBox" placeholder="Search..." class="form-control form-control-md text-left">
+                    </div>
+                    <!---/Filters-->
 
-                            <!-- Show all advanced switch -->
-                            <div class="custom-control custom-switch text-right d-flex justify-content-center align-self-center">
-                                <input id="revshell-advanced-switch" type="checkbox" class="custom-control-input" checked>
-                                <label for="revshell-advanced-switch" class="custom-control-label small pr-2 pb-1"
-                                    style="padding-top:2px" data-toggle="tooltip" title="Display all advanced settings">
-                                    Show Advanced
-                                </label>
-                                <img src="assets/floppy-disk-solid.svg" class="download-svg" data-toggle="tooltip" title="Download Payload">
-                            </div>
-                            <!-- /Show all advanced switch -->
-                        </div>
+                    <!-- Show all advanced switch -->
+                    <div class="custom-control custom-switch text-right d-flex justify-content-center align-self-center">
+                        <input id="revshell-advanced-switch" type="checkbox" class="custom-control-input" checked>
+                        <label for="revshell-advanced-switch" class="custom-control-label small pr-2 pb-1"
+                            style="padding-top:2px" data-toggle="tooltip" title="Display all advanced settings">
+                            Show Advanced
+                        </label>
+                        <img src="assets/floppy-disk-solid.svg" class="download-svg" data-toggle="tooltip" title="Download Payload">
+                    </div>
+                    <!-- /Show all advanced switch -->
+                </div>
 
+                <div class="tab-content">
+                    <!-- Reverse Shell Tab-->
+                    <div class="tab-pane active" id="reverse" role="tabpanel" aria-labelledby="reverse-tab">
                         <div class="card-text mt-4">
                             <div class="row">
 
@@ -340,17 +340,11 @@
 
                             </div>
                         </div>
-                        <!-- /card-text -->
-
                     </div>
-                </div>
-            </div>
-            <!-- /Reverse Shell Tab -->
+                    <!-- /Reverse Shell Tab -->
 
-            <!-- Bind Shell Tab -->
-            <div class="tab-pane" id="bind" role="tabpanel" aria-labelledby="bind-tab">
-                <div class="card shadow mb-5">
-                    <div class="card-body">
+                    <!-- Bind Shell Tab -->
+                    <div class="tab-pane" id="bind" role="tabpanel" aria-labelledby="bind-tab">
                         <div class="card-text mt-4">
                             <div class="row">
                                 <!-- Left column: Bind selection -->
@@ -395,15 +389,10 @@
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <!-- /Bind Shell Tab -->
+                    <!-- /Bind Shell Tab -->
 
-            <!-- MSFVenom Tab -->
-            <div class="tab-pane" id="msfvenom" role="tabpanel" aria-labelledby="msfvenom-tab">
-                <div class="card shadow mb-5">
-                    <div class="card-body">
-                        <img src="assets/floppy-disk-solid.svg" class="download-svg float-right" data-toggle="tooltip" title="Download Payload">
+                    <!-- MSFVenom Tab -->
+                    <div class="tab-pane" id="msfvenom" role="tabpanel" aria-labelledby="msfvenom-tab">
                         <div class="card-text mt-4">
                             <div class="row">
                                     <!-- Left column: MSFVenom selection -->
@@ -456,14 +445,10 @@
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <!-- /MSFVenom Tab -->
+                    <!-- /MSFVenom Tab -->
 
-            <!-- HoaxShell Tab -->
-            <div class="tab-pane" id="hoaxshell" role="tabpanel" aria-labelledby="hoaxshell-tab">
-                <div class="card shadow mb-5">
-                    <div class="card-body">
+                    <!-- HoaxShell Tab -->
+                    <div class="tab-pane" id="hoaxshell" role="tabpanel" aria-labelledby="hoaxshell-tab">
                         <div class="card-text mt-4">
                             <div class="row">
                                     <!-- Left column: HoaxShell selection -->
@@ -507,10 +492,10 @@
                             </div>
                         </div>
                     </div>
+                    <!-- /hoaxshell Tab -->
                 </div>
             </div>
-            <!-- /hoaxshell Tab -->
-    </div>
+        </div>
 
     <!-- RSG data -->
     <script src="js/data.js"></script>
diff --git a/js/script.js b/js/script.js
index 8cac3dd..4514b2b 100644
--- a/js/script.js
+++ b/js/script.js
@@ -358,7 +358,14 @@ const rsg = {
             }
         );
 
-        const documentFragment = document.createDocumentFragment()
+        const documentFragment = document.createDocumentFragment();
+        if (filteredItems.length === 0) {
+            const emptyMessage = document.createElement("button");
+            emptyMessage.innerText = "No results found";
+            emptyMessage.classList.add("list-group-item", "list-group-item-action", "disabled");
+
+            documentFragment.appendChild(emptyMessage);
+        }
         filteredItems.forEach((item, index) => {
             const {
                 name,