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

merge: upstream

Browse source
This commit is contained in:
Marie 2023-12-23 02:09:23 +01:00
commit 5db583a3eb
701 changed files with 50809 additions and 13660 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/frontend/src/pages/user/activity.following.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, shallowRef, ref } from 'vue';
import { Chart, ChartDataset } from 'chart.js';
import * as Misskey from 'misskey-js';
import gradient from 'chartjs-plugin-gradient';
@ -32,12 +32,12 @@ const props = defineProps<{
user: Misskey.entities.User;
}>();
const chartEl = $shallowRef<HTMLCanvasElement>(null);
let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
const chartEl = shallowRef<HTMLCanvasElement>(null);
const legendEl = shallowRef<InstanceType<typeof MkChartLegend>>();
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 30;
let fetching = $ref(true);
const fetching = ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();
@ -88,7 +88,7 @@ async function renderChart() {
}, extra);
}
chartInstance = new Chart(chartEl, {
chartInstance = new Chart(chartEl.value, {
type: 'bar',
data: {
datasets: [
@ -162,10 +162,10 @@ async function renderChart() {
gradient,
},
},
plugins: [chartVLine(vLineColor), chartLegend(legendEl)],
plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],
});
fetching = false;
fetching.value = false;
}
onMounted(async () => {

18
packages/frontend/src/pages/user/activity.heatmap.vue
View file

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, nextTick, watch } from 'vue';
import { onMounted, nextTick, watch, shallowRef, ref } from 'vue';
import { Chart } from 'chart.js';
import * as Misskey from 'misskey-js';
import * as os from '@/os.js';
@ -29,11 +29,11 @@ const props = defineProps<{
user: Misskey.entities.User;
}>();
const rootEl = $shallowRef<HTMLDivElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
const rootEl = shallowRef<HTMLDivElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const now = new Date();
let chartInstance: Chart = null;
let fetching = $ref(true);
const fetching = ref(true);
const { handler: externalTooltipHandler } = useChartTooltip({
position: 'middle',
@ -44,8 +44,8 @@ async function renderChart() {
chartInstance.destroy();
}
const wide = rootEl.offsetWidth > 700;
const narrow = rootEl.offsetWidth < 400;
const wide = rootEl.value.offsetWidth > 700;
const narrow = rootEl.value.offsetWidth < 400;
const weeks = wide ? 50 : narrow ? 10 : 25;
const chartLimit = 7 * weeks;
@ -78,7 +78,7 @@ async function renderChart() {
values = raw.inc;
}
fetching = false;
fetching.value = false;
await nextTick();
@ -91,7 +91,7 @@ async function renderChart() {
const marginEachCell = 4;
chartInstance = new Chart(chartEl, {
chartInstance = new Chart(chartEl.value, {
type: 'matrix',
data: {
datasets: [{
@ -203,7 +203,7 @@ async function renderChart() {
}
watch(() => props.src, () => {
fetching = true;
fetching.value = true;
renderChart();
});

14
packages/frontend/src/pages/user/activity.notes.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, shallowRef, ref } from 'vue';
import { Chart, ChartDataset } from 'chart.js';
import * as Misskey from 'misskey-js';
import gradient from 'chartjs-plugin-gradient';
@ -32,12 +32,12 @@ const props = defineProps<{
user: Misskey.entities.User;
}>();
const chartEl = $shallowRef<HTMLCanvasElement>(null);
let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
const chartEl = shallowRef<HTMLCanvasElement>(null);
const legendEl = shallowRef<InstanceType<typeof MkChartLegend>>();
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 50;
let fetching = $ref(true);
const fetching = ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();
@ -87,7 +87,7 @@ async function renderChart() {
}, extra);
}
chartInstance = new Chart(chartEl, {
chartInstance = new Chart(chartEl.value, {
type: 'bar',
data: {
datasets: [
@ -161,10 +161,10 @@ async function renderChart() {
gradient,
},
},
plugins: [chartVLine(vLineColor), chartLegend(legendEl)],
plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],
});
fetching = false;
fetching.value = false;
}
onMounted(async () => {

14
packages/frontend/src/pages/user/activity.pv.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, shallowRef, ref } from 'vue';
import { Chart, ChartDataset } from 'chart.js';
import * as Misskey from 'misskey-js';
import gradient from 'chartjs-plugin-gradient';
@ -32,12 +32,12 @@ const props = defineProps<{
user: Misskey.entities.User;
}>();
const chartEl = $shallowRef<HTMLCanvasElement>(null);
let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
const chartEl = shallowRef<HTMLCanvasElement>(null);
const legendEl = shallowRef<InstanceType<typeof MkChartLegend>>();
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 30;
let fetching = $ref(true);
const fetching = ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();
@ -88,7 +88,7 @@ async function renderChart() {
}, extra);
}
chartInstance = new Chart(chartEl, {
chartInstance = new Chart(chartEl.value, {
type: 'bar',
data: {
datasets: [
@ -172,10 +172,10 @@ async function renderChart() {
gradient,
},
},
plugins: [chartVLine(vLineColor), chartLegend(legendEl)],
plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],
});
fetching = false;
fetching.value = false;
}
onMounted(async () => {

24
packages/frontend/src/pages/user/followers.vue
View file

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import { computed, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import XFollowList from './follow-list.vue';
import * as os from '@/os.js';
@ -31,16 +31,16 @@ const props = withDefaults(defineProps<{
}>(), {
});
let user = $ref<null | Misskey.entities.UserDetailed>(null);
let error = $ref(null);
const user = ref<null | Misskey.entities.UserDetailed>(null);
const error = ref(null);
function fetchUser(): void {
if (props.acct == null) return;
user = null;
user.value = null;
os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
user = u;
user.value = u;
}).catch(err => {
error = err;
error.value = err;
});
}
@ -48,15 +48,15 @@ watch(() => props.acct, fetchUser, {
immediate: true,
});
const headerActions = $computed(() => []);
const headerActions = computed(() => []);
const headerTabs = $computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(computed(() => user ? {
definePageMetadata(computed(() => user.value ? {
icon: 'ph-user ph-bold ph-lg',
title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
subtitle: i18n.ts.followers,
userName: user,
avatar: user,
userName: user.value,
avatar: user.value,
} : null));
</script>

24
packages/frontend/src/pages/user/following.vue
View file

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import { computed, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import XFollowList from './follow-list.vue';
import * as os from '@/os.js';
@ -31,16 +31,16 @@ const props = withDefaults(defineProps<{
}>(), {
});
let user = $ref<null | Misskey.entities.UserDetailed>(null);
let error = $ref(null);
const user = ref<null | Misskey.entities.UserDetailed>(null);
const error = ref(null);
function fetchUser(): void {
if (props.acct == null) return;
user = null;
user.value = null;
os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
user = u;
user.value = u;
}).catch(err => {
error = err;
error.value = err;
});
}
@ -48,15 +48,15 @@ watch(() => props.acct, fetchUser, {
immediate: true,
});
const headerActions = $computed(() => []);
const headerActions = computed(() => []);
const headerTabs = $computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(computed(() => user ? {
definePageMetadata(computed(() => user.value ? {
icon: 'ph-user ph-bold ph-lg',
title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
subtitle: i18n.ts.following,
userName: user,
avatar: user,
userName: user.value,
avatar: user.value,
} : null));
</script>

102
packages/frontend/src/pages/user/home.vue
View file

@ -107,11 +107,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<b>{{ number(user.notesCount) }}</b>
<span>{{ i18n.ts.notes }}</span>
</MkA>
<MkA v-if="isFfVisibleForMe(user)" :to="userPage(user, 'following')">
<MkA v-if="isFollowingVisibleForMe(user)" :to="userPage(user, 'following')">
<b>{{ number(user.followingCount) }}</b>
<span>{{ i18n.ts.following }}</span>
</MkA>
<MkA v-if="isFfVisibleForMe(user)" :to="userPage(user, 'followers')">
<MkA v-if="isFollowersVisibleForMe(user)" :to="userPage(user, 'followers')">
<b>{{ number(user.followersCount) }}</b>
<span>{{ i18n.ts.followers }}</span>
</MkA>
@ -128,13 +128,20 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
<template v-if="narrow">
<XFiles :key="user.id" :user="user"/>
<XActivity :key="user.id" :user="user"/>
<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user"/>
<MkLazy>
<XFiles :key="user.id" :user="user"/>
</MkLazy>
<MkLazy>
<XActivity :key="user.id" :user="user"/>
</MkLazy>
<MkLazy>
<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user"/>
</MkLazy>
</template>
<!-- <div v-if="!disableNotes">
<div style="margin-bottom: 8px; z-index: 1;">{{ i18n.ts.featured }}</div>
<MkNotes :class="$style.tl" :noGap="true" :pagination="pagination"/>
<MkLazy>
<XTimeline :user="user"/>
</MkLazy>
</div> -->
<MkStickyContainer>
<template #header>
@ -144,7 +151,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="files">{{ i18n.ts.withFiles }}</option>
</MkTab>
</template>
<MkNotes :class="$style.tl" :noGap="true" :pagination="AllPagination"/>
<MkLazy>
<MkNotes :class="$style.tl" :noGap="true" :pagination="AllPagination"/>
</MkLazy>
</MkStickyContainer>
</div>
</div>
@ -159,10 +168,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import MkTab from '@/components/MkTab.vue';
import MkNote from '@/components/MkNote.vue';
import MkNotes from '@/components/MkNotes.vue';
import SkNote from '@/components/SkNote.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
import MkAccountMoved from '@/components/MkAccountMoved.vue';
@ -180,10 +190,9 @@ import { i18n } from '@/i18n.js';
import { $i, iAmModerator } from '@/account.js';
import { dateString } from '@/filters/date.js';
import { confetti } from '@/scripts/confetti.js';
import MkNotes from '@/components/MkNotes.vue';
import { api } from '@/os.js';
import { defaultStore } from '@/store.js';
import { isFfVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
function calcAge(birthdate: string): number {
const date = new Date(birthdate);
@ -203,6 +212,7 @@ function calcAge(birthdate: string): number {
const XFiles = defineAsyncComponent(() => import('./index.files.vue'));
const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
const XListenBrainz = defineAsyncComponent(() => import("./index.listenbrainz.vue"));
//const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed;
@ -214,17 +224,17 @@ const props = withDefaults(defineProps<{
const router = useRouter();
let user = $ref(props.user);
let parallaxAnimationId = $ref<null | number>(null);
let narrow = $ref<null | boolean>(null);
let rootEl = $ref<null | HTMLElement>(null);
let bannerEl = $ref<null | HTMLElement>(null);
let memoTextareaEl = $ref<null | HTMLElement>(null);
let memoDraft = $ref(props.user.memo);
let isEditingMemo = $ref(false);
let moderationNote = $ref(props.user.moderationNote);
let editModerationNote = $ref(false);
let noteview = $ref<string | null>(null);
const user = ref(props.user);
const parallaxAnimationId = ref<null | number>(null);
const narrow = ref<null | boolean>(null);
const rootEl = ref<null | HTMLElement>(null);
const bannerEl = ref<null | HTMLElement>(null);
const memoTextareaEl = ref<null | HTMLElement>(null);
const memoDraft = ref(props.user.memo);
const isEditingMemo = ref(false);
const moderationNote = ref(props.user.moderationNote);
const editModerationNote = ref(false);
const noteview = ref<string | null>(null);
let listenbrainzdata = false;
if (props.user.listenbrainz) {
@ -251,8 +261,8 @@ const background = computed(() => {
};
});
watch($$(moderationNote), async () => {
await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote });
watch(moderationNote, async () => {
await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
});
const pagination = {
@ -268,39 +278,39 @@ const AllPagination = {
limit: 10,
params: computed(() => ({
userId: props.user.id,
withRenotes: noteview === 'all',
withReplies: noteview === 'all' || noteview === 'files',
withChannelNotes: noteview === 'all',
withFiles: noteview === 'files',
withRenotes: noteview.value === 'all',
withReplies: noteview.value === 'all' || noteview.value === 'files',
withChannelNotes: noteview.value === 'all',
withFiles: noteview.value === 'files',
})),
};
const style = $computed(() => {
const style = computed(() => {
if (props.user.bannerUrl == null) return {};
return {
backgroundImage: `url(${ props.user.bannerUrl })`,
};
});
const age = $computed(() => {
const age = computed(() => {
return calcAge(props.user.birthday);
});
function menu(ev) {
const { menu, cleanup } = getUserMenu(user, router);
function menu(ev: MouseEvent) {
const { menu, cleanup } = getUserMenu(user.value, router);
os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
}
function parallaxLoop() {
parallaxAnimationId = window.requestAnimationFrame(parallaxLoop);
parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
parallax();
}
function parallax() {
const banner = bannerEl as any;
const banner = bannerEl.value as any;
if (banner == null) return;
const top = getScrollPosition(rootEl);
const top = getScrollPosition(rootEl.value);
if (top < 0) return;
@ -310,33 +320,33 @@ function parallax() {
}
function showMemoTextarea() {
isEditingMemo = true;
isEditingMemo.value = true;
nextTick(() => {
memoTextareaEl?.focus();
memoTextareaEl.value?.focus();
});
}
function adjustMemoTextarea() {
if (!memoTextareaEl) return;
memoTextareaEl.style.height = '0px';
memoTextareaEl.style.height = `${memoTextareaEl.scrollHeight}px`;
if (!memoTextareaEl.value) return;
memoTextareaEl.value.style.height = '0px';
memoTextareaEl.value.style.height = `${memoTextareaEl.value.scrollHeight}px`;
}
async function updateMemo() {
await api('users/update-memo', {
memo: memoDraft,
memo: memoDraft.value,
userId: props.user.id,
});
isEditingMemo = false;
isEditingMemo.value = false;
}
watch([props.user], () => {
memoDraft = props.user.memo;
memoDraft.value = props.user.memo;
});
onMounted(() => {
window.requestAnimationFrame(parallaxLoop);
narrow = rootEl!.clientWidth < 1000;
narrow.value = rootEl.value!.clientWidth < 1000;
if (props.user.birthday) {
const m = new Date().getMonth() + 1;
@ -355,8 +365,8 @@ onMounted(() => {
});
onUnmounted(() => {
if (parallaxAnimationId) {
window.cancelAnimationFrame(parallaxAnimationId);
if (parallaxAnimationId.value) {
window.cancelAnimationFrame(parallaxAnimationId.value);
}
});
</script>

12
packages/frontend/src/pages/user/index.activity.vue
View file

@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { } from 'vue';
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import MkContainer from '@/components/MkContainer.vue';
import MkChart from '@/components/MkChart.vue';
@ -34,20 +34,20 @@ const props = withDefaults(defineProps<{
limit: 50,
});
let chartSrc = $ref('per-user-notes');
const chartSrc = ref('per-user-notes');
function showMenu(ev: MouseEvent) {
os.popupMenu([{
text: i18n.ts.notes,
active: chartSrc === 'per-user-notes',
active: chartSrc.value === 'per-user-notes',
action: () => {
chartSrc = 'per-user-notes';
chartSrc.value = 'per-user-notes';
},
}, {
text: i18n.ts.numberOfProfileView,
active: chartSrc === 'per-user-pv',
active: chartSrc.value === 'per-user-pv',
action: () => {
chartSrc = 'per-user-pv';
chartSrc.value = 'per-user-pv';
},
}, /*, {
text: i18n.ts.following,

42
packages/frontend/src/pages/user/index.files.vue
View file

@ -11,10 +11,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkLoading v-if="fetching"/>
<div v-if="!fetching && files.length > 0" :class="$style.stream">
<template v-for="file in files" :key="file.note.id + file.file.id">
<div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.sensitive" @click="showingFiles.push(file.file.id)">
<div>
<div><i class="ph-eye-slash ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</div>
<div>{{ i18n.ts.clickToShow }}</div>
<div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.img" @click="showingFiles.push(file.file.id)">
<!-- TODO: 画像以外のファイルに対応 -->
<ImgWithBlurhash :class="$style.sensitiveImg" :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name" :forceBlurhash="true"/>
<div :class="$style.sensitive">
<div>
<div><i class="ph-eye-slash ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</div>
<div>{{ i18n.ts.clickToShow }}</div>
</div>
</div>
</div>
<MkA v-else :class="$style.img" :to="notePage(file.note)">
@ -29,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import { notePage } from '@/filters/note.js';
@ -43,12 +47,12 @@ const props = defineProps<{
user: Misskey.entities.UserDetailed;
}>();
let fetching = $ref(true);
let files = $ref<{
const fetching = ref(true);
const files = ref<{
note: Misskey.entities.Note;
file: Misskey.entities.DriveFile;
}[]>([]);
let showingFiles = $ref<string[]>([]);
const showingFiles = ref<string[]>([]);
function thumbnail(image: Misskey.entities.DriveFile): string {
return defaultStore.state.disableShowingAnimatedImages
@ -60,18 +64,17 @@ onMounted(() => {
os.api('users/notes', {
userId: props.user.id,
withFiles: true,
excludeNsfw: defaultStore.state.nsfw !== 'ignore',
limit: 15,
}).then(notes => {
for (const note of notes) {
for (const file of note.files) {
files.push({
files.value.push({
note,
file,
});
}
}
fetching = false;
fetching.value = false;
});
});
</script>
@ -88,6 +91,7 @@ onMounted(() => {
}
.img {
position: relative;
height: 128px;
border-radius: var(--radius-sm);
overflow: clip;
@ -99,8 +103,24 @@ onMounted(() => {
text-align: center;
}
.sensitiveImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: brightness(0.7);
}
.sensitive {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-size: 0.8em;
color: #fff;
cursor: pointer;
}
</style>

48
packages/frontend/src/pages/user/index.timeline.vue
View file

@ -4,18 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="800" style="padding-top: 0">
<MkStickyContainer>
<template #header>
<MkTab v-model="include" :class="$style.tab">
<option :value="null">{{ i18n.ts.notes }}</option>
<option value="all">{{ i18n.ts.all }}</option>
<option value="files">{{ i18n.ts.withFiles }}</option>
</MkTab>
</template>
<MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/>
</MkStickyContainer>
</MkSpacer>
<MkStickyContainer>
<template #header>
<MkTab v-model="tab" :class="$style.tab">
<option value="featured">{{ i18n.ts.featured }}</option>
<option :value="null">{{ i18n.ts.notes }}</option>
<option value="all">{{ i18n.ts.all }}</option>
<option value="files">{{ i18n.ts.withFiles }}</option>
</MkTab>
</template>
<MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/>
</MkStickyContainer>
</template>
<script lang="ts" setup>
@ -29,24 +28,29 @@ const props = defineProps<{
user: Misskey.entities.UserDetailed;
}>();
const include = ref<string | null>('all');
const tab = ref<string | null>('all');
const pagination = {
const pagination = computed(() => tab.value === 'featured' ? {
endpoint: 'users/featured-notes' as const,
limit: 10,
params: {
userId: props.user.id,
},
} : {
endpoint: 'users/notes' as const,
limit: 10,
params: computed(() => ({
params: {
userId: props.user.id,
withRenotes: include.value === 'all',
withReplies: include.value === 'all',
withChannelNotes: include.value === 'all',
withFiles: include.value === 'files',
})),
};
withRenotes: tab.value === 'all',
withReplies: tab.value === 'all',
withChannelNotes: tab.value === 'all',
withFiles: tab.value === 'files',
},
});
</script>
<style lang="scss" module>
.tab {
margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0;
background: var(--bg);
}

46
packages/frontend/src/pages/user/index.vue
View file

@ -9,7 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>
<div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/>
<XTimeline v-else-if="tab === 'notes'" :user="user"/>
<MkSpacer v-else-if="tab === 'notes'" :contentMax="800" style="padding-top: 0">
<XTimeline :user="user"/>
</MkSpacer>
<XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
<XReactions v-else-if="tab === 'reactions'" :user="user"/>
@ -18,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XPages v-else-if="tab === 'pages'" :user="user"/>
<XFlashs v-else-if="tab === 'flashs'" :user="user"/>
<XGallery v-else-if="tab === 'gallery'" :user="user"/>
<XRaw v-else-if="tab === 'raw'" :user="user"/>
</div>
<MkError v-else-if="error" @retry="fetchUser()"/>
<MkLoading v-else/>
@ -26,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, computed, watch } from 'vue';
import { defineAsyncComponent, computed, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { acct as getAcct } from '@/filters/user.js';
import * as os from '@/os.js';
@ -44,6 +47,7 @@ const XLists = defineAsyncComponent(() => import('./lists.vue'));
const XPages = defineAsyncComponent(() => import('./pages.vue'));
const XFlashs = defineAsyncComponent(() => import('./flashs.vue'));
const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
const XRaw = defineAsyncComponent(() => import('./raw.vue'));
const props = withDefaults(defineProps<{
acct: string;
@ -52,17 +56,17 @@ const props = withDefaults(defineProps<{
page: 'home',
});
let tab = $ref(props.page);
let user = $ref<null | Misskey.entities.UserDetailed>(null);
let error = $ref(null);
const tab = ref(props.page);
const user = ref<null | Misskey.entities.UserDetailed>(null);
const error = ref(null);
function fetchUser(): void {
if (props.acct == null) return;
user = null;
user.value = null;
os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
user = u;
user.value = u;
}).catch(err => {
error = err;
error.value = err;
});
}
@ -70,9 +74,9 @@ watch(() => props.acct, fetchUser, {
immediate: true,
});
const headerActions = $computed(() => []);
const headerActions = computed(() => []);
const headerTabs = $computed(() => user ? [{
const headerTabs = computed(() => user.value ? [{
key: 'home',
title: i18n.ts.overview,
icon: 'ph-house ph-bold ph-lg',
@ -84,11 +88,11 @@ const headerTabs = $computed(() => user ? [{
key: 'activity',
title: i18n.ts.activity,
icon: 'ph-chart-line ph-bold ph-lg',
}, ...(user.host == null ? [{
}, ...(user.value.host == null ? [{
key: 'achievements',
title: i18n.ts.achievements,
icon: 'ph-trophy ph-bold ph-lg',
}] : []), ...($i && ($i.id === user.id)) || user.publicReactions ? [{
}] : []), ...($i && ($i.id === user.value.id)) || user.value.publicReactions ? [{
key: 'reactions',
title: i18n.ts.reaction,
icon: 'ph-smiley ph-bold ph-lg',
@ -112,17 +116,21 @@ const headerTabs = $computed(() => user ? [{
key: 'gallery',
title: i18n.ts.gallery,
icon: 'ph-images-square ph-bold ph-lg',
}, {
key: 'raw',
title: 'Raw',
icon: 'ph-code ph-bold ph-lg',
}] : []);
definePageMetadata(computed(() => user ? {
definePageMetadata(computed(() => user.value ? {
icon: 'ph-user ph-bold ph-lg',
title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
subtitle: `@${getAcct(user)}`,
userName: user,
avatar: user,
path: `/@${user.username}`,
title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
subtitle: `@${getAcct(user.value)}`,
userName: user.value,
avatar: user.value,
path: `/@${user.value.username}`,
share: {
title: user.name,
title: user.value.name,
},
} : null));
</script>

130
packages/frontend/src/pages/user/raw.vue Normal file
View file

@ -0,0 +1,130 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="32">
<div class="_gaps_m">
<div :class="$style.userMInfoRoot">
<MkAvatar :class="$style.userMInfoAvatar" :user="user" indicator link preview/>
<div :class="$style.userMInfoMetaRoot">
<span :class="$style.userMInfoMetaName"><MkUserName :class="$style.userMInfoMetaName" :user="user"/></span>
<span :class="$style.userMInfoMetaSub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
<span :class="$style.userMInfoMetaState">
<span v-if="suspended" :class="$style.suspended">Suspended</span>
<span v-if="silenced" :class="$style.silenced">Silenced</span>
<span v-if="moderator" :class="$style.moderator">Moderator</span>
</span>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 1em;">
<MkKeyValue :copy="user.id" oneline>
<template #key>ID</template>
<template #value><span class="_monospace">{{ user.id }}</span></template>
</MkKeyValue>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.createdAt }}</template>
<template #value><span class="_monospace"><MkTime :time="user.createdAt" :mode="'detail'"/></span></template>
</MkKeyValue>
</div>
<FormSection>
<template #label>Raw</template>
<MkObjectView tall :value="user"></MkObjectView>
</FormSection>
</div>
</MkSpacer>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import * as Misskey from 'misskey-js';
import { acct } from '@/filters/user.js';
import { i18n } from '@/i18n.js';
import MkKeyValue from '@/components/MkKeyValue.vue';
import FormSection from '@/components/form/section.vue';
import MkObjectView from '@/components/MkObjectView.vue';
const props = defineProps<{
user: Misskey.entities.User;
}>();
const moderator = computed(() => props.user.isModerator ?? false);
const silenced = computed(() => props.user.isSilenced ?? false);
const suspended = computed(() => props.user.isSuspended ?? false);
</script>
<style lang="scss" module>
.userMInfoRoot {
display: flex;
align-items: center;
}
.userMInfoAvatar {
display: block;
width: 64px;
height: 64px;
margin-right: 16px;
}
.userMInfoMetaRoot {
flex: 1;
overflow: hidden;
}
.userMInfoMetaName {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.userMInfoMetaSub {
display: block;
width: 100%;
font-size: 85%;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.userMInfoMetaState {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
&:empty {
display: none;
}
> .suspended,
> .silenced,
> .moderator {
display: inline-block;
border: solid 1px;
border-radius: 6px;
padding: 2px 6px;
font-size: 85%;
}
> .suspended {
color: var(--error);
border-color: var(--error);
}
> .silenced {
color: var(--warn);
border-color: var(--warn);
}
> .moderator {
color: var(--success);
border-color: var(--success);
}
}
</style>