frontend/app/components/notes/content-warning.vue

<template>
    <div class="flex flex-col gap-1">
        <p class="text-sm leading-6 wrap-anywhere">
            {{ contentWarning || m.sour_seemly_bird_hike() }}
        </p>
        <Button @click="hidden = !hidden" variant="outline" size="sm" class="col-span-2">
            {{ 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) ? ")" : "" }}
        </Button>
    </div>
</template>

<script lang="ts" setup>
import * as m from "~~/paraglide/messages.js";
import { Button } from "../ui/button";

const { contentWarning, characterCount, attachmentCount } = defineProps<{
    contentWarning?: string;
    characterCount: number;
    attachmentCount: number;
}>();

const hidden = defineModel<boolean>({
    default: true,
});
</script>