diff --git a/app/features/user-page/UserRepository.server.ts b/app/features/user-page/UserRepository.server.ts
index a6d13927a..537d6ef93 100644
--- a/app/features/user-page/UserRepository.server.ts
+++ b/app/features/user-page/UserRepository.server.ts
@@ -1525,24 +1525,45 @@ export async function findSocialLinksByUserId(userId: number) {
if (!user) return [];
const links: Array<
- | { type: "url"; value: string }
- | { type: "popover"; platform: "discord"; value: string }
+ | {
+ type: "url";
+ platform: "twitch" | "youtube" | "bsky";
+ /** Account name on the platform, null if only an id is known */
+ name: string | null;
+ url: string;
+ }
+ | { type: "text"; platform: "discord"; name: string }
> = [];
if (user.twitch) {
- links.push({ type: "url", value: twitchUrl(user.twitch) });
+ links.push({
+ type: "url",
+ platform: "twitch",
+ name: user.twitch,
+ url: twitchUrl(user.twitch),
+ });
}
if (user.youtubeId) {
- links.push({ type: "url", value: youtubeUrl(user.youtubeId) });
+ links.push({
+ type: "url",
+ platform: "youtube",
+ name: null,
+ url: youtubeUrl(user.youtubeId),
+ });
}
if (user.bsky) {
- links.push({ type: "url", value: bskyUrl(user.bsky) });
+ links.push({
+ type: "url",
+ platform: "bsky",
+ name: user.bsky,
+ url: bskyUrl(user.bsky),
+ });
}
if (user.discordUniqueName) {
links.push({
- type: "popover",
+ type: "text",
platform: "discord",
- value: user.discordUniqueName,
+ name: user.discordUniqueName,
});
}
diff --git a/app/features/user-page/components/Widget.module.css b/app/features/user-page/components/Widget.module.css
index 287cc8dd9..8750d72e0 100644
--- a/app/features/user-page/components/Widget.module.css
+++ b/app/features/user-page/components/Widget.module.css
@@ -310,11 +310,44 @@
}
}
-.socialLinksIcons {
+.socialLinksList {
display: flex;
- gap: var(--s-2);
- justify-content: center;
- flex-wrap: wrap;
+ flex-direction: column;
+ gap: var(--s-1);
+}
+
+.socialLinkIconCircle {
+ border-radius: var(--radius-full);
+ padding: 0;
+ width: 24px;
+ height: 24px;
+
+ & svg {
+ width: 14px;
+ height: 14px;
+ }
+}
+
+.linkRow {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: var(--s-1-5);
+ width: 100%;
+ height: auto;
+ padding: var(--s-0-5) var(--s-1);
+ border-radius: var(--radius-field);
+ color: var(--color-text);
+ font-size: var(--font-sm);
+ font-weight: var(--weight-body);
+
+ &:is(a, button):hover {
+ background-color: var(--color-bg-high);
+ }
+}
+
+.socialLinkName {
+ overflow-wrap: anywhere;
}
.gameBadgeGrid {
@@ -337,16 +370,7 @@
.friendsList {
display: flex;
flex-direction: column;
- gap: var(--s-2);
-}
-
-.friendLink {
- padding: var(--s-0-5) var(--s-1);
- border-radius: var(--radius-field);
-
- &:hover {
- background-color: var(--color-bg-higher);
- }
+ gap: var(--s-1);
}
.mapModePreferences {
diff --git a/app/features/user-page/components/Widget.tsx b/app/features/user-page/components/Widget.tsx
index 4122e9349..ab43ee2d2 100644
--- a/app/features/user-page/components/Widget.tsx
+++ b/app/features/user-page/components/Widget.tsx
@@ -830,6 +830,28 @@ const urlToIcon = (url: string) => {
return