feat: Added visual confirmation when saving settings and moved button to the top right

spotizerr-ui/src/components/config/WatchTab.tsx

@@ -57,6 +57,7 @@ const saveWatchConfig = async (data: Partial<WatchSettings>) => {
 export function WatchTab() {
   const queryClient = useQueryClient();
   const [validationError, setValidationError] = useState<string>("");
+  const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
 
   const { data: config, isLoading } = useQuery({
     queryKey: ["watchConfig"],
@@ -87,10 +88,14 @@ export function WatchTab() {
     mutationFn: saveWatchConfig,
     onSuccess: () => {
       toast.success("Watch settings saved successfully!");
+      setSaveStatus("success");
+      setTimeout(() => setSaveStatus("idle"), 3000);
       queryClient.invalidateQueries({ queryKey: ["watchConfig"] });
     },
     onError: (error) => {
       toast.error(`Failed to save settings: ${error.message}`);
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
     },
   });
 
@@ -155,6 +160,24 @@ export function WatchTab() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
+      <div className="flex items-center justify-end mb-4">
+        <div className="flex items-center gap-3">
+          {saveStatus === "success" && (
+            <span className="text-success text-sm">Saved</span>
+          )}
+          {saveStatus === "error" && (
+            <span className="text-error text-sm">Save failed</span>
+          )}
+          <button
+            type="submit"
+            disabled={mutation.isPending || !!validationError}
+            className="px-4 py-2 bg-button-primary hover:bg-button-primary-hover text-button-primary-text rounded-md disabled:opacity-50"
+          >
+            {mutation.isPending ? "Saving..." : "Save Watch Settings"}
+          </button>
+        </div>
+      </div>
+
       <div className="space-y-4">
         <h3 className="text-xl font-semibold text-content-primary dark:text-content-primary-dark">Watchlist Behavior</h3>
         <div className="flex items-center justify-between">
@@ -234,14 +257,6 @@ export function WatchTab() {
           ))}
         </div>
       </div>
-
-      <button
-        type="submit"
-        disabled={mutation.isPending || !!validationError}
-        className="px-4 py-2 bg-button-primary hover:bg-button-primary-hover text-button-primary-text rounded-md disabled:opacity-50"
-      >
-        {mutation.isPending ? "Saving..." : "Save Watch Settings"}
-      </button>
     </form>
   );
 }