fix(frontend/friendly): 타임라인 헤더와 알림 위젯 헤더의 타이틀이 잘못 표시될 수 있음 (kokonect-link/cherrypick#461)

CHANGELOG_CHERRYPICK.md

@@ -29,6 +29,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGELOG.md#2024xx) 문서를 참고하십시오.
 
 ### Client
+- Fix: (Friendly) 타임라인 헤더와 알림 위젯 헤더의 타이틀이 잘못 표시될 수 있음 (kokonect-link/cherrypick#461)
 - Fix: 노트를 내보낼 때 노트의 편집 기록을 포함
 - Fix: MkA 컴포넌트를 사용하는 항목이 작동하지 않을 수 있음 (kokonect-link/cherrypick#422)
   - 알림의 읽음 표시, 테스트 알림, 기본 업로드 위치 등

packages/frontend/src/components/global/MkPageHeader.vue

@@ -55,8 +55,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</template>
 		</div>
 		<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
-		<div v-if="pageMetadata && pageMetadata.avatar && ($i && $i.id !== pageMetadata.userName?.id)" :class="$style.followButton">
+		<div v-if="pageMetadata && pageMetadata.avatar && ($i && $i.id !== pageMetadata.userName?.id) && mainRouter.currentRoute.value.name === 'user'" :class="$style.followButton">
-			<MkFollowButton v-if="mainRouter.currentRoute.value.name === 'user'" :user="pageMetadata.avatar" :transparent="false" :full="!narrow"/>
+			<MkFollowButton :user="pageMetadata.avatar" :transparent="false" :full="!narrow"/>
 		</div>
 	</div>
 	<div v-if="((narrow && !hideTitle) || isFriendly) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow && !isFriendly, [$style.thin]: thin_ }]">

packages/frontend/src/components/global/NotificationPageHeader.vue

@@ -0,0 +1,402 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="show" ref="el" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ background: bg }">
+	<div :class="[$style.upper, { [$style.slim]: narrow || isFriendly, [$style.thin]: thin_, [$style.hideTitle]: hideTitle && isFriendly }]">
+		<!--
+		<div v-if="!thin_ && !canBack" :class="$style.buttonsLeft">
+			<button v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" class="_button" :class="[$style.button, $style.goBack]" @click.stop="goBack" @touchstart="preventDrag"><i class="ti ti-arrow-left"></i></button>
+		</div>
+		<div v-if="!thin_ && narrow && props.displayMyAvatar && $i && !isFriendly" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
+			<MkAvatar v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" :class="$style.avatar" :user="$i"/>
+		</div>
+		<div v-else-if="!thin_ && narrow && !hideTitle && canBack" :class="$style.buttonsLeft"/>
+		-->
+		<div v-if="!thin_ && narrow && !hideTitle && canBack" :class="$style.buttonsLeft"/>
+		<div v-if="!thin_ && (actions && actions.length > 1) && isFriendly" :class="$style.buttonsLeft" style="min-width: initial; margin-right: initial;">
+			<div v-if="!narrow && canBack" style="width: 50px; margin-right: 8px;"/>
+			<div v-if="actions.length >= 3" style="width: 42px;"/>
+			<div style="width: 34px;"/>
+		</div>
+		<!--
+		<div v-if="!thin_ && !narrow && (actions && actions.length == 1) && isFriendly && mainRouter.currentRoute.value.name === 'my-notifications'">
+			<div style="width: 50px; margin-right: 8px;"/>
+		</div>
+		<div v-if="!thin_ && !narrow && (actions && actions.length > 1) && !isFriendly && mainRouter.currentRoute.value.name === 'index'" :class="$style.buttonsLeft" style="margin-right: auto;">
+			<div style="width: 84px;"/>
+		</div>
+		<div v-if="!thin_ && narrow && (actions && actions.length > 1) && !isFriendly && mainRouter.currentRoute.value.name !== 'index'">
+			<div style="width: 34px;"/>
+		</div>
+		<div v-if="pageMetadata && pageMetadata.avatar && !thin_ && mainRouter.currentRoute.value.name === 'user' && ($i != null && $i.id != pageMetadata.avatar.id)">
+			<div style="width: 50px;"/>
+		</div>
+		-->
+
+		<template v-if="props.title || props.icon">
+			<div v-if="!hideTitle" :class="[$style.titleContainer, { [$style.titleContainer_canBack]: !canBack }]" @click="top">
+				<i v-if="props.icon" :class="[$style.titleIcon, props.icon]"></i>
+
+				<div :class="$style.title">
+					<div v-if="props.title">{{ props.title }}</div>
+				</div>
+			</div>
+			<XTabs v-if="(!narrow || hideTitle) && !isFriendly" :class="[$style.tabs, { [$style.tabs_canBack]: !canBack }]" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
+		</template>
+		<template v-else-if="pageMetadata">
+			<div v-if="!hideTitle" :class="[$style.titleContainer, { [$style.titleContainer_canBack]: !canBack }]" @click="top">
+				<div v-if="pageMetadata.avatar" :class="$style.titleAvatarContainer">
+					<MkAvatar :class="$style.titleAvatar" :user="pageMetadata.avatar" indicator/>
+				</div>
+				<i v-else-if="pageMetadata.icon" :class="[$style.titleIcon, pageMetadata.icon]"></i>
+
+				<div :class="$style.title">
+					<MkUserName v-if="pageMetadata.userName" :user="pageMetadata.userName" :nowrap="true"/>
+					<div v-else-if="pageMetadata.title">{{ pageMetadata.title }}</div>
+					<div v-if="pageMetadata.subtitle" :class="$style.subtitle">
+						{{ pageMetadata.subtitle }}
+					</div>
+				</div>
+			</div>
+			<XTabs v-if="(!narrow || hideTitle) && !isFriendly" :class="[$style.tabs, { [$style.tabs_canBack]: !canBack }]" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
+		</template>
+		<div v-if="!thin_ && !narrow && (actions && actions.length > 0) && hideTitle && ['index'].includes(<string>mainRouter.currentRoute.value.name)" :class="$style.buttonsRight"/>
+		<div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
+			<template v-for="action in actions">
+				<button v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
+			</template>
+		</div>
+		<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
+	</div>
+	<div v-if="((narrow && !hideTitle) || isFriendly) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow && !isFriendly, [$style.thin]: thin_ }]">
+		<XTabs :class="$style.tabs" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, inject, shallowRef, computed } from 'vue';
+import tinycolor from 'tinycolor2';
+import XTabs, { Tab } from './MkPageHeader.tabs.vue';
+import { getScrollPosition, scrollToTop } from '@/scripts/scroll.js';
+import { globalEvents } from '@/events.js';
+import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
+import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
+import { miLocalStorage } from '@/local-storage.js';
+import { mainRouter } from '@/router/main.js';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { defaultStore } from '@/store.js';
+import { PageHeaderItem } from '@/types/page-header.js';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+
+const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
+const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name));
+
+const props = withDefaults(defineProps<{
+	tabs?: Tab[];
+	tab?: string;
+	actions?: PageHeaderItem[] | null;
+	thin?: boolean;
+	displayMyAvatar?: boolean;
+	title?: string;
+	icon?: string;
+}>(), {
+	tabs: () => ([] as Tab[]),
+});
+
+const emit = defineEmits<{
+	(ev: 'update:tab', key: string);
+}>();
+
+const pageMetadata = injectReactiveMetadata();
+
+const hideTitle = inject('shouldOmitHeaderTitle', false);
+const thin_ = props.thin || inject('shouldHeaderThin', false);
+
+const el = shallowRef<HTMLElement | undefined>(undefined);
+const bg = ref<string | undefined>(undefined);
+const narrow = ref(false);
+const hasTabs = computed(() => props.tabs.length > 0);
+const hasActions = computed(() => props.actions && props.actions.length > 0);
+const show = computed(() => {
+	return !hideTitle || hasTabs.value || hasActions.value;
+});
+
+const preventDrag = (ev: TouchEvent) => {
+	ev.stopPropagation();
+};
+
+const top = (ev: MouseEvent) => {
+	const pos = getScrollPosition(el.value as HTMLElement);
+	if (el.value && pos !== 0) {
+		scrollToTop(el.value as HTMLElement, { behavior: 'smooth' });
+	} else if (pos === 0) {
+		os.popupMenu([{
+			text: i18n.ts.reload,
+			icon: 'ti ti-refresh',
+			action: () => {
+				location.reload();
+			},
+		}], ev.currentTarget ?? ev.target);
+	}
+};
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+function onTabClick(): void {
+	top();
+}
+
+function goBack() {
+	history.back();
+}
+
+const calcBg = () => {
+	const rawBg = 'var(--bg)';
+	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+	if (narrow.value) tinyBg.setAlpha(1);
+	else tinyBg.setAlpha(0.85);
+	bg.value = tinyBg.toRgbString();
+};
+
+let ro: ResizeObserver | null;
+
+onMounted(() => {
+	if (el.value && el.value.parentElement) {
+		narrow.value = el.value.parentElement.offsetWidth < 500;
+		ro = new ResizeObserver((entries, observer) => {
+			if (el.value && el.value.parentElement && document.body.contains(el.value as HTMLElement)) {
+				narrow.value = el.value.parentElement.offsetWidth < 500;
+			}
+		});
+		ro.observe(el.value.parentElement as HTMLElement);
+	}
+
+	calcBg();
+	globalEvents.on('themeChanged', calcBg);
+});
+
+onUnmounted(() => {
+	globalEvents.off('themeChanged', calcBg);
+	if (ro) ro.disconnect();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-bottom: solid 0.5px var(--divider);
+	width: 100%;
+
+	&.reduceBlurEffect {
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+	}
+}
+
+.upper,
+.lower {
+	width: 100%;
+	background: transparent;
+}
+
+.upper {
+	--height: 50px;
+	display: flex;
+	gap: var(--margin);
+	height: var(--height);
+
+	.tabs:first-child {
+		margin-left: auto;
+		padding: 0 12px;
+	}
+	.tabs {
+		margin-right: auto;
+	}
+
+	.tabs_canBack {
+		padding: 0 12px;
+	}
+
+	&.thin {
+		--height: 40px;
+
+		> .buttons {
+			> .button {
+				font-size: 0.9em;
+			}
+		}
+	}
+
+	&.slim {
+		text-align: center;
+		gap: 0;
+
+		.tabs:first-child {
+			margin-left: 0;
+		}
+		> .titleContainer {
+			margin: 0 auto;
+			max-width: 100%;
+		}
+	}
+}
+
+.lower {
+	--height: 40px;
+	height: var(--height);
+}
+
+.hideTitle {
+	display: none;
+}
+
+.buttons {
+	--margin: 8px;
+	display: flex;
+	align-items: center;
+	min-width: var(--height);
+	height: var(--height);
+	&:empty {
+		width: var(--height);
+	}
+}
+
+.buttonsLeft {
+	composes: buttons;
+	margin: 0 var(--margin) 0 0;
+}
+
+.buttonsRight {
+	composes: buttons;
+	margin: 0 0 0 var(--margin);
+}
+
+.followButton {
+  composes: buttons;
+  margin: 0 var(--margin) 0 0;
+}
+
+.goBack {
+	margin-left: 8px;
+
+	> i {
+		margin: auto;
+		font-size: medium;
+	}
+}
+
+.avatar {
+	$size: 32px;
+	display: inline-block;
+	width: $size;
+	height: $size;
+	vertical-align: bottom;
+	margin: 0 8px;
+}
+
+.button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: var(--height);
+	width: calc(var(--height) - (var(--margin)));
+	box-sizing: border-box;
+	position: relative;
+	border-radius: 5px;
+
+	&:hover {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	&.highlighted {
+		color: var(--accent);
+	}
+}
+
+.fullButton {
+	& + .fullButton {
+		margin-left: 12px;
+	}
+}
+
+.titleContainer {
+	display: flex;
+	align-items: center;
+	max-width: min(30vw, 400px);
+	overflow: clip;
+	white-space: nowrap;
+	text-align: left;
+	font-weight: bold;
+	flex-shrink: 1;
+	margin-left: 24px;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.titleContainer_canBack {
+	margin-left: -16px;
+}
+
+.titleAvatarContainer {
+	$size: 32px;
+	contain: strict;
+	overflow: clip;
+	width: $size;
+	height: $size;
+	padding: 8px;
+	flex-shrink: 0;
+}
+
+.titleAvatar {
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+.titleIcon {
+	margin-right: 8px;
+	width: 16px;
+	text-align: center;
+}
+
+.title {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	line-height: 1.1;
+}
+
+.subtitle {
+	opacity: 0.6;
+	font-size: 0.8em;
+	font-weight: normal;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+
+	&.activeTab {
+		text-align: center;
+
+		> .chevron {
+			display: inline-block;
+			margin-left: 6px;
+		}
+	}
+}
+
+@container (max-width: 500px) {
+  .followButton {
+    margin: 0;
+  }
+}
+</style>

packages/frontend/src/pages/notifications-friendly.vue

@@ -0,0 +1,115 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><NotificationPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :title="i18n.ts.notifications" :icon="'ti ti-bell'"/></template>
+	<MkSpacer :contentMax="800">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'all'" key="all">
+				<XNotifications :class="$style.notifications" :excludeTypes="excludeTypes"/>
+			</div>
+			<div v-else-if="tab === 'mentions'" key="mention">
+				<MkNotes :pagination="mentionsPagination" :notification="true"/>
+			</div>
+			<div v-else-if="tab === 'directNotes'" key="directNotes">
+				<MkNotes :pagination="directNotesPagination" :notification="true"/>
+			</div>
+		</MkHorizontalSwipe>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import XNotifications from '@/components/MkNotifications.vue';
+import MkNotes from '@/components/MkNotes.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { notificationTypes } from '@/const.js';
+import { deviceKind } from '@/scripts/device-kind.js';
+import { globalEvents } from '@/events.js';
+import NotificationPageHeader from '@/components/global/NotificationPageHeader.vue';
+
+const tab = ref('all');
+const includeTypes = ref<string[] | null>(null);
+const excludeTypes = computed(() => includeTypes.value ? notificationTypes.filter(t => !includeTypes.value.includes(t)) : undefined);
+
+const props = defineProps<{
+	disableRefreshButton?: boolean;
+}>();
+
+const mentionsPagination = {
+	endpoint: 'notes/mentions' as const,
+	limit: 10,
+};
+
+const directNotesPagination = {
+	endpoint: 'notes/mentions' as const,
+	limit: 10,
+	params: {
+		visibility: 'specified',
+	},
+};
+
+function setFilter(ev) {
+	const typeItems = notificationTypes.map(t => ({
+		text: i18n.ts._notification._types[t],
+		active: (includeTypes.value && includeTypes.value.includes(t)) ?? false,
+		action: () => {
+			includeTypes.value = [t];
+		},
+	}));
+	const items = includeTypes.value != null ? [{
+		icon: 'ti ti-x',
+		text: i18n.ts.clear,
+		action: () => {
+			includeTypes.value = null;
+		},
+	}, { type: 'divider' as const }, ...typeItems] : typeItems;
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+}
+
+const headerActions = computed(() => [deviceKind === 'desktop' && !props.disableRefreshButton ? {
+	icon: 'ti ti-refresh',
+	text: i18n.ts.reload,
+	handler: (ev: Event) => {
+		globalEvents.emit('reloadNotification');
+	},
+} : undefined, tab.value === 'all' ? {
+	text: i18n.ts.filter,
+	icon: 'ti ti-filter',
+	highlighted: includeTypes.value != null,
+	handler: setFilter,
+} : undefined, tab.value === 'all' ? {
+	text: i18n.ts.markAllAsRead,
+	icon: 'ti ti-check',
+	handler: () => {
+		os.apiWithDialog('notifications/mark-all-as-read');
+	},
+} : undefined].filter(x => x !== undefined));
+
+const headerTabs = computed(() => [{
+	key: 'all',
+	title: i18n.ts.all,
+	icon: 'ti ti-point',
+}, {
+	key: 'mentions',
+	title: i18n.ts.mentions,
+	icon: 'ti ti-at',
+}, {
+	key: 'directNotes',
+	title: i18n.ts.directNotes,
+	icon: 'ti ti-mail',
+}]);
+</script>
+
+<style module lang="scss">
+.notifications {
+	border-radius: var(--radius);
+	overflow: clip;
+}
+</style>

packages/frontend/src/ui/friendly.vue

@@ -126,7 +126,7 @@ import { globalEvents } from '@/events.js';
 import CPAvatar from '@/components/global/CPAvatar-Friendly.vue';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
-const XNotifications = defineAsyncComponent(() => import('@/pages/notifications.vue'));
+const XNotifications = defineAsyncComponent(() => import('@/pages/notifications-friendly.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/friendly/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));