mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-11-03 23:14:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

remove notes-container.vue and revert refactor

Browse source
This commit is contained in:
Hazelnoot 2024-10-26 11:00:45 -04:00
parent 9d3aa6bb41
commit f5652605ec
5 changed files with 215 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
idea/Sharkey/SkPagination.vue Normal file
View file

@ -0,0 +1,88 @@
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<!--
Important note: this is a generic component.
Some operations require Vue helpers to satisfy typescript.
See this page for more information: https://vuejs.org/api/sfc-script-setup.html#generics
-->
<template>
<MkPagination ref="mkPagination" :pagination="pagination" :disableAutoload="disableAutoLoad" :displayLimit="computedDisplayLimit">
<template #empty>
<slot name="empty">
<div class="_fullinfo">
<img :src="noContentImage ?? infoImageUrl" class="_ghost" :alt="noContentText" aria-hidden="true"/>
<div>{{ noContentText }}</div>
</div>
</slot>
</template>
<template #default="{ items }">
<slot :items="items as Response"></slot>
</template>
</MkPagination>
</template>
<script lang="ts">
export type { Paging } from '@/components/MkPagination.vue';
</script>
<script setup lang="ts" generic="Endpoint extends keyof Endpoints">
import { computed, shallowRef } from 'vue';
import type { Endpoints } from 'misskey-js';
import type { SwitchCaseResponseType } from 'misskey-js/built/api.types.js';
import type { ComponentExposed } from 'vue-component-type-helpers';
import { infoImageUrl } from '@/instance.js';
import { i18n } from '@/i18n.js';
import MkPagination, { Paging } from '@/components/MkPagination.vue';
import { MisskeyEntity } from '@/types/date-separated-list.js';
type Response = SwitchCaseResponseType<Endpoint, Endpoints[Endpoint]['req']> & MisskeyEntity[];
type Entity = Response[number];
const mkPagination = shallowRef<InstanceType<typeof MkPagination>>();
const props = withDefaults(defineProps<{
pagination: Paging<Endpoint>;
disableAutoLoad?: boolean;
displayLimit?: number | null;
noContentText?: string;
noContentImage?: string;
}>(), {
disableAutoLoad: false,
displayLimit: undefined,
noContentText: i18n.ts.noNotes,
noContentImage: undefined,
});
// Value of displayLimit with default value applied.
const computedDisplayLimit = computed(() => {
// undefined (default) means to use the value from paging.
if (props.displayLimit === undefined) {
return props.pagination.limit;
}
// number means to use that value.
// null means to use the default from MkPagination.
return props.displayLimit ?? undefined;
});
/* eslint-disable @typescript-eslint/no-non-null-assertion */
defineExpose({
// Expose all the same properties...
...mkPagination.value!,
// But override these to have a narrower type.
items: mkPagination.value!.items as Map<string, Entity> | undefined,
queue: mkPagination.value!.queue as Map<string, Entity> | undefined,
prepend: (item: Entity) => mkPagination.value!.prepend(item),
append: (item: Entity) => mkPagination.value!.append(item),
updateItem: (id: Entity['id'], replacer: (old: Entity) => Entity) => {
return mkPagination.value!.updateItem(id, old => replacer(old as Entity));
},
});
/* eslint-enable @typescript-eslint/no-non-null-assertion */
</script>

0
packages/frontend/src/components/SkTab.vue → idea/Sharkey/SkTab.vue
View file

0
packages/frontend/src/pages/user/notes-container.vue → idea/Sharkey/notes-container.vue
View file

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

@ -145,7 +145,36 @@ SPDX-License-Identifier: AGPL-3.0-only
<XListenBrainz :key="user.id" :user="user" :collapsed="true"/>
</MkLazy>
</template>
<notes-container :user="user" :includeFeatured="false" :includePinned="user.pinnedNotes.length > 0"/>
<!-- <div v-if="!disableNotes">
<MkLazy>
<XTimeline :user="user"/>
</MkLazy>
</div> -->
<MkStickyContainer>
<template #header>
<!-- You can't use v-if on these, as MkTab first *deletes* and replaces all children with native HTML elements. -->
<!-- Instead, we add a "no notes" placeholder and default to null (all notes) if there's nothing pinned. -->
<!-- It also converts all comments into text! -->
<MkTab v-model="noteview" :class="$style.tab">
<option value="pinned">{{ i18n.ts.pinnedOnly }}</option>
<option :value="null">{{ i18n.ts.notes }}</option>
<option value="all">{{ i18n.ts.all }}</option>
<option value="files">{{ i18n.ts.withFiles }}</option>
</MkTab>
</template>
<MkLazy>
<div v-if="noteview === 'pinned'" class="_gaps">
<div v-if="user.pinnedNotes.length < 1" class="_fullinfo">
<img :src="infoImageUrl" class="_ghost" aria-hidden="true" :alt="i18n.ts.noNotes"/>
<div>{{ i18n.ts.noNotes }}</div>
</div>
<div v-else class="_panel">
<MkNote v-for="note of user.pinnedNotes" :key="note.id" class="note" :class="$style.pinnedNote" :note="note" :pinned="true"/>
</div>
</div>
<MkNotes v-else :class="$style.tl" :noGap="true" :pagination="AllPagination"/>
</MkLazy>
</MkStickyContainer>
</div>
</div>
<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
@ -161,6 +190,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import MkTab from '@/components/MkTab.vue';
import MkNotes from '@/components/MkNotes.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
import MkAccountMoved from '@/components/MkAccountMoved.vue';
import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
@ -181,7 +212,6 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { useRouter } from '@/router/supplier.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import NotesContainer from '@/pages/user/notes-container.vue';
import { infoImageUrl } from '@/instance.js';
const MkNote = defineAsyncComponent(() =>
@ -230,6 +260,7 @@ 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);
const listenbrainzdata = ref(false);
if (props.user.listenbrainz) {
@ -268,6 +299,26 @@ watch(moderationNote, async () => {
await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
});
const pagination = {
endpoint: 'users/featured-notes' as const,
limit: 10,
params: computed(() => ({
userId: props.user.id
})),
};
const AllPagination = {
endpoint: 'users/notes' as const,
limit: 10,
params: computed(() => ({
userId: props.user.id,
withRenotes: noteview.value === 'all',
withReplies: noteview.value === 'all',
withChannelNotes: noteview.value === 'all',
withFiles: noteview.value === 'files',
})),
};
const style = computed(() => {
if (props.user.bannerUrl == null) return {};
if (defaultStore.state.disableShowingAnimatedImages) {
@ -743,6 +794,13 @@ onUnmounted(() => {
</style>
<style lang="scss" module>
.tl {
background-color: rgba(0, 0, 0, 0);
border-radius: var(--radius);
overflow: clip;
z-index: 0;
}
.tab {
margin-bottom: calc(var(--margin) / 2);
padding: calc(var(--margin) / 2) 0;

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

@ -4,14 +4,78 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<notes-container :user="user"/>
<MkStickyContainer>
<template #header>
<MkTab v-model="tab" :class="$style.tab">
<option value="pinned">{{ i18n.ts.pinnedOnly }}</option>
<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>
<div v-if="tab === 'pinned'" class="_gaps">
<div v-if="user.pinnedNotes.length < 1" class="_fullinfo">
<img :src="infoImageUrl" class="_ghost" aria-hidden="true" :alt="i18n.ts.noNotes"/>
<div>{{ i18n.ts.noNotes }}</div>
</div>
<div v-else class="_panel">
<MkNote v-for="note of user.pinnedNotes" :key="note.id" class="note" :class="$style.pinnedNote" :note="note" :pinned="true"/>
</div>
</div>
<MkNotes v-else :class="$style.tl" :noGap="true" :pagination="pagination"/>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { ref, computed, defineAsyncComponent } from 'vue';
import * as Misskey from 'misskey-js';
import NotesContainer from '@/pages/user/notes-container.vue';
import MkNotes from '@/components/MkNotes.vue';
import MkTab from '@/components/MkTab.vue';
import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
import { defaultStore } from '@/store.js';
defineProps<{
const MkNote = defineAsyncComponent(() =>
defaultStore.state.noteDesign === 'sharkey'
? import('@/components/SkNote.vue')
: import('@/components/MkNote.vue'),
);
const props = defineProps<{
user: Misskey.entities.UserDetailed;
}>();
const tab = ref<string | null>('all');
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: {
userId: props.user.id,
withRenotes: tab.value === 'all',
withReplies: tab.value === 'all',
withChannelNotes: tab.value === 'all',
withFiles: tab.value === 'files',
},
});
</script>
<style lang="scss" module>
.tab {
padding: calc(var(--margin) / 2) 0;
background: var(--bg);
}
.tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
}
</style>