fix: swipe stays open for button tap, loading skeleton for chats

- Swipe left now snaps open and action buttons are tappable (onClick)
- Swipe right still executes pin immediately on release
- chatsLoading state in store: shows skeleton animation while loading
- "Нет чатов" only shown after chats have finished loading

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/ChatListItem.tsx

@@ -15,10 +15,16 @@ interface Props {
   onLeave: (chatId: string) => void;
 }
 
+// How far buttons extend when snapped open
+const SNAP_LEFT = -120;
+const SNAP_RIGHT = 72;
+
 export default function ChatListItem({ chat, active, online, onClick, onPin, onMute, onLeave }: Props) {
+  // swipeX: live drag offset; snapped: 'left' | 'right' | null = locked open
   const [swipeX, setSwipeX] = useState(0);
-  const [isSwiping, setIsSwiping] = useState(false);
+  const [snapped, setSnapped] = useState<'left' | 'right' | null>(null);
   const touchStart = useRef<{ x: number; y: number } | null>(null);
+  const dragging = useRef(false);
 
   const time = chat.lastMessageAt
     ? formatDistanceToNow(new Date(chat.lastMessageAt), { addSuffix: false, locale: ru })
@@ -26,54 +32,82 @@ export default function ChatListItem({ chat, active, online, onClick, onPin, onM
 
   const icon = chat.type === 'channel' ? '📢' : chat.type === 'group' ? '👥' : null;
 
+  // Current visual offset = live drag + snap position
+  const baseX = snapped === 'left' ? SNAP_LEFT : snapped === 'right' ? SNAP_RIGHT : 0;
+  const visualX = snapped ? baseX : swipeX;
+
   function handleTouchStart(e: React.TouchEvent) {
     touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-    setIsSwiping(false);
+    dragging.current = false;
   }
 
   function handleTouchMove(e: React.TouchEvent) {
     if (!touchStart.current) return;
     const dx = e.touches[0].clientX - touchStart.current.x;
     const dy = Math.abs(e.touches[0].clientY - touchStart.current.y);
-    if (dy > 15 && Math.abs(dx) < dy) { touchStart.current = null; return; }
-    if (Math.abs(dx) > 8) setIsSwiping(true);
-    const clamped = Math.max(-120, Math.min(80, dx));
-    setSwipeX(clamped);
+    if (!dragging.current && dy > 10 && Math.abs(dx) < dy) { touchStart.current = null; return; }
+    if (Math.abs(dx) > 6) dragging.current = true;
+    if (!dragging.current) return;
+    // If already snapped, allow dragging back from snap position
+    const raw = snapped ? baseX + dx : dx;
+    setSwipeX(Math.max(SNAP_LEFT, Math.min(SNAP_RIGHT, raw)));
   }
 
   function handleTouchEnd() {
-    if (swipeX > 60) {
-      onPin(chat.id, !chat.isPinned);
-    }
-    setSwipeX(0);
-    setIsSwiping(false);
+    if (!dragging.current) { touchStart.current = null; return; }
+    dragging.current = false;
     touchStart.current = null;
+
+    if (swipeX > 50) {
+      // Snapped right → pin immediately and close
+      onPin(chat.id, !chat.isPinned);
+      setSwipeX(0);
+      setSnapped(null);
+    } else if (swipeX < -60) {
+      // Snap left open → user can tap action buttons
+      setSwipeX(0);
+      setSnapped('left');
+    } else {
+      // Close
+      setSwipeX(0);
+      setSnapped(null);
+    }
+  }
+
+  function close() {
+    setSwipeX(0);
+    setSnapped(null);
+  }
+
+  function handleMainClick() {
+    if (snapped) { close(); return; }
+    onClick();
   }
 
   const showPinHint = swipeX > 30;
-  const showLeftActions = swipeX < -40;
+  const leftOpen = snapped === 'left';
 
   return (
     <div className="relative overflow-hidden rounded-xl">
-      {/* Pin action (swipe right) */}
-      <div className={`absolute inset-y-0 left-0 w-20 flex flex-col items-center justify-center bg-blue-500 rounded-l-xl transition-opacity ${showPinHint ? 'opacity-100' : 'opacity-0'}`}>
+      {/* Right bg: pin hint while dragging */}
+      <div className={`absolute inset-y-0 left-0 w-[72px] flex flex-col items-center justify-center bg-blue-500 rounded-l-xl transition-opacity duration-150 ${showPinHint ? 'opacity-100' : 'opacity-0'}`}>
         <Pin className="w-5 h-5 text-white" />
         <span className="text-white text-[10px] mt-0.5">{chat.isPinned ? 'Открепить' : 'Закрепить'}</span>
       </div>
 
-      {/* Left actions: mute + leave (swipe left) */}
-      <div className={`absolute inset-y-0 right-0 flex rounded-r-xl overflow-hidden transition-opacity ${showLeftActions ? 'opacity-100' : 'opacity-0'}`}>
+      {/* Left actions: always rendered, visible when snapped */}
+      <div className={`absolute inset-y-0 right-0 flex rounded-r-xl overflow-hidden transition-opacity duration-150 ${leftOpen ? 'opacity-100' : 'opacity-0'}`}>
         <button
-          onTouchEnd={(e) => { e.stopPropagation(); onMute(chat.id, !chat.isMuted); setSwipeX(0); }}
-          className="w-16 h-full flex flex-col items-center justify-center bg-gray-500 text-white text-[10px] gap-0.5"
+          onClick={() => { onMute(chat.id, !chat.isMuted); close(); }}
+          className="w-16 h-full flex flex-col items-center justify-center bg-gray-500 text-white text-[10px] gap-0.5 active:brightness-90"
         >
           {chat.isMuted ? <Bell className="w-5 h-5" /> : <BellOff className="w-5 h-5" />}
           <span>{chat.isMuted ? 'Вкл. звук' : 'Без звука'}</span>
         </button>
         {chat.type !== 'private' && (
           <button
-            onTouchEnd={(e) => { e.stopPropagation(); onLeave(chat.id); setSwipeX(0); }}
-            className="w-16 h-full flex flex-col items-center justify-center bg-red-500 text-white text-[10px] gap-0.5"
+            onClick={() => { close(); onLeave(chat.id); }}
+            className="w-16 h-full flex flex-col items-center justify-center bg-red-500 text-white text-[10px] gap-0.5 active:brightness-90"
           >
             <LogOut className="w-5 h-5" />
             <span>Выйти</span>
@@ -83,11 +117,14 @@ export default function ChatListItem({ chat, active, online, onClick, onPin, onM
 
       {/* Main row */}
       <button
-        onClick={isSwiping ? undefined : onClick}
+        onClick={handleMainClick}
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
-        style={{ transform: `translateX(${swipeX}px)`, transition: swipeX === 0 ? 'transform 0.2s ease' : 'none' }}
+        style={{
+          transform: `translateX(${visualX}px)`,
+          transition: dragging.current ? 'none' : 'transform 0.2s ease',
+        }}
         className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left ${active ? 'bg-blue-50' : 'bg-white hover:bg-gray-50'}`}
       >
         <div className="relative flex-shrink-0">