Search functionality and UI tweaks (#13978)

* Portal tooltips

* Add ability to time_range filter chroma searches

* centering and padding consistency

* add event id back to chroma metadata

* query sqlite first and pass those ids to chroma for embeddings search

* ensure we pass timezone to the api call

* remove object lifecycle from search details for non-object events

* simplify hour calculation

* fix query without filters

* bump chroma version

* chroma 0.5.7

* fix selecting camera group in cameras filter button

web/src/components/card/SearchThumbnail.tsx

@@ -15,6 +15,7 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { SearchResult } from "@/types/search";
 import useContextMenu from "@/hooks/use-contextmenu";
 import { cn } from "@/lib/utils";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
@@ -95,16 +96,18 @@ export default function SearchThumbnail({
                 </div>
               </TooltipTrigger>
             </div>
-            <TooltipContent className="capitalize">
-              {[...new Set([searchResult.label])]
-                .filter(
-                  (item) => item !== undefined && !item.includes("-verified"),
-                )
-                .map((text) => capitalizeFirstLetter(text))
-                .sort()
-                .join(", ")
-                .replaceAll("-verified", "")}
-            </TooltipContent>
+            <TooltipPortal>
+              <TooltipContent className="capitalize">
+                {[...new Set([searchResult.label])]
+                  .filter(
+                    (item) => item !== undefined && !item.includes("-verified"),
+                  )
+                  .map((text) => capitalizeFirstLetter(text))
+                  .sort()
+                  .join(", ")
+                  .replaceAll("-verified", "")}
+              </TooltipContent>
+            </TooltipPortal>
           </Tooltip>
         </div>
         <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>

web/src/components/filter/CamerasFilterButton.tsx

@@ -112,7 +112,10 @@ export function CamerasFilterButton({
                 <div
                   key={name}
                   className="w-full cursor-pointer rounded-lg px-2 py-0.5 text-sm capitalize text-primary hover:bg-muted"
-                  onClick={() => setCurrentCameras([...conf.cameras])}
+                  onClick={() => {
+                    setAllCamerasSelected(false);
+                    setCurrentCameras([...conf.cameras]);
+                  }}
                 >
                   {name}
                 </div>

web/src/components/navigation/Bottombar.tsx

@@ -27,7 +27,7 @@ function Bottombar() {
         isPWA && isIOS
           ? "portrait:items-start portrait:pt-1 landscape:items-center"
           : "items-center",
-        isMobile && !isPWA && "h-12 landscape:md:h-16",
+        isMobile && !isPWA && "h-12 md:h-16",
       )}
     >
       {navItems.map((item) => (

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -201,21 +201,24 @@ export default function MobileReviewSettingsDrawer({
             Calendar
           </div>
         </div>
-        <ReviewActivityCalendar
-          reviewSummary={reviewSummary}
-          selectedDay={
-            filter?.after == undefined
-              ? undefined
-              : new Date(filter.after * 1000)
-          }
-          onSelect={(day) => {
-            onUpdateFilter({
-              ...filter,
-              after: day == undefined ? undefined : day.getTime() / 1000,
-              before: day == undefined ? undefined : getEndOfDayTimestamp(day),
-            });
-          }}
-        />
+        <div className="flex w-full flex-row justify-center">
+          <ReviewActivityCalendar
+            reviewSummary={reviewSummary}
+            selectedDay={
+              filter?.after == undefined
+                ? undefined
+                : new Date(filter.after * 1000)
+            }
+            onSelect={(day) => {
+              onUpdateFilter({
+                ...filter,
+                after: day == undefined ? undefined : day.getTime() / 1000,
+                before:
+                  day == undefined ? undefined : getEndOfDayTimestamp(day),
+              });
+            }}
+          />
+        </div>
         <SelectSeparator />
         <div className="flex items-center justify-center p-2">
           <Button

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

@@ -95,6 +95,11 @@ export default function SearchDetailDialog({
       views.splice(index, 1);
     }
 
+    if (search.data.type != "object") {
+      const index = views.indexOf("object lifecycle");
+      views.splice(index, 1);
+    }
+
     // TODO implement
     //if (!config.semantic_search.enabled) {
     //  const index = views.indexOf("similar-calendar");

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

@@ -26,7 +26,7 @@ export default function PlatformAwareDialog({
     return (
       <Drawer open={open} onOpenChange={onOpenChange}>
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden px-4">
           {content}
         </DrawerContent>
       </Drawer>