refactor: ♻️ Simplify Note code with a provide/inject pattern

app/components/notes/content-warning.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-col gap-1">
         <p class="text-sm leading-6 wrap-anywhere">
-            {{ contentWarning || m.sour_seemly_bird_hike() }}
+            {{ note.spoiler_text || m.sour_seemly_bird_hike() }}
         </p>
         <Button
             @click="hidden = !hidden"
@@ -11,9 +11,7 @@
         >
             {{ hidden ? m.bald_direct_turtle_win() :
                 m.known_flaky_cockroach_dash() }}
-            {{ characterCount > 0 ? ` (${characterCount} characters` : "" }}
-            {{ attachmentCount > 0 ? `${characterCount > 0 ? " · " : " ("}${attachmentCount} file(s)` : "" }}
-            {{ (characterCount > 0 || attachmentCount > 0) ? ")" : "" }}
+            {{ constructText() }}
         </Button>
     </div>
 </template>
@@ -21,14 +19,33 @@
 <script lang="ts" setup>
 import * as m from "~~/paraglide/messages.js";
 import { Button } from "../ui/button";
+import { key } from "./provider";
 
-const { contentWarning, characterCount, attachmentCount } = defineProps<{
-    contentWarning?: string;
-    characterCount: number;
-    attachmentCount: number;
-}>();
+// biome-ignore lint/style/noNonNullAssertion: We want an error if not provided
+const { note } = inject(key)!;
+
+const attachmentCount = note.media_attachments.length;
+const characterCount = note.text?.length || 0;
 
 const hidden = defineModel<boolean>({
     default: true,
 });
+
+const constructText = () => {
+    const parts: string[] = [];
+
+    if (characterCount > 0) {
+        parts.push(
+            `${characterCount} character${characterCount === 1 ? "" : "s"}`,
+        );
+    }
+
+    if (attachmentCount > 0) {
+        parts.push(
+            `${attachmentCount} file${attachmentCount === 1 ? "" : "s"}`,
+        );
+    }
+
+    return parts.length > 0 ? ` (${parts.join(" · ")})` : "";
+};
 </script>