UI tweaks and bugfixes (#11692)

* UI tweaks and bugfixes

* fix linter complaints in unmodified files

web/src/hooks/use-draggable-element.ts

@@ -1,6 +1,8 @@
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { useTimelineUtils } from "./use-timeline-utils";
+import { FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
 
 type DraggableElementProps = {
   contentRef: React.RefObject<HTMLElement>;
@@ -49,6 +51,8 @@ function useDraggableElement({
   dense,
   timelineSegments,
 }: DraggableElementProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
   const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
   const [elementScrollIntoView, setElementScrollIntoView] = useState(true);
@@ -170,6 +174,7 @@ function useDraggableElement({
             draggableElementTimeRef.current.textContent = new Date(
               segmentStartTime * 1000,
             ).toLocaleTimeString([], {
+              hour12: config?.ui.time_format != "24hour",
               hour: "2-digit",
               minute: "2-digit",
               ...(segmentDuration < 60 && !dense && { second: "2-digit" }),
@@ -196,6 +201,7 @@ function useDraggableElement({
       setDraggableElementTime,
       setDraggableElementPosition,
       dense,
+      config,
     ],
   );