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

2025-08-20 09:44:49 -05:00
parent 5b261e45f3
commit bbd7d5a985
5 changed files with 151 additions and 52 deletions
--- a/spotizerr-ui/src/components/config/DownloadsTab.tsx
+++ b/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>
  );
 }
--- a/spotizerr-ui/src/components/config/FormattingTab.tsx
+++ b/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>
  );
 }
--- a/spotizerr-ui/src/components/config/GeneralTab.tsx
+++ b/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>
  );
 }
--- a/spotizerr-ui/src/components/config/ServerTab.tsx
+++ b/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)}
--- a/spotizerr-ui/src/components/config/WatchTab.tsx
+++ b/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>
  );
 }