WebUI Improvements and fixes (#9613)

* Show toast instead of text for success and errors

* Show correct times

* Start playing next hour when current hour ends

* Fix refreshing camera image

* Fix timeline

web/src/pages/ConfigEditor.tsx

@@ -9,6 +9,8 @@ import { Button } from "@/components/ui/button";
 import axios from "axios";
 import copy from "copy-to-clipboard";
 import { useTheme } from "@/context/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+import { toast } from "sonner";
 
 type SaveOptions = "saveonly" | "restart";
 
@@ -18,7 +20,6 @@ function ConfigEditor() {
   const { data: config } = useSWR<string>("config/raw");
 
   const { theme } = useTheme();
-  const [success, setSuccess] = useState<string | undefined>();
   const [error, setError] = useState<string | undefined>();
 
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
@@ -42,11 +43,11 @@ function ConfigEditor() {
         .then((response) => {
           if (response.status === 200) {
             setError("");
-            setSuccess(response.data.message);
+            toast.success(response.data.message, { position: "top-center" });
           }
         })
         .catch((error) => {
-          setSuccess("");
+          toast.error("Error saving config", { position: "top-center" });
 
           if (error.response) {
             setError(error.response.data.message);
@@ -150,7 +151,6 @@ function ConfigEditor() {
         </div>
       </div>
 
-      {success && <div className="max-h-20 text-success">{success}</div>}
       {error && (
         <div className="p-4 overflow-scroll text-danger whitespace-pre-wrap">
           {error}
@@ -158,6 +158,7 @@ function ConfigEditor() {
       )}
 
       <div ref={configRef} className="h-full mt-2" />
+      <Toaster />
     </div>
   );
 }