リストTLでファイル付きのみなどを選択できるように

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

@@ -11,9 +11,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 			<div :class="$style.tl">
 				<MkTimeline
-					ref="tlEl" :key="listId"
+					ref="tlEl" :key="listId + withRenotes + withReplies + onlyFiles"
 					src="list"
 					:list="listId"
+					:withRenotes="withRenotes"
+					:withReplies="withReplies"
+					:onlyFiles="onlyFiles"
 					:sound="true"
 					@queue="queueUpdated"
 				/>
@@ -32,6 +35,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/router/supplier.js';
+import * as os from '@/os.js';
 
 const router = useRouter();
 
@@ -44,11 +48,20 @@ const queue = ref(0);
 const tlEl = shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = shallowRef<HTMLElement>();
 
-watch(() => props.listId, async () => {
+const withRenotes = ref(true);
+const withReplies = ref(false);
+const onlyFiles = ref(false);
+
+watch(withRenotes, fetch, { immediate: true });
+watch(withReplies, fetch, { immediate: true });
+watch(onlyFiles, fetch, { immediate: true });
+watch(() => props.listId, fetch, { immediate: true });
+
+async function fetch() {
 	list.value = await misskeyApi('users/lists/show', {
 		listId: props.listId,
 	});
-}, { immediate: true });
+}
 
 function queueUpdated(q) {
 	queue.value = q;
@@ -62,11 +75,40 @@ function settings() {
 	router.push(`/my/lists/${props.listId}`);
 }
 
-const headerActions = computed(() => list.value ? [{
-	icon: 'ti ti-settings',
-	text: i18n.ts.settings,
-	handler: settings,
-}] : []);
+const headerActions = computed(() => list.value ? [
+	{
+		icon: 'ti ti-refresh',
+		text: i18n.ts.reload,
+		handler: (ev: Event) => {
+			tlEl.value?.reloadTimeline();
+		},
+	}, {
+		icon: 'ti ti-dots',
+		text: i18n.ts.options,
+		handler: (ev) => {
+			os.popupMenu([
+				{
+					icon: 'ti ti-settings',
+					text: i18n.ts.editList,
+					action: settings,
+				},
+				{
+					type: 'switch',
+					text: i18n.ts.showRenotes,
+					ref: withRenotes,
+				}, {
+					type: 'switch',
+					text: i18n.ts.showRepliesToOthersInTimeline,
+					ref: withReplies,
+					disabled: onlyFiles,
+				}, {
+					type: 'switch',
+					text: i18n.ts.fileAttachedOnly,
+					ref: onlyFiles,
+					disabled: withReplies,
+				}], ev.currentTarget ?? ev.target);
+		},
+	}] : []);
 
 const headerTabs = computed(() => []);