UI tweaks and bugfixes (#11692)

* UI tweaks and bugfixes

* fix linter complaints in unmodified files

web/src/components/dynamic/NewReviewData.tsx

@@ -2,6 +2,7 @@ import { ReviewSegment } from "@/types/review";
 import { Button } from "../ui/button";
 import { LuRefreshCcw } from "react-icons/lu";
 import { MutableRefObject, useMemo } from "react";
+import { cn } from "@/lib/utils";
 
 type NewReviewDataProps = {
   className: string;
@@ -29,11 +30,12 @@ export default function NewReviewData({
     <div className={className}>
       <div className="pointer-events-auto mr-[65px] flex items-center justify-center md:mr-[115px]">
         <Button
-          className={`${
+          className={cn(
             hasUpdate
               ? "duration-500 animate-in slide-in-from-top"
-              : "invisible"
-          }  mx-auto mt-5 bg-gray-400 text-center text-white`}
+              : "invisible",
+            "mx-auto mt-5 bg-gray-400 text-center text-white",
+          )}
           onClick={() => {
             pullLatestData();
             if (contentRef.current) {

web/src/components/overlay/SaveExportOverlay.tsx

@@ -1,6 +1,7 @@
 import { LuX } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { FaCompactDisc } from "react-icons/fa";
+import { cn } from "@/lib/utils";
 
 type SaveExportOverlayProps = {
   className: string;
@@ -17,9 +18,11 @@ export default function SaveExportOverlay({
   return (
     <div className={className}>
       <div
-        className={`pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2 ${
-          show ? "duration-500 animate-in slide-in-from-top" : "invisible"
-        }  mx-auto mt-5 text-center`}
+        className={cn(
+          "pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2",
+          show ? "duration-500 animate-in slide-in-from-top" : "invisible",
+          "mx-auto mt-5 text-center",
+        )}
       >
         <Button
           className="flex items-center gap-1"

web/src/components/timeline/segment-metadata.tsx

@@ -1,3 +1,6 @@
+import { FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
+
 type MinimapSegmentProps = {
   isFirstSegmentInMinimap: boolean;
   isLastSegmentInMinimap: boolean;
@@ -28,6 +31,8 @@ export function MinimapBounds({
   firstMinimapSegmentRef,
   dense,
 }: MinimapSegmentProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
   return (
     <>
       {isFirstSegmentInMinimap && (
@@ -36,6 +41,7 @@ export function MinimapBounds({
           ref={firstMinimapSegmentRef}
         >
           {new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
+            hour12: config?.ui.time_format != "24hour",
             hour: "2-digit",
             minute: "2-digit",
             ...(!dense && { month: "short", day: "2-digit" }),
@@ -46,6 +52,7 @@ export function MinimapBounds({
       {isLastSegmentInMinimap && (
         <div className="pointer-events-none absolute inset-0 -top-3 z-20 flex w-full select-none items-center justify-center text-center text-[10px] font-medium text-primary">
           {new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
+            hour12: config?.ui.time_format != "24hour",
             hour: "2-digit",
             minute: "2-digit",
             ...(!dense && { month: "short", day: "2-digit" }),
@@ -83,6 +90,8 @@ export function Timestamp({
   timestampSpread,
   segmentKey,
 }: TimestampSegmentProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
   return (
     <div className="absolute left-[15px] z-10 h-[8px]">
       {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
@@ -93,6 +102,7 @@ export function Timestamp({
           {timestamp.getMinutes() % timestampSpread === 0 &&
             timestamp.getSeconds() === 0 &&
             timestamp.toLocaleTimeString([], {
+              hour12: config?.ui.time_format != "24hour",
               hour: "2-digit",
               minute: "2-digit",
             })}