diff --git a/.changeset/fix-line-on-profiles.md b/.changeset/fix-line-on-profiles.md new file mode 100644 index 000000000..576bc6e2f --- /dev/null +++ b/.changeset/fix-line-on-profiles.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fixed the thin line appearing at the top of unstyled profiles. diff --git a/src/app/components/nav/styles.css.ts b/src/app/components/nav/styles.css.ts index 92d6d8947..f72d3fe38 100644 --- a/src/app/components/nav/styles.css.ts +++ b/src/app/components/nav/styles.css.ts @@ -107,8 +107,8 @@ export const NavItem = recipe({ export type RoomSelectorVariants = RecipeVariants; export const NavItemContent = style({ - paddingLeft: config.space.S300, - paddingRight: config.space.S200, + paddingLeft: config.space.S200, + paddingRight: config.space.S300, height: 'inherit', minWidth: 0, flexGrow: 1, diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index 0b914d813..2732649c1 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -575,7 +575,7 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly diff --git a/src/app/features/room-nav/RoomNavCategoryButton.tsx b/src/app/features/room-nav/RoomNavCategoryButton.tsx index e59946d68..97f78d543 100644 --- a/src/app/features/room-nav/RoomNavCategoryButton.tsx +++ b/src/app/features/room-nav/RoomNavCategoryButton.tsx @@ -10,7 +10,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>( className={classNames(css.CategoryButton, className)} variant="Background" radii="400" - before={ + after={ - + + {!mobileOrTablet() && ( - + ); } diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx index 29c630bf6..2641899d4 100644 --- a/src/app/features/room/MembersDrawer.tsx +++ b/src/app/features/room/MembersDrawer.tsx @@ -322,224 +322,225 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) { const isMobile = mobileOrTablet() || screenSize === ScreenSize.Mobile; const hideText = curWidth <= 80 && !isMobile; return ( - <> - {!mobileOrTablet() && ( - - )} - - - - - - {!hideText && ( - <> - - - - {(anchor: RectCords | undefined, setAnchor) => ( - setAnchor(undefined)} - /> + + + + {!mobileOrTablet() && ( + + )} + + + {!hideText && ( + <> + + + + {(anchor: RectCords | undefined, setAnchor) => ( + setAnchor(undefined)} + /> + } + > + + setAnchor( + evt.currentTarget.getBoundingClientRect() + )) as MouseEventHandler } + variant="Background" + size="400" + radii="300" + before={} > - - setAnchor( - evt.currentTarget.getBoundingClientRect() - )) as MouseEventHandler - } - variant="Background" - size="400" - radii="300" - before={} - > - {membershipFilter.name} - - - )} - - - {(anchor: RectCords | undefined, setAnchor) => ( - setAnchor(undefined)} - /> + {membershipFilter.name} + + + )} + + + {(anchor: RectCords | undefined, setAnchor) => ( + setAnchor(undefined)} + /> + } + > + + setAnchor( + evt.currentTarget.getBoundingClientRect() + )) as MouseEventHandler } + variant="Background" + size="400" + radii="300" + after={} > - - setAnchor( - evt.currentTarget.getBoundingClientRect() - )) as MouseEventHandler - } - variant="Background" - size="400" - radii="300" - after={} - > - {memberSort.name} - - - )} - - - - } - after={ - result && ( - 0 ? 'Success' : 'Critical'} - size="400" - radii="Pill" - aria-pressed - onClick={() => { - if (searchInputRef.current) { - searchInputRef.current.value = ''; - searchInputRef.current.focus(); - } - resetSearch(); - }} - after={} - > - {`${result.items.length || 'No'} ${ - result.items.length === 1 ? 'Result' : 'Results' - }`} - - ) - } - /> - + {memberSort.name} + + + )} + - - - virtualizer.scrollToOffset(0)} + + - - - + size="400" + radii="400" + before={} + after={ + result && ( + 0 ? 'Success' : 'Critical'} + size="400" + radii="Pill" + aria-pressed + onClick={() => { + if (searchInputRef.current) { + searchInputRef.current.value = ''; + searchInputRef.current.focus(); + } + resetSearch(); + }} + after={} + > + {`${result.items.length || 'No'} ${ + result.items.length === 1 ? 'Result' : 'Results' + }`} + + ) + } + /> + + - {!fetchingMembers && !result && processMembers.length === 0 && ( - - {`No "${membershipFilter.name}" Members`} - - )} - - )} - -
- {virtualizer.getVirtualItems().map((vItem) => { - const tagOrMember = PLTagOrRoomMember[vItem.index]; - if (!tagOrMember) return null; - if (!('userId' in tagOrMember)) { - return ( - - {tagOrMember.name} - - ); - } + + virtualizer.scrollToOffset(0)} + variant="Surface" + radii="Pill" + outlined + size="300" + aria-label="Scroll to Top" + > + + + + {!fetchingMembers && !result && processMembers.length === 0 && ( + + {`No "${membershipFilter.name}" Members`} + + )} + + )} + +
+ {virtualizer.getVirtualItems().map((vItem) => { + const tagOrMember = PLTagOrRoomMember[vItem.index]; + if (!tagOrMember) return null; + if (!('userId' in tagOrMember)) { return ( -
- receipt.userId === tagOrMember.userId - )} - hideText={hideText} - /> -
+ {tagOrMember.name} + ); - })} -
- + } - {fetchingMembers && ( - - - - )} + return ( +
+ receipt.userId === tagOrMember.userId + )} + hideText={hideText} + /> +
+ ); + })} +
- - + + {fetchingMembers && ( + + + + )} + + - + ); } diff --git a/src/app/features/room/ThreadBrowser.tsx b/src/app/features/room/ThreadBrowser.tsx index 4f41a3e03..766889032 100644 --- a/src/app/features/room/ThreadBrowser.tsx +++ b/src/app/features/room/ThreadBrowser.tsx @@ -448,7 +448,15 @@ export function ThreadBrowser({ room, onOpenThread, onClose, overlay }: ThreadBr setCurWidth(threadSidebarWidth); }, [threadSidebarWidth]); return ( - <> + {!mobileOrTablet() && ( )} +
+ + + + Threads + + + + + + + +
+ -
- - - - Threads - - - - - - - -
+ } + after={ + query ? ( + { + setQuery(''); + searchRef.current?.focus(); + }} + aria-label="Clear search" + > + + + ) : undefined + } + /> + - + - } - after={ - query ? ( - { - setQuery(''); - searchRef.current?.focus(); - }} - aria-label="Clear search" + {(() => { + if (threads.length === 0 && loadingMore) + return ( + - - - ) : undefined - } - /> - - - - - {(() => { - if (threads.length === 0 && loadingMore) - return ( + + + ); + if (threads.length === 0) + return ( + + + + {lowerQuery ? 'No threads match your search.' : 'No threads yet.'} + + + ); + return ( + <> + + {threads.map((thread: Thread) => ( + + ))} + + {loadingMore && ( - ); - if (threads.length === 0) - return ( - - - - {lowerQuery ? 'No threads match your search.' : 'No threads yet.'} - - - ); - return ( - <> - - {threads.map((thread: Thread) => ( - - ))} - - {loadingMore && ( - - - - )} - - ); - })()} - - + )} + + ); + })()} + - + ); } diff --git a/src/app/features/room/ThreadDrawer.tsx b/src/app/features/room/ThreadDrawer.tsx index e09b76ec0..6a243bca1 100644 --- a/src/app/features/room/ThreadDrawer.tsx +++ b/src/app/features/room/ThreadDrawer.tsx @@ -765,7 +765,15 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra setCurHeight(threadRootHeight); }, [threadRootHeight]); return ( - <> + {!mobileOrTablet() && ( )} - - {/* Header */} -
- - - - Thread - - - - - - - -
- - {/* Thread root message */} - {rootEvent && ( - <> - - - {renderMatrixEvent( - rootEvent.getType(), - typeof rootEvent.getStateKey() === 'string', - rootEvent.getId()!, - rootEvent, - processedEvents.find((e) => e.id === threadRootId)?.itemIndex ?? 0, - thread?.timelineSet ?? room.getUnfilteredTimelineSet(), - false - )} - - - -
- - )} - {/* Replies */} - + {/* Header */} +
+ + + + Thread + + + + + + + +
+ + {/* Thread root message */} + {rootEvent && ( + - {(() => { - if (isThreadLoading) - return ( - - - - ); - if (processedReplies.length === 0) - return ( + + {renderMatrixEvent( + rootEvent.getType(), + typeof rootEvent.getStateKey() === 'string', + rootEvent.getId()!, + rootEvent, + processedEvents.find((e) => e.id === threadRootId)?.itemIndex ?? 0, + thread?.timelineSet ?? room.getUnfilteredTimelineSet(), + false + )} + + + +
+ + )} + {/* Replies */} + + + {(() => { + if (isThreadLoading) + return ( + + + + ); + if (processedReplies.length === 0) + return ( + + + + No replies yet. Start the thread below! + + + ); + return ( + <> + {loadingOlderReplies && ( - - - No replies yet. Start the thread below! - + - ); - return ( - <> - {loadingOlderReplies && ( - - - + )} + {/* Reply count label inside scroll area */} + + + {processedReplies.length} {processedReplies.length === 1 ? 'reply' : 'replies'} + + + + {processedReplies.map((e) => + renderMatrixEvent( + e.mEvent.getType(), + typeof e.mEvent.getStateKey() === 'string', + e.id, + e.mEvent, + e.itemIndex, + e.timelineSet, + e.collapsed + ) )} - {/* Reply count label inside scroll area */} - - - {processedReplies.length}{' '} - {processedReplies.length === 1 ? 'reply' : 'replies'} - - - - {processedReplies.map((e) => - renderMatrixEvent( - e.mEvent.getType(), - typeof e.mEvent.getStateKey() === 'string', - e.id, - e.mEvent, - e.itemIndex, - e.timelineSet, - e.collapsed - ) - )} - - - ); - })()} - - + + + ); + })()} + + - {/* Thread input */} - -
- -
- {hideReads ? ( - - ) : ( - - )} - + {/* Thread input */} + +
+ +
+ {hideReads ? ( + + ) : ( + + )} - + ); } diff --git a/src/app/features/widgets/WidgetsDrawer.tsx b/src/app/features/widgets/WidgetsDrawer.tsx index a30846aa2..d28ea7d51 100644 --- a/src/app/features/widgets/WidgetsDrawer.tsx +++ b/src/app/features/widgets/WidgetsDrawer.tsx @@ -255,7 +255,15 @@ export function WidgetsDrawer({ room }: WidgetsDrawerProps) { const handleBack = () => setActiveWidget(null); return ( - <> + {!mobileOrTablet() && ( )} - - - {activeWidget ? ( - - - - ) : ( - - - {widgets.length === 0 && !showAddForm && ( - - - No widgets in this room. - - - )} - {widgets.map((widget) => ( - - ))} - {canManageWidgets && ( - <> - - {showAddForm ? ( - setShowAddForm(false)} /> - ) : ( - + {activeWidget ? ( + + + + ) : ( + + + {widgets.length === 0 && !showAddForm && ( + + + No widgets in this room. + + + )} + {widgets.map((widget) => ( + + ))} + {canManageWidgets && ( + <> + + {showAddForm ? ( + setShowAddForm(false)} /> + ) : ( + + - - - )} - - )} - - - )} - setShowIntegrationManager(false)} - /> - - + Integration Manager + + + + )} + + )} + + + )} + setShowIntegrationManager(false)} + /> + ); } diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx index b883de3f4..a8ba93f2b 100644 --- a/src/app/pages/client/direct/Direct.tsx +++ b/src/app/pages/client/direct/Direct.tsx @@ -258,113 +258,112 @@ export function Direct() { const hideText = curWidth <= 80 && !isMobile; return ( - <> - - - - {noRoomToDisplay ? ( - - ) : ( - - - - - navigate(getDirectCreatePath())}> - - - - - - {!hideText && ( - - - Create Chat - - - )} - - - - - - - - - {!hideText && 'Chats'} - - -
+ + + {noRoomToDisplay ? ( + + ) : ( + + + + + navigate(getDirectCreatePath())}> + + + + + + {!hideText && ( + + + Create Chat + + + )} + + + + + + + + - {virtualizer.getVirtualItems().map((vItem) => { - const roomId = sortedDirects[vItem.index]; - if (!roomId) return null; - const room = mx.getRoom(roomId); - if (!room) return null; - const selected = selectedRoomId === roomId; + {!hideText && 'Chats'} + + +
+ {virtualizer.getVirtualItems().map((vItem) => { + const roomId = sortedDirects[vItem.index]; + if (!roomId) return null; + const room = mx.getRoom(roomId); + if (!room) return null; + const selected = selectedRoomId === roomId; - return ( - +
-
- -
- - ); - })} -
- - - - )} - - + +
+ + ); + })} +
+ + + + )} + {!mobileOrTablet() && ( )} - + ); } diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx index 707224ef1..bfc72709e 100644 --- a/src/app/pages/client/explore/Explore.tsx +++ b/src/app/pages/client/explore/Explore.tsx @@ -182,33 +182,60 @@ export function Explore() { const hideText = curWidth <= 80 && !isMobile; return ( - <> - - - - - {!hideText ? ( - - - Explore Community - - - ) : ( - - )} - - + + + + + {!hideText ? ( + + + Explore Community + + + ) : ( + + )} + + - - - - - + + + + + + + + + + + {!hideText && ( + + + Featured + + + )} + + + + + {userServer && ( + + - + {!hideText && ( - Featured + {userServer} )} @@ -229,13 +260,25 @@ export function Explore() { - {userServer && ( + )} + + {servers.length > 0 && ( + + + {!hideText && ( + + Servers + + )} + + {servers.map((server) => ( - + {!hideText && ( - {userServer} + {server} )} @@ -260,61 +303,15 @@ export function Explore() { - )} + ))} - {servers.length > 0 && ( - - - {!hideText && ( - - Servers - - )} - - {servers.map((server) => ( - - - - - - - - {!hideText && ( - - - {server} - - - )} - - - - - ))} - - )} - - - + )} + + - - - + + + {!mobileOrTablet() && ( )} - + ); } diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx index d07bf7eea..791fc897b 100644 --- a/src/app/pages/client/home/Home.tsx +++ b/src/app/pages/client/home/Home.tsx @@ -114,7 +114,12 @@ function HomeHeader({ hideText }: { hideText?: boolean }) { return ( <> - + {!hideText && ( @@ -261,174 +266,192 @@ export function Home() { const hideText = curWidth <= 80 && !isMobile; return ( - <> - - - - {noRoomToDisplay ? ( - - ) : ( - - - - - navigate(getHomeCreatePath())}> - - - - - - {!hideText && ( - - - Create Room - - - )} - - - - - - {(open, setOpen) => ( - <> - - setOpen(true)}> - - - - - - {!hideText && ( - - - Join with Address - - - )} - - - - - {open && ( - setOpen(false)} - onOpen={(roomIdOrAlias, viaServers, eventId) => { - setOpen(false); - const path = getHomeRoomPath(roomIdOrAlias, eventId); - navigate( - viaServers - ? withSearchParam(path, { - viaServers: encodeSearchParamValueArray(viaServers), - }) - : path - ); - }} - /> + + + + {noRoomToDisplay ? ( + + ) : ( + + + + + navigate(getHomeCreatePath())}> + + + + + + {!hideText && ( + + + Create Room + + )} - - )} - - - - - - - - - {!hideText && ( - - - Message Search - + + + + + + {(open, setOpen) => ( + <> + + setOpen(true)}> + + + + + + {!hideText && ( + + + Join with Address + + + )} - )} - - - - - - - - - {!hideText && 'Rooms'} - - -
+ + + {open && ( + setOpen(false)} + onOpen={(roomIdOrAlias, viaServers, eventId) => { + setOpen(false); + const path = getHomeRoomPath(roomIdOrAlias, eventId); + navigate( + viaServers + ? withSearchParam(path, { + viaServers: encodeSearchParamValueArray(viaServers), + }) + : path + ); + }} + /> + )} + + )} + + + + + + + + + {!hideText && ( + + + Message Search + + + )} + + + + + + + + - {virtualizer.getVirtualItems().map((vItem) => { - const roomId = sortedRooms[vItem.index]; - if (!roomId) return null; - const room = mx.getRoom(roomId); - if (!room) return null; - const selected = selectedRoomId === roomId; + {!hideText && 'Rooms'} + + +
+ {virtualizer.getVirtualItems().map((vItem) => { + const roomId = sortedRooms[vItem.index]; + if (!roomId) return null; + const room = mx.getRoom(roomId); + if (!room) return null; + const selected = selectedRoomId === roomId; - return ( - +
-
- -
- - ); - })} -
- - - - )} - - + +
+ + ); + })} +
+ + + + )} + {!mobileOrTablet() && ( )} - + ); } diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx index 896c74914..5e3926cce 100644 --- a/src/app/pages/client/inbox/Inbox.tsx +++ b/src/app/pages/client/inbox/Inbox.tsx @@ -66,63 +66,58 @@ export function Inbox() { const hideText = curWidth <= 80 && !isMobile; return ( - <> - - - - - {!hideText ? ( - - - Inbox - - - ) : ( - - )} - - + + + + + {!hideText ? ( + + + Inbox + + + ) : ( + + )} + + - - - - - - - - - - - {!hideText && ( - - - Notifications - - - )} - - - - - - - - - - + + + + + + + + + + + {!hideText && ( + + + Notifications + + + )} + + + + + + + + + {!mobileOrTablet() && ( )} - + ); } diff --git a/src/app/pages/client/sidebar/SidebarResizer.css.ts b/src/app/pages/client/sidebar/SidebarResizer.css.ts index 11e7c8f01..b37504b98 100644 --- a/src/app/pages/client/sidebar/SidebarResizer.css.ts +++ b/src/app/pages/client/sidebar/SidebarResizer.css.ts @@ -1,16 +1,41 @@ import { style } from '@vanilla-extract/css'; -import { color, toRem } from 'folds'; +import { color } from 'folds'; + +/** Out-of-flow so flex siblings (e.g. PageRoot vertical Line) stay flush with the panel edge. */ +export const SidebarResizerDockRight = style({ + position: 'absolute', + top: 0, + right: 0, + bottom: 0, + zIndex: 2, + cursor: 'col-resize', +}); + +export const SidebarResizerDockLeft = style({ + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + zIndex: 2, + cursor: 'col-resize', +}); + +export const SidebarResizerDockTop = style({ + position: 'absolute', + left: 0, + right: 0, + bottom: 0, + zIndex: 2, + cursor: 'ns-resize', +}); export const SidebarResizer = style({ - width: toRem(4), backgroundColor: 'inherit', transition: '0.2s', - cursor: 'col-resize', ':hover': {}, }); export const SidebarResizerHover = style({ - height: '100%', - zIndex: '100', + zIndex: 100, }); export const SideBarResizerAnimation = style({ width: '100%', diff --git a/src/app/pages/client/sidebar/SidebarResizer.tsx b/src/app/pages/client/sidebar/SidebarResizer.tsx index d2a095b1c..6b7d0144c 100644 --- a/src/app/pages/client/sidebar/SidebarResizer.tsx +++ b/src/app/pages/client/sidebar/SidebarResizer.tsx @@ -72,9 +72,15 @@ export function SidebarResizer({ [onPointerUp, onPointerMove] ); + const dockClass = topSided + ? css.SidebarResizerDockTop + : isReversed + ? css.SidebarResizerDockLeft + : css.SidebarResizerDockRight; + return ( setIsPointerOver(true)} onPointerLeave={() => setIsPointerOver(false)} onPointerDown={onPointerDown} diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx index 31861dd2e..d244199d8 100644 --- a/src/app/pages/client/space/Space.tsx +++ b/src/app/pages/client/space/Space.tsx @@ -757,138 +757,98 @@ export function Space() { const isMobile = mobileOrTablet() || screenSize === ScreenSize.Mobile; const hideText = curWidth <= 80 && !isMobile; return ( - <> - - - - - - - {tombstoneEvent && ( - - )} - - - - - - - - - {!hideText && ( - - - Lobby - - - )} - - - - - - - - - - - + + + + + + + {tombstoneEvent && ( + + )} + + + + + + + + + {!hideText && ( - {!hideText && ( - - Message Search - - )} + + Lobby + - - - - - - - {virtualizedItems.map((vItem) => { - const hierarchyItem = hierarchy[vItem.index]; - if (!hierarchyItem) return null; - const { roomId, depth: itemDepth } = hierarchyItem; - const depth = itemDepth ?? 0; - const room = mx.getRoom(roomId); - const renderDepth = room?.isSpaceRoom() ? depth - 2 : depth - 1; - if (!room) return null; - if (depth === subspaceHierarchyLimit && room.isSpaceRoom()) { - return ( - -
- -
- - ); - } - - const paddingTop = getCategoryPadding(depth); - const paddingLeft = `calc(${renderDepth} * ${config.space.S400})`; - - if (room.isSpaceRoom()) { - const categoryId = makeNavCategoryId(space.roomId, roomId); - const closedViaCategory = getInClosedCategories(space.roomId, roomId); - - return ( - + + + + + + + + -
- - - {!hideText && (roomId === space.roomId ? 'Rooms' : room?.name)} - - -
- - ); - } - + + + + {!hideText && ( + + Message Search + + )} + + + + + + + + {virtualizedItems.map((vItem) => { + const hierarchyItem = hierarchy[vItem.index]; + if (!hierarchyItem) return null; + const { roomId, depth: itemDepth } = hierarchyItem; + const depth = itemDepth ?? 0; + const room = mx.getRoom(roomId); + const renderDepth = room?.isSpaceRoom() ? depth - 2 : depth - 1; + if (!room) return null; + if (depth === subspaceHierarchyLimit && room.isSpaceRoom()) { return ( -
); - })} - {getConnectorSVG(hierarchy, virtualizedItems)} - - - - - - + } + + const paddingTop = getCategoryPadding(depth); + const paddingLeft = `calc(${renderDepth} * ${config.space.S400})`; + + if (room.isSpaceRoom()) { + const categoryId = makeNavCategoryId(space.roomId, roomId); + const closedViaCategory = getInClosedCategories(space.roomId, roomId); + + return ( + +
+ + + {!hideText && (roomId === space.roomId ? 'Rooms' : room?.name)} + + +
+ + ); + } + + return ( + +
+ +
+ + ); + })} + {getConnectorSVG(hierarchy, virtualizedItems)} + + + + + {!mobileOrTablet() && ( )} - + ); }