From 12f72c4f6adaeab117a6f8cd657725e148fa4bc2 Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Mon, 10 Mar 2025 18:17:01 +0000
Subject: [PATCH] [frontend]: Re-add cluster toggle to Sidepanel

---
 frontend/src/components/Sidebar.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 34ef840..537bc44 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -164,7 +164,7 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
                 {isOpen ? "▼ Filters" : "▶ Filters"}
             </button>
             {isOpen && (
-                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", width: "100%" }}>
+                <div style={{display: "flex", flexDirection: "column", alignItems: "flex-start", width: "100%"}}>
                     {menuData.map((item) => (
                         <CheckboxItem
                             key={item.id}
@@ -175,7 +175,16 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
                             setEnabledSources={setEnabledSources}
                         />
                     ))}
-                    <button onClick={handleSubmit} style={{ marginTop: "10px", color: "white" }}>Submit</button>
+                    <div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "8px"}}>
+                        <input
+                            type="checkbox"
+                            id="toggleClustering"
+                            checked={clusteringEnabled}
+                            onChange={() => setClusteringEnabled(!clusteringEnabled)}
+                        />
+                        <label htmlFor="toggleClustering">Cluster overlapping icons</label>
+                    </div>
+                    <button onClick={handleSubmit} style={{marginTop: "10px", color: "white"}}>Submit</button>
                 </div>
             )}
         </div>