fix build warnings from tailwind, fonts, and fast refresh (#24359)

fix duplicated styles, move fonts to src/assets/fonts for vite to bundle (nginx already rewrites correctly), and fix fast refresh for PreviewController, auth context/provider, and statusbar context

web/src/components/Statusbar.tsx

@@ -2,7 +2,7 @@ import { useEmbeddingsReindexProgress } from "@/api/ws";
 import {
   StatusBarMessagesContext,
   StatusMessage,
-} from "@/context/statusbar-provider";
+} from "@/context/statusbar-context";
 import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
 import StatusBarNotices from "@/components/health/StatusBarNotices";
 import { cn } from "@/lib/utils";

web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx

@@ -10,7 +10,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { StatusBarMessagesContext } from "@/context/statusbar-provider";
+import { StatusBarMessagesContext } from "@/context/statusbar-context";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";

web/src/components/config-form/sections/BaseSection.tsx

@@ -61,7 +61,7 @@ import {
   JsonValue,
 } from "@/types/configForm";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { StatusBarMessagesContext } from "@/context/statusbar-provider";
+import { StatusBarMessagesContext } from "@/context/statusbar-context";
 import {
   cameraUpdateTopicMap,
   globalCameraDefaultSections,

web/src/components/navigation/Bottombar.tsx

@@ -19,7 +19,7 @@ import useNavigation from "@/hooks/use-navigation";
 import {
   StatusBarMessagesContext,
   StatusMessage,
-} from "@/context/statusbar-provider";
+} from "@/context/statusbar-context";
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { isMobile } from "react-device-detect";

web/src/components/player/PreviewController.ts

@@ -0,0 +1,13 @@
+export abstract class PreviewController {
+  public camera = "";
+
+  constructor(camera: string) {
+    this.camera = camera;
+  }
+
+  abstract scrubToTimestamp(time: number): boolean;
+
+  abstract finishedSeeking(): void;
+
+  abstract setNewPreviewStartTime(time: number): void;
+}

web/src/components/player/PreviewPlayer.tsx

@@ -22,6 +22,7 @@ import {
 } from "@/hooks/use-camera-previews";
 import { useTranslation } from "react-i18next";
 import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
+import { PreviewController } from "./PreviewController";
 
 type PreviewPlayerProps = {
   previewRef?: (ref: HTMLDivElement | null) => void;
@@ -102,20 +103,6 @@ export default function PreviewPlayer({
   );
 }
 
-export abstract class PreviewController {
-  public camera = "";
-
-  constructor(camera: string) {
-    this.camera = camera;
-  }
-
-  abstract scrubToTimestamp(time: number): boolean;
-
-  abstract finishedSeeking(): void;
-
-  abstract setNewPreviewStartTime(time: number): void;
-}
-
 type PreviewVideoPlayerProps = {
   visibilityRef?: (ref: HTMLDivElement | null) => void;
   className?: string;

web/src/components/player/dynamic/DynamicVideoController.ts

@@ -1,6 +1,6 @@
 import { Recording } from "@/types/record";
 import { DynamicPlayback } from "@/types/playback";
-import { PreviewController } from "../PreviewPlayer";
+import { PreviewController } from "../PreviewController";
 import { TimeRange, TrackingDetailsSequence } from "@/types/timeline";
 import {
   calculateInpointOffset,

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -16,7 +16,8 @@ import {
   RecordingCoverage,
 } from "@/types/record";
 import { Preview } from "@/types/preview";
-import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
+import PreviewPlayer from "../PreviewPlayer";
+import { PreviewController } from "../PreviewController";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer, { HlsSource } from "../HlsVideoPlayer";
 import { useDetailStream } from "@/context/detail-stream-context";

web/src/components/settings/CloneCameraDialog.tsx

@@ -65,7 +65,7 @@ import {
 import { buildConfigDataForPath } from "@/utils/configUtil";
 import { useConfigSchema } from "@/hooks/use-config-schema";
 import { useRestart } from "@/api/ws";
-import { StatusBarMessagesContext } from "@/context/statusbar-provider";
+import { StatusBarMessagesContext } from "@/context/statusbar-context";
 import RestartDialog from "@/components/overlay/dialog/RestartDialog";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import SaveAllPreviewPopover from "@/components/overlay/detail/SaveAllPreviewPopover";

web/src/components/ui/circular-progress-bar.tsx

@@ -99,7 +99,11 @@ export default function AnimatedCircularProgressBar({
       </svg>
       <span
         data-current-value={currentPercent}
-        className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
+        className="absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
+        style={{
+          animationDuration: "var(--transition-length)",
+          animationDelay: "var(--delay)",
+        }}
       >
         {currentPercent}%
       </span>