feat: made beacon search and list better

sparse-server/style/beacons/_sidebar.scss

@@ -3,4 +3,70 @@ aside.beacons {
 	background-color: #11111c;
 	overflow-y: auto;
 	overflow-x: hidden;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    .sort-method, .search, .checkin-filter {
+        padding: 10px;
+        padding-bottom: 5px;
+
+        p {
+            display: inline-block;
+            width: 50%;
+            margin: 0;
+        }
+
+        select, input {
+            display: inline-block;
+            width: 50%;
+        }
+    }
+
+    .checkin-filter {
+        padding-bottom: 12px;
+        border-bottom: 1px solid #2e2e59;
+    }
+
+    .beacon-list {
+        padding: 0;
+        margin: 0;
+    }
+
+    .beacon-partition {
+        padding: 0;
+        margin: 0;
+    }
+
+    .partition-title {
+        padding: 10px 15px;
+        margin: 0;
+        position: sticky;
+        top: 0;
+        background-color: #11111c;
+        border-bottom: 1px solid #2e2e59;
+        font-weight: bold;
+        font-size: 1.2em;
+    }
+
+    .beacon-instance {
+        padding: 10px;
+    }
+
+    .beacon-instance span {
+        color: gray;
+    }
+
+    .beacon-instance {
+        border-bottom: 1px solid #2e2e59;
+    }
+
+    .search-match {
+        color: yellow;
+    }
+
+    .beacon-instance-id {
+
+    }
 }

sparse-server/style/main.scss

@@ -20,7 +20,7 @@ html, body {
 
 body {
 	display: grid;
-	grid-template-columns: 350px 1fr;
+	grid-template-columns: 450px 1fr;
 	grid-template-rows: 79px 1fr;
 	grid-template-areas:
 		"nav nav"
@@ -53,13 +53,6 @@ nav {
 	}
 }
 
-aside.beacons {
-	grid-area: beacons;
-	background-color: #11111c;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-
 main {
 	grid-area: main;