feat(client): モバイル環境でタイムラインのヘッダーデザインを変更する機能

CHANGELOG_CHERRYPICK.md

@@ -33,6 +33,7 @@
 - 고양이 타임라인 추가
 - 미디어 타임라인 개선
 - 타임라인 편집 기능 추가
+- 모바일 환경에서 타임라인의 헤더 디자인을 변경할 수 있음
 
 ### Client
 - 리노트 전 확인 팝업을 띄움

locales/en-US.yml

@@ -1135,6 +1135,7 @@ _cherrypick:
   rememberPostFormToggleState: "Remember to turn preview on/off in the note post form"
   reactableRemoteReaction: "Allow remote custom emoji reactions to react if there is an emoji with the same name on this server."
   showFollowingMessageInsteadOfButton: "Do not show the follow button in the notification field if you are already following someone"
+  mobileTimelineHeaderChange: "Timeline header design change in mobile environment"
 _bannerDisplay:
   all: "All"
   topBottom: "Top and Bottom"

locales/index.d.ts

@@ -1139,6 +1139,7 @@ export interface Locale {
         "rememberPostFormToggleState": string;
         "reactableRemoteReaction": string;
         "showFollowingMessageInsteadOfButton": string;
+        "mobileTimelineHeaderChange": string;
     };
     "_bannerDisplay": {
         "all": string;

locales/ja-JP.yml

@@ -1137,6 +1137,7 @@ _cherrypick:
   rememberPostFormToggleState: "投稿フォームにて、プレビューのオン・オフを記憶する"
   reactableRemoteReaction: "リモートのカスタム絵文字リアクションでも、このサーバーに同じ名前の絵文字があればリアクションできるようにする"
   showFollowingMessageInsteadOfButton: "既にフォローしている場合、通知欄にフォローボタンを表示しない"
+  mobileTimelineHeaderChange: "モバイル環境でタイムラインのヘッダーデザインを変更"
 
 _bannerDisplay:
   all: "全て"

locales/ko-KR.yml

@@ -1135,6 +1135,7 @@ _cherrypick:
   rememberPostFormToggleState: "노트 작성 화면에서 본문 미리보기 활성화 상태 기억"
   reactableRemoteReaction: "서버에 리모트 이모지와 이름이 같은 이모지가 있으면 리모트 이모지에도 반응할 수 있음"
   showFollowingMessageInsteadOfButton: "이미 팔로우한 경우 알림 필드에 팔로우 버튼을 표시하지 않음"
+  mobileTimelineHeaderChange: "모바일 환경에서 타임라인의 헤더 디자인을 변경"
 _bannerDisplay:
   all: "전부"
   topBottom: "상단 및 하단"

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

@@ -0,0 +1,411 @@
+<template>
+<div v-if="show" ref="el" :class="[$style.root, {[$style.slim]: narrow, [$style.thin]: thin_ }]" :style="{ background: bg }">
+	<div v-if="!thin_ && !canBack" :class="$style.buttonsLeft">
+		<button 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 :class="$style.avatar" :user="$i"/>
+	</div>
+	<div v-else-if="!thin_ && narrow && !hideTitle && canBack" :class="$style.buttonsLeft"/>
+	<div v-else-if="!thin_ && canBack && (actions && actions.length > 0)" :class="$style.buttonsLeft"/>
+
+	<template v-if="metadata">
+		<div v-if="!hideTitle" :class="[$style.titleContainer, { [$style.titleContainer_canBack]: !canBack }]">
+			<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
+			<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]" @click="top"></i>
+
+			<div :class="$style.title">
+				<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true"/>
+				<div v-else-if="metadata.title" @click="top">{{ metadata.title }}</div>
+				<div v-if="!narrow && metadata.subtitle" :class="$style.subtitle">
+					{{ metadata.subtitle }}
+				</div>
+				<div v-if="narrow && hasTabs" :class="[$style.subtitle, $style.activeTab]" @click="showTabsPopup">
+					{{ tabs.find(tab => tab.key === props.tab)?.title }}
+					<i class="ti ti-chevron-down" :class="$style.chevron"></i>
+				</div>
+			</div>
+		</div>
+		<div v-if="!narrow || hideTitle" :class="$style.tabs">
+			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+				<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
+				<span v-if="!tab.iconOnly" :class="$style.tabTitle">{{ tab.title }}</span>
+			</button>
+			<div ref="tabHighlightEl" :class="$style.tabHighlight"></div>
+		</div>
+	</template>
+	<div v-if="!thin_ && !narrow && actions && actions.length > 0 && hideTitle && ['index'].includes(<string>mainRouter.currentRoute.value.name)" :class="$style.buttonsRight"/>
+	<div v-else-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
+		<template v-for="action in actions">
+			<button 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>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, inject, watch, nextTick, onBeforeUnmount } from 'vue';
+import tinycolor from 'tinycolor2';
+import { getScrollPosition, scrollToTop } from '@/scripts/scroll';
+import { globalEvents } from '@/events';
+import { injectPageMetadata } from '@/scripts/page-metadata';
+import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
+import { miLocalStorage } from '@/local-storage';
+import { mainRouter } from '@/router';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
+const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name));
+
+type Tab = {
+	key: string;
+	title: string;
+	icon?: string;
+	iconOnly?: boolean;
+	onClick?: (ev: MouseEvent) => void;
+};
+
+const props = withDefaults(defineProps<{
+	tabs?: Tab[];
+	tab?: string;
+	actions?: {
+		text: string;
+		icon: string;
+		highlighted?: boolean;
+		handler: (ev: MouseEvent) => void;
+	}[];
+	thin?: boolean;
+	displayMyAvatar?: boolean;
+}>(), {
+	tabs: () => ([] as Tab[]),
+});
+
+const emit = defineEmits<{
+	(ev: 'update:tab', key: string);
+}>();
+
+const metadata = injectPageMetadata();
+
+const hideTitle = inject('shouldOmitHeaderTitle', false);
+const thin_ = props.thin || inject('shouldHeaderThin', false);
+
+const el = $shallowRef<HTMLElement | undefined>(undefined);
+const tabRefs: Record<string, HTMLElement | null> = {};
+const tabHighlightEl = $shallowRef<HTMLElement | null>(null);
+const bg = ref<string | undefined>(undefined);
+let 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 || hasActions;
+});
+
+const showTabsPopup = (ev: MouseEvent) => {
+	if (!hasTabs) return;
+	if (!narrow) return;
+	ev.preventDefault();
+	ev.stopPropagation();
+	const menu = props.tabs.map(tab => ({
+		text: tab.title,
+		icon: tab.icon,
+		active: tab.key != null && tab.key === props.tab,
+		action: (ev) => {
+			onTabClick(tab, ev);
+		},
+	}));
+	os.popupMenu(menu, (ev.currentTarget ?? ev.target) as HTMLElement);
+};
+
+const preventDrag = (ev: TouchEvent) => {
+	ev.stopPropagation();
+};
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+const top = (ev: MouseEvent) => {
+	const pos = getScrollPosition(el as HTMLElement);
+	if (el && pos !== 0) {
+		scrollToTop(el 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 onTabMousedown(tab: Tab, ev: MouseEvent): void {
+	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
+	if (tab.key) {
+		emit('update:tab', tab.key);
+	}
+}
+
+function onTabClick(tab: Tab, ev: MouseEvent): void {
+	if (tab.onClick) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		tab.onClick(ev);
+	}
+	if (tab.key) {
+		emit('update:tab', tab.key);
+	}
+}
+
+function goBack() {
+	history.back();
+}
+
+const calcBg = () => {
+	const rawBg = metadata?.bg || 'var(--bg)';
+	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+	if (narrow) tinyBg.setAlpha(1);
+	else tinyBg.setAlpha(0.85);
+	bg.value = tinyBg.toRgbString();
+};
+
+let ro: ResizeObserver | null;
+
+onMounted(() => {
+	calcBg();
+	globalEvents.on('themeChanged', calcBg);
+
+	watch(() => [props.tab, props.tabs], () => {
+		nextTick(() => {
+			const tabEl = props.tab ? tabRefs[props.tab] : undefined;
+			if (tabEl && tabHighlightEl && tabEl.parentElement) {
+				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
+				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
+				const parentRect = tabEl.parentElement.getBoundingClientRect();
+				const rect = tabEl.getBoundingClientRect();
+				tabHighlightEl.style.width = rect.width + 'px';
+				tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
+			}
+		});
+	}, {
+		immediate: true,
+	});
+
+	if (el && el.parentElement) {
+		narrow = el.parentElement.offsetWidth < 500;
+		ro = new ResizeObserver((entries, observer) => {
+			if (el.parentElement && document.body.contains(el as HTMLElement)) {
+				narrow = el.parentElement.offsetWidth < 500;
+			}
+		});
+		ro.observe(el.parentElement as HTMLElement);
+	}
+});
+
+onUnmounted(() => {
+	globalEvents.off('themeChanged', calcBg);
+	if (ro) ro.disconnect();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	--height: 50px;
+	display: flex;
+	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-bottom: solid 0.5px var(--divider);
+	contain: strict;
+	height: var(--height);
+
+	&.thin {
+		--height: 42px;
+
+		> .buttons {
+			> .button {
+				font-size: 0.9em;
+			}
+		}
+	}
+
+	&.slim {
+		text-align: center;
+
+		> .titleContainer {
+			flex: 1;
+			margin: 0 auto;
+
+			> *:first-child {
+				margin-left: auto;
+			}
+
+			> *:last-child {
+				margin-right: auto;
+			}
+		}
+	}
+}
+
+.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);
+}
+
+.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;
+}
+
+.titleContainer_canBack {
+	margin-left: -32px;
+}
+
+.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;
+		}
+	}
+}
+
+.tabs {
+	position: relative;
+	margin-left: 16px;
+	font-size: 0.8em;
+	overflow: auto;
+	white-space: nowrap;
+}
+
+.tab {
+	display: inline-block;
+	position: relative;
+	padding: 0 10px;
+	height: 100%;
+	font-weight: normal;
+	opacity: 0.7;
+
+	&:hover {
+		opacity: 1;
+	}
+
+	&.active {
+		opacity: 1;
+	}
+}
+
+.tabIcon + .tabTitle {
+	margin-left: 8px;
+}
+
+.tabHighlight {
+	position: absolute;
+	bottom: 0;
+	height: 3px;
+	background: var(--accent);
+	border-radius: 999px;
+	transition: all 0.2s ease;
+	pointer-events: none;
+}
+</style>

packages/frontend/src/components/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue';
 
+import CPPageHeader from './global/CPPageHeader.vue';
 import Mfm from './global/MkMisskeyFlavoredMarkdown.ts';
 import MkA from './global/MkA.vue';
 import MkAcct from './global/MkAcct.vue';
@@ -29,6 +30,7 @@ export default function(app: App) {
 export const components = {
 	I18n: I18n,
 	RouterView: RouterView,
+	CPPageHeader: CPPageHeader,
 	Mfm: Mfm,
 	MkA: MkA,
 	MkAcct: MkAcct,
@@ -52,6 +54,7 @@ declare module '@vue/runtime-core' {
 	export interface GlobalComponents {
 		I18n: typeof I18n;
 		RouterView: typeof RouterView;
+		CPPageHeader: typeof CPPageHeader;
 		Mfm: typeof Mfm;
 		MkA: typeof MkA;
 		MkAcct: typeof MkAcct;

packages/frontend/src/pages/settings/cherrypick.vue

@@ -23,6 +23,7 @@
 			<MkSwitch v-model="rememberPostFormToggleStateEnabled">{{ i18n.ts._cherrypick.rememberPostFormToggleState }}</MkSwitch>
 			<MkSwitch v-model="reactableRemoteReactionEnabled">{{ i18n.ts._cherrypick.reactableRemoteReaction }}</MkSwitch>
 			<MkSwitch v-model="showFollowingMessageInsteadOfButtonEnabled">{{ i18n.ts._cherrypick.showFollowingMessageInsteadOfButton }}</MkSwitch>
+			<MkSwitch v-model="mobileTimelineHeaderChange">{{ i18n.ts._cherrypick.mobileTimelineHeaderChange }}</MkSwitch>
 		</div>
 	</FormSection>
 	<!--
@@ -76,6 +77,7 @@ const rememberPostFormToggleStateEnabled = computed(defaultStore.makeGetterSette
 const usePostFormWindow = computed(defaultStore.makeGetterSetter('usePostFormWindow'));
 const cherrypickNoteViewEnabled = computed(defaultStore.makeGetterSetter('cherrypickNoteViewEnabledLab'));
 const showFollowingMessageInsteadOfButtonEnabled = computed(defaultStore.makeGetterSetter('showFollowingMessageInsteadOfButtonEnabled'));
+const mobileTimelineHeaderChange = computed(defaultStore.makeGetterSetter('mobileTimelineHeaderChange'));
 
 const noteMock: Note = {
 	id: 'abc',

packages/frontend/src/pages/timeline.vue

@@ -1,7 +1,8 @@
 <template>
 <MkStickyContainer>
 	<template #header>
-		<MkPageHeader v-if="isMobile || !isFriendly" v-model:tab="src" style="position: relative; z-index: 1001" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/>
+		<CPPageHeader v-if="isMobile && defaultStore.state.mobileTimelineHeaderChange" v-model:tab="src" style="position: relative; z-index: 1001" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/>
+		<MkPageHeader v-else-if="isMobile || !isFriendly" v-model:tab="src" style="position: relative; z-index: 1001" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/>
 		<MkPageHeader v-else v-model:tab="src" style="position: relative; z-index: 1001" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/>
 	</template>
 	<MkSpacer :contentMax="800">
@@ -59,7 +60,7 @@ import { unisonReload } from '@/scripts/unison-reload';
 let showEl = $ref(false);
 const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
 
-if (!isFriendly.value) provide('shouldOmitHeaderTitle', true);
+if (!isFriendly.value && !defaultStore.state.mobileTimelineHeaderChange) provide('shouldOmitHeaderTitle', true);
 
 const MOBILE_THRESHOLD = 500;
 

packages/frontend/src/store.ts

@@ -459,6 +459,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: true,
 	},
+	mobileTimelineHeaderChange: {
+		where: 'device',
+		default: false,
+	},
 	// #endregion
 }));