fix padding issues (#4604)

apps/app-frontend/src/App.vue

@@ -990,7 +990,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
 				<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
-					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
+					<div
+						class="p-4 pr-1 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
+					>
 						<h3 class="text-base text-primary font-medium m-0">Playing as</h3>
 						<suspense>
 							<AccountsCard ref="accounts" mode="small" />
@@ -998,10 +1000,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					</div>
 					<div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
 						<suspense>
-							<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
+							<FriendsList
+								:credentials="credentials"
+								:sign-in="() => signIn()"
+								:refresh-credentials="fetchCredentials"
+							/>
 						</suspense>
 					</div>
-					<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
+					<div v-if="news && news.length > 0" class="p-4 pr-1 flex flex-col items-center">
 						<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
 						<div class="space-y-4 flex flex-col items-center w-full">
 							<NewsArticleCard

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -8,6 +8,7 @@ import {
 	useRelativeTime,
 } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
+import { IntlFormatted } from '@vintl/vintl/components'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
@@ -127,6 +128,7 @@ watch(
 	() => {
 		if (userCredentials.value === undefined) {
 			userFriends.value = []
+			loading.value = false
 		} else if (userCredentials.value === null) {
 			userFriends.value = []
 			loading.value = false
@@ -199,6 +201,15 @@ const messages = defineMessages({
 		id: 'friends.no-friends-match',
 		defaultMessage: `No friends matching ''{query}''`,
 	},
+	signInToAddFriends: {
+		id: 'friends.sign-in-to-add-friends',
+		defaultMessage:
+			"<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!",
+	},
+	addFriendsToShare: {
+		id: 'friends.add-friends-to-share',
+		defaultMessage: "<link>Add friends</link> to see what they're playing!",
+	},
 })
 </script>
 
@@ -211,7 +222,7 @@ const messages = defineMessages({
 				<div class="grid grid-cols-[1fr_auto] w-full gap-4">
 					<div>
 						<p class="m-0">
-							<template v-if="friend.id === userCredentials.user_id">
+							<template v-if="friend.id === userCredentials?.user_id">
 								<span class="text-contrast">{{ friend.username }}</span> sent you a friend request
 							</template>
 							<template v-else>
@@ -223,7 +234,7 @@ const messages = defineMessages({
 						</p>
 					</div>
 					<div class="flex gap-2">
-						<template v-if="friend.id === userCredentials.user_id">
+						<template v-if="friend.id === userCredentials?.user_id">
 							<ButtonStyled color="brand">
 								<button @click="addFriend(friend)">
 									<UserPlusIcon />
@@ -277,33 +288,38 @@ const messages = defineMessages({
 			</div>
 		</div>
 	</ModalWrapper>
-	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-2">
-		<ButtonStyled circular type="transparent">
-			<button
-				v-tooltip="formatMessage(messages.addFriend)"
-				:aria-label="formatMessage(messages.addFriend)"
-				@click="addFriendModal.show"
-			>
-				<UserPlusIcon />
-			</button>
-		</ButtonStyled>
-		<div class="iconified-input flex-1">
-			<input
-				v-model="search"
-				type="text"
-				class="friends-search-bar flex w-full"
-				:placeholder="formatMessage(messages.searchFriends)"
-				@keyup.esc="search = ''"
-			/>
-			<button
-				v-if="search"
-				v-tooltip="formatMessage(commonMessages.clearButton)"
-				class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
-				@click="search = ''"
-			>
-				<XIcon />
-			</button>
-		</div>
+	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
+		<template v-if="sortedFriends.length > 0">
+			<ButtonStyled circular type="transparent">
+				<button
+					v-tooltip="formatMessage(messages.addFriend)"
+					:aria-label="formatMessage(messages.addFriend)"
+					@click="addFriendModal.show"
+				>
+					<UserPlusIcon />
+				</button>
+			</ButtonStyled>
+			<div class="iconified-input flex-1">
+				<input
+					v-model="search"
+					type="text"
+					class="friends-search-bar flex w-full"
+					:placeholder="formatMessage(messages.searchFriends)"
+					@keyup.esc="search = ''"
+				/>
+				<button
+					v-if="search"
+					v-tooltip="formatMessage(commonMessages.clearButton)"
+					class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
+					@click="search = ''"
+				>
+					<XIcon />
+				</button>
+			</div>
+		</template>
+		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
+			{{ formatMessage(messages.friends) }}
+		</h3>
 		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
 			<button
 				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
@@ -323,9 +339,14 @@ const messages = defineMessages({
 		</ButtonStyled>
 	</div>
 	<div class="flex flex-col gap-3">
+		<h3
+			v-if="sortedFriends.length === 0 || loading"
+			class="ml-4 mr-1 text-base text-primary font-medium m-0"
+		>
+			{{ formatMessage(messages.friends) }}
+		</h3>
 		<template v-if="loading">
-			<h3 class="text-base text-primary font-medium m-0">{{ formatMessage(messages.friends) }}</h3>
-			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
+			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
 				<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
 				<div class="flex flex-col w-full">
 					<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
@@ -334,16 +355,24 @@ const messages = defineMessages({
 			</div>
 		</template>
 		<template v-else-if="sortedFriends.length === 0">
-			<div class="text-sm mx-4">
+			<div class="text-sm ml-4 mr-1">
 				<div v-if="!userCredentials">
-					<span class="font-semibold text-brand cursor-pointer" @click="signIn"
-						>Sign in to a Modrinth account</span
-					>
-					to add friends and see what they're playing!
+					<IntlFormatted :message-id="messages.signInToAddFriends">
+						<template #link="{ children }">
+							<span class="font-semibold text-brand cursor-pointer" @click="signIn">
+								<component :is="() => children" />
+							</span>
+						</template>
+					</IntlFormatted>
 				</div>
 				<div v-else>
-					<span class="text-link cursor-pointer" @click="addFriendModal.show()">Add friends</span>
-					to share what you're playing!
+					<IntlFormatted :message-id="messages.addFriendsToShare">
+						<template #link="{ children }">
+							<span class="font-semibold text-brand cursor-pointer" @click="signIn">
+								<component :is="() => children" />
+							</span>
+						</template>
+					</IntlFormatted>
 				</div>
 			</div>
 		</template>

apps/app-frontend/src/components/ui/friends/FriendsSection.vue

@@ -100,7 +100,7 @@ const messages = defineMessages({
 		:open-by-default="openByDefault"
 		:force-open="isSearching"
 		:button-class="
-			'px-4 flex w-full items-center bg-transparent border-0 p-0' +
+			'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
 			(isSearching
 				? ''
 				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
@@ -116,7 +116,7 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-2"
+					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
 					@contextmenu.prevent.stop="
 						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
 					"

apps/app-frontend/src/helpers/friends.ts

@@ -50,13 +50,13 @@ export async function transformFriends(
 	friends: UserFriend[],
 	credentials: ModrinthCredentials | null,
 ): Promise<FriendWithUserData[]> {
-	if (friends.length === 0) {
+	if (friends.length === 0 || !credentials) {
 		return []
 	}
 
 	const friendStatuses = await friend_statuses()
 	const users = await get_user_many(
-		friends.map((x) => (x.id === credentials?.user_id ? x.friend_id : x.id)),
+		friends.map((x) => (x.id === credentials.user_id ? x.friend_id : x.id)),
 	)
 
 	return friends.map((friend) => {

apps/app-frontend/src/locales/en-US/index.json

@@ -86,6 +86,9 @@
   "friends.add-friend.username.title": {
     "message": "What's your friend's Modrinth username?"
   },
+  "friends.add-friends-to-share": {
+    "message": "<link>Add friends</link> to see what they're playing!"
+  },
   "friends.friend.cancel-request": {
     "message": "Cancel request"
   },
@@ -122,6 +125,9 @@
   "friends.section.heading": {
     "message": "{title} - {count}"
   },
+  "friends.sign-in-to-add-friends": {
+    "message": "<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!"
+  },
   "instance.add-server.add-and-play": {
     "message": "Add and play"
   },