From 07c9589a03176d8af7cee69789bb4ee4a83f0883 Mon Sep 17 00:00:00 2001
From: wisecolt <wisecolt@gmail.com>
Date: Fri, 2 Jan 2026 21:32:00 +0300
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20mobil=20yerle=C5=9Fimi=20iyile?=
 =?UTF-8?q?=C5=9Ftir=20ve=20ta=C5=9Fmay=C4=B1=20d=C3=BCzelt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AppLayout başlığının mobil uyumluluğunu yeniden düzenle
- İkon tabanlı butonlar kullanarak mobil alan tasarrufu sağla
- TimerPage'de taşan metinler için truncate sınıfları ekle
- Torrent bilgileri için daha iyi duyarlı düzen yapısı oluştur
---
 apps/web/src/components/layout/AppLayout.tsx | 81 ++++++++++----------
 apps/web/src/pages/TimerPage.tsx             | 18 +++--
 2 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/apps/web/src/components/layout/AppLayout.tsx b/apps/web/src/components/layout/AppLayout.tsx
index acf08e6..fde225f 100644
--- a/apps/web/src/components/layout/AppLayout.tsx
+++ b/apps/web/src/components/layout/AppLayout.tsx
@@ -8,7 +8,7 @@ import { useAppStore } from "../../store/useAppStore";
 import { connectSocket } from "../../socket/socket";
 import { api } from "../../api/client";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+import { faMoon, faSun, faRightFromBracket } from "@fortawesome/free-solid-svg-icons";
 import { AlertToastStack } from "../ui/AlertToastStack";
 
 export const AppLayout = ({ children }: { children: React.ReactNode }) => {
@@ -65,12 +65,20 @@ export const AppLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <Shell>
       <header className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3">
-        <div className="flex items-start justify-between gap-3 md:items-center">
+        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div>
             <div className="text-lg font-semibold text-slate-900">q-buffer</div>
             <div className="text-xs text-slate-500">
               qBittorrent {qbit.version ?? "unknown"}
             </div>
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              <Badge variant={qbit.ok ? "success" : "danger"}>
+                {qbit.ok ? "Qbit OK" : "Qbit Down"}
+              </Badge>
+              <Badge variant={connected ? "success" : "warn"}>
+                {connected ? "Live" : "Offline"}
+              </Badge>
+            </div>
           </div>
           <button
             className="inline-flex items-center justify-center rounded-md border border-slate-300 px-3 py-2 text-xs font-semibold text-slate-700 md:hidden"
@@ -79,53 +87,44 @@ export const AppLayout = ({ children }: { children: React.ReactNode }) => {
           >
             {menuOpen ? "Close" : "Menu"}
           </button>
-        </div>
-        <div
-          className={`mt-3 flex flex-col gap-3 md:mt-0 md:flex md:flex-row md:items-center md:justify-between ${
-            menuOpen ? "flex" : "hidden md:flex"
-          }`}
-        >
-          <nav className="flex flex-wrap items-center gap-2 rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-600 md:justify-start">
-            <NavLink
-              to="/buffer"
-              className={({ isActive }) =>
-                `rounded-full px-3 py-1 ${
-                  isActive ? "bg-slate-900 text-white" : "hover:bg-white"
-                }`
-              }
-            >
-              Buffer
-            </NavLink>
-            <NavLink
-              to="/timer"
-              className={({ isActive }) =>
-                `rounded-full px-3 py-1 ${
-                  isActive ? "bg-slate-900 text-white" : "hover:bg-white"
-                }`
-              }
-            >
-              Timer
-            </NavLink>
-          </nav>
-          <div className="flex flex-wrap items-center gap-2">
-            <Badge variant={qbit.ok ? "success" : "danger"}>
-              {qbit.ok ? "Qbit OK" : "Qbit Down"}
-            </Badge>
-            <Badge variant={connected ? "success" : "warn"}>
-              {connected ? "Live" : "Offline"}
-            </Badge>
+          <div
+            className={`flex flex-col gap-3 md:flex md:flex-row md:items-center ${
+              menuOpen ? "flex" : "hidden md:flex"
+            }`}
+          >
+            <nav className="flex flex-wrap items-center gap-2 rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-600">
+              <NavLink
+                to="/buffer"
+                className={({ isActive }) =>
+                  `rounded-full px-3 py-1 ${
+                    isActive ? "bg-slate-900 text-white" : "hover:bg-white"
+                  }`
+                }
+              >
+                Buffer
+              </NavLink>
+              <NavLink
+                to="/timer"
+                className={({ isActive }) =>
+                  `rounded-full px-3 py-1 ${
+                    isActive ? "bg-slate-900 text-white" : "hover:bg-white"
+                  }`
+                }
+              >
+                Timer
+              </NavLink>
+            </nav>
             <Button
               variant="outline"
               onClick={() => applyTheme(theme === "dark" ? "light" : "dark")}
+              title={theme === "dark" ? "Light" : "Dark"}
             >
               <FontAwesomeIcon
                 icon={theme === "dark" ? faSun : faMoon}
-                className="mr-2"
               />
-              {theme === "dark" ? "Light" : "Dark"}
             </Button>
-            <Button variant="outline" onClick={logout}>
-              Logout
+            <Button variant="outline" onClick={logout} title="Logout">
+              <FontAwesomeIcon icon={faRightFromBracket} />
             </Button>
           </div>
         </div>
diff --git a/apps/web/src/pages/TimerPage.tsx b/apps/web/src/pages/TimerPage.tsx
index 8626682..fae2e9c 100644
--- a/apps/web/src/pages/TimerPage.tsx
+++ b/apps/web/src/pages/TimerPage.tsx
@@ -292,34 +292,36 @@ export const TimerPage = () => {
                     className="rounded-lg border border-slate-200 bg-white px-3 py-2"
                   >
                     <div className="flex items-start justify-between gap-3">
-                      <div>
+                      <div className="min-w-0 flex-1">
                         <div
-                          className="text-sm font-semibold text-slate-900"
+                          className="truncate text-sm font-semibold text-slate-900"
                           title={torrent.name}
                         >
                           {torrent.name}
                         </div>
-                        <div className="text-xs text-slate-500">
+                        <div className="truncate text-xs text-slate-500">
                           {formatBytes(torrent.size)} • {trackerLabel(torrent.tracker)}
                         </div>
                       </div>
-                      <div className="text-right text-xs text-slate-600">
+                      <div className="w-24 flex-shrink-0 text-right text-xs text-slate-600">
                         <div className="font-semibold text-slate-900">
                           {formatCountdown(remainingSeconds)}
                         </div>
                         <div>Kural: {formatDuration(rule.seedLimitSeconds)}</div>
                       </div>
                     </div>
-                    <div className="mt-2 flex flex-wrap gap-2 text-xs text-slate-600">
-                      <span>Hash: {torrent.hash.slice(0, 12)}...</span>
-                      <span>
+                    <div className="mt-2 grid grid-cols-2 gap-2 text-xs text-slate-600">
+                      <div className="truncate">
+                        Hash: {torrent.hash.slice(0, 12)}...
+                      </div>
+                      <div className="truncate">
                         Etiket:{" "}
                         {(torrent.tags || torrent.category || "-")
                           .split(",")
                           .map((tag) => tag.trim())
                           .filter(Boolean)
                           .join(", ") || "-"}
-                      </span>
+                      </div>
                     </div>
                   </div>
                 ))}