From 0759be39b4674e400319872e50e73fd4a081387a Mon Sep 17 00:00:00 2001
From: szbk <wisecolt@gmail.com>
Date: Wed, 3 Dec 2025 20:36:24 +0300
Subject: [PATCH] =?UTF-8?q?Profile=20menu=20olu=C5=9Fturuldu.=20Ba=C4=9Fla?=
 =?UTF-8?q?nt=C4=B1=20ve=20Page'ler=20eklendi.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                          |   3 +
 client/src/App.svelte               |   4 +
 client/src/components/Topbar.svelte | 149 +++++++++++++++++++++++++++-
 client/src/routes/Login.svelte      |  14 ++-
 client/src/routes/Profile.svelte    |  42 ++++++++
 client/src/routes/Settings.svelte   |  40 ++++++++
 6 files changed, 249 insertions(+), 3 deletions(-)
 create mode 100644 client/src/routes/Profile.svelte
 create mode 100644 client/src/routes/Settings.svelte

diff --git a/.gitignore b/.gitignore
index 032ea67..f044eff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,3 +71,6 @@ movie/movieData/**/backdrop.jpg
 /key.pem
 /cert.pem
 *.log
+
+# Client
+client/src/assets/avatar.png
\ No newline at end of file
diff --git a/client/src/App.svelte b/client/src/App.svelte
index ba452cd..6e62aaf 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -9,6 +9,8 @@
   import Movies from "./routes/Movies.svelte";
   import TvShows from "./routes/TvShows.svelte";
   import Music from "./routes/Music.svelte";
+  import Profile from "./routes/Profile.svelte";
+  import Settings from "./routes/Settings.svelte";
   import Login from "./routes/Login.svelte";
   import { API, getAccessToken } from "./utils/api.js";
   import { refreshMovieCount } from "./stores/movieStore.js";
@@ -118,6 +120,8 @@
         <Route path="/movies" component={Movies} />
         <Route path="/tv" component={TvShows} />
         <Route path="/music" component={Music} />
+        <Route path="/profile" component={Profile} />
+        <Route path="/settings" component={Settings} />
         <Route path="/transfers" component={Transfers} />
         <Route path="/trash" component={Trash} />
       </div>
diff --git a/client/src/components/Topbar.svelte b/client/src/components/Topbar.svelte
index ad007d2..166059a 100644
--- a/client/src/components/Topbar.svelte
+++ b/client/src/components/Topbar.svelte
@@ -1,13 +1,21 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { navigate } from "svelte-routing";
   import {
     activePlaceholder,
     activeSearchTerm,
     updateSearchTerm
   } from "../stores/searchStore.js";
 
+  import avatarSrc from "../assets/avatar.png";
+  import { clearTokens } from "../utils/api.js";
+
   const dispatch = createEventDispatcher();
   export let placeholder = "";
+  // Örnek avatar (yerel dosya)
+  export let avatarUrl = avatarSrc;
+  let showAvatarMenu = false;
+  let avatarWrap;
 
   const onToggle = () => dispatch("toggleMenu");
 
@@ -15,6 +23,41 @@
     updateSearchTerm(event.target.value);
   }
 
+  function toggleAvatarMenu() {
+    showAvatarMenu = !showAvatarMenu;
+  }
+
+  function goProfile() {
+    showAvatarMenu = false;
+    navigate("/profile");
+  }
+
+  function goSettings() {
+    showAvatarMenu = false;
+    navigate("/settings");
+  }
+
+  function logout() {
+    clearTokens();
+    showAvatarMenu = false;
+    window.location.replace("/login");
+  }
+
+  function handleDocumentClick(event) {
+    if (!showAvatarMenu) return;
+    if (avatarWrap && !avatarWrap.contains(event.target)) {
+      showAvatarMenu = false;
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleDocumentClick);
+  });
+
+  onDestroy(() => {
+    document.removeEventListener("click", handleDocumentClick);
+  });
+
   $: resolvedPlaceholder = placeholder || $activePlaceholder;
 </script>
 
@@ -37,6 +80,33 @@
       on:input={handleInput}
     />
   </div>
+
+  <div class="avatar-wrap" bind:this={avatarWrap}>
+    <button class="avatar" type="button" aria-label="Profil" on:click={toggleAvatarMenu}>
+      {#if avatarUrl}
+        <img src={avatarUrl} alt="Avatar" loading="lazy" />
+      {:else}
+        <i class="fa-solid fa-user"></i>
+      {/if}
+    </button>
+
+    {#if showAvatarMenu}
+      <div class="avatar-menu">
+        <button type="button" on:click={goProfile}>
+          <i class="fa-solid fa-user"></i>
+          Profile
+        </button>
+        <button type="button" on:click={goSettings}>
+          <i class="fa-solid fa-gear"></i>
+          Settings
+        </button>
+        <button type="button" class="logout" on:click={logout}>
+          <i class="fa-solid fa-right-from-bracket"></i>
+          Logout
+        </button>
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
@@ -85,4 +155,81 @@
       height: 36px;
     }
   }
+
+  .avatar {
+    border: none;
+    background: #f2f2f2;
+    border-radius: 10px;
+    width: 42px;
+    height: 42px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+
+  .avatar i {
+    color: #666;
+    font-size: 18px;
+  }
+
+  @media (max-width: 768px) {
+    .avatar {
+      width: 38px;
+      height: 38px;
+    }
+  }
+
+  .avatar-wrap {
+    position: relative;
+  }
+
+  .avatar-menu {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 8px);
+    background: #fff;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+    display: flex;
+    flex-direction: column;
+    min-width: 170px;
+    overflow: hidden;
+    z-index: 20;
+  }
+
+  .avatar-menu button {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    background: #fff;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    color: #1c2440;
+  }
+
+  .avatar-menu button:hover {
+    background: #f3f4f7;
+  }
+
+  .avatar-menu i {
+    width: 18px;
+    text-align: center;
+  }
+
+  .avatar-menu .logout {
+    color: #c0392b;
+  }
 </style>
diff --git a/client/src/routes/Login.svelte b/client/src/routes/Login.svelte
index 6b69d44..39bd5da 100644
--- a/client/src/routes/Login.svelte
+++ b/client/src/routes/Login.svelte
@@ -1,11 +1,20 @@
 <script>
-  import { API, persistTokens, clearTokens } from "../utils/api.js"; 
+  import { onMount } from "svelte";
+  import { navigate } from "svelte-routing";
+  import { API, persistTokens, clearTokens, getAccessToken } from "../utils/api.js"; 
   import logo from "../assets/image/logo.png";
 
   let username = "";
   let password = "";
   let error = "";
 
+  onMount(() => {
+    const token = getAccessToken();
+    if (token) {
+      navigate("/", { replace: true });
+    }
+  });
+
   async function login() {
     const res = await fetch(`${API}/api/login`, {
       method: "POST",
@@ -18,7 +27,8 @@
       persistTokens({ accessToken, refreshToken });
       if (accessToken) localStorage.setItem("token", accessToken); // Geçiş dönemi uyumluluğu
       if (user) localStorage.setItem("user", JSON.stringify(user));
-      window.location.reload();
+      // Router state beklemeden anında yönlendir
+      navigate("/", { replace: true });
     } else {
       error = "Kullanıcı adı veya şifre hatalı.";
       clearTokens();
diff --git a/client/src/routes/Profile.svelte b/client/src/routes/Profile.svelte
new file mode 100644
index 0000000..8723700
--- /dev/null
+++ b/client/src/routes/Profile.svelte
@@ -0,0 +1,42 @@
+<script>
+  // Tasarım, diğer sayfalardaki yapıyı korur; şimdilik boş içerik.
+</script>
+
+<section class="files">
+  <div class="files-header">
+    <div class="header-title">
+      <h2>Profile</h2>
+    </div>
+  </div>
+  <div class="empty">
+    Profil içeriği yakında.
+  </div>
+</section>
+
+<style>
+  .files {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .files-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .empty {
+    padding: 24px;
+    border: 1px dashed var(--border, #dcdcdc);
+    border-radius: 10px;
+    color: #666;
+  }
+</style>
diff --git a/client/src/routes/Settings.svelte b/client/src/routes/Settings.svelte
new file mode 100644
index 0000000..98f788e
--- /dev/null
+++ b/client/src/routes/Settings.svelte
@@ -0,0 +1,40 @@
+<script>
+  // Tasarım diğer sayfalarla aynı iskelette; içerik placeholder.
+</script>
+
+<section class="files">
+  <div class="files-header">
+    <div class="header-title">
+      <h2>Settings</h2>
+    </div>
+  </div>
+  <div class="empty">Ayarlar içeriği yakında.</div>
+</section>
+
+<style>
+  .files {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .files-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .empty {
+    padding: 24px;
+    border: 1px dashed var(--border, #dcdcdc);
+    border-radius: 10px;
+    color: #666;
+  }
+</style>