merge: Collapse user activity, files, and listenbrainz on mobile (resolves #747) (!718)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/718

Closes #747

Approved-by: Marie <github@yuugi.dev>
Approved-by: dakkar <dakkar@thenautilus.net>

packages/backend/src/core/WebhookTestService.ts

@@ -254,7 +254,7 @@ function toPackedUserDetailedNotMe(user: MiUser, override?: Packed<'UserDetailed
 		isRenoteMuted: false,
 		notify: 'none',
 		withReplies: true,
-		ListenBrainz: null,
+		listenbrainz: null,
 		...override,
 	};
 }

packages/backend/src/models/json-schema/user.ts

@@ -300,7 +300,7 @@ export const packedUserDetailedNotMeOnlySchema = {
 			nullable: true, optional: false,
 			example: '2018-03-12',
 		},
-		ListenBrainz: {
+		listenbrainz: {
 			type: 'string',
 			nullable: true,
 			optional: false,

packages/frontend/src/pages/user/home.vue

@@ -136,13 +136,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkInfo v-if="user.pinnedNotes.length === 0 && $i?.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 				<template v-if="narrow">
 					<MkLazy>
-						<XFiles :key="user.id" :user="user"/>
+						<XFiles :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
 					<MkLazy>
-						<XActivity :key="user.id" :user="user"/>
+						<XActivity :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
 					<MkLazy>
-						<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user"/>
+						<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
 				</template>
 				<!-- <div v-if="!disableNotes">
@@ -215,9 +215,9 @@ import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { infoImageUrl } from '@/instance.js';
 
 const MkNote = defineAsyncComponent(() =>
-	(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') :
-	(defaultStore.state.noteDesign === 'sharkey') ? import('@/components/SkNote.vue') :
-	null
+	defaultStore.state.noteDesign === 'sharkey'
+		? import('@/components/SkNote.vue')
+		: import('@/components/MkNote.vue'),
 );
 
 function calcAge(birthdate: string): number {
@@ -237,7 +237,7 @@ function calcAge(birthdate: string): number {
 
 const XFiles = defineAsyncComponent(() => import('./index.files.vue'));
 const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
-const XListenBrainz = defineAsyncComponent(() => import("./index.listenbrainz.vue"));
+const XListenBrainz = defineAsyncComponent(() => import('./index.listenbrainz.vue'));
 //const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
 
 const props = withDefaults(defineProps<{
@@ -269,7 +269,7 @@ if (props.user.listenbrainz) {
 			const response = await fetch(`https://api.listenbrainz.org/1/user/${props.user.listenbrainz}/playing-now`, {
 				method: 'GET',
 				headers: {
-					'Content-Type': 'application/json'
+					'Content-Type': 'application/json',
 				},
 			});
 			const data = await response.json();
@@ -286,11 +286,11 @@ const background = computed(() => {
 	if (props.user.backgroundUrl == null) return {};
 	if (defaultStore.state.disableShowingAnimatedImages) {
 		return {
-			'--backgroundImageStatic': `url('${getStaticImageUrl(props.user.backgroundUrl)}')`
+			'--backgroundImageStatic': `url('${getStaticImageUrl(props.user.backgroundUrl)}')`,
 		};
 	} else {
 		return {
-			'--backgroundImageStatic': `url('${props.user.backgroundUrl}')`
+			'--backgroundImageStatic': `url('${props.user.backgroundUrl}')`,
 		};
 	}
 });
@@ -303,7 +303,7 @@ const pagination = {
 	endpoint: 'users/featured-notes' as const,
 	limit: 10,
 	params: computed(() => ({
-		userId: props.user.id
+		userId: props.user.id,
 	})),
 };
 

packages/frontend/src/pages/user/index.activity.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer>
+<MkContainer :foldable="true" :expanded="!collapsed">
 	<template #icon><i class="ti ti-chart-line"></i></template>
 	<template #header>{{ i18n.ts.activity }}</template>
 	<template #func="{ buttonStyleClass }">
@@ -30,8 +30,10 @@ import { i18n } from '@/i18n.js';
 const props = withDefaults(defineProps<{
 	user: Misskey.entities.User;
 	limit?: number;
+	collapsed?: boolean;
 }>(), {
 	limit: 50,
+	collapsed: false,
 });
 
 const chartSrc = ref('per-user-notes');

packages/frontend/src/pages/user/index.files.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer :max-height="300" :foldable="true">
+<MkContainer :max-height="300" :foldable="true" :expanded="!collapsed">
 	<template #icon><i class="ti ti-photo"></i></template>
 	<template #header>{{ i18n.ts.files }}</template>
 	<div :class="$style.root">
@@ -43,9 +43,12 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	user: Misskey.entities.UserDetailed;
-}>();
+	collapsed?: boolean;
+}>(), {
+	collapsed: false,
+});
 
 const fetching = ref(true);
 const files = ref<{

packages/frontend/src/pages/user/index.listenbrainz.vue

@@ -4,44 +4,43 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-	<MkContainer :foldable="true">
-		<template #header
-			><i
-				class="ph-headphones ph-bold ph-lg"
-				style="margin-right: 0.5em"
-			></i
-			>Music</template
-		>
+<MkContainer :foldable="true" :expanded="!collapsed">
+	<template #header>
+		<i
+			class="ph-headphones ph-bold ph-lg"
+			style="margin-right: 0.5em"
+		></i>Music
+	</template>
 
-		<div style="padding: 8px">
-			<div class="flex">
-				<a :href="listenbrainz.musicbrainzurl">
-					<img class="image" :src="listenbrainz.img" :alt="listenbrainz.title" />
-					<div class="flex flex-col items-start">
-						<p class="text-sm font-bold">Now Playing: {{ listenbrainz.title }}</p>
-						<p class="text-xs font-medium">{{ listenbrainz.artist }}</p>
-					</div>
-				</a>
-				<a :href="listenbrainz.listenbrainzurl">
-					<div class="playicon">
-						<i class="ph-play ph-bold ph-lg"></i>
-					</div>
-				</a>
-			</div>
+	<div style="padding: 8px">
+		<div class="flex">
+			<a :href="listenbrainz.musicbrainzurl">
+				<img class="image" :src="listenbrainz.img" :alt="listenbrainz.title"/>
+				<div class="flex flex-col items-start">
+					<p class="text-sm font-bold">Now Playing: {{ listenbrainz.title }}</p>
+					<p class="text-xs font-medium">{{ listenbrainz.artist }}</p>
+				</div>
+			</a>
+			<a :href="listenbrainz.listenbrainzurl">
+				<div class="playicon">
+					<i class="ph-play ph-bold ph-lg"></i>
+				</div>
+			</a>
 		</div>
-	</MkContainer>
+	</div>
+</MkContainer>
 </template>
 
 <script lang="ts" setup>
-/* eslint-disable no-mixed-spaces-and-tabs */
-import {} from "vue";
-import * as misskey from "misskey-js";
-import MkContainer from "@/components/MkContainer.vue";
+import * as misskey from 'misskey-js';
+import MkContainer from '@/components/MkContainer.vue';
 const props = withDefaults(
 	defineProps<{
-		user: misskey.entities.User;
-	}>(),
-	{},
+		user: misskey.entities.UserDetailed;
+		collapsed?: boolean;
+	}>(), {
+		collapsed: false,
+	},
 );
 const listenbrainz = { title: '', artist: '', lastlisten: '', img: '', musicbrainzurl: '', listenbrainzurl: '' };
 if (props.user.listenbrainz) {
@@ -49,12 +48,12 @@ if (props.user.listenbrainz) {
 		const response = await fetch(`https://api.listenbrainz.org/1/metadata/lookup/?artist_name=${artist}&recording_name=${title}`, {
 			method: 'GET',
 			headers: {
-				'Content-Type': 'application/json'
+				'Content-Type': 'application/json',
 			},
 		});
 		const data = await response.json();
 		if (!data.recording_name) {
-		return null;
+			return null;
 		}
 		const titler: string = data.recording_name;
 		const artistr: string = data.artist_credit_name;
@@ -64,35 +63,33 @@ if (props.user.listenbrainz) {
 		return [titler, artistr, img, musicbrainzurl, listenbrainzurl];
 	};
 	const response = await fetch(`https://api.listenbrainz.org/1/user/${props.user.listenbrainz}/playing-now`, {
-        method: 'GET',
-        headers: {
-			'Content-Type': 'application/json'
-        },
-    });
-    const data = await response.json();
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	});
+	const data = await response.json();
 	if (data.payload.listens && data.payload.listens.length !== 0) {
-      const title: string = data.payload.listens[0].track_metadata.track_name;
-      const artist: string = data.payload.listens[0].track_metadata.artist_name;
-      const lastlisten: string = data.payload.listens[0].playing_now;
-      const img: string = 'https://coverartarchive.org/img/big_logo.svg';
-      await getLMData(title, artist).then((data) => {
-        if (!data) {
-          listenbrainz.title = title;
-		  listenbrainz.img = img;
-		  listenbrainz.artist = artist;
-		  listenbrainz.lastlisten = lastlisten;
-		  return;
-        } else {
-          listenbrainz.title = data[0];
-		  listenbrainz.img = data[2];
-		  listenbrainz.artist = data[1];
-		  listenbrainz.lastlisten = lastlisten;
-		  listenbrainz.musicbrainzurl = data[3];
-		  listenbrainz.listenbrainzurl = data[4];
-          return;
-        }
-      });
-    }
+		const title: string = data.payload.listens[0].track_metadata.track_name;
+		const artist: string = data.payload.listens[0].track_metadata.artist_name;
+		const lastlisten: string = data.payload.listens[0].playing_now;
+		const img = 'https://coverartarchive.org/img/big_logo.svg';
+		await getLMData(title, artist).then((lmData) => {
+			if (!lmData) {
+				listenbrainz.title = title;
+				listenbrainz.img = img;
+				listenbrainz.artist = artist;
+				listenbrainz.lastlisten = lastlisten;
+			} else {
+				listenbrainz.title = lmData[0];
+				listenbrainz.img = lmData[2];
+				listenbrainz.artist = lmData[1];
+				listenbrainz.lastlisten = lastlisten;
+				listenbrainz.musicbrainzurl = lmData[3];
+				listenbrainz.listenbrainzurl = lmData[4];
+			}
+		});
+	}
 }
 </script>
 
@@ -119,8 +116,7 @@ if (props.user.listenbrainz) {
 }
 .text-sm {
 	font-size: 0.875rem;
-	margin: 0;
-	margin-bottom: 0.3rem;
+	margin: 0 0 0.3rem;
 }
 .font-bold {
 	font-weight: 700;

packages/misskey-js/src/autogen/types.ts

@@ -3939,7 +3939,7 @@ export type components = {
       /** @example 2018-03-12 */
       birthday: string | null;
       /** @example Steve */
-      ListenBrainz: string | null;
+      listenbrainz: string | null;
       /** @example ja-JP */
       lang: string | null;
       fields: {