enhance(frontend): タイムラインフィルターの設定を保持+センシティブなノートを隠せるように (#12848)
* (enhance) タイムラインフィルターの状態を記憶するように * fix * (enhance) センシティブな投稿をミュート形式で表示する(TLのみ) * fix * Update Changelog * Fix changelog * Lintエラーを潰す * Update locales/ja-JP.yml * hideSensitive -> withSensitive * Update CHANGELOG.md * Update ja-JP.yml --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
parent
fb309f3d4f
commit
0580ba1fb5
|
@ -38,6 +38,9 @@
|
||||||
- Enhance: 絵文字ピッカー・オートコンプリートで、完全一致した絵文字を優先的に表示するように
|
- Enhance: 絵文字ピッカー・オートコンプリートで、完全一致した絵文字を優先的に表示するように
|
||||||
- Enhance: Playの説明欄にMFMを使えるように
|
- Enhance: Playの説明欄にMFMを使えるように
|
||||||
- Enhance: チャンネルノートの場合は詳細ページからその前後のノートを見れるように
|
- Enhance: チャンネルノートの場合は詳細ページからその前後のノートを見れるように
|
||||||
|
- Enhance: タイムラインフィルターの設定をすべて保持できるように
|
||||||
|
- 今までの「TLに他の人への返信を含める」設定は一旦リセットされます
|
||||||
|
- Enhance: タイムラインフィルターに「センシティブなファイルを含むノートを表示」を追加
|
||||||
- Enhance: ノート作成画面のファイル添付メニューから直接ファイルを削除できるように
|
- Enhance: ノート作成画面のファイル添付メニューから直接ファイルを削除できるように
|
||||||
- Enhance: MFMの属性でオートコンプリートが使用できるように #12735
|
- Enhance: MFMの属性でオートコンプリートが使用できるように #12735
|
||||||
- Fix: ネイティブモードの絵文字がモノクロにならないように
|
- Fix: ネイティブモードの絵文字がモノクロにならないように
|
||||||
|
|
|
@ -4824,6 +4824,8 @@ export interface Locale extends ILocale {
|
||||||
* タイトルへ
|
* タイトルへ
|
||||||
*/
|
*/
|
||||||
"backToTitle": string;
|
"backToTitle": string;
|
||||||
|
"withSensitive": string;
|
||||||
|
"userSaysSomethingSensitive": string;
|
||||||
/**
|
/**
|
||||||
* スワイプしてタブを切り替える
|
* スワイプしてタブを切り替える
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1202,6 +1202,8 @@ replaying: "リプレイ中"
|
||||||
ranking: "ランキング"
|
ranking: "ランキング"
|
||||||
lastNDays: "直近{n}日"
|
lastNDays: "直近{n}日"
|
||||||
backToTitle: "タイトルへ"
|
backToTitle: "タイトルへ"
|
||||||
|
withSensitive: "センシティブなファイルを含むノートを表示"
|
||||||
|
userSaysSomethingSensitive: "{name}のセンシティブなファイルを含む投稿"
|
||||||
enableHorizontalSwipe: "スワイプしてタブを切り替える"
|
enableHorizontalSwipe: "スワイプしてタブを切り替える"
|
||||||
|
|
||||||
_bubbleGame:
|
_bubbleGame:
|
||||||
|
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="!hardMuted && !muted"
|
v-if="!hardMuted && muted === false"
|
||||||
v-show="!isDeleted"
|
v-show="!isDeleted"
|
||||||
ref="el"
|
ref="el"
|
||||||
v-hotkey="keymap"
|
v-hotkey="keymap"
|
||||||
|
@ -134,7 +134,14 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="!hardMuted" :class="$style.muted" @click="muted = false">
|
<div v-else-if="!hardMuted" :class="$style.muted" @click="muted = false">
|
||||||
<I18n :src="i18n.ts.userSaysSomething" tag="small">
|
<I18n v-if="muted === 'sensitiveMute'" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
|
||||||
|
<template #name>
|
||||||
|
<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
|
||||||
|
<MkUserName :user="appearNote.user"/>
|
||||||
|
</MkA>
|
||||||
|
</template>
|
||||||
|
</I18n>
|
||||||
|
<I18n v-else :src="i18n.ts.userSaysSomething" tag="small">
|
||||||
<template #name>
|
<template #name>
|
||||||
<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
|
<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
|
||||||
<MkUserName :user="appearNote.user"/>
|
<MkUserName :user="appearNote.user"/>
|
||||||
|
@ -203,6 +210,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'removeReaction', emoji: string): void;
|
(ev: 'removeReaction', emoji: string): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const inTimeline = inject<boolean>('inTimeline', false);
|
||||||
const inChannel = inject('inChannel', null);
|
const inChannel = inject('inChannel', null);
|
||||||
const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
|
const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
|
||||||
|
|
||||||
|
@ -250,19 +258,27 @@ const isLong = shouldCollapsed(appearNote.value, urls.value ?? []);
|
||||||
const collapsed = ref(appearNote.value.cw == null && isLong);
|
const collapsed = ref(appearNote.value.cw == null && isLong);
|
||||||
const isDeleted = ref(false);
|
const isDeleted = ref(false);
|
||||||
const muted = ref(checkMute(appearNote.value, $i?.mutedWords));
|
const muted = ref(checkMute(appearNote.value, $i?.mutedWords));
|
||||||
const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hardMutedWords));
|
const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hardMutedWords, true));
|
||||||
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
|
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
|
||||||
const translating = ref(false);
|
const translating = ref(false);
|
||||||
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
|
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
|
||||||
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i.id));
|
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i.id));
|
||||||
const renoteCollapsed = ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || (appearNote.value.myReaction != null)));
|
const renoteCollapsed = ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || (appearNote.value.myReaction != null)));
|
||||||
|
|
||||||
function checkMute(note: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null): boolean {
|
/* Overload FunctionにLintが対応していないのでコメントアウト
|
||||||
|
function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: true): boolean;
|
||||||
|
function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: false): boolean | 'sensitiveMute';
|
||||||
|
*/
|
||||||
|
function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly = false): boolean | 'sensitiveMute' {
|
||||||
if (mutedWords == null) return false;
|
if (mutedWords == null) return false;
|
||||||
|
|
||||||
if (checkWordMute(note, $i, mutedWords)) return true;
|
if (checkWordMute(noteToCheck, $i, mutedWords)) return true;
|
||||||
if (note.reply && checkWordMute(note.reply, $i, mutedWords)) return true;
|
if (noteToCheck.reply && checkWordMute(noteToCheck.reply, $i, mutedWords)) return true;
|
||||||
if (note.renote && checkWordMute(note.renote, $i, mutedWords)) return true;
|
if (noteToCheck.renote && checkWordMute(noteToCheck.renote, $i, mutedWords)) return true;
|
||||||
|
|
||||||
|
if (checkOnly) return false;
|
||||||
|
|
||||||
|
if (inTimeline && !defaultStore.state.tl.filter.withSensitive && noteToCheck.files?.some((v) => v.isSensitive)) return 'sensitiveMute';
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -49,6 +49,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'queue', count: number): void;
|
(ev: 'queue', count: number): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
provide('inTimeline', true);
|
||||||
provide('inChannel', computed(() => props.src === 'channel'));
|
provide('inChannel', computed(() => props.src === 'channel'));
|
||||||
|
|
||||||
type TimelineQueryType = {
|
type TimelineQueryType = {
|
||||||
|
|
|
@ -66,19 +66,53 @@ const rootEl = shallowRef<HTMLElement>();
|
||||||
|
|
||||||
const queue = ref(0);
|
const queue = ref(0);
|
||||||
const srcWhenNotSignin = ref(isLocalTimelineAvailable ? 'local' : 'global');
|
const srcWhenNotSignin = ref(isLocalTimelineAvailable ? 'local' : 'global');
|
||||||
const src = computed({ get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value), set: (x) => saveSrc(x) });
|
const src = computed({
|
||||||
const withRenotes = ref(true);
|
get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value),
|
||||||
const withReplies = ref($i ? defaultStore.state.tlWithReplies : false);
|
set: (x) => saveSrc(x),
|
||||||
const onlyFiles = ref(false);
|
});
|
||||||
|
const withRenotes = computed({
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
|
get: () => (defaultStore.reactiveState.tl.value.filter?.withRenotes ?? saveTlFilter('withRenotes', true)),
|
||||||
|
set: (x) => saveTlFilter('withRenotes', x),
|
||||||
|
});
|
||||||
|
const withReplies = computed({
|
||||||
|
get: () => {
|
||||||
|
if (!$i) return false;
|
||||||
|
if (['local', 'social'].includes(src.value) && onlyFiles.value) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
|
return defaultStore.reactiveState.tl.value.filter?.withReplies ?? saveTlFilter('withReplies', true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
set: (x) => saveTlFilter('withReplies', x),
|
||||||
|
});
|
||||||
|
const onlyFiles = computed({
|
||||||
|
get: () => {
|
||||||
|
if (['local', 'social'].includes(src.value) && withReplies.value) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
|
return defaultStore.reactiveState.tl.value.filter?.onlyFiles ?? saveTlFilter('onlyFiles', false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
set: (x) => saveTlFilter('onlyFiles', x),
|
||||||
|
});
|
||||||
|
const withSensitive = computed({
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
|
get: () => (defaultStore.reactiveState.tl.value.filter?.withSensitive ?? saveTlFilter('withSensitive', true)),
|
||||||
|
set: (x) => {
|
||||||
|
saveTlFilter('withSensitive', x);
|
||||||
|
|
||||||
|
// これだけはクライアント側で完結する処理なので手動でリロード
|
||||||
|
tlComponent.value?.reloadTimeline();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
watch(src, () => {
|
watch(src, () => {
|
||||||
queue.value = 0;
|
queue.value = 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(withReplies, (x) => {
|
|
||||||
if ($i) defaultStore.set('tlWithReplies', x);
|
|
||||||
});
|
|
||||||
|
|
||||||
function queueUpdated(q: number): void {
|
function queueUpdated(q: number): void {
|
||||||
queue.value = q;
|
queue.value = q;
|
||||||
}
|
}
|
||||||
|
@ -154,18 +188,38 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global' | `list:${string}`): void {
|
function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global' | `list:${string}`): void {
|
||||||
let userList = null;
|
const out = {
|
||||||
|
...defaultStore.state.tl,
|
||||||
|
src: newSrc,
|
||||||
|
};
|
||||||
|
|
||||||
if (newSrc.startsWith('userList:')) {
|
if (newSrc.startsWith('userList:')) {
|
||||||
const id = newSrc.substring('userList:'.length);
|
const id = newSrc.substring('userList:'.length);
|
||||||
userList = defaultStore.reactiveState.pinnedUserLists.value.find(l => l.id === id);
|
out.userList = defaultStore.reactiveState.pinnedUserLists.value.find(l => l.id === id) ?? null;
|
||||||
}
|
}
|
||||||
defaultStore.set('tl', {
|
|
||||||
src: newSrc,
|
defaultStore.set('tl', out);
|
||||||
userList,
|
|
||||||
});
|
|
||||||
srcWhenNotSignin.value = newSrc;
|
srcWhenNotSignin.value = newSrc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function saveTlFilter(key: keyof typeof defaultStore.state.tl.filter, newValue: boolean) {
|
||||||
|
if (key !== 'withReplies' || $i) {
|
||||||
|
const out = { ...defaultStore.state.tl };
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
|
if (!out.filter) {
|
||||||
|
out.filter = {
|
||||||
|
withRenotes: true,
|
||||||
|
withReplies: true,
|
||||||
|
withSensitive: true,
|
||||||
|
onlyFiles: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
out.filter[key] = newValue;
|
||||||
|
defaultStore.set('tl', out);
|
||||||
|
}
|
||||||
|
return newValue;
|
||||||
|
}
|
||||||
|
|
||||||
async function timetravel(): Promise<void> {
|
async function timetravel(): Promise<void> {
|
||||||
const { canceled, result: date } = await os.inputDate({
|
const { canceled, result: date } = await os.inputDate({
|
||||||
title: i18n.ts.date,
|
title: i18n.ts.date,
|
||||||
|
@ -202,6 +256,10 @@ const headerActions = computed(() => {
|
||||||
ref: withReplies,
|
ref: withReplies,
|
||||||
disabled: onlyFiles,
|
disabled: onlyFiles,
|
||||||
} : undefined, {
|
} : undefined, {
|
||||||
|
type: 'switch',
|
||||||
|
text: i18n.ts.withSensitive,
|
||||||
|
ref: withSensitive,
|
||||||
|
}, {
|
||||||
type: 'switch',
|
type: 'switch',
|
||||||
text: i18n.ts.fileAttachedOnly,
|
text: i18n.ts.fileAttachedOnly,
|
||||||
ref: onlyFiles,
|
ref: onlyFiles,
|
||||||
|
@ -215,8 +273,7 @@ const headerActions = computed(() => {
|
||||||
icon: 'ti ti-refresh',
|
icon: 'ti ti-refresh',
|
||||||
text: i18n.ts.reload,
|
text: i18n.ts.reload,
|
||||||
handler: (ev: Event) => {
|
handler: (ev: Event) => {
|
||||||
console.log('called');
|
tlComponent.value?.reloadTimeline();
|
||||||
tlComponent.value.reloadTimeline();
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -184,6 +184,12 @@ export const defaultStore = markRaw(new Storage('base', {
|
||||||
default: {
|
default: {
|
||||||
src: 'home' as 'home' | 'local' | 'social' | 'global' | `list:${string}`,
|
src: 'home' as 'home' | 'local' | 'social' | 'global' | `list:${string}`,
|
||||||
userList: null as Misskey.entities.UserList | null,
|
userList: null as Misskey.entities.UserList | null,
|
||||||
|
filter: {
|
||||||
|
withReplies: true,
|
||||||
|
withRenotes: true,
|
||||||
|
withSensitive: true,
|
||||||
|
onlyFiles: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
pinnedUserLists: {
|
pinnedUserLists: {
|
||||||
|
@ -391,10 +397,6 @@ export const defaultStore = markRaw(new Storage('base', {
|
||||||
where: 'device',
|
where: 'device',
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
tlWithReplies: {
|
|
||||||
where: 'device',
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
defaultWithReplies: {
|
defaultWithReplies: {
|
||||||
where: 'account',
|
where: 'account',
|
||||||
default: false,
|
default: false,
|
||||||
|
|
Loading…
Reference in New Issue