fix: pin and unpin comment form

[Flo0806]

Summary

• Fix pin/unpin feature

Related issue(s)

Closes #226

Type of change

• Bug fix
• Feature
• Refactor
• Docs
• CI

Checklist

• Tests added/updated
• i18n keys added/updated (if needed)
• No breaking changes

Summary by CodeRabbit

• New Features

  • Added pin toggle button for comment form with dynamic styling.
  • Introduced sticky header bar for comment form with avatar, username, and editing indicator.
  • Added draft action (discard) button in header.

• Bug Fixes

  • Simplified comment form rendering logic to improve stability.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

The changes restructure the comment form UI to move sticky bar styling from parent component refs to internal state management. The active computed property now depends solely on pin state, and the component's root element directly applies sticky styling. The parent's wrapper div and ref are removed, simplifying the comment form rendering.

Changes

Cohort / File(s)	Summary
Comment Form Header Restructuring app/components/issue/IssueCommentForm.vue	Simplified active computed to depend only on pinEnabled.value; removed public export. Rewrote root wrapper to bind sticky bar class directly to active. Composed EditorMarkdownEditor with header-left (avatar, username, editing indicator, mode toggle) and header-right (pin button, error rendering, draft actions) slots. Moved submission controls into new layout structure.
Comment Form Wrapper Removal app/components/work-item/WorkItemConversation.vue	Removed wrapper div and commentFormRef ref that conditionally applied sticky styling. Replaced with direct IssueCommentForm component invocation, preserving props and event handlers.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A sticky situation, now fixed with care,
The comment form's heart is everywhere!
Pin toggles true, the bar holds fast,
No more unwanted stickiness to last. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary fix addressing the pin/unpin feature bug.
Description check	✅ Passed	The description includes all major sections: summary of fix, related issue reference, type of change marked correctly, and checklist. Minor detail: 'What changed?' and 'Why?' under Summary are not explicitly detailed but the core structure is complete.
Linked Issues check	✅ Passed	The code changes fix the pin/unpin mechanism by refactoring the active state logic in IssueCommentForm, meeting issue #226's requirement for proper card pinning/unpinning behavior.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the pin/unpin feature: the active computed property logic was corrected and UI restructured to support proper sticky behavior toggling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/pinned-card

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can validate your CodeRabbit configuration file in your editor.

If your editor has YAML language server, you can enable auto-completion and validation by adding # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json at the top of your CodeRabbit configuration file.