From 3c3444180f13de6f028834c0f5382bf82824870e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 16 Oct 2024 11:33:26 -0500
Subject: [PATCH] add descriptions

---
 .../components/settings/SearchSettings.tsx    | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/web/src/components/settings/SearchSettings.tsx b/web/src/components/settings/SearchSettings.tsx
index d66c4769e..c9548ceb8 100644
--- a/web/src/components/settings/SearchSettings.tsx
+++ b/web/src/components/settings/SearchSettings.tsx
@@ -12,6 +12,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "@/components/ui/select";
+import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 
 type SearchSettingsProps = {
   className?: string;
@@ -36,24 +37,15 @@ export default function SearchSettings({
     </Button>
   );
   const content = (
-    <div className={cn(className, "space-y-3")}>
-      <div className="flex w-full flex-col space-y-4">
-        <div className="text-md leading-none">Grid Columns</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 className={cn(className, "mb-3 space-y-5")}>
       <div className="space-y-4">
-        <div className="text-md">Default View</div>
+        <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 10 most
+            recent tracked objects per label, or display an unfiltered grid.
+          </div>
+        </div>
         <Select
           value={defaultView}
           onValueChange={(value) => setDefaultView(value)}
@@ -76,6 +68,26 @@ export default function SearchSettings({
           </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>
   );