From 29792e3416c2c2cb6f15d6d7667d262524257ffe Mon Sep 17 00:00:00 2001
From: Kristian Zendato <kristian.zendato@nextcloud.com>
Date: Fri, 31 Jul 2026 15:52:55 +0800
Subject: [PATCH] feat: profile view on mobile screen

Signed-off-by: Kristian Zendato <kristian.zendato@nextcloud.com>
---
 3rdparty                                    |   2 +-
 apps/profile/src/views/ProfileApp.vue       | 161 +++++++++++++++-----
 core/img/actions/mail-outline.svg           |   1 +
 core/img/actions/phone-outline.svg          |   1 +
 core/img/actions/timezone.svg               |   2 +-
 lib/private/Profile/Actions/EmailAction.php |   2 +-
 lib/private/Profile/Actions/PhoneAction.php |   2 +-
 7 files changed, 128 insertions(+), 43 deletions(-)
 create mode 100644 core/img/actions/mail-outline.svg
 create mode 100644 core/img/actions/phone-outline.svg

diff --git a/3rdparty b/3rdparty
index ec0e643aab90b..5935defbd4b61 160000
--- a/3rdparty
+++ b/3rdparty
@@ -1 +1 @@
-Subproject commit ec0e643aab90b8366fe1267b7068ed6e2b95532c
+Subproject commit 5935defbd4b614d76f84ef357f28810957d1ee11
diff --git a/apps/profile/src/views/ProfileApp.vue b/apps/profile/src/views/ProfileApp.vue
index 92faf6fce3491..ad409ebead28d 100644
--- a/apps/profile/src/views/ProfileApp.vue
+++ b/apps/profile/src/views/ProfileApp.vue
@@ -12,6 +12,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActions from '@nextcloud/vue/components/NcActions'
@@ -22,7 +23,8 @@ import NcContent from '@nextcloud/vue/components/NcContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcRichText from '@nextcloud/vue/components/NcRichText'
 import AccountIcon from 'vue-material-design-icons/AccountOutline.vue'
-import MapMarkerIcon from 'vue-material-design-icons/MapMarker.vue'
+import BriefcaseIcon from 'vue-material-design-icons/BriefcaseOutline.vue'
+import MapMarkerIcon from 'vue-material-design-icons/MapMarkerOutline.vue'
 import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
 import ProfileSection from '../components/ProfileSection.vue'
 
@@ -60,9 +62,13 @@ onBeforeMount(() => {
 })
 
 const isCurrentUser = getCurrentUser()?.uid === profileParameters.userId
+const isMobile = useIsMobile()
 
 const primaryAction = profileParameters.actions[0]
-const otherActions = profileParameters.actions.slice(1)
+const showEditAsPrimaryAction = computed(() => isMobile.value && isCurrentUser)
+const otherActions = computed(() => showEditAsPrimaryAction.value
+	? profileParameters.actions
+	: profileParameters.actions.slice(1))
 
 const settingsUrl = generateUrl('/settings/user')
 const emptyProfileMessage = isCurrentUser
@@ -113,28 +119,41 @@ function openStatusModal() {
 		<NcAppContent>
 			<div class="profile__header">
 				<div class="profile__header__container">
+					<NcAvatar
+						v-if="isMobile"
+						class="avatar profile__header__container__avatar"
+						:class="{ interactive: isCurrentUser }"
+						:user="profileParameters.userId"
+						:size="120"
+						:disableMenu="true"
+						:disableTooltip="true"
+						:isNoUser="!profileParameters.isUserAvatarVisible"
+						@click.prevent.stop="openStatusModal" />
 					<div class="profile__header__container__placeholder" />
 					<div class="profile__header__container__displayname">
 						<h2>{{ profileParameters.displayname || profileParameters.userId }}</h2>
-						<span v-if="profileParameters.pronouns">·</span>
+						<span v-if="profileParameters.pronouns" class="profile__header__container__pronoun-separator">·</span>
 						<span v-if="profileParameters.pronouns" class="profile__header__container__pronouns">{{ profileParameters.pronouns }}</span>
+					</div>
+					<div class="profile__header__container__controls">
+						<NcButton
+							v-if="userStatus.icon || userStatus.message"
+							class="profile__header__container__status"
+							:disabled="!isCurrentUser"
+							:variant="isCurrentUser ? 'tertiary' : 'tertiary-no-background'"
+							@click="openStatusModal">
+							<span class="profile__header__container__status-content">
+								<span>{{ userStatus.icon }} {{ userStatus.message }}</span>
+								<PencilIcon v-if="isCurrentUser" :size="20" />
+							</span>
+						</NcButton>
 						<NcButton
-							v-if="isCurrentUser"
+							v-if="isCurrentUser && !isMobile"
 							variant="primary"
 							:href="settingsUrl">
-							<template #icon>
-								<PencilIcon :size="20" />
-							</template>
 							{{ t('profile', 'Edit Profile') }}
 						</NcButton>
 					</div>
-					<NcButton
-						v-if="userStatus.icon || userStatus.message"
-						:disabled="!isCurrentUser"
-						:variant="isCurrentUser ? 'tertiary' : 'tertiary-no-background'"
-						@click="openStatusModal">
-						{{ userStatus.icon }} {{ userStatus.message }}
-					</NcButton>
 				</div>
 			</div>
 
@@ -142,6 +161,7 @@ function openStatusModal() {
 				<div class="profile__content">
 					<div class="profile__sidebar">
 						<NcAvatar
+							v-if="!isMobile"
 							class="avatar"
 							:class="{ interactive: isCurrentUser }"
 							:user="profileParameters.userId"
@@ -152,9 +172,16 @@ function openStatusModal() {
 							@click.prevent.stop="openStatusModal" />
 
 						<div class="user-actions">
+							<NcButton
+								v-if="showEditAsPrimaryAction"
+								variant="primary"
+								class="user-actions__primary"
+								:href="settingsUrl">
+								{{ t('profile', 'Edit Profile') }}
+							</NcButton>
 							<!-- When a tel: URL is opened with target="_blank", a blank new tab is opened which is inconsistent with the handling of other URLs so we set target="_self" for the phone action -->
 							<NcButton
-								v-if="primaryAction"
+								v-if="primaryAction && !showEditAsPrimaryAction"
 								variant="primary"
 								class="user-actions__primary"
 								:href="primaryAction.target"
@@ -167,7 +194,10 @@ function openStatusModal() {
 								</template>
 								{{ primaryAction.title }}
 							</NcButton>
-							<NcActions class="user-actions__other" :inline="4">
+							<NcActions
+								v-if="otherActions.length > 0"
+								class="user-actions__other"
+								:inline="isMobile ? 5 : 4">
 								<NcActionLink
 									v-for="action in otherActions"
 									:key="action.id"
@@ -188,12 +218,17 @@ function openStatusModal() {
 					<div class="profile__blocks">
 						<div v-if="profileParameters.organisation || profileParameters.role || profileParameters.address" class="profile__blocks-details">
 							<div v-if="profileParameters.organisation || profileParameters.role" class="detail">
-								<p>{{ profileParameters.organisation }} <span v-if="profileParameters.organisation && profileParameters.role">•</span> {{ profileParameters.role }}</p>
+								<p>
+									<BriefcaseIcon
+										class="detail-icon"
+										:size="16" />
+									{{ profileParameters.organisation }} <span v-if="profileParameters.organisation && profileParameters.role">•</span> {{ profileParameters.role }}
+								</p>
 							</div>
 							<div v-if="profileParameters.address" class="detail">
 								<p>
 									<MapMarkerIcon
-										class="map-icon"
+										class="detail-icon"
 										:size="16" />
 									{{ profileParameters.address }}
 								</p>
@@ -233,7 +268,7 @@ $profile-max-width: 1024px;
 $content-max-width: 640px;
 
 :deep(#app-content-vue) {
-	background-color: unset;
+	min-width: 320px;
 }
 
 .profile {
@@ -282,6 +317,18 @@ $content-max-width: 640px;
 					font-size: 20px;
 				}
 			}
+
+			&__controls {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			&__status-content {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
 		}
 	}
 
@@ -293,7 +340,10 @@ $content-max-width: 640px;
 		min-width: 220px;
 		margin-block: -150px 0;
 		margin-inline: 0 20px;
+	}
 
+	&__header,
+	&__sidebar {
 		// Specificity hack is needed to override Avatar component styles
 		:deep(.avatar.avatardiv) {
 			text-align: center;
@@ -336,7 +386,7 @@ $content-max-width: 640px;
 	}
 
 	&__blocks {
-		margin: 18px 0 80px 0;
+		margin: 18px 0 80px 16px;
 		display: grid;
 		gap: 16px 0;
 		width: $content-max-width;
@@ -355,7 +405,7 @@ $content-max-width: 640px;
 				display: inline-block;
 				color: var(--color-text-maxcontrast);
 
-				p .map-icon {
+				p .detail-icon {
 					display: inline-block;
 					vertical-align: middle;
 				}
@@ -380,7 +430,7 @@ $content-max-width: 640px;
 
 	&__primary {
 		margin: 0 auto;
-		max-width: 100%;
+		width: 180px !important;
 
 		&__icon {
 			filter: var(--primary-invert-if-dark);
@@ -406,39 +456,58 @@ $content-max-width: 640px;
 @media only screen and (max-width: 1024px) {
 	.profile {
 		&__header {
-			height: 250px;
+			height: 190px;
 			position: unset;
 
 			&__container {
-				grid-template-columns: unset;
-				margin-bottom: 110px;
+				align-self: center;
+				grid-template-columns: 136px minmax(0, 1fr);
+				grid-template-rows: max-content max-content;
+				max-width: 600px;
+				margin: 0 auto;
+				padding-inline: 16px;
+				row-gap: 0;
+
+				&__avatar {
+					grid-column: 1;
+					grid-row: 1 / 3;
+					justify-self: center;
+				}
+
+				&__placeholder {
+					display: none;
+				}
 
 				&__displayname {
-					margin: 80px 20px 0px 0px!important;
+					grid-column: 2;
+					grid-row: 1;
+					margin: 0;
 					width: unset;
-					text-align: center;
-					padding-inline: 12px;
+					height: unset;
+					flex-direction: column;
+					align-items: flex-start;
+					gap: 2px;
+
+					h2 {
+						font-size: 24px;
+						overflow-wrap: anywhere;
+					}
 				}
 
-				&__edit-button {
-					width: fit-content;
-					display: block;
-					margin: 60px auto;
+				&__pronoun-separator {
+					display: none;
 				}
 
-				&__status-text {
-					margin: 4px auto;
+				&__status {
+					grid-column: 2;
+					grid-row: 2;
+					justify-self: start;
 				}
 			}
 		}
 
 		&__content {
 			display: block;
-
-			 .avatar {
-				// Overlap avatar to top header
-				margin-top: -110px !important;
-			 }
 		}
 
 		&__blocks {
@@ -452,6 +521,16 @@ $content-max-width: 640px;
 			margin: unset;
 			position: unset;
 		}
+
+		&__header,
+		&__sidebar {
+			:deep(.avatar.avatardiv) {
+				.avatardiv__user-status {
+					inset-inline-end: 0;
+					bottom: 0;
+				}
+			}
+		}
 	}
 
 	.user-actions {
@@ -459,6 +538,10 @@ $content-max-width: 640px;
 		max-width: 600px;
 		margin: 0 auto;
 		padding: 20px 50px 0px 50px;
+
+		&__primary {
+			width: 220px !important;
+		}
 	}
 }
 </style>
diff --git a/core/img/actions/mail-outline.svg b/core/img/actions/mail-outline.svg
new file mode 100644
index 0000000000000..e21ebd7f2c812
--- /dev/null
+++ b/core/img/actions/mail-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M168-192q-29.7 0-50.85-21.16Q96-234.32 96-264.04v-432.24Q96-726 117.15-747T168-768h624q29.7 0 50.85 21.16Q864-725.68 864-695.96v432.24Q864-234 842.85-213T792-192H168Zm312-240L168-611v347h624v-347L480-432Zm0-85 312-179H168l312 179Zm-312-94v-85 432-347Z"/></svg>
\ No newline at end of file
diff --git a/core/img/actions/phone-outline.svg b/core/img/actions/phone-outline.svg
new file mode 100644
index 0000000000000..bad533c113995
--- /dev/null
+++ b/core/img/actions/phone-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M763-145q-121-9-229.5-59.5T339-341q-86-86-135.5-194T144-764q-2-21 12.29-36.5Q170.57-816 192-816h136q17 0 29.5 10.5T374-779l24 106q2 13-1.5 25T385-628l-97 98q20 38 46 73t57.97 65.98Q422-361 456-335.5q34 25.5 72 45.5l99-96q8-8 20-11.5t25-1.5l107 23q17 5 27 17.5t10 29.5v136q0 21.43-16 35.71Q784-143 763-145ZM255-600l70-70-17.16-74H218q5 38 14 73.5t23 70.5Zm344 344q35.1 14.24 71.55 22.62Q707-225 744-220v-90l-75-16-70 70ZM255-600Zm344 344Z"/></svg>
\ No newline at end of file
diff --git a/core/img/actions/timezone.svg b/core/img/actions/timezone.svg
index 8bafc890c27ed..a9fc5ccb368dd 100644
--- a/core/img/actions/timezone.svg
+++ b/core/img/actions/timezone.svg
@@ -1 +1 @@
-<svg viewBox="0 0 16 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M12 22a9.66 9.66 0 0 1-3.875-.788 10.12 10.12 0 0 1-3.187-2.149 10.138 10.138 0 0 1-2.15-3.188A9.676 9.676 0 0 1 2 12c0-1.383.263-2.679.788-3.888a10.167 10.167 0 0 1 2.15-3.174 10.142 10.142 0 0 1 3.187-2.151A9.676 9.676 0 0 1 12 2c1.383 0 2.679.262 3.888.787a10.203 10.203 0 0 1 3.175 2.151 10.184 10.184 0 0 1 2.15 3.174A9.654 9.654 0 0 1 22 12a9.676 9.676 0 0 1-.787 3.875 10.155 10.155 0 0 1-2.15 3.188 10.18 10.18 0 0 1-3.175 2.149A9.638 9.638 0 0 1 12 22Zm0-2.05c.433-.6.808-1.225 1.125-1.875.317-.65.575-1.342.775-2.075h-3.8c.2.733.458 1.425.775 2.075.317.65.692 1.275 1.125 1.875Zm-2.6-.4c-.3-.55-.562-1.121-.787-1.712A14.728 14.728 0 0 1 8.05 16H5.1a8.304 8.304 0 0 0 1.813 2.175A7.19 7.19 0 0 0 9.4 19.55Zm5.2 0a7.195 7.195 0 0 0 2.488-1.375A8.3 8.3 0 0 0 18.9 16h-2.95c-.15.633-.337 1.246-.562 1.838a13.9 13.9 0 0 1-.788 1.712ZM4.25 14h3.4a13.77 13.77 0 0 1-.15-2 13.236 13.236 0 0 1 .15-2h-3.4a8.503 8.503 0 0 0-.187.987A7.917 7.917 0 0 0 4 12c0 .35.021.688.063 1.012.041.325.104.655.187.988Zm5.4 0h4.7a13.182 13.182 0 0 0 .15-2 13.246 13.246 0 0 0-.15-2h-4.7a13.236 13.236 0 0 0-.112 3.012c.025.325.062.655.112.988Zm6.7 0h3.4a8.066 8.066 0 0 0 .25-2c0-.35-.021-.687-.062-1.013A8.725 8.725 0 0 0 19.75 10h-3.4a13.246 13.246 0 0 1 .15 2 13.182 13.182 0 0 1-.15 2Zm-.4-6h2.95a8.3 8.3 0 0 0-1.812-2.175A7.195 7.195 0 0 0 14.6 4.45c.3.55.563 1.121.788 1.712.225.592.412 1.205.562 1.838ZM10.1 8h3.8a11.82 11.82 0 0 0-.775-2.075A12.753 12.753 0 0 0 12 4.05c-.433.6-.808 1.225-1.125 1.875A11.82 11.82 0 0 0 10.1 8Zm-5 0h2.95c.15-.633.338-1.246.563-1.838C8.838 5.571 9.1 5 9.4 4.45a7.19 7.19 0 0 0-2.487 1.375A8.304 8.304 0 0 0 5.1 8Z" style="fill-rule:nonzero" transform="matrix(.8 0 0 .8 -1.6 -1.6)"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M331-126q-70-30-122.5-82.5T126-331q-30-70-30-149.5t30-149q30-69.5 82.5-122T331-834q70-30 149.5-30t149 30q69.5 30 122 82.5t82.5 122q30 69.5 30 149T834-331q-30 70-82.5 122.5t-122 82.5q-69.5 30-149 30T331-126Zm149-45q17-17 34-63.5T540-336H420q9 55 26 101.5t34 63.5Zm-91-10q-14-30-24.5-69T347-336H204q29 57 77 97.5T389-181Zm182 0q60-17 108-57.5t77-97.5H613q-7 47-17.5 86T571-181ZM177-408h161q-2-19-2.5-37.5T335-482q0-18 .5-35.5T338-552H177q-5 19-7 36.5t-2 35.5q0 18 2 35.5t7 36.5Zm234 0h138q2-20 2.5-37.5t.5-34.5q0-17-.5-35t-2.5-37H411q-2 19-2.5 37t-.5 35q0 17 .5 35t2.5 37Zm211 0h161q5-19 7-36.5t2-35.5q0-18-2-36t-7-36H622q2 19 2.5 37.5t.5 36.5q0 18-.5 35.5T622-408Zm-9-216h143q-29-57-77-97.5T571-779q14 30 24.5 69t17.5 86Zm-193 0h120q-9-55-26-101.5T480-789q-17 17-34 63.5T420-624Zm-216 0h143q7-47 17.5-86t24.5-69q-60 17-108 57.5T204-624Z"/></svg>
\ No newline at end of file
diff --git a/lib/private/Profile/Actions/EmailAction.php b/lib/private/Profile/Actions/EmailAction.php
index 779d94d920575..701c27a90d25c 100644
--- a/lib/private/Profile/Actions/EmailAction.php
+++ b/lib/private/Profile/Actions/EmailAction.php
@@ -58,7 +58,7 @@ public function getPriority(): int {
 
 	#[\Override]
 	public function getIcon(): string {
-		return $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core', 'actions/mail.svg'));
+		return $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core', 'actions/mail-outline.svg'));
 	}
 
 	#[\Override]
diff --git a/lib/private/Profile/Actions/PhoneAction.php b/lib/private/Profile/Actions/PhoneAction.php
index 64fc889c77ee4..6047b51ce3ab7 100644
--- a/lib/private/Profile/Actions/PhoneAction.php
+++ b/lib/private/Profile/Actions/PhoneAction.php
@@ -58,7 +58,7 @@ public function getPriority(): int {
 
 	#[\Override]
 	public function getIcon(): string {
-		return $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core', 'actions/phone.svg'));
+		return $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core', 'actions/phone-outline.svg'));
 	}
 
 	#[\Override]