feat(ui): add sound feedback and improve modal accessibility

README-TR.md

@@ -335,6 +335,7 @@ Coolify kullanırken, her bir uygulama ve servisin URL'lerini ve temel bilgileri
   - **Sessiz Arka Plan Senkronizasyonu**: Kullanıcı deneyimini bozmadan veri güncelleme
   - **İşleme Özel Yükleme**: Kaynak başına, işlem başına yükleme durumları
   - **Otomatik Temizleme**: Uygun interval temizliği ile bellek sızıntılarını önler
+- **Ses Efektleri Sistemi**: Sağ alt köşede açma/kapama kontrolü ile buton etkileşimleri için hafif ses geri bildirimi
 - **Çok Dilli Destek**: İngilizce ve Türkçe arasında sorunsuz geçiş
 - **Responsive Tasarım**: Masaüstü ve mobil cihazlar için optimize edilmiş modern arayüz
 - **Gerçek Zamanlı İzleme**: Kaynak durumu ve sağlığını gerçek zamanlı takip

README.md

@@ -335,6 +335,7 @@ While using Coolify, I found myself constantly clicking through each application
   - **Silent Background Sync**: Updates data without disrupting user experience
   - **Action-Specific Loading**: Per-resource, per-action loading states
   - **Auto-Cleanup**: Prevents memory leaks with proper interval cleanup
+- **Sound Effects System**: Subtle audio feedback for button interactions with toggle control in bottom-right corner
 - **Multi-language Support**: Seamless switching between English and Turkish
 - **Responsive Design**: Modern UI optimized for desktop and mobile devices
 - **Real-time Monitoring**: Track resource status and health in real-time

client/src/App.jsx

@@ -3,6 +3,8 @@ import { Suspense, lazy } from "react";
 import { Tooltip } from "react-tooltip";
 import { Toaster } from "react-hot-toast";
 import { isAuthenticated } from "./api/auth";
+import { SoundProvider } from "./hooks/useSoundEffects";
+import SoundToggle from "./components/SoundToggle";
 
 const Login = lazy(() => import("./pages/Login"));
 const Dashboard = lazy(() => import("./pages/Dashboard"));
@@ -19,74 +21,77 @@ const LoadingSpinner = () => (
 
 const App = () => {
   return (
-    <BrowserRouter>
-      <Suspense fallback={<LoadingSpinner />}>
-        <Routes>
-          <Route path="/login" element={<Login />} />
-          <Route
-            path="/dashboard"
-            element={
-              <PrivateRoute>
-                <Dashboard />
-              </PrivateRoute>
-            }
-          />
-          <Route path="/" element={<Navigate to="/dashboard" replace />} />
-          <Route path="*" element={<Navigate to="/dashboard" replace />} />
-        </Routes>
-      </Suspense>
-      <Tooltip id="backup-tooltip" />
-      <Tooltip id="internal-url-tooltip" />
-      <Tooltip id="external-url-tooltip" />
-      <Toaster
-        position="top-right"
-        reverseOrder={false}
-        gutter={12}
-        toastOptions={{
-          duration: 4000,
-          style: {
-            borderRadius: "0.5rem",
-            padding: "1rem 1.25rem",
-            fontSize: "0.95rem",
-            fontWeight: "500",
-            boxShadow:
-              "0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08)",
-            minWidth: "320px",
-            maxWidth: "420px",
-          },
-          success: {
+    <SoundProvider>
+      <BrowserRouter>
+        <Suspense fallback={<LoadingSpinner />}>
+          <Routes>
+            <Route path="/login" element={<Login />} />
+            <Route
+              path="/dashboard"
+              element={
+                <PrivateRoute>
+                  <Dashboard />
+                </PrivateRoute>
+              }
+            />
+            <Route path="/" element={<Navigate to="/dashboard" replace />} />
+            <Route path="*" element={<Navigate to="/dashboard" replace />} />
+          </Routes>
+        </Suspense>
+        <Tooltip id="backup-tooltip" />
+        <Tooltip id="internal-url-tooltip" />
+        <Tooltip id="external-url-tooltip" />
+        <Toaster
+          position="top-right"
+          reverseOrder={false}
+          gutter={12}
+          toastOptions={{
+            duration: 4000,
             style: {
-              background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
-              color: "#ffffff",
+              borderRadius: "0.5rem",
+              padding: "1rem 1.25rem",
+              fontSize: "0.95rem",
+              fontWeight: "500",
+              boxShadow:
+                "0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08)",
+              minWidth: "320px",
+              maxWidth: "420px",
             },
-            iconTheme: {
-              primary: "#ffffff",
-              secondary: "#10b981",
+            success: {
+              style: {
+                background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
+                color: "#ffffff",
+              },
+              iconTheme: {
+                primary: "#ffffff",
+                secondary: "#10b981",
+              },
             },
-          },
-          error: {
-            style: {
-              background: "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
-              color: "#ffffff",
-            },
-            iconTheme: {
-              primary: "#ffffff",
-              secondary: "#ef4444",
-            },
-          },
-          loading: {
-            style: {
-              background: "linear-gradient(135deg, #a855f7 0%, #9333ea 100%)",
-              color: "#ffffff",
+            error: {
+              style: {
+                background: "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
+                color: "#ffffff",
+              },
+              iconTheme: {
+                primary: "#ffffff",
+                secondary: "#ef4444",
+              },
             },
-            iconTheme: {
-              primary: "#ffffff",
-              secondary: "#a855f7",
+            loading: {
+              style: {
+                background: "linear-gradient(135deg, #a855f7 0%, #9333ea 100%)",
+                color: "#ffffff",
+              },
+              iconTheme: {
+                primary: "#ffffff",
+                secondary: "#a855f7",
+              },
             },
-          },
-        }}
-      />
-    </BrowserRouter>
+          }}
+        />
+        <SoundToggle />
+      </BrowserRouter>
+    </SoundProvider>
   );
 };
 

client/src/components/LanguageSelector.jsx

@@ -1,9 +1,13 @@
 import { useTranslation } from "react-i18next";
+import { useSoundEffects } from "../hooks/useSoundEffects";
+import { SOUND_TYPES } from "../utils/soundUtils";
 
 const LanguageSelector = () => {
   const { i18n } = useTranslation();
+  const { playSound } = useSoundEffects();
 
   const changeLanguage = () => {
+    playSound(SOUND_TYPES.CLICK);
     const nextLanguage = i18n.language === "tr" ? "en" : "tr";
     i18n.changeLanguage(nextLanguage);
     localStorage.setItem("language", nextLanguage);