From 0ad067efb2ec03959747a77f3d7352e299493131 Mon Sep 17 00:00:00 2001 From: Arkaprabha Chakraborty Date: Sat, 1 Nov 2025 02:41:23 +0530 Subject: [PATCH] ui fixes yo --- client/app/room/page.tsx | 126 +++++++++++++++------------- client/components/Editor.tsx | 2 +- client/components/ui/hover-card.tsx | 22 ++--- 3 files changed, 83 insertions(+), 67 deletions(-) diff --git a/client/app/room/page.tsx b/client/app/room/page.tsx index 9e3dfa9..46d1b80 100644 --- a/client/app/room/page.tsx +++ b/client/app/room/page.tsx @@ -236,56 +236,70 @@ const Room = () => { return () => window.removeEventListener('resize', checkMobile); }, []); - // Mobile swipe gesture handling + // Mobile swipe gesture handling & Escape key to close panels useEffect(() => { - if (!isMobile) return; + // Swipe gesture (mobile only) + if (isMobile) { + let touchStartX = 0; + let touchStartY = 0; + let touchStartTime = 0; - let touchStartX = 0; - let touchStartY = 0; - let touchStartTime = 0; + const handleTouchStart = (e: TouchEvent) => { + const touch = e.touches[0]; + touchStartX = touch.clientX; + touchStartY = touch.clientY; + touchStartTime = Date.now(); + }; - const handleTouchStart = (e: TouchEvent) => { - const touch = e.touches[0]; - touchStartX = touch.clientX; - touchStartY = touch.clientY; - touchStartTime = Date.now(); - }; + const handleTouchEnd = (e: TouchEvent) => { + const touch = e.changedTouches[0]; + const touchEndX = touch.clientX; + const touchEndY = touch.clientY; + const touchEndTime = Date.now(); - const handleTouchEnd = (e: TouchEvent) => { - const touch = e.changedTouches[0]; - const touchEndX = touch.clientX; - const touchEndY = touch.clientY; - const touchEndTime = Date.now(); + const deltaX = touchEndX - touchStartX; + const deltaY = touchEndY - touchStartY; + const deltaTime = touchEndTime - touchStartTime; - const deltaX = touchEndX - touchStartX; - const deltaY = touchEndY - touchStartY; - const deltaTime = touchEndTime - touchStartTime; - - // Only consider it a swipe if: - // 1. The gesture is fast enough (less than 500ms) - // 2. The horizontal distance is significant (at least 100px) - // 3. The vertical distance is less than horizontal (to avoid conflicting with scrolling) - if ( - deltaTime < 500 && - Math.abs(deltaX) > 100 && - Math.abs(deltaX) > Math.abs(deltaY) - ) { - if (deltaX < 0 && leftPanelForced) { - // Swipe left - close left panel - setLeftPanelForced(false); - } else if (deltaX > 0 && rightPanelForced) { - // Swipe right - close right panel - setRightPanelForced(false); + // Only consider it a swipe if: + // 1. The gesture is fast enough (less than 500ms) + // 2. The horizontal distance is significant (at least 100px) + // 3. The vertical distance is less than horizontal (to avoid conflicting with scrolling) + if ( + deltaTime < 500 && + Math.abs(deltaX) > 100 && + Math.abs(deltaX) > Math.abs(deltaY) + ) { + if (deltaX < 0 && leftPanelForced) { + // Swipe left - close left panel + setLeftPanelForced(false); + } else if (deltaX > 0 && rightPanelForced) { + // Swipe right - close right panel + setRightPanelForced(false); + } } + }; + + document.addEventListener('touchstart', handleTouchStart, { passive: true }); + document.addEventListener('touchend', handleTouchEnd, { passive: true }); + + // Clean up swipe listeners + return () => { + document.removeEventListener('touchstart', handleTouchStart); + document.removeEventListener('touchend', handleTouchEnd); + }; + } + + // Escape key closes panels (all devices) + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + if (leftPanelForced) setLeftPanelForced(false); + if (rightPanelForced) setRightPanelForced(false); } }; - - document.addEventListener('touchstart', handleTouchStart, { passive: true }); - document.addEventListener('touchend', handleTouchEnd, { passive: true }); - + document.addEventListener('keydown', handleKeyDown); return () => { - document.removeEventListener('touchstart', handleTouchStart); - document.removeEventListener('touchend', handleTouchEnd); + document.removeEventListener('keydown', handleKeyDown); }; }, [isMobile, leftPanelForced, rightPanelForced]); @@ -324,19 +338,19 @@ const Room = () => { // Calculate panel visibility based on window width // Minimum width needed: 320px (left) + 640px (main content) + 320px (right) = 1280px - const shouldShowPanels = windowWidth >= 1280; + const showSidePanels = windowWidth >= 1280; // Auto-hide forced panels when screen size increases (do this before calculating visibility) useEffect(() => { - if (shouldShowPanels) { + if (showSidePanels) { setLeftPanelForced(false); setRightPanelForced(false); } - }, [shouldShowPanels]); + }, [showSidePanels]); // Calculate final panel visibility - when shouldShowPanels is true, always show panels regardless of forced state - const showLeftPanel = shouldShowPanels || (!shouldShowPanels && leftPanelForced); - const showRightPanel = shouldShowPanels || (!shouldShowPanels && rightPanelForced); + const showLeftPanel = showSidePanels || (!showSidePanels && leftPanelForced); + const showRightPanel = showSidePanels || (!showSidePanels && rightPanelForced); // Initialize theme from cookie useEffect(() => { @@ -809,7 +823,7 @@ const Room = () => { share - + copy link to this page @@ -823,7 +837,7 @@ const Room = () => { purge - + permanently delete this room and all its contents @@ -837,7 +851,7 @@ const Room = () => { exit - + return to home @@ -855,7 +869,7 @@ const Room = () => { upload - + upload files @@ -873,13 +887,13 @@ const Room = () => { theme - + {getThemeById(currentThemeId)?.name || "Switch theme"} - {/* Mobile Panel Controls */} - {isMobile && ( + {/* Panel Controls for mobile and when panels are hidden due to width */} + {(isMobile || !showSidePanels) && ( <> @@ -890,7 +904,7 @@ const Room = () => { media - + toggle users & media panel @@ -903,7 +917,7 @@ const Room = () => { notes - + toggle comments panel @@ -983,7 +997,7 @@ const Room = () => { )} {/* Overlay for mobile when panels are forced open */} - {!shouldShowPanels && (leftPanelForced || rightPanelForced) && ( + {!showSidePanels && (leftPanelForced || rightPanelForced) && (
{ diff --git a/client/components/Editor.tsx b/client/components/Editor.tsx index 974c818..8d00084 100644 --- a/client/components/Editor.tsx +++ b/client/components/Editor.tsx @@ -149,7 +149,7 @@ export const CodeEditor = forwardRef(({ }, [themeConfig, editorReady]); return ( -
+
, React.ComponentPropsWithoutRef >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( - + + + )) HoverCardContent.displayName = HoverCardPrimitive.Content.displayName