Show none found text if no badges found on search

app/features/badges/routes/badges.tsx

@@ -89,22 +89,28 @@ export default function BadgesPageLayout() {
 						</div>
 					</div>
 				) : null}
-				<div className="w-full">
-					<div className="badges__small-badges">
-						{ownBadges.length > 0 ? (
-							<Divider smallText>{t("badges:other.divider")}</Divider>
-						) : null}
-						{otherBadges.map((badge) => (
-							<NavLink
-								className="badges__nav-link"
-								key={badge.id}
-								to={String(badge.id)}
-							>
-								<Badge badge={badge} size={64} isAnimated={false} />
-							</NavLink>
-						))}
+				{ownBadges.length > 0 || otherBadges.length > 0 ? (
+					<div className="w-full">
+						<div className="badges__small-badges">
+							{ownBadges.length > 0 ? (
+								<Divider smallText>{t("badges:other.divider")}</Divider>
+							) : null}
+							{otherBadges.map((badge) => (
+								<NavLink
+									className="badges__nav-link"
+									key={badge.id}
+									to={String(badge.id)}
+								>
+									<Badge badge={badge} size={64} isAnimated={false} />
+								</NavLink>
+							))}
+						</div>
 					</div>
-				</div>
+				) : (
+					<div className="text-lg font-bold my-24">
+						{t("badges:noBadgesFound")}
+					</div>
+				)}
 			</div>
 			<div className="badges__general-info-texts">
 				<p>

locales/en/badges.json

@@ -8,5 +8,6 @@
 	"managedBy": "Managed by {{users}}",
 	"madeBy": "made by {{user}}",
 	"own.divider": "Managed badges",
-	"other.divider": "Other badges"
+	"other.divider": "Other badges",
+	"noBadgesFound": "No badges matching your search"
 }