-
- {({ FormField }) => (
- <>
-
-
-
-
-
-
-
-
-
- {data.user.badges.length >= 2 ? (
-
- ) : null}
- {isSupporter && data.ownedTrophies.length >= 2 ? (
-
- ) : null}
- {data.ownedTrophies.length >= 1 ? (
-
- ) : null}
-
-
- {data.discordUniqueName ? (
-
- ) : null}
- {isArtist ? (
- <>
-
-
- >
- ) : null}
-
-
-
- Username, profile picture, YouTube, Bluesky and Twitch accounts
- come from your Discord account. See
- FAQ for more information.
-
-
- >
- )}
-
+
+
+
+
+ {({ FormField }) => (
+ <>
+
+
+
+
+
+
+
+ {isSupporter && data.ownedTrophies.length >= 2 ? (
+
+ ) : null}
+ {data.ownedTrophies.length >= 1 ? (
+
+ ) : null}
+ {isArtist ? (
+ <>
+
+
+ >
+ ) : null}
+
+
+ Username, profile picture, YouTube, Bluesky and Twitch
+ accounts come from your Discord account. See
+ FAQ for more information.
+
+
+ >
+ )}
+
+
);
}
@@ -162,14 +134,3 @@ function pronounsDefaultValue(
if (!pronouns) return [null, null];
return [pronouns.subject, pronouns.object];
}
-
-function sensDefaultValue(
- motionSens: number | null,
- stickSens: number | null,
-): [string | null, string | null] {
- if (motionSens === null && stickSens === null) return [null, null];
- return [
- motionSens !== null ? String(motionSens) : null,
- stickSens !== null ? String(stickSens) : null,
- ];
-}
diff --git a/app/features/user-page/routes/u.$identifier.index.module.css b/app/features/user-page/routes/u.$identifier.index.module.css
index 6aa2e1c71..b8f274f35 100644
--- a/app/features/user-page/routes/u.$identifier.index.module.css
+++ b/app/features/user-page/routes/u.$identifier.index.module.css
@@ -56,7 +56,14 @@
display: none;
}
-.sideCarousel {
+/** Side widgets scroll horizontally above the main ones until there is room for two columns. */
+.widgets {
+ display: flex;
+ flex-direction: column;
+ gap: var(--s-6);
+}
+
+.side {
display: flex;
overflow-x: auto;
gap: var(--s-4);
@@ -69,16 +76,12 @@
}
}
-.mainStack {
+.main {
display: flex;
flex-direction: column;
gap: var(--s-6);
}
-.grid {
- display: none;
-}
-
@container (width >= 720px) {
.header {
flex-direction: row;
@@ -101,19 +104,11 @@
display: none;
}
- .mainStack {
- display: none;
- }
-
- .sideCarousel {
- display: none;
- }
-
.editButtons {
margin: initial;
}
- .grid {
+ .widgets {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: var(--s-8);
@@ -121,181 +116,20 @@
}
.main {
- display: flex;
- flex-direction: column;
- gap: var(--s-6);
+ grid-area: 1 / 1;
}
.side {
+ grid-area: 1 / 2;
position: sticky;
top: 50px;
- display: flex;
flex-direction: column;
+ overflow-x: visible;
gap: var(--s-6);
align-self: start;
- }
-}
-
-.oldPageContainer {
- display: flex;
- flex-direction: column;
- gap: var(--s-6);
-}
-
-.avatarContainer {
- display: grid;
- justify-content: center;
- column-gap: var(--s-3);
- grid-template-areas: "avatar name" "avatar team" "avatar ." "avatar ." "socials .";
-}
-
-.avatar {
- min-width: 125px;
- grid-area: avatar;
-}
-
-.team {
- display: flex;
- font-weight: var(--weight-bold);
- color: var(--color-text);
- gap: var(--s-1-5);
- grid-area: team;
- align-items: center;
-}
-
-.name {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- grid-area: name;
- overflow-wrap: anywhere;
- gap: var(--s-3);
-}
-
-.socials {
- display: flex;
- justify-content: center;
- gap: var(--s-1-5);
- grid-area: socials;
- padding-block-start: var(--s-3);
-}
-
-.socialLink {
- padding: var(--s-1);
- border: 1px solid;
- border-radius: 50%;
-}
-
-.extraInfoHeading {
- & > svg {
- width: 0.8rem;
- }
-}
-
-.socialLink {
- & > svg {
- width: 0.9rem;
- }
-}
-
-.socialLinkYoutube {
- border-color: #f00;
- background-color: #ff00002f;
-
- & > svg {
- fill: #f00;
- }
-}
-
-.socialLinkTwitch {
- border-color: #9146ff;
- background-color: #9146ff2f;
-
- & > svg {
- fill: #9146ff;
- }
-}
-
-.socialLinkBattlefy {
- border-color: #de4c5e;
- background-color: #de4c5e2f;
-
- & > svg {
- fill: #de4c5e;
- }
-}
-
-.socialLinkBsky {
- border-color: #1285fe;
- background-color: #1285fe2f;
- display: grid;
- place-items: center;
-
- & path {
- fill: #1285fe;
- }
-}
-
-.extraInfos {
- display: flex;
- max-width: 24rem;
- flex-wrap: wrap;
- gap: var(--s-3);
- margin-inline: auto;
-}
-
-.extraInfo {
- padding: var(--s-1) var(--s-1-5);
- border-radius: var(--radius-box);
- background-color: var(--color-bg-high);
- font-size: var(--font-2xs);
- display: flex;
- align-items: center;
- gap: var(--s-1);
-}
-
-.extraInfoHeading {
- color: var(--color-text-accent);
- font-weight: var(--weight-bold);
-}
-
-.weapon {
- padding: var(--s-2);
- border-radius: 100%;
- background-color: var(--color-bg-high);
-}
-
-.placements {
- display: flex;
- flex-wrap: wrap;
- padding: var(--s-4);
- border-radius: var(--radius-box);
- margin: 0 auto;
- background-color: var(--color-bg-high);
- color: var(--color-text);
- gap: var(--s-6);
- transition: 0.1s ease-in-out background-color;
-
- &:hover {
- background-color: var(--color-bg-higher);
- }
-}
-
-.placementsMode {
- display: flex;
- flex-direction: column;
- align-items: center;
- font-size: var(--font-xs);
- font-weight: var(--weight-semi);
- gap: var(--s-1-5);
-}
-
-@container (width >= 480px) {
- .placements {
- gap: var(--s-10);
- }
-
- .placementsMode {
- font-size: var(--font-sm);
+
+ & > * {
+ flex: initial;
+ }
}
}
diff --git a/app/features/user-page/routes/u.$identifier.index.tsx b/app/features/user-page/routes/u.$identifier.index.tsx
index 71bcd523a..281b20d2c 100644
--- a/app/features/user-page/routes/u.$identifier.index.tsx
+++ b/app/features/user-page/routes/u.$identifier.index.tsx
@@ -3,33 +3,18 @@ import { Pencil as EditIcon, Puzzle as PuzzleIcon } from "lucide-react";
import { useTranslation } from "react-i18next";
import {
href,
- Link,
useLoaderData,
useMatches,
useOutletContext,
} from "react-router";
import { Avatar } from "~/components/Avatar";
-import { LinkButton, SendouButton } from "~/components/elements/Button";
-import { SendouPopover } from "~/components/elements/Popover";
+import { LinkButton } from "~/components/elements/Button";
import { Flag } from "~/components/Flag";
-import { Image, WeaponImage } from "~/components/Image";
-import { BattlefyIcon } from "~/components/icons/Battlefy";
-import { BskyIcon } from "~/components/icons/Bsky";
-import { DiscordIcon } from "~/components/icons/Discord";
-import { TwitchIcon } from "~/components/icons/Twitch";
-import { YouTubeIcon } from "~/components/icons/YouTube";
import { useUser } from "~/features/auth/core/user";
-import { BadgeDisplay } from "~/features/badges/components/BadgeDisplay";
-import { topSearchPlayerPage } from "~/features/top-search/top-search-urls";
-import { TrophyDisplay } from "~/features/trophies/components/TrophyDisplay";
import { UserCard } from "~/features/user-card/components/UserCard";
-import { modesShort } from "~/modules/in-game-lists/modes";
import { countryCodeToTranslatedName } from "~/utils/i18n";
import invariant from "~/utils/invariant";
import type { SendouRouteHandle } from "~/utils/remix.server";
-import { rawSensToString } from "~/utils/strings";
-import { assertUnreachable } from "~/utils/types";
-import { bskyUrl, modeImageUrl, navIconUrl, teamPage } from "~/utils/urls";
import { MutualFriends } from "../components/MutualFriends";
import type { UserPageNavItem } from "../components/UserPageIconNav";
import { UserPageIconNav } from "../components/UserPageIconNav";
@@ -57,15 +42,6 @@ export const handle: SendouRouteHandle = {
};
export default function UserInfoPage() {
- const data = useLoaderData
();
-
- if (data.type === "new") {
- return ;
- }
- return ;
-}
-
-function NewUserInfoPage() {
const { t, i18n } = useTranslation(["user"]);
const data = useLoaderData();
const user = useUser();
@@ -74,10 +50,6 @@ function NewUserInfoPage() {
const layoutData = parentRoute.loaderData as UserPageLoaderData;
const { navItems } = useOutletContext<{ navItems: UserPageNavItem[] }>();
- if (data.type !== "new") {
- throw new Error("Expected new user data");
- }
-
const mainWidgets = data.widgets.filter((w) => w.slot === "main");
const sideWidgets = data.widgets.filter((w) => w.slot === "side");
@@ -143,368 +115,22 @@ function NewUserInfoPage() {
-