Better Drag

.claude/settings.local.json

@@ -44,7 +44,8 @@
       "Bash(echo:*)",
       "Bash(python -c \"import base64; print\\(base64.b64encode\\(open\\(r''C:\\\\Users\\\\bryan\\\\Desktop\\\\Discord Clone\\\\discord-clone-release.keystore'',''rb''\\).read\\(\\)\\).decode\\(\\)\\)\")",
       "WebFetch(domain:gitea.moyettes.com)",
-      "Bash(grep:*)"
+      "Bash(grep:*)",
+      "WebFetch(domain:addyosmani.com)"
     ]
   }
 }

apps/android/android/app/build.gradle

@@ -8,7 +8,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 27
-        versionName "1.0.36"
+        versionName "1.0.37"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

apps/android/android/capacitor.settings.gradle

@@ -1,6 +1,6 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
-project(':capacitor-android').projectDir = new File('../../../node_modules/@capacitor/android/capacitor')
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
 include ':capacitor-app'
-project(':capacitor-app').projectDir = new File('../../../node_modules/@capacitor/app/android')
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')

apps/electron/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@discord-clone/electron",
   "private": true,
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "Brycord - Electron app",
   "author": "Moyettes",
   "type": "module",

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@discord-clone/web",
   "private": true,
-  "version": "1.0.36",
+  "version": "1.0.37",
   "type": "module",
   "scripts": {
     "dev": "vite",

package-lock.json

@@ -17,7 +17,7 @@
     },
     "apps/android": {
       "name": "@discord-clone/android",
-      "version": "1.0.34",
+      "version": "1.0.36",
       "dependencies": {
         "@capacitor/android": "^6.0.0",
         "@capacitor/app": "^6.0.0",
@@ -29,7 +29,7 @@
     },
     "apps/electron": {
       "name": "@discord-clone/electron",
-      "version": "1.0.34",
+      "version": "1.0.36",
       "dependencies": {
         "@discord-clone/shared": "*",
         "electron-log": "^5.4.3",
@@ -46,7 +46,7 @@
     },
     "apps/web": {
       "name": "@discord-clone/web",
-      "version": "1.0.34",
+      "version": "1.0.36",
       "dependencies": {
         "@discord-clone/platform-web": "*",
         "@discord-clone/shared": "*"
@@ -3804,6 +3804,24 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.4.tgz",
@@ -13652,7 +13670,7 @@
     },
     "packages/shared": {
       "name": "@discord-clone/shared",
-      "version": "1.0.34",
+      "version": "1.0.36",
       "dependencies": {
         "@convex-dev/presence": "^0.3.0",
         "@dnd-kit/core": "^6.3.1",
@@ -13660,6 +13678,7 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@livekit/components-react": "^2.9.17",
         "@livekit/components-styles": "^1.2.0",
+        "@use-gesture/react": "^10.3.1",
         "convex": "^1.31.2",
         "livekit-client": "^2.16.1",
         "react": "^19.2.0",

packages/shared/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@discord-clone/shared",
   "private": true,
-  "version": "1.0.36",
+  "version": "1.0.37",
   "type": "module",
   "main": "src/App.jsx",
   "dependencies": {
@@ -11,6 +11,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@livekit/components-react": "^2.9.17",
     "@livekit/components-styles": "^1.2.0",
+    "@use-gesture/react": "^10.3.1",
     "convex": "^1.31.2",
     "livekit-client": "^2.16.1",
     "react": "^19.2.0",

packages/shared/src/components/ChatArea.jsx

@@ -35,7 +35,7 @@ import { useSearch } from '../contexts/SearchContext';
 import { useIsMobile } from '../hooks/useIsMobile';
 import { generateUniqueMessage } from '../utils/floodMessages';
 
-const SCROLL_DEBUG = true;
+const SCROLL_DEBUG = import.meta.env.DEV;
 const scrollLog = (...args) => { if (SCROLL_DEBUG) console.log(...args); };
 
 const metadataCache = new Map();
@@ -91,13 +91,13 @@ const DirectVideo = ({ src, marginTop = 8 }) => {
         if (ref.current) ref.current.play();
     };
     return (
-        <div style={{ marginTop, position: 'relative', display: 'inline-block', maxWidth: '100%' }}>
+        <div style={{ marginTop, position: 'relative', display: 'inline-block', maxWidth: '100%', aspectRatio: '16 / 9', minHeight: '169px' }}>
             <video
                 ref={ref}
                 src={src}
                 controls={showControls}
                 preload="metadata"
-                style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '8px', backgroundColor: 'black', display: 'block' }}
+                style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '8px', backgroundColor: 'black', display: 'block', width: '100%', height: '100%', objectFit: 'contain' }}
             />
             {!showControls && (
                 <div className="play-icon" onClick={handlePlay} style={{ cursor: 'pointer' }}>
@@ -212,7 +212,18 @@ export const LinkPreview = ({ url }) => {
         return <DirectVideo src={url} />;
     }
 
-    if (loading || !metadata || (!metadata.title && !metadata.image && !metadata.video)) return null;
+    if (loading) {
+        return (
+            <div className="link-preview-skeleton" style={{ marginTop: 8, height: 80, borderRadius: '4px' }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '12px 16px' }}>
+                    <div className="skeleton-bar" style={{ width: '40%', height: '10px' }} />
+                    <div className="skeleton-bar" style={{ width: '70%', height: '12px' }} />
+                    <div className="skeleton-bar" style={{ width: '90%', height: '10px' }} />
+                </div>
+            </div>
+        );
+    }
+    if (!metadata || (!metadata.title && !metadata.image && !metadata.video)) return null;
 
     if (metadata.video && !isYouTube) {
         const handlePlayClick = () => {
@@ -221,12 +232,12 @@ export const LinkPreview = ({ url }) => {
         };
 
         return (
-            <div className="preview-video-standalone" style={{ marginTop: 8, position: 'relative', display: 'inline-block', maxWidth: '100%' }}>
+            <div className="preview-video-standalone" style={{ marginTop: 8, position: 'relative', display: 'inline-block', maxWidth: '100%', aspectRatio: '16 / 9', minHeight: '169px' }}>
                 <video
                     ref={videoRef}
                     src={metadata.video}
                     controls={showControls}
-                    style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '4px', backgroundColor: 'black', display: 'block' }}
+                    style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '4px', backgroundColor: 'black', display: 'block', width: '100%', height: '100%', objectFit: 'contain' }}
                 />
                 {!showControls && (
                     <div className="play-icon" onClick={handlePlayClick} style={{ cursor: 'pointer' }}>
@@ -239,7 +250,7 @@ export const LinkPreview = ({ url }) => {
 
     if (metadata.description === 'Image File' && metadata.image) {
         return (
-             <div className="preview-image-standalone" style={{ marginTop: 8, display: 'inline-block', maxWidth: '100%', cursor: 'pointer' }}>
+             <div className="preview-image-standalone" style={{ marginTop: 8, display: 'inline-block', maxWidth: '100%', cursor: 'pointer', minHeight: '200px' }}>
                 <img src={metadata.image} alt="Preview" draggable="false" style={{ maxWidth: '100%', maxHeight: '350px', borderRadius: '8px', display: 'block' }} />
             </div>
         );
@@ -339,17 +350,57 @@ const Attachment = ({ metadata, onLoad, onImageClick }) => {
         return () => { isMounted = false; };
     }, [metadata, onLoad]);
 
-    if (loading) return <div style={{ color: 'var(--header-secondary)', fontSize: '12px' }}>Downloading & Decrypting...</div>;
+    if (loading) {
+        // Skeleton placeholder sized to match final content — prevents layout shift
+        if (metadata.mimeType.startsWith('image/')) {
+            const skelW = metadata.width ? Math.min(metadata.width, 400) : 300;
+            const skelH = metadata.height && metadata.width
+                ? Math.round(skelW * (metadata.height / metadata.width))
+                : 200;
+            return (
+                <div className="attachment-skeleton" style={{ width: skelW, height: skelH, maxWidth: '100%', borderRadius: '4px' }}>
+                    <div className="loading-spinner" style={{ width: '20px', height: '20px', borderWidth: '2px' }} />
+                </div>
+            );
+        }
+        if (metadata.mimeType.startsWith('video/')) {
+            const skelW = metadata.width ? Math.min(metadata.width, 300) : 300;
+            const skelH = metadata.height && metadata.width
+                ? Math.round(skelW * (metadata.height / metadata.width))
+                : 169;
+            return (
+                <div className="attachment-skeleton" style={{ width: skelW, height: skelH, maxWidth: '300px', borderRadius: '4px' }}>
+                    <div className="loading-spinner" style={{ width: '20px', height: '20px', borderWidth: '2px' }} />
+                </div>
+            );
+        }
+        // File attachment skeleton — matches final file card layout
+        return (
+            <div className="attachment-skeleton" style={{ width: 300, height: 52, maxWidth: '300px', borderRadius: '4px' }}>
+                <div className="loading-spinner" style={{ width: '16px', height: '16px', borderWidth: '2px' }} />
+            </div>
+        );
+    }
     if (error) return <div style={{ color: '#ed4245', fontSize: '12px' }}>{error}</div>;
 
     if (metadata.mimeType.startsWith('image/')) {
-        return <img src={url} alt={metadata.filename} draggable="false" style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '4px', cursor: 'zoom-in' }} onLoad={onLoad} onClick={() => onImageClick(url)} />;
+        const containerStyle = metadata.width && metadata.height
+            ? { aspectRatio: `${metadata.width} / ${metadata.height}`, maxWidth: Math.min(metadata.width, 400), maxHeight: '300px' }
+            : { minHeight: '200px', maxHeight: '300px' };
+        return (
+            <div style={{ ...containerStyle, display: 'inline-block', maxWidth: '100%' }}>
+                <img src={url} alt={metadata.filename} draggable="false" style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '4px', cursor: 'zoom-in', display: 'block' }} onLoad={onLoad} onClick={() => onImageClick(url)} />
+            </div>
+        );
     }
     if (metadata.mimeType.startsWith('video/')) {
         const handlePlayClick = () => { setShowControls(true); if (videoRef.current) videoRef.current.play(); };
+        const videoAspect = metadata.width && metadata.height
+            ? `${metadata.width} / ${metadata.height}`
+            : '16 / 9';
         return (
-            <div style={{ marginTop: 8, position: 'relative', display: 'inline-block', maxWidth: '300px' }}>
+            <div style={{ marginTop: 8, position: 'relative', display: 'inline-block', maxWidth: '300px', aspectRatio: videoAspect, minHeight: '169px' }}>
-                <video ref={videoRef} src={url} controls={showControls} style={{ maxWidth: '300px', borderRadius: '4px', display: 'block', backgroundColor: 'black' }} onLoadedData={onLoad} />
+                <video ref={videoRef} src={url} controls={showControls} style={{ maxWidth: '300px', borderRadius: '4px', display: 'block', backgroundColor: 'black', width: '100%', height: '100%', objectFit: 'contain' }} onLoadedData={onLoad} />
                 {!showControls && <div className="play-icon" onClick={handlePlayClick} style={{ cursor: 'pointer' }}>▶</div>}
             </div>
         );
@@ -722,10 +773,7 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
                         requestAnimationFrame(() => requestAnimationFrame(() => {
                             if (channelLoadIdRef.current === loadId) scrollEnd();
                         }));
-                        setTimeout(() => { if (channelLoadIdRef.current === loadId && isInitialLoadRef.current) scrollEnd(); }, 300);
+                        setTimeout(() => { if (channelLoadIdRef.current === loadId && isInitialLoadRef.current) { scrollEnd(); isInitialLoadRef.current = false; } }, 500);
-                        setTimeout(() => { if (channelLoadIdRef.current === loadId && isInitialLoadRef.current) scrollEnd(); }, 800);
-                        setTimeout(() => { if (channelLoadIdRef.current === loadId && isInitialLoadRef.current) scrollEnd(); }, 1200);
-                        setTimeout(() => { if (channelLoadIdRef.current === loadId) isInitialLoadRef.current = false; }, 1500);
                     }
                 }
                 return;
@@ -842,7 +890,8 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
             setDecryptedMessages(buildFromCache());
 
             // After decryption, items may be taller — re-scroll to bottom.
-            // Double-rAF waits for paint + ResizeObserver cycle; escalating timeouts are safety nets.
+            // Double-rAF waits for paint + ResizeObserver cycle; single safety timeout since
+            // dimension reservation on media prevents most late-sizing shifts.
             if (isInitialLoadRef.current && !initialScrollScheduledRef.current && virtuosoRef.current && !jumpToMessageIdRef.current) {
                 initialScrollScheduledRef.current = true;
                 const loadId = channelLoadIdRef.current;
@@ -851,10 +900,7 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
                 requestAnimationFrame(() => requestAnimationFrame(() => {
                     if (channelLoadIdRef.current === loadId) scrollEnd();
                 }));
-                setTimeout(() => { if (channelLoadIdRef.current === loadId && isInitialLoadRef.current) scrollEnd(); }, 300);
+                setTimeout(() => { if (channelLoadIdRef.current === loadId && isInitialLoadRef.current) { scrollEnd(); isInitialLoadRef.current = false; } }, 500);
-                setTimeout(() => { if (channelLoadIdRef.current === loadId && isInitialLoadRef.current) scrollEnd(); }, 800);
-                setTimeout(() => { if (channelLoadIdRef.current === loadId && isInitialLoadRef.current) scrollEnd(); }, 1200);
-                setTimeout(() => { if (channelLoadIdRef.current === loadId) isInitialLoadRef.current = false; }, 1500);
             }
         };
 
@@ -1310,9 +1356,8 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
                 if (el) el.scrollTop = el.scrollHeight;
             };
             snap();
-            // Escalating retries for late-sizing content (images, embeds)
+            // Single rAF retry — dimension reservation makes multi-retry unnecessary
-            setTimeout(snap, 50);
+            requestAnimationFrame(snap);
-            setTimeout(snap, 150);
         } else if (virtuosoRef.current && !userIsScrolledUpRef.current) {
             virtuosoRef.current.scrollToIndex({
                 index: 'LAST',
@@ -1812,6 +1857,24 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
     const handleDragLeave = (e) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget.contains(e.relatedTarget)) return; setIsDragging(false); };
     const handleDrop = (e) => { if (!isDragging) return; e.preventDefault(); e.stopPropagation(); setIsDragging(false); if (e.dataTransfer.files && e.dataTransfer.files.length > 0) Array.from(e.dataTransfer.files).forEach(processFile); };
 
+    const getMediaDimensions = (file) => new Promise((resolve) => {
+        if (file.type.startsWith('image/')) {
+            const img = new Image();
+            const objectUrl = URL.createObjectURL(file);
+            img.onload = () => { URL.revokeObjectURL(objectUrl); resolve({ width: img.naturalWidth, height: img.naturalHeight }); };
+            img.onerror = () => { URL.revokeObjectURL(objectUrl); resolve(null); };
+            img.src = objectUrl;
+        } else if (file.type.startsWith('video/')) {
+            const video = document.createElement('video');
+            const objectUrl = URL.createObjectURL(file);
+            video.onloadedmetadata = () => { URL.revokeObjectURL(objectUrl); resolve({ width: video.videoWidth, height: video.videoHeight }); };
+            video.onerror = () => { URL.revokeObjectURL(objectUrl); resolve(null); };
+            video.src = objectUrl;
+        } else {
+            resolve(null);
+        }
+    });
+
     const uploadAndSendFile = async (file) => {
         const fileKey = await crypto.randomBytes(32);
         const arrayBuffer = await file.arrayBuffer();
@@ -1827,6 +1890,8 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
 
         const fileUrl = await convex.mutation(api.files.validateUpload, { storageId });
 
+        const dims = await getMediaDimensions(file);
+
         const metadata = {
             type: 'attachment',
             url: fileUrl,
@@ -1834,7 +1899,8 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
             mimeType: file.type,
             size: file.size,
             key: fileKey,
-            iv: encrypted.iv
+            iv: encrypted.iv,
+            ...(dims && { width: dims.width, height: dims.height })
         };
 
         await sendMessage(JSON.stringify(metadata));

packages/shared/src/components/MembersList.jsx

@@ -6,6 +6,8 @@ import { useVoice } from '../contexts/VoiceContext';
 import { CrownIcon, SharingIcon } from '../assets/icons';
 import ColoredIcon from './ColoredIcon';
 import ChangeNicknameModal from './ChangeNicknameModal';
+import avatarDecoStatic from '../assets/avatar_decorations/a_dcfe10bac4a782ffb5eefef7a8003115.png';
+import avatarDecoAnimated from '../assets/avatar_decorations/passthrough/a_dcfe10bac4a782ffb5eefef7a8003115.png';
 
 const USER_COLORS = ['#5865F2', '#EBA7CD', '#57F287', '#FEE75C', '#EB459E', '#ED4245'];
 
@@ -161,6 +163,8 @@ const MembersList = ({ channelId, visible, onMemberClick, userId, myPermissions,
                             {(member.displayName || member.username).substring(0, 1).toUpperCase()}
                         </div>
                     )}
+                    {/* <img className="avatar-decoration avatar-decoration-static" src={avatarDecoStatic} alt="" aria-hidden="true" /> */}
+                    {/* <img className="avatar-decoration avatar-decoration-animated" src={avatarDecoAnimated} alt="" aria-hidden="true" /> */}
                     <div
                         className="member-status-dot"
                         style={{ backgroundColor: STATUS_COLORS[effectiveStatus] || STATUS_COLORS.offline }}
@@ -196,6 +200,7 @@ const MembersList = ({ channelId, visible, onMemberClick, userId, myPermissions,
 
     return (
         <div className="members-list">
+            {/* <img src={avatarDecoAnimated} alt="" style={{ display: 'none' }} aria-hidden="true" /> */}
             {sortedGroups.map(group => (
                 <React.Fragment key={group.role.name}>
                     <div className="members-role-header">

packages/shared/src/hooks/useSwipeNavigation.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useDrag } from '@use-gesture/react';
 
-const EDGE_THRESHOLD = 20;
+const EDGE_THRESHOLD = 200;
 const SNAP_THRESHOLD = 0.4;
 const VELOCITY_THRESHOLD = 0.5;
 
@@ -8,7 +9,6 @@ export function useSwipeNavigation({ enabled, canSwipeToChat }) {
   const [activeView, setActiveView] = useState('sidebar');
   const trayRef = useRef(null);
 
-  // Refs so touch handlers always read current values
   const activeViewRef = useRef(activeView);
   const canSwipeToChatRef = useRef(canSwipeToChat);
   const screenWidthRef = useRef(window.innerWidth);
@@ -16,10 +16,8 @@ export function useSwipeNavigation({ enabled, canSwipeToChat }) {
   useEffect(() => { activeViewRef.current = activeView; }, [activeView]);
   useEffect(() => { canSwipeToChatRef.current = canSwipeToChat; }, [canSwipeToChat]);
 
-  // Track swiping state for pointer-events disabling
   const [isSwiping, setIsSwiping] = useState(false);
 
-  // Programmatic navigation with smooth transition
   const goToChat = useCallback(() => {
     const tray = trayRef.current;
     if (tray) {
@@ -38,6 +36,7 @@ export function useSwipeNavigation({ enabled, canSwipeToChat }) {
     setActiveView('sidebar');
   }, []);
 
+  // Keep screen width in sync
   useEffect(() => {
     if (!enabled) return;
 
@@ -50,178 +49,96 @@ export function useSwipeNavigation({ enabled, canSwipeToChat }) {
     return () => window.removeEventListener('resize', handleResize);
   }, [enabled]);
 
+  // Measure panel width on mount
   useEffect(() => {
     if (!enabled) return;
     const tray = trayRef.current;
     if (!tray) return;
-
-    // Measure actual rendered panel width (CSS 100vw) instead of window.innerWidth
     const panel = tray.querySelector('.mobile-swipe-panel');
     if (panel) {
       screenWidthRef.current = panel.offsetWidth;
     }
-
-    let tracking = false;
-    let decided = false; // whether we've decided horizontal vs vertical
-    let startX = 0;
-    let startY = 0;
-    let startTime = 0;
-    let baseOffset = 0; // starting translateX when touch began
-    let lastX = 0;
-    let lastTime = 0;
-
-    function getCurrentTranslateX() {
-      const style = window.getComputedStyle(tray);
-      const matrix = style.transform;
-      if (!matrix || matrix === 'none') return 0;
-      // matrix(a, b, c, d, tx, ty)
-      const match = matrix.match(/matrix\(([^)]+)\)/);
-      if (match) {
-        const values = match[1].split(',').map(Number);
-        return values[4] || 0;
-      }
-      return 0;
-    }
-
-    function onTouchStart(e) {
-      if (e.touches.length !== 1) return;
-      const touch = e.touches[0];
-      const sw = screenWidthRef.current;
-      const view = activeViewRef.current;
-
-      // Edge detection: only start from edges
-      const fromLeftEdge = touch.clientX <= EDGE_THRESHOLD;
-      const fromRightEdge = touch.clientX >= sw - EDGE_THRESHOLD;
-
-      if (view === 'chat' && fromLeftEdge) {
-        // Potential swipe to sidebar
-      } else if (view === 'sidebar' && fromRightEdge && canSwipeToChatRef.current) {
-        // Potential swipe to chat
-      } else {
-        return; // Not an edge touch
-      }
-
-      // Capture current visual position (handles mid-animation interruption)
-      tray.style.transition = 'none';
-      baseOffset = getCurrentTranslateX();
-      tray.style.transform = `translateX(${baseOffset}px)`;
-
-      startX = touch.clientX;
-      startY = touch.clientY;
-      startTime = Date.now();
-      lastX = touch.clientX;
-      lastTime = startTime;
-      tracking = false;
-      decided = false;
-    }
-
-    function onTouchMove(e) {
-      if (e.touches.length !== 1) return;
-      if (decided && !tracking) return; // Decided vertical, ignore
-
-      const touch = e.touches[0];
-      const deltaX = touch.clientX - startX;
-      const deltaY = touch.clientY - startY;
-
-      // If we haven't decided intent yet
-      if (!decided) {
-        const absDx = Math.abs(deltaX);
-        const absDy = Math.abs(deltaY);
-        // Need some movement to decide
-        if (absDx < 12 && absDy < 12) return;
-
-        decided = true;
-        if (absDx > absDy * 2) {
-          tracking = true;
-          setIsSwiping(true);
-        } else {
-          // Vertical — let it scroll
-          return;
-        }
-      }
-
-      if (!tracking) return;
-
-      e.preventDefault();
-
-      const sw = screenWidthRef.current;
-      const view = activeViewRef.current;
-      let newOffset = baseOffset + deltaX;
-
-      // Clamp: tray can only be between -sw (chat) and 0 (sidebar)
-      if (view === 'chat') {
-        // On chat, base is -sw. Allow swiping right (toward 0) but not past
-        newOffset = Math.max(-sw, Math.min(0, newOffset));
-      } else {
-        // On sidebar, base is 0. Allow swiping left (toward -sw) but not past
-        newOffset = Math.max(-sw, Math.min(0, newOffset));
-      }
-
-      tray.style.transform = `translateX(${newOffset}px)`;
-      lastX = touch.clientX;
-      lastTime = Date.now();
-    }
-
-    function onTouchEnd(e) {
-      if (!tracking) {
-        decided = false;
-        return;
-      }
-
-      tracking = false;
-      decided = false;
-      setIsSwiping(false);
-
-      const sw = screenWidthRef.current;
-      const view = activeViewRef.current;
-      const currentOffset = getCurrentTranslateX();
-      const elapsed = Date.now() - lastTime;
-      const velocity = elapsed > 0 ? Math.abs(lastX - startX) / (Date.now() - startTime) : 0;
-
-      let shouldTransition = false;
-
-      if (view === 'chat') {
-        // Swiping right to sidebar: progress is how far from -sw toward 0
-        const progress = (currentOffset - (-sw)) / sw;
-        shouldTransition = progress > SNAP_THRESHOLD || velocity > VELOCITY_THRESHOLD;
-      } else {
-        // Swiping left to chat: progress is how far from 0 toward -sw
-        const progress = Math.abs(currentOffset) / sw;
-        shouldTransition = progress > SNAP_THRESHOLD || velocity > VELOCITY_THRESHOLD;
-      }
-
-      tray.style.transition = 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
-
-      if (shouldTransition) {
-        if (view === 'chat') {
-          tray.style.transform = 'translateX(0px)';
-          setActiveView('sidebar');
-        } else {
-          tray.style.transform = `translateX(-${sw}px)`;
-          setActiveView('chat');
-        }
-      } else {
-        // Snap back
-        if (view === 'chat') {
-          tray.style.transform = `translateX(-${sw}px)`;
-        } else {
-          tray.style.transform = 'translateX(0px)';
-        }
-      }
-    }
-
-    tray.addEventListener('touchstart', onTouchStart, { passive: true });
-    tray.addEventListener('touchmove', onTouchMove, { passive: false });
-    tray.addEventListener('touchend', onTouchEnd, { passive: true });
-
-    return () => {
-      tray.removeEventListener('touchstart', onTouchStart);
-      tray.removeEventListener('touchmove', onTouchMove);
-      tray.removeEventListener('touchend', onTouchEnd);
-    };
   }, [enabled]);
 
-  // Resting style: set initial position without transition on mount / view change
+  function getCurrentTranslateX(tray) {
+    const style = window.getComputedStyle(tray);
+    const matrix = style.transform;
+    if (!matrix || matrix === 'none') return 0;
+    const match = matrix.match(/matrix\(([^)]+)\)/);
+    if (match) {
+      const values = match[1].split(',').map(Number);
+      return values[4] || 0;
+    }
+    return 0;
+  }
+
+  const bind = useDrag(
+    ({ active, movement: [mx], velocity: [vx], direction: [dx], cancel, tap, first, event }) => {
+      if (!enabled) return;
+      if (tap) return;
+
+      const tray = trayRef.current;
+      if (!tray) return;
+      const sw = screenWidthRef.current;
+      const view = activeViewRef.current;
+
+      if (first) {
+        const touchX = event.touches?.[0]?.clientX ?? event.clientX;
+        const fromLeftEdge = touchX <= EDGE_THRESHOLD;
+        const fromRightEdge = touchX >= sw - EDGE_THRESHOLD;
+
+        if (view === 'chat' && !fromLeftEdge) { cancel(); return; }
+        if (view === 'sidebar' && (!fromRightEdge || !canSwipeToChatRef.current)) { cancel(); return; }
+
+        // Freeze current position for mid-animation interruption
+        tray.style.transition = 'none';
+        const currentX = getCurrentTranslateX(tray);
+        tray.style.transform = `translateX(${currentX}px)`;
+      }
+
+      if (active) {
+        setIsSwiping(true);
+        const base = view === 'chat' ? -sw : 0;
+        const newOffset = Math.max(-sw, Math.min(0, base + mx));
+        tray.style.transition = 'none';
+        tray.style.transform = `translateX(${newOffset}px)`;
+      } else {
+        // Release — decide snap target
+        setIsSwiping(false);
+        const currentOffset = getCurrentTranslateX(tray);
+
+        let shouldTransition = false;
+        if (view === 'chat') {
+          const progress = (currentOffset - (-sw)) / sw;
+          shouldTransition = progress > SNAP_THRESHOLD || vx > VELOCITY_THRESHOLD;
+        } else {
+          const progress = Math.abs(currentOffset) / sw;
+          shouldTransition = progress > SNAP_THRESHOLD || vx > VELOCITY_THRESHOLD;
+        }
+
+        tray.style.transition = 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+
+        if (shouldTransition) {
+          if (view === 'chat') {
+            tray.style.transform = 'translateX(0px)';
+            setActiveView('sidebar');
+          } else {
+            tray.style.transform = `translateX(-${sw}px)`;
+            setActiveView('chat');
+          }
+        } else {
+          // Snap back
+          if (view === 'chat') {
+            tray.style.transform = `translateX(-${sw}px)`;
+          } else {
+            tray.style.transform = 'translateX(0px)';
+          }
+        }
+      }
+    },
+    { axis: 'x', filterTaps: true, pointer: { touch: true } }
+  );
+
   const trayStyle = useMemo(() => {
     if (!enabled) return {};
     return {
@@ -229,5 +146,7 @@ export function useSwipeNavigation({ enabled, canSwipeToChat }) {
     };
   }, [enabled, activeView]);
 
-  return { activeView, goToChat, goToSidebar, trayRef, trayStyle, isSwiping };
+  const swipeBindProps = enabled ? bind() : {};
+
+  return { activeView, goToChat, goToSidebar, trayRef, trayStyle, isSwiping, swipeBindProps };
 }

packages/shared/src/index.css

@@ -556,6 +556,9 @@ body {
 /* Virtuoso scroller scrollbar styles */
 .messages-list [data-virtuoso-scroller] {
   overflow-y: auto !important;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+  will-change: scroll-position;
 }
 .messages-list [data-virtuoso-scroller]::-webkit-scrollbar {
   width: 8px;
@@ -566,7 +569,32 @@ body {
   border-radius: 4px;
 }
 
-/* ... existing styles ... */
+/* Attachment & link preview loading skeletons */
+.attachment-skeleton {
+  background-color: var(--embed-background, #2f3136);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.link-preview-skeleton {
+  background-color: var(--embed-background, #2f3136);
+  border-left: 4px solid #202225;
+  overflow: hidden;
+}
+
+.skeleton-bar {
+  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
 
 .preview-description {
   font-size: 14px;
@@ -1055,6 +1083,8 @@ body {
   position: relative;
   margin-right: 10px;
   flex-shrink: 0;
+  width: 32px;
+  height: 32px;
 }
 
 .member-avatar {
@@ -1069,6 +1099,23 @@ body {
   font-size: 14px;
 }
 
+.avatar-decoration {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 44px;
+  height: 44px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.avatar-decoration-static { display: block; }
+.avatar-decoration-animated { display: none; }
+
+.member-item:hover .avatar-decoration-static { display: none; }
+.member-item:hover .avatar-decoration-animated { display: block; }
+
 .member-status-dot {
   position: absolute;
   bottom: -1px;
@@ -1077,6 +1124,7 @@ body {
   height: 10px;
   border-radius: 50%;
   border: 2px solid var(--bg-secondary);
+  z-index: 2;
 }
 
 .member-info {

packages/shared/src/pages/Chat.jsx

@@ -41,7 +41,7 @@ const Chat = () => {
     const [showPinned, setShowPinned] = useState(false);
     const [showMobileMembersScreen, setShowMobileMembersScreen] = useState(false);
 
-    const { activeView: mobileView, goToChat, goToSidebar, trayRef, trayStyle, isSwiping } =
+    const { activeView: mobileView, goToChat, goToSidebar, trayRef, trayStyle, isSwiping, swipeBindProps } =
         useSwipeNavigation({
             enabled: isMobile,
             canSwipeToChat: activeChannel !== null || activeDMChannel !== null || view === 'me'
@@ -745,6 +745,7 @@ const Chat = () => {
                 {isMobile ? (
                     <div
                         ref={trayRef}
+                        {...swipeBindProps}
                         className={`mobile-swipe-tray${isSwiping ? ' is-swiping' : ''}`}
                         style={trayStyle}
                     >