arkorty/Osborne
1
0
Fork 0
mirror of https://github.com/arkorty/Osborne.git synced 2026-03-18 00:57:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui fixes yo

Browse Source
This commit is contained in:
Arkaprabha Chakraborty
2025-11-01 02:41:23 +05:30
parent 8e4dfe5c87
commit 0ad067efb2
3 changed files with 83 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
client/app/room/page.tsx
View File

@@ -236,10 +236,10 @@ const Room = () => {
return () => window.removeEventListener('resize', checkMobile); return () => window.removeEventListener('resize', checkMobile);
}, []); }, []);
// Mobile swipe gesture handling // Mobile swipe gesture handling & Escape key to close panels
useEffect(() => { useEffect(() => {
if (!isMobile) return; // Swipe gesture (mobile only)
if (isMobile) {
let touchStartX = 0; let touchStartX = 0;
let touchStartY = 0; let touchStartY = 0;
let touchStartTime = 0; let touchStartTime = 0;
@@ -283,10 +283,24 @@ const Room = () => {
document.addEventListener('touchstart', handleTouchStart, { passive: true }); document.addEventListener('touchstart', handleTouchStart, { passive: true });
document.addEventListener('touchend', handleTouchEnd, { passive: true }); document.addEventListener('touchend', handleTouchEnd, { passive: true });
// Clean up swipe listeners
return () => { return () => {
document.removeEventListener('touchstart', handleTouchStart); document.removeEventListener('touchstart', handleTouchStart);
document.removeEventListener('touchend', handleTouchEnd); 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('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [isMobile, leftPanelForced, rightPanelForced]); }, [isMobile, leftPanelForced, rightPanelForced]);
const contentRef = useRef(content); const contentRef = useRef(content);
@@ -324,19 +338,19 @@ const Room = () => {
// Calculate panel visibility based on window width // Calculate panel visibility based on window width
// Minimum width needed: 320px (left) + 640px (main content) + 320px (right) = 1280px // 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) // Auto-hide forced panels when screen size increases (do this before calculating visibility)
useEffect(() => { useEffect(() => {
if (shouldShowPanels) { if (showSidePanels) {
setLeftPanelForced(false); setLeftPanelForced(false);
setRightPanelForced(false); setRightPanelForced(false);
} }
}, [shouldShowPanels]); }, [showSidePanels]);
// Calculate final panel visibility - when shouldShowPanels is true, always show panels regardless of forced state // Calculate final panel visibility - when shouldShowPanels is true, always show panels regardless of forced state
const showLeftPanel = shouldShowPanels || (!shouldShowPanels && leftPanelForced); const showLeftPanel = showSidePanels || (!showSidePanels && leftPanelForced);
const showRightPanel = shouldShowPanels || (!shouldShowPanels && rightPanelForced); const showRightPanel = showSidePanels || (!showSidePanels && rightPanelForced);
// Initialize theme from cookie // Initialize theme from cookie
useEffect(() => { useEffect(() => {
@@ -809,7 +823,7 @@ const Room = () => {
share share
</Button> </Button>
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardContent className="py-1 px-2 w-auto text-popover-foreground bg-popover text-xs border-foreground z-50"> <HoverCardContent className="py-1 px-2 w-auto text-popover-foreground bg-popover text-xs border-foreground">
copy link to this page copy link to this page
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
@@ -823,7 +837,7 @@ const Room = () => {
purge purge
</Button> </Button>
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardContent className="py-1 px-2 w-auto text-popover-foreground bg-popover text-xs border-foreground z-50"> <HoverCardContent className="py-1 px-2 w-auto text-popover-foreground bg-popover text-xs border-foreground">
permanently delete this room and all its contents permanently delete this room and all its contents
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
@@ -837,7 +851,7 @@ const Room = () => {
exit exit
</Button> </Button>
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardContent className="py-1 px-2 w-auto text-popover-foreground bg-popover text-xs border-foreground z-50"> <HoverCardContent className="py-1 px-2 w-auto text-popover-foreground bg-popover text-xs border-foreground">
return to home return to home
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
@@ -855,7 +869,7 @@ const Room = () => {
upload upload
</Button> </Button>
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardContent className="py-1 px-2 w-auto text-xs border-foreground z-50"> <HoverCardContent className="py-1 px-2 w-auto text-xs border-foreground">
upload files upload files
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
@@ -873,13 +887,13 @@ const Room = () => {
theme theme
</Button> </Button>
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardContent className="py-1 px-2 w-auto text-xs border-foreground z-50"> <HoverCardContent className="py-1 px-2 w-auto text-xs border-foreground">
{getThemeById(currentThemeId)?.name || "Switch theme"} {getThemeById(currentThemeId)?.name || "Switch theme"}
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
{/* Mobile Panel Controls */} {/* Panel Controls for mobile and when panels are hidden due to width */}
{isMobile && ( {(isMobile || !showSidePanels) && (
<> <>
<HoverCard> <HoverCard>
<HoverCardTrigger> <HoverCardTrigger>
@@ -890,7 +904,7 @@ const Room = () => {
media media
</Button> </Button>
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardContent className="py-1 px-2 w-auto text-xs border-foreground z-50"> <HoverCardContent className="py-1 px-2 w-auto text-xs border-foreground z-[999]">
toggle users & media panel toggle users & media panel
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
@@ -903,7 +917,7 @@ const Room = () => {
notes notes
</Button> </Button>
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardContent className="py-1 px-2 w-auto text-xs border-foreground z-50"> <HoverCardContent className="py-1 px-2 w-auto text-xs border-foreground">
toggle comments panel toggle comments panel
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
@@ -983,7 +997,7 @@ const Room = () => {
)} )}
{/* Overlay for mobile when panels are forced open */} {/* Overlay for mobile when panels are forced open */}
{!shouldShowPanels && (leftPanelForced || rightPanelForced) && ( {!showSidePanels && (leftPanelForced || rightPanelForced) && (
<div <div
className="fixed inset-0 bg-black/20 z-30" className="fixed inset-0 bg-black/20 z-30"
onClick={() => { onClick={() => {

2
client/components/ui/hover-card.tsx
View File

@@ -13,6 +13,7 @@ const HoverCardContent = React.forwardRef<
React.ElementRef<typeof HoverCardPrimitive.Content>, React.ElementRef<typeof HoverCardPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<HoverCardPrimitive.Portal>
<HoverCardPrimitive.Content <HoverCardPrimitive.Content
ref={ref} ref={ref}
align={align} align={align}
@@ -23,6 +24,7 @@ const HoverCardContent = React.forwardRef<
)} )}
{...props} {...props}
/> />
</HoverCardPrimitive.Portal>
)) ))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName HoverCardContent.displayName = HoverCardPrimitive.Content.displayName