diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue index 37d3d1773f..12a5ffec43 100644 --- a/packages/frontend/src/pages/settings/mute-block.vue +++ b/packages/frontend/src/pages/settings/mute-block.vue @@ -5,13 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div class="_gaps_m"> - <MkTab v-model="tab"> - <option value="renoteMute">{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</option> - <option value="mute">{{ i18n.ts.mutedUsers }}</option> - <option value="block">{{ i18n.ts.blockedUsers }}</option> - </MkTab> + <MkFolder> + <template #icon><i class="ti ti-repeat-off"></i></template> + <template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template> - <div v-if="tab === 'renoteMute'"> <MkPagination :pagination="renoteMutingPagination"> <template #empty> <div class="_fullinfo"> @@ -37,9 +34,12 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </template> </MkPagination> - </div> + </MkFolder> + + <MkFolder> + <template #icon><i class="ti ti-eye-off"></i></template> + <template #label>{{ i18n.ts.mutedUsers }}</template> - <div v-else-if="tab === 'mute'"> <MkPagination :pagination="mutingPagination"> <template #empty> <div class="_fullinfo"> @@ -67,9 +67,12 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </template> </MkPagination> - </div> + </MkFolder> + + <MkFolder> + <template #icon><i class="ti ti-ban"></i></template> + <template #label>{{ i18n.ts.blockedUsers }}</template> - <div v-else-if="tab === 'block'"> <MkPagination :pagination="blockingPagination"> <template #empty> <div class="_fullinfo"> @@ -97,24 +100,20 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </template> </MkPagination> - </div> + </MkFolder> </div> </template> <script lang="ts" setup> import { } from 'vue'; import MkPagination from '@/components/MkPagination.vue'; -import MkTab from '@/components/MkTab.vue'; -import FormInfo from '@/components/MkInfo.vue'; -import FormLink from '@/components/form/link.vue'; import { userPage } from '@/filters/user.js'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; import * as os from '@/os.js'; import { infoImageUrl } from '@/instance.js'; - -let tab = $ref('renoteMute'); +import MkFolder from '@/components/MkFolder.vue'; const renoteMutingPagination = { endpoint: 'renote-mute/list' as const,