Add buttons & link previews to subnotes, start of new thread design

Should've made them separate commits but eeek I started working on them at the same time D:

packages/client/src/components/MkNote.vue

@@ -71,26 +71,7 @@
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
-			<footer class="footer">
+			<MkNoteFooter :note="appearNote"></MkNoteFooter>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
-					<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
-					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-					<i class="ph-smiley-bold ph-lg"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ph-minus-bold ph-lg"></i>
-				</button>
-				<XQuoteButton class="button" :note="appearNote"/>
-				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-					<i class="ph-dots-three-outline-bold ph-lg"></i>
-				</button>
-			</footer>
 		</div>
 	</article>
 </div>
@@ -113,15 +94,12 @@ import type * as misskey from 'calckey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
 import XNoteHeader from '@/components/MkNoteHeader.vue';
 import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
 import XMediaList from '@/components/MkMediaList.vue';
 import XCwButton from '@/components/MkCwButton.vue';
+import MkNoteFooter from '@/components/MkNoteFooter.vue';
 import XPoll from '@/components/MkPoll.vue';
-import XStarButton from '@/components/MkStarButton.vue';
 import XRenoteButton from '@/components/MkRenoteButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkVisibility from '@/components/MkVisibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { focusPrev, focusNext } from '@/scripts/focus';
@@ -170,7 +148,6 @@ const isRenote = (
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
-const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
@@ -187,7 +164,6 @@ const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
 const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
 
 const keymap = {
 	'r': () => reply(true),
@@ -229,14 +205,6 @@ function react(viaKeyboard = false): void {
 	});
 }
 
-function undoReact(note): void {
-	const oldReaction = note.myReaction;
-	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
-		noteId: note.id,
-	});
-}
-
 const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
 
 function onContextmenu(ev: MouseEvent): void {
@@ -594,36 +562,6 @@ function readPromo() {
 					font-size: 80%;
 				}
 			}
-
-			> .footer {
-				display: flex;
-				flex-wrap: wrap;
-				> .button {
-					margin: 0;
-					padding: 8px;
-					opacity: 0.7;
-					flex-grow: 1;
-					max-width: 3.5em;
-					width: max-content;
-					min-width: max-content;
-					&:first-of-type {
-						margin-left: -.5em;
-					}
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-
-					> .count {
-						display: inline;
-						margin: 0 0 0 8px;
-						opacity: 0.7;
-					}
-
-					&.reacted {
-						color: var(--accent);
-					}
-				}
-			}
 		}
 	}
 

packages/client/src/components/MkNoteDetailed.vue

@@ -53,7 +53,7 @@
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content">
-					<div class="text" @click.self="router.push(notePage(appearNote))">
+					<div class="text">
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>

packages/client/src/components/MkNoteFooter.vue

@@ -0,0 +1,159 @@
+<template>
+	<footer ref="el" class="footer" @click.stop.prevent>
+		<XReactionsViewer v-if="!conversation" ref="reactionsViewer" :note="appearNote"/>
+		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
+			<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
+			<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
+			<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
+		</button>
+		<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+		<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
+		<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
+			<i class="ph-smiley-bold ph-lg"></i>
+		</button>
+		<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
+			<i class="ph-minus-bold ph-lg"></i>
+		</button>
+		<XQuoteButton class="button" :note="appearNote"/>
+		<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
+			<i class="ph-dots-three-outline-bold ph-lg"></i>
+		</button>
+		<XReactionsViewer v-if="conversation" ref="reactionsViewer" :note="appearNote"/>
+	</footer>
+</template>
+
+<script lang="ts" setup>
+import { inject, ref } from 'vue';
+import type { Ref } from 'vue';
+import type * as misskey from 'calckey-js';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XStarButton from '@/components/MkStarButton.vue';
+import XRenoteButton from '@/components/MkRenoteButton.vue';
+import XQuoteButton from '@/components/MkQuoteButton.vue';
+import { pleaseLogin } from '@/scripts/please-login';
+import * as os from '@/os';
+import { reactionPicker } from '@/scripts/reaction-picker';
+import { i18n } from '@/i18n';
+import { getNoteMenu } from '@/scripts/get-note-menu';
+import { deepClone } from '@/scripts/clone';
+import { useNoteCapture } from '@/scripts/use-note-capture';
+
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+	conversation?: misskey.entities.Note[];
+}>();
+
+let note = $ref(deepClone(props.note));
+
+const isRenote = (
+	note.renote != null &&
+	note.text == null &&
+	note.fileIds.length === 0 &&
+	note.poll == null
+);
+
+const el = ref<HTMLElement>();
+const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
+const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const reactButton = ref<HTMLElement>();
+let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
+const isDeleted = ref(false);
+const translation = ref(null);
+const translating = ref(false);
+
+useNoteCapture({
+	rootEl: el,
+	note: $$(appearNote),
+	isDeletedRef: isDeleted,
+});
+
+
+function reply(viaKeyboard = false): void {
+	pleaseLogin();
+	os.post({
+		reply: appearNote,
+		animation: !viaKeyboard,
+	}, () => {
+		focus();
+	});
+}
+
+function react(viaKeyboard = false): void {
+	pleaseLogin();
+	blur();
+	reactionPicker.show(reactButton.value, reaction => {
+		os.api('notes/reactions/create', {
+			noteId: appearNote.id,
+			reaction: reaction,
+		});
+	}, () => {
+		focus();
+	});
+}
+
+function undoReact(note): void {
+	const oldReaction = note.myReaction;
+	if (!oldReaction) return;
+	os.api('notes/reactions/delete', {
+		noteId: note.id,
+	});
+}
+
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
+
+
+function menu(viaKeyboard = false): void {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
+		viaKeyboard,
+	}).then(focus);
+}
+
+function focus() {
+	el.value.focus();
+}
+
+function blur() {
+	el.value.blur();
+}
+
+
+</script>
+
+
+<style lang="scss" scoped>
+.footer {
+	display: flex;
+	flex-wrap: wrap;
+	margin-top: .4em;
+	pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
+
+	> .button {
+		margin: 0;
+		padding: 8px;
+		opacity: 0.7;
+		flex-grow: 1;
+		max-width: 3.5em;
+		width: max-content;
+		min-width: max-content;
+		pointer-events: all;
+		&:first-of-type {
+			margin-left: -.5em;
+		}
+		&:hover {
+			color: var(--fgHighlighted);
+		}
+
+		> .count {
+			display: inline;
+			margin: 0 0 0 8px;
+			opacity: 0.7;
+		}
+
+		&.reacted {
+			color: var(--accent);
+		}
+	}
+}
+</style>

packages/client/src/components/MkNoteSub.vue

@@ -16,10 +16,14 @@
 					<MkSubNoteContent class="text" :note="note"/>
 				</div>
 			</div>
+			<MkNoteFooter :note="note" :conversation="conversation"></MkNoteFooter>
 		</div>
 	</div>
 	<template v-if="conversation">
-		<template v-if="depth < 5">
+		<template v-if="depth < 5 && replies.length == 1">
+			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth"/>
+		</template>
+		<template v-else-if="depth < 5">
 			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
 		</template>
 		<div v-else-if="replies.length > 0" class="more">
@@ -35,6 +39,7 @@ import * as misskey from 'calckey-js';
 import XNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import XCwButton from '@/components/MkCwButton.vue';
+import MkNoteFooter from '@/components/MkNoteFooter.vue';
 import { notePage } from '@/filters/note';
 import { useRouter } from '@/router';
 import * as os from '@/os';
@@ -122,8 +127,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 	}
 
 	> .reply, > .more {
-		border-left: solid 0.5px var(--divider);
+		// border-left: solid 0.5px var(--divider);
 		margin-top: 10px;
+		&.single {
+			padding: 0 !important;
+		}
 	}
 
 	> .more {

packages/client/src/components/MkReactionsViewer.reaction.vue

@@ -97,6 +97,7 @@ useTooltip(buttonRef, async (showing) => {
 	margin: 2px;
 	padding: 0 6px;
 	border-radius: 4px;
+	pointer-events: all;
 
 	&.canToggle {
 		background: rgba(0, 0, 0, 0.05);

packages/client/src/components/MkReactionsViewer.vue

@@ -21,9 +21,11 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 
 <style lang="scss" scoped>
 .tdflqwzn {
-	margin: 4px -2px 0 -2px;
+	margin: 0px -2px 0 -2px;
 	width: 100%;
-
+	.reply & {
+		width: auto;
+	}
 	&:empty {
 		display: none;
 	}