INCOMPLETE CfNote

packages/frontend/src/components/CfNote.vue

@@ -0,0 +1,50 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Campfire contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<CfNoteHeader :note="note" :sub="false" :class="$style.header"></CfNoteHeader>
+	<CfNoteInner :note="appearNote" :sub="false" :withHardMute="withHardMute"></CfNoteInner>
+	<CfNoteFooter :note="appearNote"></CfNoteFooter>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { inject, computed } from 'vue';
+import { DI } from '@/di';
+import { isPureRenote } from 'misskey-js/built/note';
+import { getAppearNote } from '@/utility/get-appear-note';
+
+const props = withDefaults(defineProps<{
+	note: Misskey.entities.Note;
+	pinned?: boolean;
+	withHardMute?: boolean;
+}>(), {
+	pinned: false,
+	withHardMute: false,
+});
+
+const isBoost = computed(() => Misskey.note.isPureRenote(props.note));
+const appearNote = computed(() => getAppearNote(props.note));
+
+const mock = inject(DI.mock, false);
+
+const emit = defineEmits<{
+	(ev: 'reaction', emoji: string): void;
+	(ev: 'removeReaction', emoji: string): void;
+}>();
+
+</script>
+
+<style module lang="scss">
+.root {
+
+}
+
+.header {
+	// TODO sticky top
+}
+</style>

packages/frontend/src/components/CfNoteInner.vue

@@ -0,0 +1,19 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<CfNoteHeader :note="note" :sub="sub"></CfNoteHeader>
+	<CfNote v-if="note.reply && !sub" :note="note.reply" :sub="true" :withHardMute="withHardMute"></CfNote>
+	<CfNoteBody v-if="hasBody" :note="note"></CfNoteBody>
+</template>
+
+<script setup lang="ts">
+
+import CfNote from '@/components/CfNote.vue';
+</script>
+
+<style module lang="scss">
+
+</style>

packages/frontend/src/components/DynamicNote.vue

@@ -17,29 +17,43 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script setup lang="ts">
 import * as Misskey from 'misskey-js';
-import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
+import { computed, defineAsyncComponent, provide, useTemplateRef } 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 type CfNote from '@/components/CfNote.vue';
 import { prefer } from '@/preferences';
+import { DI } from '@/di';
 
-const XNote = computed(() =>
-	prefer.r.noteDesign.value === 'misskey'
-		? defineAsyncComponent(() => import('@/components/MkNote.vue'))
-		: defineAsyncComponent(() => import('@/components/SkNote.vue')),
-);
+const XNote = computed(() => {
+	switch (prefer.r.noteDesign.value) {
+		case 'misskey':
+			return defineAsyncComponent(() => import('@/components/MkNote.vue'));
+		case 'campfire':
+			return defineAsyncComponent(() => import('@/components/CfNote.vue'));
+		default:
+			return defineAsyncComponent(() => import('@/components/SkNote.vue'));
+	}
+});
 
-const rootEl = useTemplateRef<ComponentExposed<typeof MkNote | typeof SkNote>>('rootEl');
+type XType = ComponentExposed<typeof MkNote> | ComponentExposed<typeof SkNote> | ComponentExposed<typeof CfNote>;
+
+const rootEl = useTemplateRef<XType>('rootEl');
 
 defineExpose({ rootEl });
 
-defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note;
 	pinned?: boolean;
 	mock?: boolean;
 	withHardMute?: boolean;
 }>();
 
+// CfNote assumes that mock is already injected
+// TODO consider providing this directly from the usage site
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+provide(DI.mock, props.mock);
+
 const emit = defineEmits<{
 	(ev: 'reaction', emoji: string): void;
 	(ev: 'removeReaction', emoji: string): void;

packages/frontend/src/preferences/def.ts

@@ -435,7 +435,7 @@ export const PREF_DEF = {
 		default: null as string | null,
 	},
 	noteDesign: {
-		default: 'sharkey' as 'sharkey' | 'misskey',
+		default: 'sharkey' as 'sharkey' | 'misskey' | 'campfire',
 	},
 	notificationClickable: {
 		default: false,