add boost / files filters to antenna timeline - #228

This commit is contained in:
dakkar 2024-03-03 14:03:21 +00:00
parent 84abe50f84
commit 3bb8a91124
2 changed files with 48 additions and 2 deletions

View file

@ -11,10 +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 v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div :class="$style.tl"> <div :class="$style.tl">
<MkTimeline <MkTimeline
ref="tlEl" :key="listId" ref="tlEl" :key="listId + withRenotes + onlyFiles"
src="list" src="list"
:list="listId" :list="listId"
:sound="true" :sound="true"
:withRenotes="withRenotes"
:onlyFiles="onlyFiles"
@queue="queueUpdated" @queue="queueUpdated"
/> />
</div> </div>
@ -32,6 +34,9 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { useRouter } from '@/router/supplier.js'; import { useRouter } from '@/router/supplier.js';
import { defaultStore } from '@/store.js';
import { deepMerge } from '@/scripts/merge.js';
import * as os from '@/os.js';
const router = useRouter(); const router = useRouter();
@ -43,6 +48,21 @@ const list = ref<Misskey.entities.UserList | null>(null);
const queue = ref(0); const queue = ref(0);
const tlEl = shallowRef<InstanceType<typeof MkTimeline>>(); const tlEl = shallowRef<InstanceType<typeof MkTimeline>>();
const rootEl = shallowRef<HTMLElement>(); const rootEl = shallowRef<HTMLElement>();
const withRenotes = computed<boolean>({
get: () => defaultStore.reactiveState.tl.value.filter.withRenotes,
set: (x) => saveTlFilter('withRenotes', x),
});
const onlyFiles = computed<boolean>({
get: () => defaultStore.reactiveState.tl.value.filter.onlyFiles,
set: (x) => saveTlFilter('onlyFiles', x),
});
function saveTlFilter(key: keyof typeof defaultStore.state.tl.filter, newValue: boolean) {
if (key !== 'withReplies' || $i) {
const out = deepMerge({ filter: { [key]: newValue } }, defaultStore.state.tl);
defaultStore.set('tl', out);
}
}
watch(() => props.listId, async () => { watch(() => props.listId, async () => {
list.value = await misskeyApi('users/lists/show', { list.value = await misskeyApi('users/lists/show', {
@ -63,6 +83,20 @@ function settings() {
} }
const headerActions = computed(() => list.value ? [{ const headerActions = computed(() => list.value ? [{
icon: 'ph-dots-three ph-bold ph-lg',
text: i18n.ts.options,
handler: (ev) => {
os.popupMenu([{
type: 'switch',
text: i18n.ts.showRenotes,
ref: withRenotes,
}, {
type: 'switch',
text: i18n.ts.fileAttachedOnly,
ref: onlyFiles,
}], ev.currentTarget ?? ev.target);
},
}, {
icon: 'ph-gear ph-bold ph-lg', icon: 'ph-gear ph-bold ph-lg',
text: i18n.ts.settings, text: i18n.ts.settings,
handler: settings, handler: settings,

View file

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-list ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span> <i class="ph-list ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template> </template>
<MkTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" :withRenotes="withRenotes"/> <MkTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" :key="column.listId + column.withRenotes + column.onlyFiles" :withRenotes="withRenotes" :onlyFiles="onlyFiles"/>
</XColumn> </XColumn>
</template> </template>
@ -29,6 +29,7 @@ const props = defineProps<{
const timeline = shallowRef<InstanceType<typeof MkTimeline>>(); const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const withRenotes = ref(props.column.withRenotes ?? true); const withRenotes = ref(props.column.withRenotes ?? true);
const onlyFiles = ref(props.column.onlyFiles ?? false);
if (props.column.listId == null) { if (props.column.listId == null) {
setList(); setList();
@ -40,6 +41,12 @@ watch(withRenotes, v => {
}); });
}); });
watch(onlyFiles, v => {
updateColumn(props.column.id, {
onlyFiles: v,
});
});
async function setList() { async function setList() {
const lists = await misskeyApi('users/lists/list'); const lists = await misskeyApi('users/lists/list');
const { canceled, result: list } = await os.select({ const { canceled, result: list } = await os.select({
@ -75,5 +82,10 @@ const menu = [
text: i18n.ts.showRenotes, text: i18n.ts.showRenotes,
ref: withRenotes, ref: withRenotes,
}, },
{
type: 'switch',
text: i18n.ts.fileAttachedOnly,
ref: onlyFiles,
},
]; ];
</script> </script>