wip

packages/frontend/src/components/MkTimeline.vue

@@ -1,5 +1,15 @@
 <template>
-<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination"/>
+<div>
+	<div v-if="queueSize > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="reload()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
+	<div v-if="(((src === 'local' || src === 'social') && !isLocalTimelineAvailable) || (src === 'global' && !isGlobalTimelineAvailable))" :class="$style.disabled">
+		<p :class="$style.disabledTitle">
+			<i class="ti ti-circle-minus"></i>
+			{{ i18n.ts._disabledTimeline.title }}
+		</p>
+		<p :class="$style.disabledDescription">{{ i18n.ts._disabledTimeline.description }}</p>
+	</div>
+	<MkNotes v-else ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination"/>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -9,6 +19,8 @@ import { useStream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
 
 const props = defineProps<{
 	src: string;
@@ -21,14 +33,22 @@ const props = defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'note'): void;
+	(ev: 'reload'): void;
 }>();
 
+const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
+const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));
+
 provide('inChannel', computed(() => props.src === 'channel'));
 
-const tlComponent: InstanceType<typeof MkNotes> = $ref();
+let tlComponent: InstanceType<typeof MkNotes> | undefined = $ref();
+
+const queueSize = computed(() => {
+	return tlComponent?.pagingComponent?.queueSize ?? 0;
+});
 
 const prepend = note => {
-	tlComponent.pagingComponent?.prepend(note);
+	tlComponent?.pagingComponent?.prepend(note);
 
 	emit('note');
 
@@ -38,11 +58,11 @@ const prepend = note => {
 };
 
 const onUserAdded = () => {
-	tlComponent.pagingComponent?.reload();
+	tlComponent?.pagingComponent?.reload();
 };
 
 const onUserRemoved = () => {
-	tlComponent.pagingComponent?.reload();
+	tlComponent?.pagingComponent?.reload();
 };
 
 let endpoint;
@@ -164,12 +184,46 @@ const timetravel = (date?: Date) => {
 };
 */
 
+const reload = () => {
+	tlComponent?.pagingComponent?.reload();
+	emit('reload');
+};
+
 defineExpose({
-	reload: () => {
+	reload,
-		tlComponent.pagingComponent?.reload();
+	queueSize,
-	},
-	queueSize: computed(() => {
-		return tlComponent.pagingComponent?.queueSize ?? 0;
-	}),
 });
 </script>
+
+<style lang="scss" module>
+.new {
+	position: sticky;
+	top: calc(var(--stickyTop, 0px) + 16px);
+	z-index: 1000;
+	width: 100%;
+	margin: calc(-0.675em - 8px) 0;
+
+	&:first-child {
+		margin-top: calc(-0.675em - 8px - var(--margin));
+	}
+}
+
+.newButton {
+	display: block;
+	margin: var(--margin) auto 0 auto;
+	padding: 8px 16px;
+	border-radius: 32px;
+}
+
+.disabled {
+	text-align: center;
+}
+
+.disabledTitle {
+	margin: 16px;
+}
+
+.disabledDescription {
+	font-size: 90%;
+}
+</style>

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -35,9 +35,7 @@
 	</div>
 	<div v-if="instance.policies.ltlAvailable" :class="[$style.tl, $style.panel]">
 		<div :class="$style.tlHeader">{{ i18n.ts.letsLookAtTimeline }}</div>
-		<div :class="$style.tlBody">
+		<MkTimeline src="local" :class="$style.tlBody"/>
-			<MkTimeline src="local"/>
-		</div>
 	</div>
 	<div :class="$style.panel">
 		<XActiveUsersChart/>

packages/frontend/src/pages/antenna-timeline.vue

@@ -3,15 +3,13 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<div ref="rootEl" v-hotkey.global="keymap">
-			<div v-if="tlEl?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
+			<MkTimeline
-			<div :class="$style.tl">
+				ref="tlEl" :key="antennaId"
-				<MkTimeline
+				src="antenna"
-					ref="tlEl" :key="antennaId"
+				:antenna="antennaId"
-					src="antenna"
+				:sound="true"
-					:antenna="antennaId"
+				:class="$style.tl"
-					:sound="true"
+			/>
-				/>
-			</div>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -84,25 +82,6 @@ definePageMetadata(computed(() => antenna ? {
 </script>
 
 <style lang="scss" module>
-.new {
-	position: sticky;
-	top: calc(var(--stickyTop, 0px) + 16px);
-	z-index: 1000;
-	width: 100%;
-	margin: calc(-0.675em - 8px) 0;
-
-	&:first-child {
-		margin-top: calc(-0.675em - 8px - var(--margin));
-	}
-}
-
-.newButton {
-	display: block;
-	margin: var(--margin) auto 0 auto;
-	padding: 8px 16px;
-	border-radius: 32px;
-}
-
 .tl {
 	background: var(--bg);
 	border-radius: var(--radius);

packages/frontend/src/pages/channel.vue

@@ -32,7 +32,7 @@
 			<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
 			<MkPostForm v-if="$i && defaultStore.reactiveState.showFixedPostFormInChannel.value" :channel="channel" class="post-form _panel" fixed :autofocus="deviceKind === 'desktop'"/>
 
-			<MkTimeline :key="channelId" src="channel" :channel="channelId" @before="before" @after="after"/>
+			<MkTimeline :key="channelId" src="channel" :channel="channelId" />
 		</div>
 		<div v-else-if="tab === 'featured'">
 			<MkNotes :pagination="featuredPagination"/>

packages/frontend/src/pages/timeline.vue

@@ -6,15 +6,13 @@
 			<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
 			<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
 
-			<div v-if="tlComponent?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
+			<MkTimeline
-			<div :class="$style.tl">
+				ref="tlComponent"
-				<MkTimeline
+				:key="src"
-					ref="tlComponent"
+				:src="src"
-					:key="src"
+				:sound="true"
-					:src="src"
+				:class="$style.tl"
-					:sound="true"
+			/>
-				/>
-			</div>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -168,25 +166,6 @@ definePageMetadata(computed(() => ({
 </script>
 
 <style lang="scss" module>
-.new {
-	position: sticky;
-	top: calc(var(--stickyTop, 0px) + 16px);
-	z-index: 1000;
-	width: 100%;
-	margin: calc(-0.675em - 8px) 0;
-
-	&:first-child {
-		margin-top: calc(-0.675em - 8px - var(--margin));
-	}
-}
-
-.newButton {
-	display: block;
-	margin: var(--margin) auto 0 auto;
-	padding: 8px 16px;
-	border-radius: 32px;
-}
-
 .postForm {
 	border-radius: var(--radius);
 }

packages/frontend/src/pages/user-list-timeline.vue

@@ -3,15 +3,13 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<div ref="rootEl">
-			<div v-if="tlEl?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
+			<MkTimeline
-			<div :class="$style.tl">
+				ref="tlEl" :key="listId"
-				<MkTimeline
+				src="list"
-					ref="tlEl" :key="listId"
+				:list="listId"
-					src="list"
+				:sound="true"
-					:list="listId"
+				:class="$style.tl"
-					:sound="true"
+			/>
-				/>
-			</div>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -77,24 +75,6 @@ definePageMetadata(computed(() => list ? {
 </script>
 
 <style lang="scss" module>
-.new {
-	position: sticky;
-	top: calc(var(--stickyTop, 0px) + 16px);
-	z-index: 1000;
-	width: 100%;
-	margin: calc(-0.675em - 8px) 0;
-
-	&:first-child {
-		margin-top: calc(-0.675em - 8px - var(--margin));
-	}
-}
-
-.newButton {
-	display: block;
-	margin: var(--margin) auto 0 auto;
-	padding: 8px 16px;
-	border-radius: 32px;
-}
 
 .tl {
 	background: var(--bg);

packages/frontend/src/ui/deck/tl-column.vue

@@ -8,14 +8,7 @@
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<div v-if="(((column.tl === 'local' || column.tl === 'social') && !isLocalTimelineAvailable) || (column.tl === 'global' && !isGlobalTimelineAvailable))" :class="$style.disabled">
+	<MkTimeline v-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl"/>
-		<p :class="$style.disabledTitle">
-			<i class="ti ti-circle-minus"></i>
-			{{ i18n.ts._disabledTimeline.title }}
-		</p>
-		<p :class="$style.disabledDescription">{{ i18n.ts._disabledTimeline.description }}</p>
-	</div>
-	<MkTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl"/>
 </XColumn>
 </template>
 
@@ -25,27 +18,16 @@ import XColumn from './column.vue';
 import { removeColumn, updateColumn, Column } from './deck-store';
 import MkTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os';
-import { $i } from '@/account';
 import { i18n } from '@/i18n';
-import { instance } from '@/instance';
 
 const props = defineProps<{
 	column: Column;
 	isStacked: boolean;
 }>();
 
-let disabled = $ref(false);
-
-const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
-const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));
-
 onMounted(() => {
 	if (props.column.tl == null) {
 		setType();
-	} else if ($i) {
-		disabled = (
-			(!((instance.policies.ltlAvailable) || ($i.policies.ltlAvailable)) && ['local', 'social'].includes(props.column.tl)) ||
-			(!((instance.policies.gtlAvailable) || ($i.policies.gtlAvailable)) && ['global'].includes(props.column.tl)));
 	}
 });
 
@@ -79,17 +61,3 @@ const menu = [{
 	action: setType,
 }];
 </script>
-
-<style lang="scss" module>
-.disabled {
-	text-align: center;
-}
-
-.disabledTitle {
-	margin: 16px;
-}
-
-.disabledDescription {
-	font-size: 90%;
-}
-</style>

packages/frontend/src/widgets/WidgetTimeline.vue

@@ -15,33 +15,20 @@
 		</button>
 	</template>
 
-	<div v-if="(((widgetProps.src === 'local' || widgetProps.src === 'social') && !isLocalTimelineAvailable) || (widgetProps.src === 'global' && !isGlobalTimelineAvailable))" :class="$style.disabled">
+	<MkTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
-		<p :class="$style.disabledTitle">
-			<i class="ti ti-minus"></i>
-			{{ i18n.ts._disabledTimeline.title }}
-		</p>
-		<p :class="$style.disabledDescription">{{ i18n.ts._disabledTimeline.description }}</p>
-	</div>
-	<div v-else>
-		<MkTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
-	</div>
 </MkContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import MkContainer from '@/components/MkContainer.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { instance } from '@/instance';
 
 const name = 'timeline';
-const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
-const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));
 
 const widgetPropsDef = {
 	showHeader: {
@@ -136,17 +123,3 @@ defineExpose<WidgetComponentExpose>({
 	id: props.widget ? props.widget.id : null,
 });
 </script>
-
-<style lang="scss" module>
-.disabled {
-	text-align: center;
-}
-
-.disabledTitle {
-	margin: 16px;
-}
-
-.disabledDescription {
-	font-size: 90%;
-}
-</style>