Explore pane infinite loading (#13738)

* swr for infinite loading

* search detail language change

* drawer padding

* spacing

* center calendar

* padding

* catch error

* use limit const

web/src/components/filter/CamerasFilterButton.tsx

@@ -90,7 +90,7 @@ export function CamerasFilterButton({
           <DropdownMenuSeparator />
         </>
       )}
-      <div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden p-4">
+      <div className="scrollbar-container flex h-auto max-h-[80dvh] flex-col gap-2 overflow-y-auto overflow-x-hidden p-4">
         <FilterSwitch
           isChecked={allCamerasSelected}
           label="All Cameras"
@@ -106,12 +106,12 @@ export function CamerasFilterButton({
         />
         {groups.length > 0 && (
           <>
-            <DropdownMenuSeparator className="mt-2" />
+            <DropdownMenuSeparator />
             {groups.map(([name, conf]) => {
               return (
                 <div
                   key={name}
-                  className="w-full cursor-pointer rounded-lg px-2 py-1.5 text-sm capitalize text-primary hover:bg-muted"
+                  className="w-full cursor-pointer rounded-lg px-2 py-0.5 text-sm capitalize text-primary hover:bg-muted"
                   onClick={() => setCurrentCameras([...conf.cameras])}
                 >
                   {name}
@@ -120,7 +120,7 @@ export function CamerasFilterButton({
             })}
           </>
         )}
-        <DropdownMenuSeparator className="my-2" />
+        <DropdownMenuSeparator />
         <div className="flex flex-col gap-2.5">
           {allCameras.map((item) => (
             <FilterSwitch
@@ -158,7 +158,7 @@ export function CamerasFilterButton({
           ))}
         </div>
       </div>
-      <DropdownMenuSeparator className="my-2" />
+      <DropdownMenuSeparator />
       <div className="flex items-center justify-evenly p-2">
         <Button
           variant="select"

web/src/components/filter/SearchFilterGroup.tsx

@@ -5,7 +5,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
-import { isMobile } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
@@ -309,7 +309,7 @@ function GeneralFilterButton({
         }}
       >
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
           {content}
         </DrawerContent>
       </Drawer>
@@ -503,7 +503,7 @@ function ZoneFilterButton({
         }}
       >
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
           {content}
         </DrawerContent>
       </Drawer>
@@ -548,7 +548,7 @@ export function ZoneFilterContent({
       <div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
         {allZones && setCurrentZones && (
           <>
-            <DropdownMenuSeparator />
+            {isDesktop && <DropdownMenuSeparator />}
             <div className="mb-5 mt-2.5 flex items-center justify-between">
               <Label
                 className="mx-2 cursor-pointer text-primary"
@@ -599,7 +599,7 @@ export function ZoneFilterContent({
           </>
         )}
       </div>
-      <DropdownMenuSeparator />
+      {isDesktop && <DropdownMenuSeparator />}
       <div className="flex items-center justify-evenly p-2">
         <Button
           variant="select"
@@ -697,7 +697,7 @@ function SubFilterButton({
         }}
       >
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
           {content}
         </DrawerContent>
       </Drawer>
@@ -788,7 +788,7 @@ export function SubFilterContent({
           ))}
         </div>
       </div>
-      <DropdownMenuSeparator />
+      {isDesktop && <DropdownMenuSeparator />}
       <div className="flex items-center justify-evenly p-2">
         <Button
           variant="select"
@@ -877,7 +877,7 @@ function SearchTypeButton({
         }}
       >
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
           {content}
         </DrawerContent>
       </Drawer>
@@ -956,7 +956,7 @@ export function SearchTypeContent({
             }}
           />
         </div>
-        <DropdownMenuSeparator />
+        {isDesktop && <DropdownMenuSeparator />}
         <div className="flex items-center justify-evenly p-2">
           <Button
             variant="select"

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

@@ -193,7 +193,7 @@ export default function ObjectLifecycle({
   };
 
   useEffect(() => {
-    if (eventSequence) {
+    if (eventSequence && eventSequence.length > 0) {
       setTimeIndex(eventSequence?.[current].timestamp);
       handleSetBox(eventSequence?.[current].data.box ?? []);
       setLifecycleZones(eventSequence?.[current].data.zones);

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

@@ -237,7 +237,7 @@ function ObjectDetailsTab({
   const [desc, setDesc] = useState(search?.data.description);
 
   // we have to make sure the current selected search item stays in sync
-  useEffect(() => setDesc(search?.data.description), [search]);
+  useEffect(() => setDesc(search?.data.description ?? ""), [search]);
 
   const formattedDate = useFormattedTimestamp(
     search?.start_time ?? 0,
@@ -351,7 +351,7 @@ function ObjectDetailsTab({
         <div className="text-sm text-primary/40">Description</div>
         <Textarea
           className="md:h-64"
-          placeholder="Description of the event"
+          placeholder="Description of the tracked object"
           value={desc}
           onChange={(e) => setDesc(e.target.value)}
         />

web/src/components/ui/calendar-range.tsx

@@ -315,7 +315,7 @@ export function DateRangePicker({
 
   return (
     <div className="w-full">
-      <div className="flex py-2">
+      <div className="flex flex-row items-start justify-center py-2">
         <div className="flex">
           <div className="flex flex-col">
             <div className="flex flex-col items-center justify-end gap-2 px-3 pb-4 lg:flex-row lg:items-start lg:pb-0">