Skip to content

Frontend/search: Show strong verif badges #9160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tristanlabelle merged 4 commits into from
Jun 25, 2026
Merged

Frontend/search: Show strong verif badges #9160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fcfd5b9
Frontend/search: Show strong verif badges
tristanlabelle Jun 22, 2026
557e0ea
Simplify condition
tristanlabelle Jun 22, 2026
c097558
Merge branch 'develop' into frontend/feature/search-strong-verif-badge
nabramow Jun 25, 2026
fb9aca1
Clean up StrongVerificationBadge CSS
nabramow Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/web/components/StrongVerificationBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { useTranslation } from "i18n";
import { GLOBAL } from "i18n/namespaces";
import React from "react";

const StyledSpan = styled("span")(({ theme }) => ({
display: "inline-block",
const StyledSpan = styled("span")(() => ({
display: "inline-flex",
alignItems: "center",
verticalAlign: "middle",
marginLeft: theme.spacing(0.5),
}));

export default function StrongVerificationBadge() {
Expand Down
18 changes: 12 additions & 6 deletions app/web/components/UserSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
Box,
ListItemAvatar,
ListItemText,
Skeleton,
Expand All @@ -17,6 +18,13 @@ import useIsScreenSizeOrSmaller from "utils/useIsScreenSizeOrSmaller";

import StrongVerificationBadge from "./StrongVerificationBadge";

// It could be BlockedUser.AsObject or LiteUser.AsObject and only LiteUser has hasStrongVerification
function isLiteUser(
user: LiteUser.AsObject | BlockedUser.AsObject,
): user is LiteUser.AsObject {
return "hasStrongVerification" in user;
}

const StyledWrapper = styled("div")({
display: "flex",
padding: 0,
Expand Down Expand Up @@ -125,16 +133,14 @@ export default function UserSummary({
sx={{ maxWidth: 300 }}
/>
) : (
<>
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
{nameOnly
? nameValue
: `${nameValue}${user && "age" in user ? `, ${user.age}` : ""}`}
{user &&
"hasStrongVerification" in user &&
user.hasStrongVerification ? (
{isLiteUser(user) && user.hasStrongVerification && (
<StrongVerificationBadge />
) : null}
</>
)}
</Box>
)}
</Typography>
</Tooltip>
Expand Down
8 changes: 3 additions & 5 deletions app/web/features/profile/view/UserOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,11 +126,9 @@ export default function UserOverview({
)}

<StyledWrapper>
<StyledIntro variant="h1">
<span>
{user.name}
{user.hasStrongVerification ? <StrongVerificationBadge /> : null}
</span>
<StyledIntro variant="h1" gap={0.5}>
{user.name}
{user.hasStrongVerification && <StrongVerificationBadge />}
</StyledIntro>
<StyledLink
href={routeToUser(user.username)}
Expand Down
2 changes: 2 additions & 0 deletions app/web/features/search/SeachResultUserCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { FlexboxProps, useMediaQuery } from "@mui/system";
import Avatar from "components/Avatar";
import { OpenInNewIcon } from "components/Icons";
import ProfileLink from "components/ProfileLink/ProfileLink";
import StrongVerificationBadge from "components/StrongVerificationBadge";
import StyledLink from "components/StyledLink";
import { useImpressionRef, useLogEvent } from "features/analytics/hooks";
import { useSearchAnalytics } from "features/analytics/searchAnalyticsContext";
Expand Down Expand Up @@ -293,6 +294,7 @@ const SearchResultUserCard = ({
{user.name}
</Typography>
</ProfileLink>
{user.hasStrongVerification && <StrongVerificationBadge />}
</FlexRow>
{!isNativeEmbed && !isMobile && (
<StyledLink
Expand Down
Loading