feat: enhance filter modification (#449)

* upgrade drizzle and drizzle-kit

* add location to measurements for mobile devices

* drop last migration

* add locations for mobile devices

* workaround to handle postgis geometry in query

* remove migrations

* add locations

* disable esLint for now

* get rid of `button can not be a descendant of button` error

* make tags optional

* mobile box overview

* add dynamic popup to mobile trajectories

* enhance mobile boxes

* add build target

* fix `top level await` error

* add trips switch

* remove colors when trips are deactivated

* allow to select two sensors on mobile device

* enable switching overlaying mobile sensor

* add sensor unit to dependencies in MobileBoxLayer effect

* refactor(routes): update route configuration and dependencies

* refactor(donut-chart-cluster): simplify destructuring and formatting in component

* refactor(device): comment out time column in getDevice function

* refactor(graph): rename LineWithZoom to GraphWithZoom and update zoom state management

* refactor(mobile): update MobileBoxView structure and clean up MobileOverviewLayer formatting

* refactor(device): add time column to extras in getDevice function

* refactor(package): remove chartjs-scale-timestack dependency from package.json

* update package-lock.json

* refactor(color): update color palette and introduce dynamic color calculation

* refactor(device-detail): improve image handling and update log entry styles

* feat(device-detail): enhance tag selection with dynamic styling and URL updates

---------

Co-authored-by: Matthias Pfeil <[email protected]>

app/components/device-detail/device-detail-box.tsx

@@ -77,6 +77,7 @@ import { Button } from "../ui/button";
 import { Badge } from "../ui/badge";
 import EntryLogs from "./entry-logs";
 import { useToast } from "../ui/use-toast";
+import clsx from "clsx";
 
 export interface MeasurementProps {
   sensorId: string;
@@ -372,7 +373,46 @@ export default function DeviceDetailBox() {
                             <Badge
                               key={tag}
                               variant="secondary"
-                              className="text-xs font-medium"
+                              className={clsx(
+                                "text-xs font-medium cursor-pointer",
+                                searchParams
+                                  .get("tags")
+                                  ?.split(",")
+                                  .includes(tag)
+                                  ? "bg-green-100 dark:bg-dark-green"
+                                  : "",
+                              )}
+                              onClick={(event) => {
+                                event.stopPropagation();
+
+                                const currentParams = new URLSearchParams(
+                                  searchParams.toString(),
+                                );
+
+                                // Safely retrieve and parse the current tags
+                                const currentTags =
+                                  currentParams.get("tags")?.split(",") || [];
+
+                                // Toggle the tag in the list
+                                const updatedTags = currentTags.includes(tag)
+                                  ? currentTags.filter((t) => t !== tag) // Remove if already present
+                                  : [...currentTags, tag]; // Add if not present
+
+                                // Update the tags parameter or remove it if empty
+                                if (updatedTags.length > 0) {
+                                  currentParams.set(
+                                    "tags",
+                                    updatedTags.join(","),
+                                  );
+                                } else {
+                                  currentParams.delete("tags");
+                                }
+
+                                // Update the URL with the new search params
+                                navigate({
+                                  search: currentParams.toString(),
+                                });
+                              }}
                             >
                               {tag}
                             </Badge>