From 369453794b815df02f3952e8851b97688124adb3 Mon Sep 17 00:00:00 2001
From: mStar <me@mstar.dev>
Date: Sun, 13 Jul 2025 22:23:35 +0200
Subject: [PATCH] Frame out note rendering

---
 frontend-vue/src/components/note/Note.vue     | 40 +++++++++++++++++++
 .../src/components/util/FormattedText.vue     | 18 +++++++--
 frontend-vue/src/stores/note.ts               | 11 +++++
 3 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 frontend-vue/src/components/note/Note.vue
 create mode 100644 frontend-vue/src/stores/note.ts

diff --git a/frontend-vue/src/components/note/Note.vue b/frontend-vue/src/components/note/Note.vue
new file mode 100644
index 0000000..3173ba8
--- /dev/null
+++ b/frontend-vue/src/components/note/Note.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import PreviewHeader from '@/components/user/PreviewHeader.vue'
+import type { Note as NoteData } from '@/stores/note.ts'
+import { ref } from 'vue'
+import FormattedText from '@/components/util/FormattedText.vue'
+
+const props = defineProps<{
+  note: NoteData;
+}>()
+
+let collapsed = ref<boolean>(true);
+
+function shortenContent(): string {
+  if (!collapsed.value) return props.note.rawContent;
+  if (props.note.rawContent.length > 200) {
+    const words = props.note.rawContent.split(' ');
+    let outString = '';
+    for (const word of words) {
+      if (outString.length > 200) {
+        return outString + '...';
+      }
+      outString += word + ' ';
+    }
+    return outString;
+  } else {
+    return props.note.rawContent;
+  }
+}
+
+</script>
+
+<template>
+  <!-- Preview for reply here, decide if this component can also serve as such a preview -->
+  <PreviewHeader :user="props.note.owner" />
+  <FormattedText :raw-text="shortenContent" :hashtags="props.note.hashtags" :pinged="props.note.pings" />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend-vue/src/components/util/FormattedText.vue b/frontend-vue/src/components/util/FormattedText.vue
index 04d40d4..824d51e 100644
--- a/frontend-vue/src/components/util/FormattedText.vue
+++ b/frontend-vue/src/components/util/FormattedText.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
+  import type { User } from '@/stores/userdata.ts'
+
   const props = defineProps<{
     rawText: string // Raw text (already pre-transformed by server into Linstrom format)
+    // User pings and hashtags not in here will not be highlighted
+    // Important for username rendering
+    pinged?: User[]
+    hashtags?: string[]
   }>()
-// TODO: Start figuring out how to format this stuff.
-// Probably something akin to the treeificator. Marshal text into tree first,
-// then adjust tree nodes to types that unmarshal into html
+  // TODO: Start figuring out how to format this stuff.
+  // Probably something akin to the treeificator. Marshal text into tree first,
+  // then adjust tree nodes to types that unmarshal into html
+  // Or single pass transform, keeping a stack of the current context
+  function render(): string {
+    return props.rawText
+  }
 </script>
 <template>
-  <p>{{props.rawText}}</p>
+  <div v-html="render" />
 </template>
diff --git a/frontend-vue/src/stores/note.ts b/frontend-vue/src/stores/note.ts
new file mode 100644
index 0000000..2b05707
--- /dev/null
+++ b/frontend-vue/src/stores/note.ts
@@ -0,0 +1,11 @@
+import type { User } from '@/stores/userdata.ts'
+
+export interface Note {
+  id: string;
+  rawContent: string;
+  owner: User;
+  repliesTo?: Note;
+  quotes?: Note[];
+  pings: User[];
+  hashtags: string[];
+}