From d705e37d8556671d4c90a9a892f46592a9e2d90f Mon Sep 17 00:00:00 2001
From: wisecolt <wisecolt@gmail.com>
Date: Tue, 3 Feb 2026 12:34:49 +0300
Subject: [PATCH] feat(ui): toast bildirim sistemini ekle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Toast bileşeni ve store oluşturuldu. Ayarlar sayfasındaki işlem bildirimleri yeni sistemle gösterilmeye başlandı.
---
 client/src/App.svelte              |  2 +
 client/src/components/Toast.svelte | 86 ++++++++++++++++++++++++++++++
 client/src/routes/Settings.svelte  | 37 ++++---------
 client/src/stores/toastStore.js    | 24 +++++++++
 4 files changed, 121 insertions(+), 28 deletions(-)
 create mode 100644 client/src/components/Toast.svelte
 create mode 100644 client/src/stores/toastStore.js

diff --git a/client/src/App.svelte b/client/src/App.svelte
index b167fae..506a7eb 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -4,6 +4,7 @@
   import Sidebar from "./components/Sidebar.svelte";
   import Topbar from "./components/Topbar.svelte";
   import MiniPlayer from "./components/MiniPlayer.svelte";
+  import Toast from "./components/Toast.svelte";
   import Files from "./routes/Files.svelte";
   import Transfers from "./routes/Transfers.svelte";
   import Trash from "./routes/Trash.svelte";
@@ -163,6 +164,7 @@
       </div>
 
       <MiniPlayer />
+      <Toast />
 
       <!-- Sidebar dışına tıklayınca kapanma -->
       {#if menuOpen}
diff --git a/client/src/components/Toast.svelte b/client/src/components/Toast.svelte
new file mode 100644
index 0000000..90cb384
--- /dev/null
+++ b/client/src/components/Toast.svelte
@@ -0,0 +1,86 @@
+<script>
+  import { toast } from '../stores/toastStore.js';
+  import { fade } from 'svelte/transition';
+
+  let toastData = {
+    message: null,
+    type: 'success',
+    visible: false
+  };
+
+  toast.subscribe(value => {
+    toastData = value;
+  });
+
+  const icons = {
+    success: 'fa-solid fa-circle-check',
+    error: 'fa-solid fa-circle-exclamation',
+    info: 'fa-solid fa-circle-info'
+  };
+</script>
+
+{#if toastData.visible && toastData.message}
+  <div class="toast-container" transition:fade={{ duration: 200 }}>
+    <div class="toast {toastData.type}">
+      <i class="{icons[toastData.type] || icons.info}"></i>
+      <span>{toastData.message}</span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .toast-container {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 9999;
+    max-width: min(350px, 90vw);
+  }
+
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 18px;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 500;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .toast i {
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  .toast.success {
+    background: linear-gradient(135deg, rgba(0, 200, 83, 0.95), rgba(0, 150, 63, 0.95));
+    color: white;
+  }
+
+  .toast.error {
+    background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(185, 28, 28, 0.95));
+    color: white;
+  }
+
+  .toast.info {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
+    color: white;
+  }
+
+  @media (max-width: 640px) {
+    .toast-container {
+      bottom: 16px;
+      right: 16px;
+      left: 16px;
+      max-width: none;
+    }
+
+    .toast {
+      padding: 12px 16px;
+      font-size: 13px;
+    }
+  }
+</style>
diff --git a/client/src/routes/Settings.svelte b/client/src/routes/Settings.svelte
index 7d251ae..59a2753 100644
--- a/client/src/routes/Settings.svelte
+++ b/client/src/routes/Settings.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte";
   import { apiFetch } from "../utils/api.js";
+  import { showToast } from "../stores/toastStore.js";
 
   const tabs = [
     { id: "general", label: "General", icon: "fa-solid fa-sliders" },
@@ -20,7 +21,6 @@
   let onlyAudio = false;
   const resolutionOptions = ["1080p", "720p", "480p", "360p", "240p", "144p"];
   let error = null;
-  let success = null;
 
   let rcloneStatus = null;
   let rcloneLoading = false;
@@ -34,7 +34,6 @@
   async function loadCookies() {
     loadingCookies = true;
     error = null;
-    success = null;
     try {
       const resp = await apiFetch("/api/youtube/cookies");
       if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
@@ -51,7 +50,6 @@
   async function saveCookies() {
     if (savingCookies) return;
     error = null;
-    success = null;
     savingCookies = true;
     try {
       const payload = {
@@ -71,7 +69,7 @@
         throw new Error(data?.error || `HTTP ${resp.status}`);
       }
       cookiesUpdatedAt = data.updatedAt || Date.now();
-      success = "Cookies kaydedildi.";
+      showToast("Cookies kaydedildi.", "success");
     } catch (err) {
       error = err?.message || "Cookies kaydedilemedi.";
     } finally {
@@ -99,7 +97,6 @@
     if (savingYtSettings) return;
     savingYtSettings = true;
     error = null;
-    success = null;
     try {
       const resp = await apiFetch("/api/youtube/settings", {
         method: "POST",
@@ -113,7 +110,7 @@
       if (!resp.ok || !data?.ok) {
         throw new Error(data?.error || `HTTP ${resp.status}`);
       }
-      success = "YouTube indirme ayarları kaydedildi.";
+      showToast("YouTube indirme ayarları kaydedildi.", "success");
     } catch (err) {
       error = err?.message || "YouTube ayarları kaydedilemedi.";
     } finally {
@@ -156,7 +153,6 @@
     if (rcloneSaving) return;
     rcloneSaving = true;
     error = null;
-    success = null;
     try {
       const resp = await apiFetch("/api/rclone/settings", {
         method: "POST",
@@ -180,7 +176,7 @@
       if (!confResp.ok || !confData?.ok) {
         throw new Error(confData?.error || `HTTP ${confResp.status}`);
       }
-      success = "Rclone ayarları kaydedildi.";
+      showToast("Rclone ayarları kaydedildi.", "success");
       await loadRcloneStatus();
     } catch (err) {
       error = err?.message || "Rclone ayarları kaydedilemedi.";
@@ -191,7 +187,6 @@
 
   async function startRcloneMount() {
     error = null;
-    success = null;
     try {
       const resp = await apiFetch("/api/rclone/mount", { method: "POST" });
       const data = await resp.json().catch(() => ({}));
@@ -200,16 +195,16 @@
       }
 
       // Mount başlatıldı, birkaç saniye bekleyip tekrar kontrol et
-      success = "Rclone mount başlatılıyor...";
+      showToast("Rclone mount başlatılıyor...", "info");
 
       // 2 saniye sonra status güncelle
       setTimeout(async () => {
         await loadRcloneStatus();
         // Status yüklendikten sonra mesajı güncelle
         if (rcloneStatus?.mounted) {
-          success = "Rclone mount başarıyla başlatıldı.";
+          showToast("Rclone mount başarıyla başlatıldı.", "success");
         } else if (rcloneStatus?.running) {
-          success = "Rclone mount başlatıldı, mount tamamlanıyor...";
+          showToast("Rclone mount başlatıldı, mount tamamlanıyor...", "info");
         } else {
           error = "Rclone mount başlatılamadı.";
         }
@@ -224,14 +219,13 @@
 
   async function stopRcloneMount() {
     error = null;
-    success = null;
     try {
       const resp = await apiFetch("/api/rclone/unmount", { method: "POST" });
       const data = await resp.json().catch(() => ({}));
       if (!resp.ok || !data?.ok) {
         throw new Error(data?.error || `HTTP ${resp.status}`);
       }
-      success = "Rclone mount durduruldu.";
+      showToast("Rclone mount durduruldu.", "success");
       await loadRcloneStatus();
     } catch (err) {
       error = err?.message || "Rclone mount durdurulamadı.";
@@ -240,14 +234,13 @@
 
   async function cleanRcloneCache() {
     error = null;
-    success = null;
     try {
       const resp = await apiFetch("/api/rclone/cache/clean", { method: "POST" });
       const data = await resp.json().catch(() => ({}));
       if (!resp.ok || !data?.ok) {
         throw new Error(data?.error || `HTTP ${resp.status}`);
       }
-      success = "Cache temizlendi.";
+      showToast("Cache temizlendi.", "success");
     } catch (err) {
       error = err?.message || "Cache temizlenemedi.";
     }
@@ -371,12 +364,6 @@
           {error}
         </div>
       {/if}
-      {#if success}
-        <div class="alert success">
-          <i class="fa-solid fa-circle-check"></i>
-          {success}
-        </div>
-      {/if}
     </div>
   {:else if activeTab === "general"}
     <div class="card muted">Genel ayarlar burada yer alacak.</div>
@@ -456,12 +443,6 @@
           {error}
         </div>
       {/if}
-      {#if success}
-        <div class="alert success" style="margin-top:10px;">
-          <i class="fa-solid fa-circle-check"></i>
-          {success}
-        </div>
-      {/if}
     </div>
 
     <!-- Mount Kontrol Kartı -->
diff --git a/client/src/stores/toastStore.js b/client/src/stores/toastStore.js
new file mode 100644
index 0000000..3081cce
--- /dev/null
+++ b/client/src/stores/toastStore.js
@@ -0,0 +1,24 @@
+import { writable } from 'svelte/store';
+
+export const toast = writable({
+  message: null,
+  type: 'success', // success, error, info
+  visible: false
+});
+
+let toastTimeout = null;
+
+export function showToast(message, type = 'success', duration = 3000) {
+  // Önceki toast'ı temizle
+  if (toastTimeout) {
+    clearTimeout(toastTimeout);
+  }
+
+  // Yeni toast'ı göster
+  toast.update({ message, type, visible: true });
+
+  // Belirli süre sonra gizle
+  toastTimeout = setTimeout(() => {
+    toast.update({ message: null, type: 'success', visible: false });
+  }, duration);
+}