Explore UI changes (#14393)

* Add time ago to explore summary view on desktop

* add search settings for columns and default view selection

* add descriptions

* clarify wording

* padding tweak

* padding tweaks for mobile

* fix size of activity indicator

* smaller

web/src/components/settings/SearchSettings.tsx

@@ -0,0 +1,109 @@
+import { Button } from "../ui/button";
+import { useState } from "react";
+import { isDesktop } from "react-device-detect";
+import { cn } from "@/lib/utils";
+import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
+import { FaCog } from "react-icons/fa";
+import { Slider } from "../ui/slider";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+} from "@/components/ui/select";
+import { DropdownMenuSeparator } from "../ui/dropdown-menu";
+
+type SearchSettingsProps = {
+  className?: string;
+  columns: number;
+  defaultView: string;
+  setColumns: (columns: number) => void;
+  setDefaultView: (view: string) => void;
+};
+export default function SearchSettings({
+  className,
+  columns,
+  setColumns,
+  defaultView,
+  setDefaultView,
+}: SearchSettingsProps) {
+  const [open, setOpen] = useState(false);
+
+  const trigger = (
+    <Button className="flex items-center gap-2" size="sm">
+      <FaCog className="text-secondary-foreground" />
+      Settings
+    </Button>
+  );
+  const content = (
+    <div className={cn(className, "my-3 space-y-5 py-3 md:mt-0 md:py-0")}>
+      <div className="space-y-4">
+        <div className="space-y-0.5">
+          <div className="text-md">Default Search View</div>
+          <div className="space-y-1 text-xs text-muted-foreground">
+            When no filters are selected, display a summary of the most recent
+            tracked objects per label, or display an unfiltered grid.
+          </div>
+        </div>
+        <Select
+          value={defaultView}
+          onValueChange={(value) => setDefaultView(value)}
+        >
+          <SelectTrigger className="w-full">
+            {defaultView == "summary" ? "Summary" : "Unfiltered Grid"}
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {["summary", "grid"].map((value) => (
+                <SelectItem
+                  key={value}
+                  className="cursor-pointer"
+                  value={value}
+                >
+                  {value == "summary" ? "Summary" : "Unfiltered Grid"}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+      <DropdownMenuSeparator />
+      <div className="flex w-full flex-col space-y-4">
+        <div className="space-y-0.5">
+          <div className="text-md">Grid Columns</div>
+          <div className="space-y-1 text-xs text-muted-foreground">
+            Select the number of columns in the results grid.
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Slider
+            value={[columns]}
+            onValueChange={([value]) => setColumns(value)}
+            max={6}
+            min={2}
+            step={1}
+            className="flex-grow"
+          />
+          <span className="w-9 text-center text-sm font-medium">{columns}</span>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <PlatformAwareDialog
+      trigger={trigger}
+      content={content}
+      contentClassName={
+        isDesktop
+          ? "scrollbar-container h-auto max-h-[80dvh] overflow-y-auto"
+          : "max-h-[75dvh] overflow-hidden p-4"
+      }
+      open={open}
+      onOpenChange={(open) => {
+        setOpen(open);
+      }}
+    />
+  );
+}