From 7bbe55c26b60789f5da98a856daa6a4d7d83c9c5 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 11 Jun 2024 10:17:37 +0200
Subject: [PATCH] fix(app): improve user menu design

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/shared/globals/globals.js                 |   3 +
 src/talk/renderer/DesktopHeader.vue           |   6 +
 .../UserStatus/components/UserStatusForm.vue  |   5 +-
 src/talk/renderer/components/MainMenu.vue     |  69 +++++
 src/talk/renderer/components/ThemeLogo.vue    |  49 +++
 src/talk/renderer/components/UiMenuItem.vue   |  30 +-
 .../renderer/components/UiMenuSeparator.vue   |  15 +
 src/talk/renderer/components/UserMenu.vue     | 281 +++++++++---------
 src/talk/renderer/talk.main.js                |   4 +-
 9 files changed, 314 insertions(+), 148 deletions(-)
 create mode 100644 src/talk/renderer/components/MainMenu.vue
 create mode 100644 src/talk/renderer/components/ThemeLogo.vue
 create mode 100644 src/talk/renderer/components/UiMenuSeparator.vue

diff --git a/src/shared/globals/globals.js b/src/shared/globals/globals.js
index a388630e..52f1c033 100644
--- a/src/shared/globals/globals.js
+++ b/src/shared/globals/globals.js
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { ref } from 'vue'
+
 import { loadState } from '@nextcloud/initial-state'
 import { translate, translatePlural } from '@nextcloud/l10n'
 
@@ -108,6 +110,7 @@ const OCA = {
 			getDesktopMediaSource,
 			runWithAbsoluteWebroot,
 			enabledAbsoluteWebroot: false,
+			talkRouter: ref(null),
 		},
 	},
 }
diff --git a/src/talk/renderer/DesktopHeader.vue b/src/talk/renderer/DesktopHeader.vue
index b6197547..8e4e027c 100644
--- a/src/talk/renderer/DesktopHeader.vue
+++ b/src/talk/renderer/DesktopHeader.vue
@@ -17,6 +17,10 @@
 
 			<div class="spacer" />
 
+			<div class="header__item" data-theme-dark>
+				<MainMenu />
+			</div>
+
 			<div class="header__item">
 				<UserMenu :user="user" @logout="logout" />
 			</div>
@@ -25,6 +29,7 @@
 </template>
 
 <script>
+import MainMenu from './components/MainMenu.vue'
 import UserMenu from './components/UserMenu.vue'
 import { appData } from '../../app/AppData.js'
 import { useUserStatusStore } from './UserStatus/userStatus.store.js'
@@ -34,6 +39,7 @@ export default {
 	name: 'DesktopHeader',
 
 	components: {
+		MainMenu,
 		UserMenu,
 	},
 
diff --git a/src/talk/renderer/UserStatus/components/UserStatusForm.vue b/src/talk/renderer/UserStatus/components/UserStatusForm.vue
index 556f4062..c8ebb030 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusForm.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusForm.vue
@@ -115,7 +115,10 @@ const revertStatus = async () => {
 		</NcButton>
 
 		<div class="user-status-form__buttons">
-			<NcButton type="primary" :disabled="!isDirty" @click="save">
+			<NcButton type="primary"
+				wide
+				:disabled="!isDirty"
+				@click="save">
 				{{ t('talk_desktop', 'Set user status') }}
 			</NcButton>
 		</div>
diff --git a/src/talk/renderer/components/MainMenu.vue b/src/talk/renderer/components/MainMenu.vue
new file mode 100644
index 00000000..d5c6882b
--- /dev/null
+++ b/src/talk/renderer/components/MainMenu.vue
@@ -0,0 +1,69 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+  -->
+
+<script setup>
+import { computed } from 'vue'
+
+import MdiReload from 'vue-material-design-icons/Reload.vue'
+import MdiWeb from 'vue-material-design-icons/Web.vue'
+import MdiBug from 'vue-material-design-icons/Bug.vue'
+import MdiInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import MdiMenu from 'vue-material-design-icons/Menu.vue'
+
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+
+import { t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+
+const packageInfo = window.TALK_DESKTOP.packageInfo
+const talkRouter = window.OCA.Talk.Desktop.talkRouter
+const talkWebLink = computed(() => generateUrl(talkRouter.value?.currentRoute?.fullPath ?? ''))
+const showHelp = () => window.TALK_DESKTOP.showHelp()
+const reload = () => window.location.reload()
+</script>
+
+<template>
+	<NcActions :aria-label="t('talk_desktop', 'Menu')"
+		type="tertiary-no-background"
+		container="body">
+		<template #icon>
+			<MdiMenu :size="20" />
+		</template>
+
+		<NcActionLink :href="talkWebLink" target="_blank">
+			<template #icon>
+				<MdiWeb :size="20" />
+			</template>
+			{{ t('talk_desktop', 'Open in Web-Browser') }}
+		</NcActionLink>
+
+		<NcActionSeparator />
+
+		<NcActionButton @click="reload">
+			<template #icon>
+				<MdiReload :size="20" />
+			</template>
+			{{ t('talk_desktop', 'Force reload') }}
+		</NcActionButton>
+		<NcActionLink :href="packageInfo.bugs" target="_blank">
+			<template #icon>
+				<MdiBug />
+			</template>
+			{{ t('talk_desktop', 'Report a bug') }}
+		</NcActionLink>
+
+		<NcActionSeparator />
+
+		<NcActionButton @click="showHelp">
+			<template #icon>
+				<MdiInformationOutline :size="20" />
+			</template>
+			{{ t('talk_desktop', 'About') }}
+		</NcActionButton>
+	</NcActions>
+</template>
diff --git a/src/talk/renderer/components/ThemeLogo.vue b/src/talk/renderer/components/ThemeLogo.vue
new file mode 100644
index 00000000..a2dd1916
--- /dev/null
+++ b/src/talk/renderer/components/ThemeLogo.vue
@@ -0,0 +1,49 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+  -->
+
+<script setup>
+import { computed } from 'vue'
+import { appData } from '../../../app/AppData.js'
+
+const props = defineProps({
+	size: {
+		type: Number,
+		default: 20,
+	},
+})
+
+const theming = appData.capabilities.theming
+const logoUrl = theming.logo
+const primaryColor = theming.color
+
+const cssVars = computed(() => ({
+	'--ThemeLogo-size': typeof props.size === 'number' ? `${props.size}px` : props.size,
+	'--ThemeLogo-background-color': primaryColor,
+}))
+</script>
+
+<template>
+	<span class="theme-logo" :style="cssVars">
+		<img class="theme-logo__img" :src="logoUrl" alt="">
+	</span>
+</template>
+
+<style scoped lang="scss">
+.theme-logo {
+	display: flex;
+	align-items: stretch;
+	justify-content: center;
+	aspect-ratio: 1 / 1;
+	border-radius: var(--border-radius);
+	width: var(--ThemeLogo-size);
+	height: var(--ThemeLogo-size);
+	background-color: var(--ThemeLogo-background-color);
+	padding: 15%;
+}
+
+.theme-logo__img {
+	max-width: 100%;
+}
+</style>
diff --git a/src/talk/renderer/components/UiMenuItem.vue b/src/talk/renderer/components/UiMenuItem.vue
index e3fb3224..d3ad6098 100644
--- a/src/talk/renderer/components/UiMenuItem.vue
+++ b/src/talk/renderer/components/UiMenuItem.vue
@@ -6,11 +6,16 @@
 <template>
 	<li class="menu-item">
 		<component :is="tag" class="menu-item__action unstyled-action" v-bind="$attrs">
-			<span v-if="$slots.icon" class="menu-item__icon">
-				<slot name="icon" />
-			</span>
-			<span class="menu-item__text">
-				<slot />
+			<span class="menu-item__action-content">
+				<span v-if="$slots.icon" class="menu-item__icon">
+					<slot name="icon" />
+				</span>
+				<span class="menu-item__text">
+					<slot />
+				</span>
+				<span v-if="$slots['action-icon']" class="menu-item__action-icon">
+					<slot name="action-icon" />
+				</span>
 			</span>
 		</component>
 	</li>
@@ -51,15 +56,14 @@ export default {
 .menu-item__action {
 	--menu-item-icon-size: 20px;
 	--menu-item-gap: calc((var(--default-clickable-area) - var(--menu-item-icon-size)) / 2);
-	display: flex;
-	align-items: center;
 	border: none;
 	border-radius: 6px; /* Same as NcActionButton */
+	display: block;
 	min-height: var(--default-clickable-area);
 	padding: .5em var(--menu-item-gap);
+	text-align: left;
 	font-weight: normal;
 	width: 100%;
-	gap: var(--menu-item-gap);
 	/* Override default global button styles */
 	margin: 0 !important;
 }
@@ -70,10 +74,20 @@ export default {
 	background-color: var(--color-background-hover);
 }
 
+.menu-item__action-content {
+	display: flex;
+	align-items: center;
+	gap: var(--menu-item-gap);
+}
+
 .menu-item__icon {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 20px
 }
+
+.menu-item__text {
+	flex: 1;
+}
 </style>
diff --git a/src/talk/renderer/components/UiMenuSeparator.vue b/src/talk/renderer/components/UiMenuSeparator.vue
new file mode 100644
index 00000000..845bf94a
--- /dev/null
+++ b/src/talk/renderer/components/UiMenuSeparator.vue
@@ -0,0 +1,15 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<li class="menu-item-separator" />
+</template>
+
+<style scoped lang="scss">
+.menu-item-separator {
+	border-top: 1px solid var(--color-border-dark);
+	margin: 2px 0;
+}
+</style>
diff --git a/src/talk/renderer/components/UserMenu.vue b/src/talk/renderer/components/UserMenu.vue
index 3922c410..e773e202 100644
--- a/src/talk/renderer/components/UserMenu.vue
+++ b/src/talk/renderer/components/UserMenu.vue
@@ -3,9 +3,70 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup>
+import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { translate as t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
+import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
+
+import MdiCheck from 'vue-material-design-icons/Check.vue'
+import MdiChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import MdiChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
+import MdiEmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
+import MdiPencil from 'vue-material-design-icons/Pencil.vue'
+import MdiLogout from 'vue-material-design-icons/Logout.vue'
+
+import ThemeLogo from './ThemeLogo.vue'
+import UiMenu from './UiMenu.vue'
+import UiMenuItem from './UiMenuItem.vue'
+import UiMenuSeparator from './UiMenuSeparator.vue'
+import UserStatusDialog from '../UserStatus/UserStatusDialog.vue'
+import { useUserStatusStore } from '../UserStatus/userStatus.store.js'
+import { userStatusTranslations } from '../UserStatus/userStatus.utils.js'
+import { appData } from '../../../app/AppData.js'
+
+const props = defineProps({
+	user: {
+		type: Object,
+		required: true,
+	},
+})
+
+const emit = defineEmits(['logout'])
+
+const userStatusStore = useUserStatusStore()
+const { userStatus } = storeToRefs(userStatusStore)
+const serverUrl = appData.serverUrl
+const serverUrlShort = serverUrl.replace(/^https?:\/\//, '')
+const theming = appData.capabilities.theming
+
+const userMenuContainer = ref(null)
+const isUserStatusDialogOpen = ref(false)
+const userStatusSubMenuOpen = ref(false)
+
+const userProfileLink = computed(() => generateUrl('/u/{userid}', { userid: props.user.id }))
+
+/**
+ * Handle user status type change
+ * @param {string} status - new user status
+ */
+function handleUserStatusChange(status) {
+	userStatusStore.saveUserStatus({ ...userStatus.value, status })
+	userStatusSubMenuOpen.value = false
+}
+</script>
+
 <template>
 	<div ref="userMenuContainer" class="user-menu">
-		<NcPopover v-if="userMenuContainer" :container="userMenuContainer" :popper-hide-triggers="triggers => [...triggers, 'click']">
+		<NcPopover v-if="userMenuContainer"
+			:container="userMenuContainer"
+			:popper-hide-triggers="triggers => [...triggers, 'click']"
+			no-auto-focus>
 			<template #trigger="{ attrs }">
 				<button class="user-menu__trigger unstyled-button" v-bind="attrs">
 					<NcAvatar class="user-menu__avatar"
@@ -18,54 +79,84 @@
 
 			<template #default>
 				<UiMenu aria-label="Settings menu">
-					<UiMenuItem tag="a" :href="userProfileLink" target="_blank">
-						<div><strong>{{ user['display-name'] }}</strong></div>
-						<div>{{ t('talk_desktop', 'View profile') }}</div>
-					</UiMenuItem>
-					<UiMenuItem v-if="userStatusStore.userStatus" tag="button" @click.native="isUserStatusDialogOpen = true">
-						<template #icon>
-							<NcUserStatusIcon :status="userStatusStore.userStatus.status" />
-						</template>
-						<template #default>
-							{{ visibleUserStatus }}
-						</template>
-					</UiMenuItem>
-					<UiMenuItem tag="button" @click.native="reload">
-						<template #icon>
-							<MdiReload />
+					<template v-if="userStatusSubMenuOpen">
+						<UiMenuItem tag="button" @click.native.stop="userStatusSubMenuOpen = false">
+							<template #icon>
+								<MdiChevronLeft :size="20" />
+							</template>
+							{{ t('talk_desktop', 'Back') }}
+						</UiMenuItem>
+						<UiMenuItem v-for="status in ['online', 'away', 'dnd', 'invisible']"
+							:key="status"
+							tag="button"
+							@click.native.stop="handleUserStatusChange(status)">
+							<template #icon>
+								<NcUserStatusIcon :status="status" />
+							</template>
+							{{ userStatusTranslations[status] }}
+							<template v-if="status === userStatus.status" #action-icon>
+								<MdiCheck :size="20" />
+							</template>
+						</UiMenuItem>
+					</template>
+
+					<template v-else>
+						<UiMenuItem tag="a"
+							:href="userProfileLink"
+							target="_blank">
+							<strong>{{ user['display-name'] }}</strong>
+							<div>
+								{{ t('talk_desktop', 'View profile') }}
+							</div>
+						</UiMenuItem>
+
+						<UiMenuSeparator />
+
+						<UiMenuItem tag="a" :href="serverUrl" target="_blank">
+							<template #icon>
+								<ThemeLogo :size="24" />
+							</template>
+							<span class="user-menu__server">
+								<span>{{ theming.name }}</span>
+								<em>{{ serverUrlShort }}</em>
+							</span>
+						</UiMenuItem>
+
+						<UiMenuSeparator />
+
+						<template v-if="userStatus">
+							<UiMenuItem tag="button" @click.native.stop="userStatusSubMenuOpen = true">
+								<template #icon>
+									<NcUserStatusIcon :status="userStatus.status" />
+								</template>
+								{{ userStatusTranslations[userStatus.status] }}
+								<template #action-icon>
+									<MdiChevronRight :size="20" />
+								</template>
+							</UiMenuItem>
+							<UiMenuItem key="custom-status" tag="button" @click.native="isUserStatusDialogOpen = true">
+								<template #icon>
+									<span v-if="userStatus.icon" style="font-size: 20px">
+										{{ userStatus.icon }}
+									</span>
+									<MdiEmoticonOutline v-else :size="20" />
+								</template>
+								{{ userStatus.message || t('talk_desktop', 'Set custom status') }}
+								<template v-if="userStatus.message" #action-icon>
+									<MdiPencil :size="20" />
+								</template>
+							</UiMenuItem>
+
+							<UiMenuSeparator />
 						</template>
-						{{ t('talk_desktop', 'Force reload') }}
-					</UiMenuItem>
-					<UiMenuItem tag="a" :href="$options.packageInfo.bugs" target="_blank">
-						<template #icon>
-							<MdiBug />
-						</template>
-						{{ t('talk_desktop', 'Report a bug') }}
-					</UiMenuItem>
-					<UiMenuItem tag="a" :href="talkWebLink" target="_blank">
-						<template #icon>
-							<MdiWeb />
-						</template>
-						<template #default>
-							{{ t('talk_desktop', 'Open in Web-Browser') }}
-						</template>
-					</UiMenuItem>
-					<UiMenuItem tag="button" @click.native="showHelp">
-						<template #icon>
-							<MdiInformationOutline />
-						</template>
-						<template #default>
-							{{ t('talk_desktop', 'About') }}
-						</template>
-					</UiMenuItem>
-					<UiMenuItem tag="button" @click.native="$emit('logout')">
-						<template #icon>
-							<MdiPower />
-						</template>
-						<template #default>
+
+						<UiMenuItem tag="button" @click.native="emit('logout')">
+							<template #icon>
+								<MdiLogout :size="20" />
+							</template>
 							{{ t('talk_desktop', 'Log out') }}
-						</template>
-					</UiMenuItem>
+						</UiMenuItem>
+					</template>
 				</UiMenu>
 			</template>
 		</NcPopover>
@@ -74,97 +165,6 @@
 	</div>
 </template>
 
-<script>
-import MdiBug from 'vue-material-design-icons/Bug.vue'
-import MdiInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
-import MdiPower from 'vue-material-design-icons/Power.vue'
-import MdiReload from 'vue-material-design-icons/Reload.vue'
-import MdiWeb from 'vue-material-design-icons/Web.vue'
-import { generateUrl } from '@nextcloud/router'
-import { translate as t } from '@nextcloud/l10n'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
-import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
-import UiMenu from './UiMenu.vue'
-import UiMenuItem from './UiMenuItem.vue'
-import { useUserStatusStore } from '../UserStatus/userStatus.store.js'
-import UserStatusDialog from '../UserStatus/UserStatusDialog.vue'
-import { getVisibleUserStatus } from '../UserStatus/userStatus.utils.js'
-
-export default {
-	name: 'UserMenu',
-
-	packageInfo: window.TALK_DESKTOP.packageInfo,
-
-	components: {
-		UserStatusDialog,
-		UiMenuItem,
-		UiMenu,
-		MdiBug,
-		MdiInformationOutline,
-		MdiPower,
-		MdiReload,
-		MdiWeb,
-		NcAvatar,
-		NcPopover,
-		NcUserStatusIcon,
-	},
-
-	props: {
-		user: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	emits: ['logout'],
-
-	setup() {
-		const userStatusStore = useUserStatusStore()
-		return {
-			userStatusStore,
-		}
-	},
-
-	data() {
-		return {
-			userMenuContainer: null,
-			isUserStatusDialogOpen: false,
-		}
-	},
-
-	computed: {
-		userProfileLink() {
-			return generateUrl('/u/{userid}', { userid: this.user.id })
-		},
-
-		talkWebLink() {
-			return generateUrl('/apps/spreed')
-		},
-
-		visibleUserStatus() {
-			return getVisibleUserStatus(this.userStatusStore.userStatus)
-		},
-	},
-
-	mounted() {
-		this.userMenuContainer = this.$refs.userMenuContainer
-	},
-
-	methods: {
-		t,
-
-		showHelp() {
-			window.TALK_DESKTOP.showHelp()
-		},
-
-		reload() {
-			window.location.reload()
-		},
-	},
-}
-</script>
-
 <style scoped>
 .unstyled-button {
 	cursor: pointer;
@@ -210,6 +210,11 @@ export default {
 	box-sizing: content-box;
 }
 
+.user-menu__server {
+	display: flex;
+	flex-direction: column;
+}
+
 .user-menu__trigger:hover .user-menu__avatar,
 .user-menu__trigger:active .user-menu__avatar,
 .user-menu__trigger:focus .user-menu__avatar {
diff --git a/src/talk/renderer/talk.main.js b/src/talk/renderer/talk.main.js
index ff7ca8a7..e0c9b38c 100644
--- a/src/talk/renderer/talk.main.js
+++ b/src/talk/renderer/talk.main.js
@@ -34,6 +34,8 @@ window.OCA.Viewer = createViewer()
 
 await import('@talk/src/main.js')
 
-initTalkHashIntegration(OCA.Talk.instance)
+initTalkHashIntegration(window.OCA.Talk.instance)
+
+window.OCA.Talk.Desktop.talkRouter.value = window.OCA.Talk.instance.$router
 
 await import('./notifications/notifications.store.js')