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/card/SearchThumbnailFooter.tsx

@@ -118,7 +118,7 @@ export default function SearchThumbnailFooter({
           <TimeAgo time={searchResult.start_time * 1000} dense />
         ) : (
           <div>
-            <ActivityIndicator size={24} />
+            <ActivityIndicator size={14} />
           </div>
         )}
         {formattedDate}

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -383,7 +383,7 @@ export default function ObjectLifecycle({
             {eventSequence.map((item, index) => (
               <CarouselItem key={index}>
                 <Card className="p-1 text-sm md:p-2" key={index}>
-                  <CardContent className="flex flex-row items-center gap-3 p-1 md:p-6">
+                  <CardContent className="flex flex-row items-center gap-3 p-1 md:p-2">
                     <div className="flex flex-1 flex-row items-center justify-start p-3 pl-1">
                       <div
                         className="rounded-lg p-2"

web/src/components/overlay/dialog/SearchFilterDialog.tsx

@@ -1,4 +1,4 @@
-import { FaArrowRight, FaCog } from "react-icons/fa";
+import { FaArrowRight, FaFilter } from "react-icons/fa";
 
 import { useEffect, useMemo, useState } from "react";
 import { PlatformAwareSheet } from "./PlatformAwareDialog";
@@ -66,7 +66,7 @@ export default function SearchFilterDialog({
       size="sm"
       variant={moreFiltersSelected ? "select" : "default"}
     >
-      <FaCog
+      <FaFilter
         className={cn(
           moreFiltersSelected ? "text-white" : "text-secondary-foreground",
         )}

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);
+      }}
+    />
+  );
+}