Surface daily quest and streak in the editor - #3326
Conversation
Greptile SummaryThis PR surfaces daily quest progress and posting streak info as a small dismissible chip just above the editor toolbar, triggered during post composition (not replies, not edit-mode). It reuses the existing quests query, adds a pure
Confidence Score: 5/5Safe to merge — the change is additive, well-isolated behind multiple guards, and reuses an existing query with no new endpoints. All three issues flagged in the previous review round (edit-mode chip leak, global dismiss flag not scoped to user, and clipboard/quest chip stacking) have been addressed correctly. The quests query is disabled via No files require special attention. Important Files Changed
Sequence Diagram%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
participant MV as MarkdownEditorView
participant ET as EditorToolbar
participant Q as useGetQuestsQuery
participant API as Quests API
participant D as deriveQuestChipState
MV->>ET: isReply, isEditMode props
ET->>Q: "username (undefined if isReply || isEditMode)"
Note over Q: enabled: !!username skips fetch when undefined
Q->>API: GET /quests (only for new posts)
API-->>Q: QuestsResponse
Q-->>ET: questsData
ET->>D: deriveQuestChipState(questsData)
D-->>ET: "QuestChipState | null"
Note over ET: Guards: isReply, isEditMode, dismissed, isPreviewActive, isExtensionVisible, clipboardChipVisible, questChip.visible
ET-->>MV: Renders chip or null
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
participant MV as MarkdownEditorView
participant ET as EditorToolbar
participant Q as useGetQuestsQuery
participant API as Quests API
participant D as deriveQuestChipState
MV->>ET: isReply, isEditMode props
ET->>Q: "username (undefined if isReply || isEditMode)"
Note over Q: enabled: !!username skips fetch when undefined
Q->>API: GET /quests (only for new posts)
API-->>Q: QuestsResponse
Q-->>ET: questsData
ET->>D: deriveQuestChipState(questsData)
D-->>ET: "QuestChipState | null"
Note over ET: Guards: isReply, isEditMode, dismissed, isPreviewActive, isExtensionVisible, clipboardChipVisible, questChip.visible
ET-->>MV: Renders chip or null
Reviews (2): Last reviewed commit: "fix(editor): scope quest chip dismissal ..." | Re-trigger Greptile |
|
Warning Review limit reached
Next review available in: 39 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR adds a "quest chip" UI element to the markdown editor toolbar. A new utility derives quest chip state (visibility, daily post completion, streak, at-risk status) from quest data. The toolbar fetches quests conditionally, renders the chip with dismiss/navigate handlers, adds styles and localization strings. ChangesQuest Chip Feature
Estimated code review effort: 2 (Simple) | ~15 minutes Sequence Diagram(s)sequenceDiagram
participant MarkdownEditorView
participant EditorToolbar
participant useGetQuestsQuery
participant deriveQuestChipState
MarkdownEditorView->>EditorToolbar: render with isReply prop
EditorToolbar->>useGetQuestsQuery: fetch quests (disabled if isReply)
useGetQuestsQuery-->>EditorToolbar: questsData
EditorToolbar->>deriveQuestChipState: derive chip state from questsData
deriveQuestChipState-->>EditorToolbar: QuestChipState or null
EditorToolbar->>EditorToolbar: render quest chip if visible and not dismissed
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/markdownEditor/styles/editorToolbarStyles.ts (2)
133-157: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate style definitions with
clipboardChip*.
questChipWrapper/questChip/questChipClose/questChipTextduplicate the existingclipboardChip*styles verbatim. Consider extracting a shared base style object.♻️ Suggested consolidation
+const _dismissibleChipWrapper: ViewStyle = { + flexDirection: 'row', + alignItems: 'center', + alignSelf: 'flex-start', + marginHorizontal: 12, + marginTop: 6, + marginBottom: 4, + paddingLeft: 12, + paddingRight: 4, + paddingVertical: 6, + borderRadius: 16, + backgroundColor: '$primaryLightBackground', +}; +const _dismissibleChipText = { + color: '$primaryDarkText', + fontSize: 12, + fontWeight: '600', +}; ... - clipboardChipWrapper: { ... } as ViewStyle, + clipboardChipWrapper: { ..._dismissibleChipWrapper } as ViewStyle, ... - questChipWrapper: { ... } as ViewStyle, + questChipWrapper: { ..._dismissibleChipWrapper } as ViewStyle,🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/markdownEditor/styles/editorToolbarStyles.ts` around lines 133 - 157, The questChip styles duplicate the existing clipboardChip styles, so consolidate the repeated definitions in editorToolbarStyles by extracting a shared base style object and reusing it for both chip variants. Update questChipWrapper, questChip, questChipClose, and questChipText to reference the shared style alongside any chip-specific overrides, keeping the existing clipboardChip* and questChip* symbols intact for clarity.
158-160: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winHardcoded hex color instead of theme variable.
Every other color in this file uses a
$-prefixed EStyleSheet variable;#f97316bypasses theming.♻️ Suggested fix
questChipTextAtRisk: { - color: '`#f97316`', + color: '$warningColor', // or whichever theme token represents "at risk"/warning orange },🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/markdownEditor/styles/editorToolbarStyles.ts` around lines 158 - 160, The questChipTextAtRisk style is using a hardcoded hex color instead of the file’s theme-driven EStyleSheet variables, which bypasses theming. Update the questChipTextAtRisk color in editorToolbarStyles to use the same $-prefixed variable pattern used by the other styles in this stylesheet, so it participates in theme changes consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/markdownEditor/styles/editorToolbarStyles.ts`:
- Around line 133-157: The questChip styles duplicate the existing clipboardChip
styles, so consolidate the repeated definitions in editorToolbarStyles by
extracting a shared base style object and reusing it for both chip variants.
Update questChipWrapper, questChip, questChipClose, and questChipText to
reference the shared style alongside any chip-specific overrides, keeping the
existing clipboardChip* and questChip* symbols intact for clarity.
- Around line 158-160: The questChipTextAtRisk style is using a hardcoded hex
color instead of the file’s theme-driven EStyleSheet variables, which bypasses
theming. Update the questChipTextAtRisk color in editorToolbarStyles to use the
same $-prefixed variable pattern used by the other styles in this stylesheet, so
it participates in theme changes consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 35311d50-5111-446b-8c88-d34ffa796092
📒 Files selected for processing (6)
src/components/markdownEditor/children/editorToolbar.tsxsrc/components/markdownEditor/styles/editorToolbarStyles.tssrc/components/markdownEditor/view/markdownEditorView.tsxsrc/config/locales/en-US.jsonsrc/utils/questChip.test.tssrc/utils/questChip.ts
Phase 1 of quest surfacing: the long-form editor shows a small dismissible chip above the toolbar with the daily post quest progress and check-in streak, so the strongest habit loop is visible at the moment of creation instead of only under Perks.
What
deriveQuestChipStatehelper with unit tests; visibility = active streak or incomplete daily post quest.Notes
Summary by CodeRabbit
New Features
Bug Fixes