wip

packages/frontend/src/components/MkRange.vue

@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<slot name="label"></slot>
 	</div>
 	<div v-adaptive-border class="body">
+		<slot name="prefix"></slot>
 		<div ref="containerEl" class="container">
 			<div class="track">
 				<div class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
@@ -25,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				@touchstart="onMousedown"
 			></div>
 		</div>
+		<slot name="suffix"></slot>
 	</div>
 	<div class="caption">
 		<slot name="caption"></slot>
@@ -224,12 +226,17 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 	$thumbWidth: 20px;
 
 	> .body {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
 		padding: 7px 12px;
 		background: var(--MI_THEME-panel);
 		border: solid 1px var(--MI_THEME-panel);
 		border-radius: 6px;
 
 		> .container {
+			flex: 1;
 			position: relative;
 			height: $thumbHeight;
 

packages/frontend/src/components/MkTimeline.vue

@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</component>
 		<button v-show="paginator.canFetchMore.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchOlder : null" :disabled="paginator.moreFetching.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
 			<div v-if="!paginator.moreFetching.value">{{ i18n.ts.loadMore }}</div>
-			<MkLoading v-else/>
+			<MkLoading v-else :inline="true"/>
 		</button>
 	</div>
 </MkPullToRefresh>
@@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, watch, onUnmounted, provide, useTemplateRef, TransitionGroup, onMounted, shallowRef, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { useInterval } from '@@/js/use-interval.js';
-import { isHeadVisible, scrollToTop } from '@@/js/scroll.js';
+import { getScrollContainer, scrollToTop } from '@@/js/scroll.js';
 import type { BasicTimelineType } from '@/timelines.js';
 import type { PagingCtx } from '@/use/use-pagination.js';
 import { usePagination } from '@/use/use-pagination.js';
@@ -91,14 +91,39 @@ const props = withDefaults(defineProps<{
 	onlyFiles: false,
 });
 
-const emit = defineEmits<{
-}>();
-
 provide('inTimeline', true);
 provide('tl_withSensitive', computed(() => props.withSensitive));
 provide('inChannel', computed(() => props.src === 'channel'));
 
+function isTop() {
+	if (scrollContainer == null) return false;
+	if (rootEl.value == null) return false;
+	const scrollTop = scrollContainer.scrollTop;
+	const tlTop = rootEl.value.offsetTop - scrollContainer.offsetTop;
+	return scrollTop <= tlTop;
+}
+
+let scrollContainer: HTMLElement | null = null;
+
+function onScrollContainerScroll() {
+	if (isTop()) {
+		paginator.releaseQueue();
+	}
+}
+
 const rootEl = useTemplateRef('rootEl');
+watch(rootEl, (el) => {
+	if (el && scrollContainer == null) {
+		scrollContainer = getScrollContainer(el)!;
+		scrollContainer.addEventListener('scroll', onScrollContainerScroll, { passive: true }); // ほんとはscrollendにしたいけどiosが非対応
+	}
+}, { immediate: true });
+
+onUnmounted(() => {
+	if (scrollContainer) {
+		scrollContainer.removeEventListener('scroll', onScrollContainerScroll);
+	}
+});
 
 type TimelineQueryType = {
 	antennaId?: string,
@@ -121,10 +146,10 @@ const POLLING_INTERVAL =
 	MIN_POLLING_INTERVAL;
 
 if (!store.s.realtimeMode) {
+	// TODO: 先頭のノートの作成日時が1日以上前であれば流速が遅いTLと見做してインターバルを通常より延ばす
 	useInterval(async () => {
-		const isTop = rootEl.value == null ? false : isHeadVisible(rootEl.value, 16);
 		paginator.fetchNewer({
-			toQueue: !isTop,
+			toQueue: !isTop(),
 		});
 	}, POLLING_INTERVAL, {
 		immediate: false,
@@ -133,9 +158,8 @@ if (!store.s.realtimeMode) {
 }
 
 globalEvents.on('notePosted', (note: Misskey.entities.Note) => {
-	const isTop = rootEl.value == null ? false : isHeadVisible(rootEl.value, 16);
 	paginator.fetchNewer({
-		toQueue: !isTop,
+		toQueue: !isTop(),
 	});
 });
 
@@ -151,8 +175,7 @@ function prepend(note: Misskey.entities.Note) {
 		note._shouldInsertAd_ = true;
 	}
 
-	const isTop = isHeadVisible(rootEl.value, 16);
-	if (isTop) {
+	if (isTop()) {
 		paginator.prepend(note);
 	} else {
 		paginator.enqueue(note);
@@ -456,7 +479,7 @@ defineExpose({
 	margin: auto;
 	background: var(--MI_THEME-accent);
 	color: var(--MI_THEME-fgOnAccent);
-	font-size: 85%;
+	font-size: 90%;
 
 	&:hover {
 		background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));

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

@@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 						<SearchMarker :keywords="['realtimemode']">
 							<MkSwitch v-model="realtimeMode">
-								<template #label><SearchLabel>{{ i18n.ts.realtimeMode }}</SearchLabel></template>
+								<template #label><i class="ti ti-bolt"></i> <SearchLabel>{{ i18n.ts.realtimeMode }}</SearchLabel></template>
 								<template #caption><SearchKeyword>{{ i18n.ts._settings.realtimeMode_description }}</SearchKeyword></template>
 							</MkSwitch>
 						</SearchMarker>
@@ -51,9 +51,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkDisableSection :disabled="realtimeMode">
 							<SearchMarker :keywords="['polling', 'interval']">
 								<MkPreferenceContainer k="pollingInterval">
-									<MkRange v-model="pollingInterval" :min="1" :max="3" :step="1" easing :textConverter="(v) => v === 1 ? i18n.ts.low : v === 2 ? i18n.ts.middle : v === 3 ? i18n.ts.high : ''">
+									<MkRange v-model="pollingInterval" :min="1" :max="3" :step="1" easing :showTicks="true" :textConverter="(v) => v === 1 ? i18n.ts.low : v === 2 ? i18n.ts.middle : v === 3 ? i18n.ts.high : ''">
 										<template #label><SearchLabel>{{ i18n.ts._settings.contentsUpdateFrequency }}</SearchLabel></template>
 										<template #caption><SearchKeyword>{{ i18n.ts._settings.contentsUpdateFrequency_description }}</SearchKeyword><br><SearchKeyword>{{ i18n.ts._settings.contentsUpdateFrequency_description2 }}</SearchKeyword></template>
+										<template #prefix><i class="ti ti-player-play"></i></template>
+										<template #suffix><i class="ti ti-player-track-next"></i></template>
 									</MkRange>
 								</MkPreferenceContainer>
 							</SearchMarker>

packages/frontend/src/router.definition.ts

@@ -9,6 +9,7 @@ import type { RouteDef } from '@/lib/nirax.js';
 import { $i, iAmModerator } from '@/i.js';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
+import PageTimeline from '@/pages/timeline.vue';
 
 export const page = (loader: AsyncComponentLoader) => defineAsyncComponent({
 	loader: loader,
@@ -21,6 +22,13 @@ function chatPage(...args: Parameters<typeof page>) {
 }
 
 export const ROUTE_DEF = [{
+	name: 'index',
+	path: '/',
+	component: $i ? PageTimeline : page(() => import('@/pages/welcome.vue')),
+}, {
+	path: '/timeline',
+	component: PageTimeline,
+}, {
 	path: '/@:username/pages/:pageName(*)',
 	component: page(() => import('@/pages/page.vue')),
 }, {
@@ -579,13 +587,6 @@ export const ROUTE_DEF = [{
 	path: '/reversi/g/:gameId',
 	component: page(() => import('@/pages/reversi/game.vue')),
 	loginRequired: false,
-}, {
-	path: '/timeline',
-	component: page(() => import('@/pages/timeline.vue')),
-}, {
-	name: 'index',
-	path: '/',
-	component: $i ? page(() => import('@/pages/timeline.vue')) : page(() => import('@/pages/welcome.vue')),
 }, {
 	// テスト用リダイレクト設定。ログイン中ユーザのプロフィールにリダイレクトする
 	path: '/redirect-test',

packages/frontend/src/style.scss

@@ -309,7 +309,6 @@ rt {
 	max-width: 100%;
 
 	&:disabled {
-		opacity: 0.5;
 		cursor: default;
 	}
 }

packages/frontend/src/use/use-pagination.ts

@@ -54,7 +54,7 @@ export function usePagination<T extends MisskeyEntity>(props: {
 	// パラメータに何らかの変更があった際、再読込したい（チャンネル等のIDが変わったなど）
 	watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true });
 
-	function getNewestId() {
+	function getNewestId(): string | null | undefined {
 		// 様々な要因により並び順は保証されないのでソートが必要
 		if (aheadQueue.length > 0) {
 			return aheadQueue.map(x => x.id).sort().at(-1);
@@ -62,7 +62,7 @@ export function usePagination<T extends MisskeyEntity>(props: {
 		return items.value.map(x => x.id).sort().at(-1);
 	}
 
-	function getOldestId() {
+	function getOldestId(): string | null | undefined {
 		// 様々な要因により並び順は保証されないのでソートが必要
 		return items.value.map(x => x.id).sort().at(0);
 	}

packages/misskey-js/etc/misskey-js.api.md

@@ -1956,6 +1956,8 @@ declare namespace entities {
         NotesSearchByTagResponse,
         NotesShowRequest,
         NotesShowResponse,
+        NotesShowPartialBulkRequest,
+        NotesShowPartialBulkResponse,
         NotesStateRequest,
         NotesStateResponse,
         NotesThreadMutingCreateRequest,
@@ -3050,6 +3052,12 @@ type NotesSearchRequest = operations['notes___search']['requestBody']['content']
 // @public (undocumented)
 type NotesSearchResponse = operations['notes___search']['responses']['200']['content']['application/json'];
 
+// @public (undocumented)
+type NotesShowPartialBulkRequest = operations['notes___show-partial-bulk']['requestBody']['content']['application/json'];
+
+// @public (undocumented)
+type NotesShowPartialBulkResponse = operations['notes___show-partial-bulk']['responses']['200']['content']['application/json'];
+
 // @public (undocumented)
 type NotesShowRequest = operations['notes___show']['requestBody']['content']['application/json'];
 

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

@@ -3758,6 +3758,17 @@ declare module '../api.js' {
       credential?: string | null,
     ): Promise<SwitchCaseResponseType<E, P>>;
 
+    /**
+     * No description provided.
+     * 
+     * **Credential required**: *No*
+     */
+    request<E extends 'notes/show-partial-bulk', P extends Endpoints[E]['req']>(
+      endpoint: E,
+      params: P,
+      credential?: string | null,
+    ): Promise<SwitchCaseResponseType<E, P>>;
+
     /**
      * No description provided.
      * 

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

@@ -512,6 +512,8 @@ import type {
 	NotesSearchByTagResponse,
 	NotesShowRequest,
 	NotesShowResponse,
+	NotesShowPartialBulkRequest,
+	NotesShowPartialBulkResponse,
 	NotesStateRequest,
 	NotesStateResponse,
 	NotesThreadMutingCreateRequest,
@@ -971,6 +973,7 @@ export type Endpoints = {
 	'notes/search': { req: NotesSearchRequest; res: NotesSearchResponse };
 	'notes/search-by-tag': { req: NotesSearchByTagRequest; res: NotesSearchByTagResponse };
 	'notes/show': { req: NotesShowRequest; res: NotesShowResponse };
+	'notes/show-partial-bulk': { req: NotesShowPartialBulkRequest; res: NotesShowPartialBulkResponse };
 	'notes/state': { req: NotesStateRequest; res: NotesStateResponse };
 	'notes/thread-muting/create': { req: NotesThreadMutingCreateRequest; res: EmptyResponse };
 	'notes/thread-muting/delete': { req: NotesThreadMutingDeleteRequest; res: EmptyResponse };

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

@@ -515,6 +515,8 @@ export type NotesSearchByTagRequest = operations['notes___search-by-tag']['reque
 export type NotesSearchByTagResponse = operations['notes___search-by-tag']['responses']['200']['content']['application/json'];
 export type NotesShowRequest = operations['notes___show']['requestBody']['content']['application/json'];
 export type NotesShowResponse = operations['notes___show']['responses']['200']['content']['application/json'];
+export type NotesShowPartialBulkRequest = operations['notes___show-partial-bulk']['requestBody']['content']['application/json'];
+export type NotesShowPartialBulkResponse = operations['notes___show-partial-bulk']['responses']['200']['content']['application/json'];
 export type NotesStateRequest = operations['notes___state']['requestBody']['content']['application/json'];
 export type NotesStateResponse = operations['notes___state']['responses']['200']['content']['application/json'];
 export type NotesThreadMutingCreateRequest = operations['notes___thread-muting___create']['requestBody']['content']['application/json'];

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

@@ -3247,6 +3247,15 @@ export type paths = {
      */
     post: operations['notes___show'];
   };
+  '/notes/show-partial-bulk': {
+    /**
+     * notes/show-partial-bulk
+     * @description No description provided.
+     *
+     * **Credential required**: *No*
+     */
+    post: operations['notes___show-partial-bulk'];
+  };
   '/notes/state': {
     /**
      * notes/state
@@ -25736,6 +25745,59 @@ export type operations = {
       };
     };
   };
+  /**
+   * notes/show-partial-bulk
+   * @description No description provided.
+   *
+   * **Credential required**: *No*
+   */
+  'notes___show-partial-bulk': {
+    requestBody: {
+      content: {
+        'application/json': {
+          noteIds: string[];
+        };
+      };
+    };
+    responses: {
+      /** @description OK (with results) */
+      200: {
+        content: {
+          'application/json': Record<string, never>[];
+        };
+      };
+      /** @description Client error */
+      400: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Authentication error */
+      401: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Forbidden error */
+      403: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description I'm Ai */
+      418: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Internal server error */
+      500: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+    };
+  };
   /**
    * notes/state
    * @description No description provided.