From cea77f3e2c799d062adbd78c289c7094f6ada091 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 27 Feb 2025 10:26:36 -0500
Subject: emit "show" event from MkLazy

---
 packages/frontend/src/components/global/MkLazy.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

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

diff --git a/packages/frontend/src/components/global/MkLazy.vue b/packages/frontend/src/components/global/MkLazy.vue
index f35932ae77..29908f303d 100644
--- a/packages/frontend/src/components/global/MkLazy.vue
+++ b/packages/frontend/src/components/global/MkLazy.vue
@@ -16,10 +16,20 @@ import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, shallowRef } fr
 const rootEl = shallowRef<HTMLDivElement>();
 const showing = ref(false);
 
+const emit = defineEmits<{
+	(ev: 'show'): void,
+}>();
+
 const observer = new IntersectionObserver(
 	(entries) => {
 		if (entries.some((entry) => entry.isIntersecting)) {
 			showing.value = true;
+
+			// Disconnect to avoid observer soft-leaks
+			observer.disconnect();
+
+			// Notify containing element to trigger edge logic
+			emit('show');
 		}
 	},
 );
-- 
cgit v1.2.3-freya


From 9e833f724b61bfbe0f09bb09027650020016f30d Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 27 Feb 2025 10:27:00 -0500
Subject: add DynamicNote to encapsulate MkNote / SkNote switching logic

---
 packages/frontend/src/components/DynamicNote.vue | 49 ++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 packages/frontend/src/components/DynamicNote.vue

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

diff --git a/packages/frontend/src/components/DynamicNote.vue b/packages/frontend/src/components/DynamicNote.vue
new file mode 100644
index 0000000000..6703099591
--- /dev/null
+++ b/packages/frontend/src/components/DynamicNote.vue
@@ -0,0 +1,49 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<XNote
+	ref="rootEl"
+	:note="note"
+	:pinned="pinned"
+	:mock="mock"
+	:withHardMute="withHardMute"
+	@reaction="emoji => emit('reaction', emoji)"
+	@removeReaction="emoji => emit('removeReaction', emoji)"
+/>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { computed, defineAsyncComponent, shallowRef } from 'vue';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import type MkNote from '@/components/MkNote.vue';
+import type SkNote from '@/components/SkNote.vue';
+import { defaultStore } from '@/store';
+
+const XNote = computed(() =>
+	defineAsyncComponent(() =>
+		defaultStore.reactiveState.noteDesign.value === 'misskey'
+			? import('@/components/MkNote.vue')
+			: import('@/components/SkNote.vue'),
+	),
+);
+
+const rootEl = shallowRef<ComponentExposed<typeof MkNote | typeof SkNote>>();
+
+defineExpose({ rootEl });
+
+defineProps<{
+	note: Misskey.entities.Note;
+	pinned?: boolean;
+	mock?: boolean;
+	withHardMute?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'reaction', emoji: string): void;
+	(ev: 'removeReaction', emoji: string): void;
+}>();
+</script>
-- 
cgit v1.2.3-freya


From 20e2a6e95aefea2a84943e4846ad9bfc26755afd Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 27 Feb 2025 10:27:48 -0500
Subject: add SkFetchNote to render a note by ID

---
 locales/index.d.ts                               |  4 ++
 packages/frontend/src/components/SkFetchNote.vue | 74 ++++++++++++++++++++++++
 sharkey-locales/en-US.yml                        |  1 +
 3 files changed, 79 insertions(+)
 create mode 100644 packages/frontend/src/components/SkFetchNote.vue

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

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 4907754394..ee99a9513d 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -11665,6 +11665,10 @@ export interface Locale extends ILocale {
      * Files removed:
      */
     "filesRemoved": string;
+    /**
+     * Failed to load no
+     */
+    "cannotLoadNote": string;
     "_flash": {
         /**
          * Flash Content Hidden
diff --git a/packages/frontend/src/components/SkFetchNote.vue b/packages/frontend/src/components/SkFetchNote.vue
new file mode 100644
index 0000000000..57577aa15b
--- /dev/null
+++ b/packages/frontend/src/components/SkFetchNote.vue
@@ -0,0 +1,74 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkLazy @show="showing = true">
+	<MkLoading v-if="state === 'loading'"/>
+
+	<div v-if="state === 'error'">{{ i18n.ts.cannotLoadNote }}</div>
+
+	<DynamicNote v-if="state === 'done' && note" :note="note"/>
+</MkLazy>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/scripts/misskey-api';
+import DynamicNote from '@/components/DynamicNote.vue';
+
+const props = withDefaults(defineProps<{
+	noteId: string,
+	lazy?: boolean,
+}>(), {
+	lazy: true,
+});
+
+// Lazy-load, unless props.lazy is false.
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const showing = ref(!props.lazy);
+const state = ref<'loading' | 'error' | 'done'>('loading');
+const note = ref<Misskey.entities.Note | null>(null);
+
+watch(
+	[
+		() => props.noteId,
+		() => showing.value,
+	],
+	async ([noteId, show]) => {
+		// Wait until the note is visible to avoid bombarding the API with requests.
+		if (!show) return;
+
+		// Unload the old note
+		note.value = null;
+		state.value = 'loading';
+
+		// Fetch the new note
+		const newNote = await misskeyApi('notes/show', { noteId }).catch(() => null);
+
+		// Check for race conditions (ex. the note changed again while the first request was still running)
+		if (noteId !== props.noteId) return;
+
+		// Check for errors
+		if (!newNote) {
+			state.value = 'error';
+			return;
+		}
+
+		// Display the new note
+		note.value = newNote;
+		state.value = 'done';
+	},
+	{
+		immediate: true,
+	},
+);
+
+</script>
+
+<style module lang="scss">
+
+</style>
diff --git a/sharkey-locales/en-US.yml b/sharkey-locales/en-US.yml
index 7e69c9b97d..5336a36340 100644
--- a/sharkey-locales/en-US.yml
+++ b/sharkey-locales/en-US.yml
@@ -170,6 +170,7 @@ blockingYou: "Blocking you"
 warnExternalUrl: "Show warning when opening external URLs"
 flash: "Flash"
 filesRemoved: "Files removed:"
+cannotLoadNote: "Failed to load no"
 _flash:
   contentHidden: "Flash Content Hidden"
   poweredByRuffle: "Powered by Ruffle."
-- 
cgit v1.2.3-freya


From c02fd478111ae2369022b1d0a069f88a4444229d Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 27 Feb 2025 11:18:53 -0500
Subject: fix formatting in SkFetchNote

---
 packages/frontend/src/components/SkFetchNote.vue | 5 -----
 1 file changed, 5 deletions(-)

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

diff --git a/packages/frontend/src/components/SkFetchNote.vue b/packages/frontend/src/components/SkFetchNote.vue
index 57577aa15b..ab702c28f8 100644
--- a/packages/frontend/src/components/SkFetchNote.vue
+++ b/packages/frontend/src/components/SkFetchNote.vue
@@ -66,9 +66,4 @@ watch(
 		immediate: true,
 	},
 );
-
 </script>
-
-<style module lang="scss">
-
-</style>
-- 
cgit v1.2.3-freya