fix(web): tree kategori isimleri kesilmesin + tree ikonu anında tepki versin

- category-tree: isim span'inde truncate yerine break-words; derin alt
  kategorilerde uzun isimler artık kesilmiyor, gerekirse alt satıra sarıyor
- TreeViewIcon: remount+keyframe (opacity 0'dan dolma) yerine grid/list ile
  aynı transition mekanizması; dallar hep görünür, aktifte anında kayar
- globals.css: kullanılmayan tree-branch-in keyframe kaldırıldı

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/categories/category-tree.tsx

@@ -184,7 +184,7 @@ function CategoryNode({
         name={category.name}
         shimmer={isShimmering}
       />
-      <span className="min-w-0 flex-1 truncate">{category.name}</span>
+      <span className="min-w-0 flex-1 break-words leading-snug">{category.name}</span>
       {category.partCount != null && category.partCount > 0 && (
         <span className="shrink-0 tabular-nums text-xs text-muted-foreground">
           {category.partCount}

apps/web/src/components/categories/view-toggle-icons.tsx

@@ -75,15 +75,11 @@ export function ListViewIcon({ isActive, className }: ViewIconProps) {
   );
 }
 
-// ── Tree → kök + iki dal; aktifken dallar kademeli "çizilir" (bespoke) ──
+// ── Tree → kök + iki dal; aktifken dallar gövdeden dışarı kayar ──
+// Diğer ikonlar gibi transition tabanlı (anında tepki); dallar her zaman görünür.
 export function TreeViewIcon({ isActive, className }: ViewIconProps) {
   return (
-    <span
-      // key: aktif olunca yeniden mount edip dal giriş animasyonunu tetikler
-      key={isActive ? "on" : "off"}
-      className={cn("relative inline-block h-4 w-4", className)}
-      aria-hidden="true"
-    >
+    <span className={cn("relative inline-block h-4 w-4", className)} aria-hidden="true">
       {/* kök düğüm */}
       <span
         className="absolute rounded-[1.5px] bg-current"
@@ -98,12 +94,12 @@ export function TreeViewIcon({ isActive, className }: ViewIconProps) {
       {[0, 1].map((i) => (
         <span
           key={i}
-          className={cn("absolute inline-flex items-center", isActive && "animate-tree-branch-in")}
+          className="absolute inline-flex items-center transition-transform duration-[340ms] ease-out motion-reduce:transition-none"
           style={{
             left: 3,
             top: i === 0 ? 6.25 : 10.25,
-            animationDelay: `${i * 90}ms`,
-            animationFillMode: "backwards",
+            transform: isActive ? "translateX(0)" : "translateX(-2px)",
+            transitionDelay: `${i * 80}ms`,
           }}
         >
           <span className="rounded bg-current/50" style={{ width: 3.5, height: 1.5 }} />

apps/web/src/globals.css

@@ -168,17 +168,6 @@
   }
 }
 
-@keyframes tree-branch-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-3px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 @keyframes icon-pop {
   0% {
     opacity: 0;
@@ -232,9 +221,6 @@
 .animate-icon-pop {
   animation: icon-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.animate-tree-branch-in {
-  animation: tree-branch-in 0.34s cubic-bezier(0.16, 1, 0.3, 1);
-}
 .carousel-track:hover .animate-scroll-left {
   animation-play-state: paused;
 }