use compact rendering for following feed

packages/frontend/src/components/FollowingFeedEntry.vue

@@ -0,0 +1,111 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<div :class="$style.head">
+		<MkAvatar :class="$style.icon" :user="note.user" link preview indictor/>
+	</div>
+	<div :class="$style.tail">
+		<header :class="$style.header">
+			<MkA v-user-preview="note.user.id" :class="$style.headerName" :to="userPage(note.user)">
+				<MkUserName :user="note.user"/>
+			</MkA>
+			<MkA :to="notePage(note)">
+				<MkTime :time="note.createdAt" :class="$style.headerTime" colored/>
+			</MkA>
+		</header>
+		<div>
+			<MkA :class="$style.text" :to="notePage(note)" :title="getNoteSummary(note)">
+				<Mfm :text="getNoteSummary(note)" :isBlock="true" :plain="true" :nowrap="true" :isNote="true" :author="note.user"/>
+			</MkA>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import * as Misskey from 'misskey-js';
+import { getNoteSummary } from '@/scripts/get-note-summary.js';
+import { notePage } from '@/filters/note.js';
+import { userPage } from '@/filters/user.js';
+
+defineProps<{
+	note: Misskey.entities.Note
+}>();
+
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+	box-sizing: border-box;
+	padding: 12px 16px;
+	font-size: 0.9em;
+	overflow-wrap: break-word;
+	display: flex;
+	contain: content;
+}
+
+.head {
+	position: sticky;
+	top: 0;
+	flex-shrink: 0;
+	width: 42px;
+	height: 42px;
+	margin-right: 8px;
+}
+
+.tail {
+	flex: 1;
+	min-width: 0;
+}
+
+.header {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	white-space: nowrap;
+}
+
+.headerName {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+	overflow: hidden;
+	font-weight: bold;
+}
+
+.headerTime {
+	margin-left: auto;
+	font-size: 0.9em;
+}
+
+.icon {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.text {
+	display: flex;
+	width: 100%;
+	overflow: clip;
+}
+
+@container (max-width: 600px) {
+	.root {
+		padding: 16px;
+		font-size: 0.9em;
+	}
+}
+
+@container (max-width: 500px) {
+	.root {
+		padding: 12px;
+		font-size: 0.85em;
+	}
+}
+</style>

packages/frontend/src/pages/following-feed.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 					<template #default="{ items: notes }">
 						<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.list" :noGap="true">
-							<MkNote :key="note.id" :note="note" :withHardMute="true" :collapseRenote="true" :collapseReplies="true"/>
+							<FollowingFeedEntry :note="note"/>
 						</MkDateSeparatedList>
 					</template>
 				</MkPagination>
@@ -36,7 +36,7 @@ export const mutualsTab = 'mutuals' as const;
 </script>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, shallowRef } from 'vue';
+import { computed, ref, shallowRef } from 'vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
@@ -44,16 +44,9 @@ import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { infoImageUrl } from '@/instance.js';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
-import { defaultStore } from '@/store.js';
 import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import { PageHeaderItem } from '@/types/page-header.js';
-
+import FollowingFeedEntry from '@/components/FollowingFeedEntry.vue';
-// Load the correct note component
-const MkNote = defineAsyncComponent(
-	() => defaultStore.state.noteDesign === 'sharkey'
-		? import('@/components/SkNote.vue')
-		: import('@/components/MkNote.vue'),
-);
 
 const props = withDefaults(defineProps<{
 	initialTab?: FollowingFeedTab,