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

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

@@ -72,6 +72,7 @@ const fetchCredentials = async (service: "spotify" | "deezer"): Promise<Credenti
 export function DownloadsTab({ config, isLoading }: DownloadsTabProps) {
   const queryClient = useQueryClient();
   const [validationError, setValidationError] = useState<string>("");
+  const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
 
   // Fetch watch config
   const { data: watchConfig } = useQuery({
@@ -97,10 +98,14 @@ export function DownloadsTab({ config, isLoading }: DownloadsTabProps) {
     mutationFn: saveDownloadConfig,
     onSuccess: () => {
       toast.success("Download settings saved successfully!");
+      setSaveStatus("success");
+      setTimeout(() => setSaveStatus("idle"), 3000);
       queryClient.invalidateQueries({ queryKey: ["config"] });
     },
     onError: (error) => {
       toast.error(`Failed to save settings: ${error.message}`);
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
     },
   });
 
@@ -173,6 +178,24 @@ export function DownloadsTab({ config, isLoading }: DownloadsTabProps) {
 
   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 Download Settings"}
+          </button>
+        </div>
+      </div>
+
       {/* Download Settings */}
       <div className="space-y-4">
         <h3 className="text-xl font-semibold text-content-primary dark:text-content-primary-dark">Download Behavior</h3>
@@ -360,14 +383,6 @@ export function DownloadsTab({ config, isLoading }: DownloadsTabProps) {
           />
         </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 Download Settings"}
-      </button>
     </form>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useForm, type SubmitHandler } from "react-hook-form";
 import { authApiClient } from "../../lib/api-client";
 import { toast } from "sonner";
@@ -79,15 +79,20 @@ export function FormattingTab({ config, isLoading }: FormattingTabProps) {
   const queryClient = useQueryClient();
   const dirInputRef = useRef<HTMLInputElement | null>(null);
   const trackInputRef = useRef<HTMLInputElement | null>(null);
+  const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
 
   const mutation = useMutation({
     mutationFn: saveFormattingConfig,
     onSuccess: () => {
       toast.success("Formatting settings saved!");
+      setSaveStatus("success");
+      setTimeout(() => setSaveStatus("idle"), 3000);
       queryClient.invalidateQueries({ queryKey: ["config"] });
     },
     onError: (error) => {
       toast.error(`Failed to save settings: ${error.message}`);
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
     },
   });
 
@@ -120,6 +125,24 @@ export function FormattingTab({ config, isLoading }: FormattingTabProps) {
 
   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}
+            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 Formatting Settings"}
+          </button>
+        </div>
+      </div>
+
       <div className="space-y-4">
         <h3 className="text-xl font-semibold text-content-primary dark:text-content-primary-dark">File Naming</h3>
         <div className="flex flex-col gap-2">
@@ -185,14 +208,6 @@ export function FormattingTab({ config, isLoading }: FormattingTabProps) {
           <input id="spotifyMetadataToggle" type="checkbox" {...register("spotifyMetadata")} className="h-6 w-6 rounded" />
         </div>
       </div>
-
-      <button
-        type="submit"
-        disabled={mutation.isPending}
-        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 Formatting Settings"}
-      </button>
     </form>
   );
 }

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

@@ -3,7 +3,7 @@ import { authApiClient } from "../../lib/api-client";
 import { toast } from "sonner";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useSettings } from "../../contexts/settings-context";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 // --- Type Definitions ---
 interface Credential {
@@ -56,13 +56,21 @@ export function GeneralTab({ config, isLoading: isConfigLoading }: GeneralTabPro
     }
   }, [config, reset]);
 
+  const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
+
   const mutation = useMutation({
     mutationFn: saveGeneralConfig,
     onSuccess: () => {
       toast.success("General settings saved!");
+      setSaveStatus("success");
+      setTimeout(() => setSaveStatus("idle"), 3000);
       queryClient.invalidateQueries({ queryKey: ["config"] });
     },
-    onError: (e: Error) => toast.error(`Failed to save: ${e.message}`),
+    onError: (e: Error) => {
+      toast.error(`Failed to save: ${e.message}`);
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
+    },
   });
 
   const onSubmit: SubmitHandler<GeneralSettings> = (data) => {
@@ -74,6 +82,24 @@ export function GeneralTab({ config, isLoading: isConfigLoading }: GeneralTabPro
 
   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}
+            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 General Settings"}
+          </button>
+        </div>
+      </div>
+
       <div className="space-y-4">
         <h3 className="text-xl font-semibold text-content-primary dark:text-content-primary-dark">Service Defaults</h3>
         <div className="flex flex-col gap-2">
@@ -140,14 +166,6 @@ export function GeneralTab({ config, isLoading: isConfigLoading }: GeneralTabPro
           The explicit content filter is controlled by an environment variable and cannot be changed here.
         </p>
       </div>
-
-      <button
-        type="submit"
-        disabled={mutation.isPending}
-        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 General Settings"}
-      </button>
     </form>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { authApiClient } from "../../lib/api-client";
 import { toast } from "sonner";
@@ -46,14 +46,21 @@ function SpotifyApiForm() {
   const queryClient = useQueryClient();
   const { data, isLoading } = useQuery({ queryKey: ["spotifyApiConfig"], queryFn: fetchSpotifyApiConfig });
   const { register, handleSubmit, reset } = useForm<SpotifyApiSettings>();
+  const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
 
   const mutation = useMutation({
     mutationFn: saveSpotifyApiConfig,
     onSuccess: () => {
       toast.success("Spotify API settings saved!");
+      setSaveStatus("success");
+      setTimeout(() => setSaveStatus("idle"), 3000);
       queryClient.invalidateQueries({ queryKey: ["spotifyApiConfig"] });
     },
-    onError: (e) => toast.error(`Failed to save: ${e.message}`),
+    onError: (e) => {
+      toast.error(`Failed to save: ${e.message}`);
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
+    },
   });
 
   useEffect(() => {
@@ -66,6 +73,24 @@ function SpotifyApiForm() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="flex items-center justify-end mb-2">
+        <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}
+            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 Spotify API"}
+          </button>
+        </div>
+      </div>
+
       <div className="flex flex-col gap-2">
         <label htmlFor="client_id" className="text-content-primary dark:text-content-primary-dark">Client ID</label>
         <input
@@ -86,13 +111,6 @@ function SpotifyApiForm() {
           placeholder="Optional"
         />
       </div>
-      <button
-        type="submit"
-        disabled={mutation.isPending}
-        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 Spotify API"}
-      </button>
     </form>
   );
 }
@@ -102,14 +120,21 @@ function WebhookForm() {
   const { data, isLoading } = useQuery({ queryKey: ["webhookConfig"], queryFn: fetchWebhookConfig });
   const { register, handleSubmit, control, reset, watch } = useForm<WebhookSettings>();
   const currentUrl = watch("url");
+  const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
 
   const mutation = useMutation({
     mutationFn: saveWebhookConfig,
     onSuccess: () => {
       // No toast needed since the function shows one
+      setSaveStatus("success");
+      setTimeout(() => setSaveStatus("idle"), 3000);
       queryClient.invalidateQueries({ queryKey: ["webhookConfig"] });
     },
-    onError: (e) => toast.error(`Failed to save: ${e.message}`),
+    onError: (e) => {
+      toast.error(`Failed to save: ${e.message}`);
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
+    },
   });
 
   const testMutation = useMutation({
@@ -130,6 +155,24 @@ function WebhookForm() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+      <div className="flex items-center justify-end mb-2">
+        <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}
+            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 Webhook"}
+          </button>
+        </div>
+      </div>
+
       <div className="flex flex-col gap-2">
         <label htmlFor="webhookUrl" className="text-content-primary dark:text-content-primary-dark">Webhook URL</label>
         <input
@@ -168,13 +211,6 @@ function WebhookForm() {
         </div>
       </div>
       <div className="flex gap-2">
-        <button
-          type="submit"
-          disabled={mutation.isPending}
-          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 Webhook"}
-        </button>
         <button
           type="button"
           onClick={() => testMutation.mutate(currentUrl)}

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>
   );
 }