Note Display Components#

Overview#

Misskey's frontend renders notes through a hierarchy of four Vue components, each targeting a different context. All share a common composable, useNote, that centralises state and actions.

Composition diagram#

MkNote / MkNoteDetailed
  ├── MkNoteSub (reply parent, rendered above the article)
  ├── [renote banner] (if isRenote)
  ├── article
  │ ├── MkNoteHeader
  │ ├── Mfm (text)
  │ ├── MkMediaList, MkPoll, MkUrlPreview …
  │ └── MkNoteSimple (inline quote — the renote target)
  └── [MkNoteDetailed only] tabs: replies | renotes | reactions
        └── MkNoteSub (each reply child)

MkNoteSimple
  ├── MkNoteHeader
  └── MkSubNoteContent (text, files, polls — no actions)

MkNoteSub
  ├── [if depth < 5] self
  └── MkNoteSub (recursive, depth + 1)

Component Details#

MkNote#

MkNote.vue — the standard timeline card.

• Props: note, pinned?, mock?, withHardMute? 1
• Visibility guard: the root <div> is only rendered when !hardMuted && !hideByPlugin && muted === false; muted notes collapse to a dismissible banner 2
• Renote unwrapping: appearNote (from useNote) resolves the true content note; the renote banner is shown separately above the article 3
• Inline quote: MkNoteSimple is rendered inside .quote when appearNote.renoteId exists 4
• Long content: collapsed to max-height: 9em when isLong is true; toggled with "Show more / Show less" buttons 5
• Performance: content-visibility: auto (skipRender CSS class) applied when prefer.s.skipNoteRender is enabled; contain: content is always active 6
• Keyboard shortcuts: r reply, e/a/+ react, q renote, m menu, v/Enter toggle CW/collapse 7

MkNoteDetailed#

MkNoteDetailed.vue — the permalink/detail view, rendered larger (font-size: 1.2em).

• Extra features vs MkNote: expandable conversation thread above, tabs for replies/renotes/reactions below 8
• Reply thread loading: loadConversation() calls notes/conversation; loadReplies() calls notes/children (limit 30) 9
• Renotes/reactions tabs: backed by Paginator instances querying notes/renotes and notes/reactions 10
• isDeleted guard: the whole note body is hidden when isDeleted is true (from useNote reactive state) 11
• No hard-mute prop: withHardMute is not passed; detail view always shows the note if not soft-muted 12

MkNoteSimple#

MkNoteSimple.vue — lightweight embed for quoted/renoted content; no action buttons.

• Accepts note: Note | null 13
• Deleted note handling: when note is null, renders a hatched "deleted note" placeholder instead of content 14
• Delegates body rendering to MkSubNoteContent 15
• CW toggle is self-contained via a local showContent ref 16

MkNoteSub#

MkNoteSub.vue — used for reply ancestors (above notes) and reply children (in MkNoteDetailed).

• Recursive: renders itself for each child reply, up to depth 5; beyond that shows a "view more" link 17
• Accepts note: Note | null: null renders a hatched deleted-note placeholder 18
• Word-mute check: computed on mount via checkWordMute 19
• Detail mode: when detail === true, fetches up to 5 child notes via notes/children 20

Shared Logic: useNote Composable#

All note-display components (except MkNoteSimple/MkNoteSub) call useNote (composables/use-note.ts), which provides:

• appearNote — the actual note to display (renote target if isRenote, else the note itself) 21
• isRenote — determined by Misskey.note.isPureRenote() 22
• isDeleted — reactive flag set when a noteDeleted global event fires for this note's ID 23
• Mute state: calculateMuteStatus() checks word mutes across the primary note, its reply parent, and its renote target 24; returns matched words, false, or 'sensitiveMute'
• Hard mute: separate check against $i.hardMutedWords 25
• All user actions (reply, renote, react, showMenu, clip) are gated by login status and mock prop 26

Edge Case: Deleted Notes in Quoted/Renoted Content#

When a renoted or quoted note is deleted, the API returns the outer renote object with renote: null:

• In MkNote/MkNoteDetailed: isRenote && note.renote == null renders a hatched "deleted note" div in place of the article 27 28
• In MkNoteSimple: the prop is typed Note | null; receiving null renders the hatched placeholder 14
• In MkNoteSub: same Note | null contract; null shows the placeholder 18

The hatched background is applied via a repeating CSS gradient (repeating-linear-gradient(135deg, ...)) on the .deleted class, consistent across all four components.

Key Sub-Components#