Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

いろいろかえた

Browse source
This commit is contained in:
mattyatea 2024-01-28 07:56:32 +09:00
parent fea64e8d94
commit 852c5d4035
17 changed files with 593 additions and 336 deletions
Download patch file Download diff file Expand all files Collapse all files

80
packages/frontend/src/pages/my-lists/index.vue
View file

@ -7,44 +7,87 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700">
<div class="_gaps">
<div v-if="items.length === 0" class="empty">
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.nothing }}</div>
<MkFoldableSection style="margin-bottom: 32px;">
<template #header>{{ i18n.ts.favoriteLists }}</template>
<div class="_gaps">
<div v-if="feautureList.length === 0" class="empty">
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</div>
<div v-if="feautureList.length > 0" class="_gaps">
<MkA v-for="list in feautureList" :key="list.id" class="_panel" :class="$style.list" :to="`/list/${ list.id }`">
<div style="margin-bottom: 4px;">{{ list.name }} <span :class="$style.nUsers">({{ i18n.tsx.nUsers({ n: `${list.userIds.length}` }) }})</span></div>
<MkAvatars :userIds="list.userIds" :limit="10"/>
</MkA>
</div>
</div>
</MkFoldableSection>
<MkFoldableSection style="margin-bottom: 32px;">
<template #header>{{ i18n.ts.localListList }}</template>
<div class="_gaps">
<div v-if="localList.length === 0" class="empty">
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</div>
<MkButton primary rounded style="margin: 0 auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
<div v-if="items.length > 0" class="_gaps">
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
<div style="margin-bottom: 4px;">{{ list.name }} <span :class="$style.nUsers">({{ i18n.tsx.nUsers({ n: `${list.userIds.length}/${$i.policies['userEachUserListsLimit']}` }) }})</span></div>
<MkAvatars :userIds="list.userIds" :limit="10"/>
</MkA>
<div v-if="localList.length > 0" class="_gaps">
<MkA v-for="list in localList" :key="list.id" class="_panel" :class="$style.list" :to="`/list/${ list.id }`">
<div style="margin-bottom: 4px;">{{ list.name }} <span :class="$style.nUsers">({{ i18n.tsx.nUsers({ n: `${list.userIds.length}` }) }})</span></div>
<MkAvatars :userIds="list.userIds" :limit="10"/>
</MkA>
</div>
</div>
</div>
</MkFoldableSection>
<MkFoldableSection>
<template #header>{{ i18n.ts.myLists }}</template>
<div class="_gaps">
<div v-if="items.length === 0" class="empty">
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</div>
<div v-if="items.length > 0" class="_gaps">
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
<div style="margin-bottom: 4px;">{{ list.name }} <span :class="$style.nUsers">({{ i18n.tsx.nUsers({ n: `${list.userIds.length}/${$i.policies['userEachUserListsLimit']}` }) }})</span></div>
<MkAvatars :userIds="list.userIds" :limit="10"/>
</MkA>
</div>
</div>
</MkFoldableSection>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { onActivated, computed } from 'vue';
import MkButton from '@/components/MkButton.vue';
import MkAvatars from '@/components/MkAvatars.vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { userListsCache } from '@/cache.js';
import { userFavoriteListsCache, userListsCache } from '@/cache.js';
import { infoImageUrl } from '@/instance.js';
import { signinRequired } from '@/account.js';
import MkFoldableSection from '@/components/MkFoldableSection.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
const $i = signinRequired();
const items = computed(() => userListsCache.value.value ?? []);
const localList = await misskeyApi('users/lists/list', { publicAll: true });
const feautureList = computed(() => userFavoriteListsCache.value.value ?? []);
function fetch() {
userListsCache.fetch();
userFavoriteListsCache.delete();
userFavoriteListsCache.fetch();
}
fetch();
@ -67,12 +110,17 @@ const headerActions = computed(() => [{
userListsCache.delete();
fetch();
},
}, {
asFullButton: true,
icon: 'ti ti-plus',
text: i18n.ts.createList,
handler: create,
}]);
const headerTabs = computed(() => []);
definePageMetadata({
title: i18n.ts.manageLists,
title: i18n.ts._exportOrImport.userLists,
icon: 'ti ti-list',
});