From bdae0c416f155661f3d147427f7674656a18c5bc Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Tue, 25 Feb 2025 20:48:39 +0200
Subject: [PATCH] web/rightpanel: use border-bottom instead of hr for
 separators

---
 web/src/ui/rightpanel/RightPanel.css          |  6 +++++
 web/src/ui/rightpanel/UserExtendedProfile.tsx | 23 ++++++++-----------
 web/src/ui/rightpanel/UserInfo.tsx            | 13 ++---------
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/web/src/ui/rightpanel/RightPanel.css b/web/src/ui/rightpanel/RightPanel.css
index ef7138a..597f4af 100644
--- a/web/src/ui/rightpanel/RightPanel.css
+++ b/web/src/ui/rightpanel/RightPanel.css
@@ -91,6 +91,12 @@ div.right-panel-content.user {
 		word-break: break-word;
 	}
 
+	div.userid, div.extended-profile, div.devices, div.user-moderation, div.mutual-rooms, div.errors {
+		border-bottom: 1px solid var(--border-color);
+		padding-bottom: .5rem;
+		margin-bottom: .5rem;
+	}
+
 	div.extended-profile {
 		display: grid;
 		gap: 0.25rem;
diff --git a/web/src/ui/rightpanel/UserExtendedProfile.tsx b/web/src/ui/rightpanel/UserExtendedProfile.tsx
index afdea59..529f751 100644
--- a/web/src/ui/rightpanel/UserExtendedProfile.tsx
+++ b/web/src/ui/rightpanel/UserExtendedProfile.tsx
@@ -4,7 +4,7 @@ import { PronounSet, UserProfile } from "@/api/types"
 import { ensureArray, ensureString } from "@/util/validation.ts"
 
 interface ExtendedProfileProps {
-	profile: UserProfile
+	profile: UserProfile | null
 	refreshProfile: () => void
 	client: Client
 	userID: string
@@ -105,18 +105,15 @@ const UserExtendedProfile = ({ profile, refreshProfile, client, userID }: Extend
 
 	const pronouns = ensureArray(profile["io.fsky.nyx.pronouns"]) as PronounSet[]
 	const userTimeZone = ensureString(profile["us.cloke.msc4175.tz"])
-	return <>
-		<hr/>
-		<div className="extended-profile">
-			{userTimeZone && <ClockElement tz={userTimeZone} />}
-			{userID === client.userID &&
-				<SetTimeZoneElement tz={userTimeZone} client={client} refreshProfile={refreshProfile} />}
-			{pronouns.length > 0 && <>
-				<div>Pronouns:</div>
-				<div>{pronouns.map(pronounSet => ensureString(pronounSet.summary)).join(", ")}</div>
-			</>}
-		</div>
-	</>
+	return <div className="extended-profile">
+		{userTimeZone && <ClockElement tz={userTimeZone} />}
+		{userID === client.userID &&
+			<SetTimeZoneElement tz={userTimeZone} client={client} refreshProfile={refreshProfile} />}
+		{pronouns.length > 0 && <>
+			<div>Pronouns:</div>
+			<div>{pronouns.map(pronounSet => ensureString(pronounSet.summary)).join(", ")}</div>
+		</>}
+	</div>
 }
 
 export default UserExtendedProfile
diff --git a/web/src/ui/rightpanel/UserInfo.tsx b/web/src/ui/rightpanel/UserInfo.tsx
index f50ef13..0b7cc37 100644
--- a/web/src/ui/rightpanel/UserInfo.tsx
+++ b/web/src/ui/rightpanel/UserInfo.tsx
@@ -70,22 +70,13 @@ const UserInfo = ({ userID }: UserInfoProps) => {
 		</div>
 		<div className="displayname" title={displayname}>{displayname}</div>
 		<div className="userid" title={userID}>{userID}</div>
-		{globalProfile && <UserExtendedProfile
-			profile={globalProfile} refreshProfile={refreshProfile} client={client} userID={userID}
-		/>}
-		<hr/>
+		<UserExtendedProfile profile={globalProfile} refreshProfile={refreshProfile} client={client} userID={userID}/>
 		<DeviceList client={client} room={roomCtx?.store} userID={userID}/>
-		<hr/>
 		{userID !== client.userID && <>
 			<MutualRooms client={client} userID={userID}/>
-			<hr/>
 			<UserModeration client={client} room={roomCtx?.store} member={memberEvt} userID={userID}/>
-			<hr/>
 		</>}
-		{errors?.length ? <>
-			<UserInfoError errors={errors}/>
-			<hr/>
-		</> : null}
+		<UserInfoError errors={errors}/>
 	</>
 }