From ca94959fff3f202c90166db8868a7613c424fe0b Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Fri, 1 Nov 2024 16:52:31 -0400
Subject: factor out Following Feed list into SkFollowingRecentNotes.vue

---
 .../src/components/SkFollowingRecentNotes.vue      | 122 +++++++++++++++++++++
 packages/frontend/src/components/global/SkLazy.vue |  57 ++++++++++
 2 files changed, 179 insertions(+)
 create mode 100644 packages/frontend/src/components/SkFollowingRecentNotes.vue
 create mode 100644 packages/frontend/src/components/global/SkLazy.vue

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/SkFollowingRecentNotes.vue b/packages/frontend/src/components/SkFollowingRecentNotes.vue
new file mode 100644
index 0000000000..35fa83812f
--- /dev/null
+++ b/packages/frontend/src/components/SkFollowingRecentNotes.vue
@@ -0,0 +1,122 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkPullToRefresh :refresher="() => reload()">
+	<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
+		<template #empty>
+			<div class="_fullinfo">
+				<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
+				<div>{{ i18n.ts.noNotes }}</div>
+			</div>
+		</template>
+
+		<template #default="{ items: notes }">
+			<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
+				<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" @select="u => selectUser(u.id)"/>
+			</MkDateSeparatedList>
+		</template>
+	</MkPagination>
+</MkPullToRefresh>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { computed, shallowRef } from 'vue';
+import { infoImageUrl } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import SkFollowingFeedEntry from '@/components/SkFollowingFeedEntry.vue';
+import { $i } from '@/account.js';
+import { checkWordMute } from '@/scripts/check-word-mute.js';
+import { FollowingFeedTab } from '@/scripts/following-feed-utils.js';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
+
+const props = defineProps<{
+	userList: FollowingFeedTab;
+	withNonPublic: boolean;
+	withQuotes: boolean;
+	withReplies: boolean;
+	withBots: boolean;
+	onlyFiles: boolean;
+}>();
+
+const emit = defineEmits<{
+	(event: 'loaded', initialUserId?: string): void;
+	(event: 'userSelected', userId: string): void;
+}>();
+
+defineExpose({ reload });
+
+async function reload() {
+	await latestNotesPaging.value?.reload();
+}
+
+function selectUser(userId: string) {
+	emit('userSelected', userId);
+}
+
+async function onListReady(): Promise<void> {
+	// This looks complicated, but it's really just a trick to get the first user ID from the pagination.
+	const initialUserId = latestNotesPaging.value?.items.size
+		? latestNotesPaging.value.items.values().next().value?.userId
+		: undefined;
+
+	emit('loaded', initialUserId);
+}
+
+const latestNotesPagination: Paging<'notes/following'> = {
+	endpoint: 'notes/following' as const,
+	limit: 20,
+	params: computed(() => ({
+		list: props.userList,
+		filesOnly: props.onlyFiles,
+		includeNonPublic: props.withNonPublic,
+		includeReplies: props.withReplies,
+		includeQuotes: props.withQuotes,
+		includeBots: props.withBots,
+	})),
+};
+
+const latestNotesPaging = shallowRef<InstanceType<typeof MkPagination>>();
+
+function isSoftMuted(note: Misskey.entities.Note): boolean {
+	return isMuted(note, $i?.mutedWords);
+}
+
+function isHardMuted(note: Misskey.entities.Note): boolean {
+	return isMuted(note, $i?.hardMutedWords);
+}
+
+// Match the typing used by Misskey
+type Mutes = (string | string[])[] | null | undefined;
+
+// Adapted from MkNote.ts
+function isMuted(note: Misskey.entities.Note, mutes: Mutes): boolean {
+	return checkMute(note, mutes)
+		|| checkMute(note.reply, mutes)
+		|| checkMute(note.renote, mutes);
+}
+
+// Adapted from check-word-mute.ts
+function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes): boolean {
+	if (!note) {
+		return false;
+	}
+
+	if (!mutes || mutes.length < 1) {
+		return false;
+	}
+
+	return checkWordMute(note, $i, mutes);
+}
+</script>
+
+<style module lang="scss">
+.panel {
+	background: var(--panel);
+}
+</style>
diff --git a/packages/frontend/src/components/global/SkLazy.vue b/packages/frontend/src/components/global/SkLazy.vue
new file mode 100644
index 0000000000..40add97db7
--- /dev/null
+++ b/packages/frontend/src/components/global/SkLazy.vue
@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<!-- Based on MkLazy.vue -->
+
+<template>
+<div ref="rootEl" :class="$style.root">
+	<slot v-if="showing"></slot>
+	<div v-else :class="$style.placeholder"></div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, shallowRef } from 'vue';
+
+const rootEl = shallowRef<HTMLDivElement>();
+const showing = ref(false);
+
+defineExpose({ rootEl, showing });
+
+const observer = new IntersectionObserver(entries =>
+	showing.value = entries.some((entry) => entry.isIntersecting),
+);
+
+onMounted(() => {
+	nextTick(() => {
+		if (rootEl.value) {
+			observer.observe(rootEl.value);
+		}
+	});
+});
+
+onActivated(() => {
+	nextTick(() => {
+		if (rootEl.value) {
+			observer.observe(rootEl.value);
+		}
+	});
+});
+
+onBeforeUnmount(() => {
+	observer.disconnect();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: block;
+}
+
+.placeholder {
+	display: block;
+	min-height: 150px;
+}
+</style>
-- 
cgit v1.2.3-freya


From ed6c7814269ee3e38b837df6b9330b19a178cb43 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sat, 2 Nov 2024 11:08:37 -0400
Subject: fix responsive breakpoint in SkUserRecentNotes

---
 packages/frontend/src/components/SkUserRecentNotes.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/SkUserRecentNotes.vue b/packages/frontend/src/components/SkUserRecentNotes.vue
index 2cdb4b6586..7cfa0fb3f6 100644
--- a/packages/frontend/src/components/SkUserRecentNotes.vue
+++ b/packages/frontend/src/components/SkUserRecentNotes.vue
@@ -101,7 +101,7 @@ onMounted(async () => {
 	margin-bottom: 12px;
 }
 
-@container (min-width: 451px) {
+@container (min-width: 750px) {
 	.userInfo {
 		margin-bottom: 24px;
 	}
-- 
cgit v1.2.3-freya


From 4a43e1a9e9c56eb0375714fffc147dfe080d5959 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sat, 2 Nov 2024 11:29:19 -0400
Subject: factor out remote followers warning in SkRemoteFollowersWarning.vue

---
 .../src/components/SkRemoteFollowersWarning.vue    | 32 ++++++++++++++++++++++
 packages/frontend/src/pages/following-feed.vue     | 10 +++----
 2 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 packages/frontend/src/components/SkRemoteFollowersWarning.vue

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/SkRemoteFollowersWarning.vue b/packages/frontend/src/components/SkRemoteFollowersWarning.vue
new file mode 100644
index 0000000000..ceebbd59dd
--- /dev/null
+++ b/packages/frontend/src/components/SkRemoteFollowersWarning.vue
@@ -0,0 +1,32 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkInfo v-if="showRemoteWarning" warn closable @close="close">
+	{{ i18n.ts.remoteFollowersWarning }}
+</MkInfo>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkInfo from '@/components/MkInfo.vue';
+import { followersTab, FollowingFeedModel } from '@/scripts/following-feed-utils.js';
+
+const props = defineProps<{
+	model: FollowingFeedModel,
+}>();
+
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const { model: { userList, remoteWarningDismissed } } = props;
+
+const showRemoteWarning = computed(
+	() => userList.value === followersTab && !remoteWarningDismissed.value,
+);
+
+function close() {
+	remoteWarningDismissed.value = true;
+}
+</script>
diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
index 33de5b01ea..9054769034 100644
--- a/packages/frontend/src/pages/following-feed.vue
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root">
 	<div :class="$style.header">
 		<MkPageHeader v-model:tab="userList" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/>
-		<MkInfo v-if="showRemoteWarning" :class="$style.remoteWarning" warn closable @close="remoteWarningDismissed = true">{{ i18n.ts.remoteFollowersWarning }}</MkInfo>
+		<SkRemoteFollowersWarning :class="$style.remoteWarning" :model="model"/>
 	</div>
 
 	<div ref="noteScroll" :class="$style.notes">
@@ -36,11 +36,12 @@ import { useRouter } from '@/router/supplier.js';
 import MkPageHeader from '@/components/global/MkPageHeader.vue';
 import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
 import { useScrollPositionManager } from '@/nirax.js';
-import MkInfo from '@/components/MkInfo.vue';
 import { createModel, createOptions, followersTab, followingTab, mutualsTab } from '@/scripts/following-feed-utils.js';
 import SkLazy from '@/components/global/SkLazy.vue';
 import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue';
+import SkRemoteFollowersWarning from '@/components/SkRemoteFollowersWarning.vue';
 
+const model = createModel();
 const {
 	userList,
 	withNonPublic,
@@ -48,8 +49,7 @@ const {
 	withBots,
 	withReplies,
 	onlyFiles,
-	remoteWarningDismissed,
-} = createModel();
+} = model;
 
 const router = useRouter();
 
@@ -58,8 +58,6 @@ const followingRecentNotes = shallowRef<InstanceType<typeof SkFollowingRecentNot
 const userScroll = shallowRef<InstanceType<typeof SkLazy>>();
 const noteScroll = shallowRef<HTMLElement>();
 
-const showRemoteWarning = computed(() => userList.value === 'followers' && !remoteWarningDismissed.value);
-
 const selectedUserId: Ref<string | null> = ref(null);
 
 function listReady(initialUserId?: string): void {
-- 
cgit v1.2.3-freya


From 5b48032681347af28cbb1c5bd94d5f55949b61aa Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sun, 17 Nov 2024 10:26:31 -0500
Subject: restore animation and styling in following-feed

---
 .../src/components/SkFollowingRecentNotes.vue      | 24 +++++++++++++++++++++-
 packages/frontend/src/pages/following-feed.vue     |  2 +-
 2 files changed, 24 insertions(+), 2 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/SkFollowingRecentNotes.vue b/packages/frontend/src/components/SkFollowingRecentNotes.vue
index 35fa83812f..6daa8feba5 100644
--- a/packages/frontend/src/components/SkFollowingRecentNotes.vue
+++ b/packages/frontend/src/components/SkFollowingRecentNotes.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<template #default="{ items: notes }">
 			<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
-				<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" @select="u => selectUser(u.id)"/>
+				<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" :class="props.selectedUserId == note.userId && $style.selected" @select="u => selectUser(u.id)"/>
 			</MkDateSeparatedList>
 		</template>
 	</MkPagination>
@@ -42,6 +42,7 @@ const props = defineProps<{
 	withReplies: boolean;
 	withBots: boolean;
 	onlyFiles: boolean;
+	selectedUserId?: string | null;
 }>();
 
 const emit = defineEmits<{
@@ -119,4 +120,25 @@ function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes)
 .panel {
 	background: var(--panel);
 }
+
+@keyframes border {
+	from {
+		border-left: 0 solid var(--accent);
+	}
+	to {
+		border-left: 6px solid var(--accent);
+	}
+}
+
+.selected {
+	animation: border 0.2s ease-out 0s 1 forwards;
+
+	&:first-child {
+		border-top-left-radius: 5px;
+	}
+
+	&:last-child {
+		border-bottom-left-radius: 5px;
+	}
+}
 </style>
diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
index 21e76b9094..91f74b2cf9 100644
--- a/packages/frontend/src/pages/following-feed.vue
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div ref="noteScroll" :class="$style.notes">
 		<MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs">
-			<SkFollowingRecentNotes ref="followingRecentNotes" :userList="userList" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles" @userSelected="userSelected" @loaded="listReady"/>
+			<SkFollowingRecentNotes ref="followingRecentNotes" :selectedUserId="selectedUserId" :userList="userList" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles" @userSelected="userSelected" @loaded="listReady"/>
 		</MkHorizontalSwipe>
 	</div>
 
-- 
cgit v1.2.3-freya