feat: Add tooltips to questions #5213
Conversation
|
@Paribesh01 is attempting to deploy a commit to the formbricks Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for following the naming conventions for pull request titles! 🙏 |
WalkthroughThis change introduces tooltip functionality to survey questions throughout the codebase. A new optional Assessment against linked issues
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (18)
apps/web/modules/survey/editor/components/matrix-question-form.tsx (3)
121-150: Consider consistent margins between buttonsThe "Add Description" and "Add Tooltip" buttons have slightly different margin classes:
className="mr-3 mt-3"for the description buttonclassName="mt-4"for the tooltip buttonThis might cause visual alignment inconsistencies when both buttons are displayed.
- className="mr-3 mt-3" + className="mr-3 mt-3" - className="mt-4" + className="mr-3 mt-3"
120-186: Consider extracting the subheader and tooltip UI pattern to a reusable componentThe pattern of conditionally rendering "Add" buttons for subheader and tooltip, followed by rendering input fields when they're defined, is repeated across multiple question form components.
Consider creating a reusable component like
QuestionAdditionalFieldsthat encapsulates this behavior to reduce code duplication and ensure consistency across different question types.
169-186: Tooltip input is missing validationWhile the main headline field has validation logic and the
isInvalidprop is passed to theQuestionFormInputfor tooltips, there's no specific validation logic for tooltip content similar to how rows and columns haveisLabelValidForAllLanguageschecks.Consider adding validation logic for tooltips, especially if there are length restrictions or required formatting rules:
isInvalid={isInvalid && !isLabelValidForAllLanguages(question.tooltip, localSurvey.languages)}apps/web/modules/survey/editor/components/cal-question-form.tsx (3)
65-94: Consider consistent margins between buttonsThe "Add Description" and "Add Tooltip" buttons have slightly different margin classes:
className="mr-3 mt-3"for the description buttonclassName="mt-4"for the tooltip buttonThis might cause visual alignment inconsistencies when both buttons are displayed.
- className="mr-3 mt-3" + className="mr-3 mt-3" - className="mt-4" + className="mr-3 mt-3"
113-130: Tooltip input is missing validationThe
isInvalidprop is passed to theQuestionFormInputfor tooltips, but there's no specific validation logic for tooltip content similar to what might exist for other required fields.Consider adding validation logic for tooltips if necessary, especially for length restrictions or required formatting:
isInvalid={isInvalid && someTooltipValidationFunction(question.tooltip, localSurvey.languages)}
64-130: Implement consistent tooltip management across question typesBoth the
MatrixQuestionFormandCalQuestionFormimplement similar patterns for managing tooltips and subheaders. This approach could be standardized across all question type forms.Consider creating a dedicated component or custom hook like
useQuestionAdditionalFieldsthat handles the rendering and state management of common question fields (subheader, tooltip) to ensure consistency in behavior and appearance across all question types.packages/lib/messages/pt-PT.json (1)
1655-1655: Ensure Consistent Phrasing for Tooltip Recall Text
The key"your_tooltip_here_recall_information_with": "Sua dica de ferramenta aqui. Recorde a informação com @"is added to support recall functionality. For consistency with similar keys (e.g.,"your_question_here_recall_information_with": "A sua pergunta aqui. Recorde a informação com @"), consider changing the beginning from"Sua"to"A sua"so that it reads as:- "your_tooltip_here_recall_information_with": "Sua dica de ferramenta aqui. Recorde a informação com @", + "your_tooltip_here_recall_information_with": "A sua dica de ferramenta aqui. Recorde a informação com @",This small change will maintain uniformity in tone and style.
packages/lib/messages/en-US.json (1)
1281-1281: New Localization Key for Adding Tooltips
The new"add_tooltip": "Add tooltip"entry cleanly introduces a label for a tooltip‐adding action. It is consistent in style with similar keys (e.g.,"add_logo": "Add logo").Consider verifying with the design team whether the casing ("Add tooltip" vs. "Add Tooltip") matches the rest of your UI terminology.
apps/web/modules/survey/editor/components/open-question-form.tsx (1)
97-127: Consider style consistency between buttonsThe "Add description" button has
className="mr-3 mt-3"while the "Add tooltip" button hasclassName="mt-4". Consider using consistent spacing for both buttons to maintain visual alignment.- <Button - size="sm" - variant="secondary" - className="mt-4" - type="button" + <Button + size="sm" + variant="secondary" + className="mr-3 mt-3" + type="button"packages/surveys/src/components/general/headline.tsx (1)
25-35: Fix CSS class naming inconsistencyThere's a mix of naming conventions in the CSS classes. The codebase uses the
fb-prefix for most Tailwind classes, but line 29 has a mix of prefixed and non-prefixed classes.- <div className="fb-ml-2 fb-opacity-60 flex items-center"> + <div className="fb-ml-2 fb-opacity-60 fb-flex fb-items-center">apps/web/modules/survey/editor/components/rating-question-form.tsx (1)
71-85: Style consistency improvementSimilar to the open-question-form, there's an inconsistency in button styling. Consider using the same margin classes for both buttons.
- <Button - size="sm" - variant="secondary" - className="mt-4" - type="button" + <Button + size="sm" + variant="secondary" + className="mr-3 mt-3" + type="button"apps/web/modules/survey/editor/components/picture-selection-form.tsx (2)
104-118: Style consistency improvementAs in other components, there's an inconsistency in button styling. Apply consistent margin classes for both buttons.
- <Button - size="sm" - variant="secondary" - className="mt-4" - type="button" + <Button + size="sm" + variant="secondary" + className="mr-3 mt-3" + type="button"
137-154: Consider extracting a reusable componentThis tooltip input implementation is repeated across multiple question form components. Consider extracting it into a reusable component to reduce code duplication.
// Proposed component in a new file: export const TooltipInput = ({ question, questionIdx, localSurvey, updateQuestion, selectedLanguageCode, setSelectedLanguageCode, isInvalid, locale, }) => { const { t } = useTranslate(); return ( <div className="inline-flex w-full items-center"> <div className="w-full"> <QuestionFormInput id="tooltip" value={question.tooltip} label={t("environments.surveys.edit.tooltip")} localSurvey={localSurvey} questionIdx={questionIdx} isInvalid={isInvalid} updateQuestion={updateQuestion} selectedLanguageCode={selectedLanguageCode} setSelectedLanguageCode={setSelectedLanguageCode} locale={locale} /> </div> </div> ); };packages/surveys/src/components/general/tooltip.tsx (3)
4-7: Consider using stronger type definitions for children propInstead of using
anyfor the children prop type, consider usingReactNodefrom React for better type safety.- children: any; + children: React.ReactNode;
48-64: Add ARIA attributes and fix type castingThe tooltip lacks proper ARIA attributes for accessibility, and there's an unnecessary type cast to
any.<div + id="tooltip" + role="tooltip" style={{ position: "absolute", top: position.top, left: position.left, transform: "translateX(-50%) translateY(-100%)", marginBottom: "8px", zIndex: 1050, }} className="fb-max-w-7xl z-50 whitespace-normal rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-light shadow-md"> {content} <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-4 border-transparent border-b-white" /> </div> - ) as any, + ), document.body
14-22: Consider checking for existence before adding position event listenersThe updatePosition function should check if the tooltip is actually visible before updating the position to avoid unnecessary calculations.
const updatePosition = () => { - if (triggerRef.current) { + if (isVisible && triggerRef.current) { const rect = triggerRef.current.getBoundingClientRect(); setPosition({ top: rect.top - 12, left: rect.left + rect.width / 2, }); } };apps/web/modules/survey/components/question-form-input/index.tsx (2)
401-420: Add a more specific tooltip description for tooltip removalThe tooltip message for the removal button is the same for both subheader and tooltip removal. Consider making it more specific to help users understand exactly what they're removing.
<TooltipRenderer - tooltipContent={t("environments.surveys.edit.remove_description")}> + tooltipContent={id === "tooltip" + ? t("environments.surveys.edit.remove_tooltip") + : t("environments.surveys.edit.remove_description")}>This would require adding a new translation key for tooltip removal.
412-415: Use functional update pattern to avoid subtle bugsWhen updating the question by removing a subheader or tooltip, consider using the functional update pattern to avoid potential issues if multiple updates happen in succession.
if (updateQuestion) { - updateQuestion(questionIdx, { [id]: undefined }); + updateQuestion(questionIdx, (prevQuestion) => ({ + ...prevQuestion, + [id]: undefined + })); }If the
updateQuestionfunction supports this pattern, it would provide a safer update mechanism.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (38)
apps/web/modules/survey/components/question-form-input/index.tsx(2 hunks)apps/web/modules/survey/components/question-form-input/utils.ts(1 hunks)apps/web/modules/survey/editor/components/address-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/cal-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/contact-info-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/date-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/file-upload-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/matrix-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/multiple-choice-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/nps-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/open-question-form.tsx(2 hunks)apps/web/modules/survey/editor/components/picture-selection-form.tsx(1 hunks)apps/web/modules/survey/editor/components/ranking-question-form.tsx(1 hunks)apps/web/modules/survey/editor/components/rating-question-form.tsx(1 hunks)packages/lib/messages/de-DE.json(3 hunks)packages/lib/messages/en-US.json(3 hunks)packages/lib/messages/fr-FR.json(3 hunks)packages/lib/messages/pt-BR.json(3 hunks)packages/lib/messages/pt-PT.json(3 hunks)packages/lib/messages/zh-Hant-TW.json(3 hunks)packages/surveys/src/components/general/headline.tsx(1 hunks)packages/surveys/src/components/general/tooltip.tsx(1 hunks)packages/surveys/src/components/questions/address-question.tsx(1 hunks)packages/surveys/src/components/questions/cal-question.tsx(1 hunks)packages/surveys/src/components/questions/consent-question.tsx(1 hunks)packages/surveys/src/components/questions/contact-info-question.tsx(1 hunks)packages/surveys/src/components/questions/cta-question.tsx(1 hunks)packages/surveys/src/components/questions/date-question.ts 8000 x(1 hunks)packages/surveys/src/components/questions/file-upload-question.tsx(1 hunks)packages/surveys/src/components/questions/matrix-question.tsx(1 hunks)packages/surveys/src/components/questions/multiple-choice-multi-question.tsx(1 hunks)packages/surveys/src/components/questions/multiple-choice-single-question.tsx(1 hunks)packages/surveys/src/components/questions/nps-question.tsx(1 hunks)packages/surveys/src/components/questions/open-text-question.tsx(1 hunks)packages/surveys/src/components/questions/picture-selection-question.tsx(1 hunks)packages/surveys/src/components/questions/ranking-question.tsx(1 hunks)packages/surveys/src/components/questions/rating-question.tsx(1 hunks)packages/types/surveys/types.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (16)
packages/surveys/src/components/questions/nps-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/cal-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/matrix-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/cta-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/date-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/consent-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/contact-info-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/multiple-choice-single-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/ranking-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/open-text-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/file-upload-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/rating-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/general/headline.tsx (1)
packages/surveys/src/components/general/tooltip.tsx (1)
Tooltip(9-67)
packages/surveys/src/components/questions/address-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/multiple-choice-multi-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
packages/surveys/src/components/questions/picture-selection-question.tsx (1)
packages/surveys/src/lib/i18n.ts (1)
getLocalizedValue(8-19)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build Formbricks-web / Build Formbricks-web
- GitHub Check: Run E2E Tests / Run E2E Tests
🔇 Additional comments (67)
packages/surveys/src/components/questions/matrix-question.tsx (1)
132-132: Good addition of tooltipContent to enhance user guidance!The addition of the tooltip property to the Headline component provides important contextual information for users filling out matrix questions. This is a good enhancement that aligns with the broader tooltip functionality being implemented across survey components.
packages/surveys/src/components/questions/nps-question.tsx (1)
88-88: Consistent implementation of tooltipContent - LGTM!The tooltip addition to the NPS question component maintains consistency with other question types, enhancing the user experience by providing additional context for this specific rating format. Good implementation using the getLocalizedValue function for i18n support.
packages/surveys/src/components/questions/date-question.tsx (1)
159-159: Tooltips for date questions - excellent addition!Adding tooltip functionality to date questions is particularly valuable since date formats and selection rules may need additional explanation for users. The implementation correctly uses getLocalizedValue to support internationalization, ensuring tooltips are displayed in the appropriate language.
packages/surveys/src/components/questions/cta-question.tsx (1)
61-61: Proper tooltip integration for CTA questions!The tooltip functionality is appropriately implemented for CTA questions, providing additional context that may help clarify the purpose of call-to-action buttons. This maintains consistency with the tooltip implementation across all question types in the survey system.
packages/surveys/src/components/questions/open-text-question.tsx (1)
93-93: Successfully added tooltip support to the OpenTextQuestion component.The addition of the
tooltipContentproperty ensures users can now see helpful context about the question via tooltips. The implementation correctly leverages the existing localization system throughgetLocalizedValue().packages/surveys/src/components/questions/file-upload-question.tsx (1)
84-84: Properly implemented tooltip support for the FileUploadQuestion component.The addition of the
tooltipContentproperty allows for localized tooltips to be displayed with the question headline. This matches the implementation pattern used in other question components, maintaining consistency throughout the codebase.packages/surveys/src/components/questions/picture-selection-question.tsx (1)
110-110: Correctly added tooltip support to the PictureSelectionQuestion component.The implementation follows the same pattern as other question components, providing a consistent user experience. The
getLocalizedValuefunction ensures proper internationalization of tooltip content.packages/surveys/src/components/questions/multiple-choice-single-question.tsx (1)
122-122: Successfully added tooltip support to the MultipleChoiceSingleQuestion component.The tooltip functionality has been properly implemented, maintaining consistency with other question types. This enhancement provides additional context to users when answering single-choice questions.
packages/surveys/src/components/questions/address-question.tsx (1)
133-133: Tooltip content addition looks good.The addition of
tooltipContentprop to theHeadlinecomponent enhances user experience by providing localized contextual information through tooltips. The implementation correctly uses thegetLocalizedValuefunction to retrieve localized content based on the user's language code.packages/surveys/src/components/questions/multiple-choice-multi-question.tsx (1)
161-161: Tooltip implementation is consistent and well integrated.The addition of
tooltipContentproperty to theHeadlinecomponent maintains consistency with the tooltip functionality being implemented across all question types. The implementation correctly leverages the existing localization system withgetLocalizedValue.packages/surveys/src/components/questions/ranking-question.tsx (1)
156-156: Tooltip enhancement properly implemented.The addition of tooltip functionality to the
RankingQuestioncomponent is consistent with the implementation across other question types. The code correctly uses the localization system to ensure tooltips are displayed in the user's preferred language.packages/surveys/src/components/questions/consent-question.tsx (1)
78-78: Tooltip addition follows the established pattern.The implementation of tooltip functionality in the
ConsentQuestioncomponent is consistent with the approach taken across other question components. This consistency in implementation ensures a uniform user experience when interacting with tooltips throughout the survey.apps/web/modules/survey/components/question-form-input/utils.ts (1)
84-85: Implementation of tooltip placeholder looks good!The addition of the "tooltip" case in the
getPlaceHolderByIdfunction follows the same pattern as the existing cases for "headline" and "subheader". This implementation properly returns the translated placeholder text for tooltips.packages/surveys/src/components/questions/cal-question.tsx (1)
82-82: Tooltip content properly implemented in Headline component.The
tooltipContentproperty is correctly added to theHeadlinecomponent, usinggetLocalizedValueto retrieve the localized tooltip content. This implementation is consistent with how other localized properties are handled.packages/surveys/src/components/questions/contact-info-question.tsx (1)
128-128: Tooltip content implementation looks good.The
tooltipContentproperty is correctly added to theHeadlinecomponent, usinggetLocalizedValueto retrieve the localized tooltip content. This implementation is consistent with the pattern used in other question components.packages/surveys/src/components/questions/rating-question.tsx (1)
132-132: Tooltip content correctly implemented in Rating question.The
tooltipContentproperty is properly added to theHeadlinecomponent, usinggetLocalizedValueto retrieve localized tooltip text. This implementation follows the same pattern as other question components, ensuring consistency across the codebase.apps/web/modules/survey/editor/components/multiple-choice-question-form.tsx (3)
183-213: Well-implemented subheader and tooltip buttons!The implementation for adding both subheader and tooltip fields is clean and follows best practices. The conditional rendering ensures the buttons only appear when needed.
226-226: Consistent label update.Good change to use a more generic translation key for the description label, improving consistency across components.
232-249: Clean tooltip input implementation.The tooltip input section is properly implemented with appropriate styling and internationalization support.
apps/web/modules/survey/editor/components/date-question-form.tsx (3)
70-99: Consistent implementation of subheader and tooltip buttons.The implementation matches the pattern used in other question form components, maintaining a consistent user experience.
112-112: Appropriate label update.Good update to use the common translation key for description.
118-135: Well-structured tooltip input section.The tooltip input implementation follows the same pattern as other form components, ensuring consistency throughout the application.
apps/web/modules/survey/editor/components/contact-info-question-form.tsx (3)
102-131: Properly implemented subheader and tooltip buttons.The implementation is consistent with other question form components and provides a good user experience.
144-144: Consistent label update.Good change to use the common description translation key.
150-167: Well-structured tooltip implementation.The tooltip input section is properly implemented with appropriate styling and internationalization.
apps/web/modules/survey/editor/components/address-question-form.tsx (3)
111-140: Consistent implementation of subheader and tooltip buttons.The implementation follows the same pattern used across other question form components, maintaining a unified user experience.
153-153: Appropriate label update.Good update to use the common translation key for description.
159-176: Well-structured tooltip input implementation.The tooltip section matches the implementation in other components, ensuring a consistent UI throughout the application.
apps/web/modules/survey/editor/components/ranking-question-form.tsx (4)
135-149: Looks good - Add Description button implementation.The implementation for adding a subheader when one doesn't exist is well structured. The button is conditionally rendered with appropriate styling and localization.
150-164: Looks good - Add Tooltip button implementation.The implementation for adding a tooltip when one doesn't exist follows the same pattern as the subheader button. The code correctly initializes an empty i18n string using survey language codes.
177-177: Appropriate label update for subheader.Using the localized "common.description" translation key is a good improvement for consistency.
183-200: Tooltip input implementation looks good.The tooltip input is correctly rendered only when a tooltip exists. The implementation follows the same pattern as the subheader input, maintaining consistency throughout the form.
apps/web/modules/survey/editor/components/nps-question-form.tsx (4)
58-72: Consistent implementation of Add Description button.The subheader button implementation in this component matches the pattern used in the ranking question form, which is good for maintaining UI consistency across different question types.
73-87: Consistent implementation of Add Tooltip button.The tooltip button is properly implemented, following the same pattern as in the ranking question form. This consistency helps create a unified user experience across different question types.
100-100: Appropriate label update for subheader.Using the localized "common.description" translation key maintains consistency with other question forms.
106-123: Tooltip input implementation is consistent.The tooltip input implementation follows the same pattern as in the ranking question form, ensuring a consistent UI experience across different question types.
packages/lib/messages/pt-BR.json (2)
1622-1622: Addition of Tooltip Label KeyThe key
"tooltip": "Dica de ferramenta"has been introduced to provide a generic tooltip label. This addition aligns with the PR's objectives for enhanced tooltip functionality. Ensure that all components referencing tooltip strings are updated to use this key consistently.
1655-1655: Placeholder String for Tooltip Recall InformationThe new placeholder key
"your_tooltip_here_recall_information_with": "Sua dica de ferramenta aqui. Lembre-se de informações com @"correctly mirrors the format of similar placeholder keys (like"your_description_here_recall_information_with"and"your_question_here_recall_information_with"). Please double-check that the wording is consistent with your UI guidelines and that the “@” mention syntax is handled correctly in the consuming components.packages/lib/messages/fr-FR.json (3)
1281-1281: New Translation for "add_tooltip":
The key"add_tooltip": "Ajouter une info-bulle"has been added to provide a clear label for the related UI action. This translation is concise and consistent with the intended tooltip functionality. Please ensure that similar tooltip entries in other locale files (e.g., en-US.json, de-DE.json) follow the same style.
1622-1622: Short Tooltip Label "tooltip":
The key"tooltip": "Info-bulle"offers a brief label that is well suited for small UI elements such as button labels or headers. Verify that this brief version meets design requirements and aligns with similar labels in the codebase.
1655-1655: Tooltip Placeholder Text "your_tooltip_here_recall_information_with":
The new placeholder,"your_tooltip_here_recall_information_with": "Votre info-bulle ici. Rappelez-vous des informations avec @", is clear and maintains a friendly tone. Please double-check that its phrasing is consistent with other “recall information” placeholder texts in French.packages/lib/messages/de-DE.json (3)
1281-1281: New "add_tooltip" Translation AddedThe key
"add_tooltip"has been introduced with the translation"Tooltip hinzufügen". This entry clearly conveys the intended action to add a tooltip and aligns with the tooltip functionality introduced in this PR. Please verify that its terminology is consistent with similar entries across other locales.
1622-1622: Concise "tooltip" Key TranslationThe key
"tooltip"is now set to"Tooltip". This short and direct translation appears correct for general usage. Ensure that downstream components refer to this key correctly, and that its presentation matches the design expectations across the UI.
1655-1655: Translation for Tooltip Recall InstructionThe key
"your_tooltip_here_recall_information_with"now has the value"Ihr Tooltip hier. Informationen abrufen mit @". This phrasing provides clear guidance for users on where to input or recall tooltip information. It would be good to cross-check that this message is consistent with similar instructions in other language files.packages/types/surveys/types.ts (1)
503-503: Schema updated with tooltip support - looks good!The addition of an optional tooltip property to the
ZSurveyQuestionBaseschema is well-implemented and follows the same pattern as other optional internationalized fields likesubheader. This enhancement enables contextual help functionality across all survey question types.packages/lib/messages/pt-PT.json (2)
1281-1281: Add New Localization Key for Tooltip Action
The new key"add_tooltip": "Adicionar dica de ferramenta"is clearly added and follows your naming convention. This entry will support the tooltip feature in the UI consistently.
1622-1622: Introduce a Concise Key for Tooltip Label
The addition of"tooltip": "Dica de ferramenta"provides a short and clear label for tooltip components. Please ensure that this key is referenced wherever a tooltip label is needed.packages/lib/messages/zh-Hant-TW.json (3)
1281-1281: Added "add_tooltip" translation correctly.The translation "新增工具提示" correctly represents "Add tooltip" in Traditional Chinese, which aligns with the tooltip functionality being added.
1622-1622: Added "tooltip" translation correctly.The term "工具提示" is an appropriate Traditional Chinese translation for "tooltip", maintaining consistent terminology with the other tooltip-related strings.
1655-1655: Added placeholder text translation correctly.The translation "您的工具提示在這裡。使用 @ 召回信息" correctly conveys the instruction about using the @ symbol to recall information in tooltips.
apps/web/modules/survey/editor/components/file-upload-question-form.tsx (4)
144-158: Implementation of conditional subheader button looks good!Good approach using conditional rendering to show the "Add Description" button only when subheader is undefined. This creates a clean user experience where users can add an optional description when needed.
159-173: Effectively implemented tooltip functionalityThe implementation of the tooltip button follows the same pattern as the subheader button, providing a consistent UI experience. The createI18nString function ensures proper localization support right from the tooltip creation.
186-186: Good use of translation key for labelUsing the translation key
t("common.description")for the subheader label ensures consistent terminology across the application and proper internationalization.
192-208: Well-structured tooltip input implementationThe QuestionFormInput component for tooltips is correctly implemented, following the same pattern as other form elements. The code maintains consistency in how form fields are handled while adding the new tooltip capability.
packages/lib/messages/en-US.json (2)
1622-1622: Generic Tooltip Label Added
The"tooltip": "Tooltip"key provides a succinct, generic label that can be reused wherever a simple tooltip title is needed.Ensure that its usage context is clear enough so that users aren’t confused by such a minimal label.
1655-1655: Tooltip Recall Helper Text Introduced
The new key"your_tooltip_here_recall_information_with": "Your tooltip here. Recall information with @"follows the established pattern seen in similar keys (e.g., for questions or descriptions). This helps ensure consistency in how placeholders are presented across the UI.It might be worth confirming that the phrasing meets the localization style guidelines and is clear to the end user.
apps/web/modules/survey/editor/components/open-question-form.tsx (2)
98-127: Great addition of tooltip functionality!The implementation of both "Add description" and "Add tooltip" buttons follows a consistent pattern, which is good for maintainability.
146-163: Tooltip input implementation looks goodThe conditional rendering for the tooltip input follows the same pattern as the subheader input, providing a consistent user experience.
packages/surveys/src/components/general/headline.tsx (3)
1-2: Appropriate imports for tooltip functionalityThe imports for the Tooltip component and CircleHelp icon are correctly added.
10-19: Clear interface extension with optional propGood practice making the tooltipContent prop optional, which allows backward compatibility with existing usage of the Headline component.
24-36: Well structured tooltip implementationThe implementation maintains the existing layout while adding the tooltip functionality in a non-intrusive way. The conditional rendering ensures the tooltip only appears when content is provided.
apps/web/modules/survey/editor/components/rating-question-form.tsx (2)
56-85: Consistent implementation of tooltip functionalityThe implementation of add description and tooltip buttons follows the same pattern as in other question form components, which is good for consistency across the application.
104-121: Well-structured tooltip input implementationThe conditional rendering and structure for the tooltip input follow the established pattern, providing a consistent editing experience acro 8000 ss question types.
apps/web/modules/survey/editor/components/picture-selection-form.tsx (1)
89-118: Consistent tooltip functionality implementationThe implementation of add description and tooltip buttons is consistent with other form components, which is good for maintainability and user experience.
packages/surveys/src/components/general/tooltip.tsx (1)
1-67: LGTM! Effective tooltip implementationThe tooltip component is well-structured with proper event handling and cleanup. It correctly uses React portal for rendering tooltips outside the DOM hierarchy and handles positioning well.
apps/web/modules/survey/components/question-form-input/index.tsx (2)
297-299: LGTM! Properly extended recall functionality to tooltipsThe implementation correctly extends the recall functionality to tooltips, allowing users to use the recall feature for tooltips in addition to headlines and subheaders.
401-420:✅ Verification successful
Verify logic applies to all question types
The tooltip removal mechanism has been implemented for both subheader and tooltip fields. Please verify this works correctly across all question types that can have tooltips.
🏁 Script executed:
#!/bin/bash # Check for all question types that can have tooltips # and confirm they handle tooltip removal properly # Search for files that might define question schemas fd "question.*\.tsx" | xargs cat | grep -E "tooltip|tooltipContent" # Search for question types in the codebase ast-grep --pattern $'type TQuestion = $$$'Length of output: 6828
Tooltip Removal Consistency Verified
After reviewing the code and search outputs, the tooltip removal logic (i.e. checking for an existing tooltip or subheader and then updating the question by setting the respective field to undefined) is applied consistently across the codebase. In several modules—including the ones where tooltip functionality is rendered—the same runtime check is used, confirming that different question types that support tooltips (even if not all properties are statically declared in the TQuestion type) are handled properly.
- The conditional logic checks for both
"subheader"and"tooltip"and properly triggers removal viaupdateQuestion.- Search results across multiple files show consistent usage of
question.tooltipand associated rendering of tooltip components.- Although the TQuestion type in
apps/web/modules/survey/lib/questions.tsxdoes not list a tooltip property explicitly, the runtime behavior across components confirms that tooltip support is in place wherever needed.No further changes are necessary at this time.
packages/lib/messages/pt-BR.json
Outdated
| @@ -1278,6 +1278,7 @@ | |||
| "add_question": "Adicionar pergunta", | |||
| "add_question_below": "Adicione a pergunta abaixo", | |||
| "add_row": "Adicionar linha", | |||
| "add_tooltip": "Adicionar dica de ferramenta", | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
New Localization Key for Adding a Tooltip
The new key "add_tooltip": "Adicionar dica de ferramenta" is clearly added and fits in well with other similar keys (e.g., "add_logo", "add_variable", etc.). Please verify that its usage in components (such as in forms or buttons) matches the intended tooltip functionality.
|
@jobenjada can you plz review the pr and let me know if any changes are required. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/surveys/src/components/general/tooltip.tsx (4)
4-7: Improve type safety for the children prop.Currently, the
childrenprop is typed asany, which is not type-safe and goes against TypeScript best practices. Consider usingReactNodefor better type safety.import { useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; +import { ReactNode } from "react"; interface TooltipProps { - children: any; + children: ReactNode; content?: string; }
14-22: Consider implementing fallback positioning for viewport edges.The current positioning logic only places the tooltip above the trigger element. This may cause tooltips to be cut off or overflow when the element is near the top of the viewport.
Consider implementing fallback positions (below, right, left) when the tooltip would otherwise be clipped:
const updatePosition = () => { if (triggerRef.current) { const rect = triggerRef.current.getBoundingClientRect(); + const viewportHeight = window.innerHeight; + const tooltipHeight = 40; // Approximate or calculate actual height + + // Check if tooltip would be cut off at the top + const positionAbove = rect.top - tooltipHeight < 10; + setPosition({ - top: rect.top - 12, + top: positionAbove ? rect.bottom + 12 : rect.top - 12, left: rect.left + rect.width / 2, + position: positionAbove ? 'below' : 'above', }); } };Then adjust your rendering to handle different positions.
51-69: Avoid type assertion toanyand consider extracting inline styles.Two improvements to consider:
- The
as anytype assertion should be avoided for type safety- The inline styles could be extracted to CSS classes for better maintainability
{isVisible && createPortal( - ( <div - style={{ - position: "absolute", - top: position.top, - left: position.left, - transform: "translateX(-50%) translateY(-100%)", - marginBottom: "8px", - zIndex: 1050, - }} - className="fb-max-w-7xl z-50 whitespace-normal rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-light shadow-md"> + style={{ top: position.top, left: position.left }} + className="fb-max-w-7xl absolute z-50 whitespace-normal rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-light shadow-md -translate-x-1/2 -translate-y-full mb-2"> {content} <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-4 border-transparent border-b-white" /> </div> - ) as any, document.body )}
1-72: Consider adding ESC key support to dismiss the tooltip.For enhanced accessibility, users should be able to dismiss tooltips with the ESC key. This is especially important for longer tooltip content or for users who may accidentally trigger the tooltip.
import { useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; // ... export function Tooltip({ children, content }: TooltipProps) { // ... useEffect(() => { if (isVisible) { updatePosition(); window.addEventListener("resize", updatePosition); window.addEventListener("scroll", updatePosition); + + // Add ESC key handler + const handleEscKey = (e: KeyboardEvent) => { + if (e.key === "Escape") { + setIsVisible(false); + } + }; + window.addEventListener("keydown", handleEscKey); + + return () => { + window.removeEventListener("resize", updatePosition); + window.removeEventListener("scroll", updatePosition); + window.removeEventListener("keydown", handleEscKey); + }; } return () => { window.removeEventListener("resize", updatePosition); window.removeEventListener("scroll", updatePosition); }; }, [isVisible]); // ... }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/surveys/src/components/general/tooltip.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Run E2E Tests / Run E2E Tests
- GitHub Check: Build Formbricks-web / Build Formbricks-web
🔇 Additional comments (2)
packages/surveys/src/components/general/tooltip.tsx (2)
24-34: LGTM! Event listener management is well implemented.The effect correctly sets up and cleans up event listeners based on tooltip visibility, which is an efficient approach.
36-49: Good accessibility implementation with keyboard support.The implementation correctly addresses the previous accessibility feedback by adding keyboard support (focus/blur events) and proper ARIA attributes.
There was a problem hiding this comment.
- Tooltip is missing in the UI of question cta-question-form.tsx & consent-question-form.tsx
| (id === "tooltip" && question.tooltip !== undefined)) && | ||
| question && ( | ||
| <TooltipRenderer | ||
| tooltipContent={t("environments.surveys.edit.remove_description")}> |
There was a problem hiding this comment.
This gets me the same tooltip for deleting a description and for deleting a tooltip.
The tooltip text should reflect what you're deleting:
| 6D40 | </Tooltip> | |
| </div> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
Please consider to use display: inline placement. Place the tooltip at the end of the line of headline & let it break with the text:
| <PlusIcon className="mr-1 h-4 w-4" /> | ||
| {t("environments.surveys.edit.add_tooltip")} | ||
| </Button> | ||
| )} |
There was a problem hiding this comment.
Optimize the placement of the buttons. All input fields (Question, Description & Tooltip) should be above the buttons to add either description of tooltip. When adding a field, it should be placed above the icon. Make it look like this:
There was a problem hiding this comment.
This is relevant for all question types
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/modules/survey/editor/components/consent-question-form.tsx (1)
53-87: Inconsistent conditional ordering compared to CTA question form.The tooltip implementation works correctly but has a different order of conditions compared to the CTA question form:
- In this file: tooltip input first (lines 54-71), then add button (lines 72-86)
- In CTA form: add button first, then tooltip input
While both work functionally, consider standardizing the order across components for better maintainability.
You could reorder the conditionals to match the CTA question form pattern:
<div> - {question.tooltip !== undefined && ( - <div className="inline-flex w-full items-center"> - <div className="w-full"> - <QuestionFormInput - id="tooltip" - value={question.tooltip} - label={t("environments.surveys.edit.tooltip")} - localSurvey={localSurvey} - questionIdx={questionIdx} - isInvalid={isInvalid} - updateQuestion={updateQuestion} - selectedLanguageCode={selectedLanguageCode} - setSelectedLanguageCode={setSelectedLanguageCode} - locale={locale} - /> - </div> - </div> - )} {question.tooltip === undefined && ( <Button size="sm" variant="secondary" className="mt-4" type="button" => { updateQuestion(questionIdx, { tooltip: createI18nString("", surveyLanguageCodes), }); }}> <PlusIcon className="mr-1 h-4 w-4" /> {t("environments.surveys.edit.add_tooltip")} </Button> )} + {question.tooltip !== undefined && ( + <div className="inline-flex w-full items-center"> + <div className="w-full"> + <QuestionFormInput + id="tooltip" + value={question.tooltip} + label={t("environments.surveys.edit.tooltip")} + localSurvey={localSurvey} + questionIdx={questionIdx} + isInvalid={isInvalid} + updateQuestion={updateQuestion} + selectedLanguageCode={selectedLanguageCode} + setSelectedLanguageCode={setSelectedLanguageCode} + locale={locale} + /> + </div> + </div> + )} </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
apps/web/modules/survey/components/question-form-input/index.tsx(2 hunks)apps/web/modules/survey/editor/components/address-question-form.tsx(3 hunks)apps/web/modules/survey/editor/components/cal-question-form.tsx(2 hunks)apps/web/modules/survey/editor/components/consent-question-form.tsx(3 hunks)apps/web/modules/survey/editor/components/contact-info-question-form.tsx(3 hunks)apps/web/modules/survey/editor/components/cta-question-form.tsx(3 hunks)apps/web/modules/survey/editor/components/date-question-form.tsx(2 hunks)apps/web/modules/survey/editor/components/file-upload-question-form.tsx(3 hunks)apps/web/modules/survey/editor/components/matrix-question-form.tsx(3 hunks)apps/web/modules/survey/editor/components/multiple-choice-question-form.tsx(3 hunks)apps/web/modules/survey/editor/components/nps-question-form.tsx(2 hunks)apps/web/modules/survey/editor/components/open-question-form.tsx(2 hunks)apps/web/modules/survey/editor/components/picture-selection-form.tsx(3 hunks)apps/web/modules/survey/editor/components/ranking-question-form.tsx(3 hunks)apps/web/modules/survey/editor/components/rating-question-form.tsx(3 hunks)packages/surveys/src/components/general/headline.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (14)
- apps/web/modules/survey/editor/components/address-question-form.tsx
- apps/web/modules/survey/editor/components/open-question-form.tsx
- apps/web/modules/survey/editor/components/contact-info-question-form.tsx
- apps/web/modules/survey/editor/components/matrix-question-form.tsx
- apps/web/modules/survey/editor/components/ranking-question-form.tsx
- apps/web/modules/survey/editor/components/nps-question-form.tsx
- apps/web/modules/survey/editor/components/multiple-choice-question-form.tsx
- packages/surveys/src/components/general/headline.tsx
- apps/web/modules/survey/editor/components/file-upload-question-form.tsx
- apps/web/modules/survey/editor/components/picture-selection-form.tsx
- apps/web/modules/survey/components/question-form-input/index.tsx
- apps/web/modules/survey/editor/components/date-question-form.tsx
- apps/web/modules/survey/editor/components/rating-question-form.tsx
- apps/web/modules/survey/editor/components/cal-question-form.tsx
🧰 Additional context used
🧬 Code Definitions (1)
apps/web/modules/survey/editor/components/cta-question-form.tsx (2)
packages/lib/i18n/utils.ts (2)
extractLanguageCodes(68-73)createI18nString(6-44)apps/web/modules/survey/components/question-form-input/index.tsx (1)
QuestionFormInput(59-436)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Build Formbricks-web / Build Formbricks-web
- GitHub Check: Run E2E Tests / Run E2E Tests
- GitHub Check: SonarQube
🔇 Additional comments (5)
apps/web/modules/survey/editor/components/cta-question-form.tsx (3)
5-5: Added necessary imports for tooltip functionality.These imports provide the necessary UI components (Button, PlusIcon) and utility functions for internationalization support when adding tooltip functionality to the question form.
Also applies to: 11-11, 13-13
50-51: Good extraction of language codes for internationalization.The
extractLanguageCodesutility function is properly used to get all language codes from the survey, which will be needed for creating internationalized tooltip strings.
66-100: Well-implemented tooltip feature with proper internationalization.The conditional rendering approach is clean and effective:
- If no tooltip exists, show an "Add tooltip" button
- If a tooltip exists, show the QuestionFormInput to edit it
The tooltip creation properly uses
createI18nStringwith empty initial values for all survey languages, ensuring proper i18n support.apps/web/modules/survey/editor/components/consent-question-form.tsx (2)
5-5: Added required imports for tooltip functionality.The imports match those in the CTA question form, maintaining consistency across components when implementing the same feature.
Also applies to: 8-8, 10-10
37-38: Properly extracting language codes for i18n support.This extraction of language codes is consistent with the implementation in other question form components.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/lib/messages/pt-BR.json (1)
1281-1281: New Tooltip Addition Key
The"add_tooltip": "Adicionar dica de ferramenta"key is clearly added and follows the naming convention seen in similar keys like"add_logo"and"add_variable". Please ensure that its usage in UI components—such as in form buttons or tooltips—is consistent with the intended functionality.
🧹 Nitpick comments (3)
packages/lib/messages/pt-PT.json (3)
1281-1281: Addition of "add_tooltip" Key
The new key"add_tooltip": "Adicionar dica de ferramenta"clearly conveys the action to add a tooltip. The phrasing is consistent with common UI terminology in Portuguese. It would be good to verify that its usage aligns with similar keys across other locale files.
1555-1555: Addition of "remove_tooltip" Key
The newly added key"remove_tooltip": "Remover dica de ferramenta"correctly mirrors the add action and maintains consistency with the tooltip terminology. Please ensure that any component consuming this key uses it consistently with the other tooltip-related keys.
1656-1656: Addition of "your_tooltip_here_recall_information_with" Key
The new key"your_tooltip_here_recall_information_with": "Sua dica de ferramenta aqui. Recorde a informação com @"provides clear guidance for users when recalling tooltip information. Verify that the tone and message match those in the other language files to ensure consistency in the user experience.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
apps/web/modules/survey/components/question-form-input/index.tsx(2 hunks)apps/web/modules/survey/components/question-form-input/utils.ts(2 hunks)apps/web/modules/survey/editor/components/consent-question-form.tsx(3 hunks)packages/lib/messages/de-DE.json(4 hunks)packages/lib/messages/en-US.json(4 hunks)packages/lib/messages/fr-FR.json(4 hunks)packages/lib/messages/pt-BR.json(4 hunks)packages/lib/messages/pt-PT.json(4 hunks)packages/lib/messages/zh-Hant-TW.json(4 hunks)packages/types/surveys/types.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- apps/web/modules/survey/components/question-form-input/index.tsx
- packages/types/surveys/types.ts
- packages/lib/messages/de-DE.json
- apps/web/modules/survey/components/question-form-input/utils.ts
- packages/lib/messages/fr-FR.json
- packages/lib/messages/en-US.json
🧰 Additional context used
🧬 Code Definitions (1)
apps/web/modules/survey/editor/components/consent-question-form.tsx (2)
packages/lib/i18n/utils.ts (2)
extractLanguageCodes(68-73)createI18nString(6-44)apps/web/modules/survey/components/question-form-input/index.tsx (1)
QuestionFormInput(59-436)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build Formbricks-web / Build Formbricks-web
- GitHub Check: Run E2E Tests / Run E2E Tests
🔇 Additional comments (10)
packages/lib/messages/zh-Hant-TW.json (4)
1281-1281: New Key for "add_tooltip" Addition:
The key"add_tooltip": "新增工具提示"was added as expected to support the new tooltip functionality. The translation is concise and clear.
1555-1555: New Key for "remove_tooltip" Addition:
The key"remove_tooltip": "移除工具提示"is introduced correctly. The translation is consistent with the intended functionality and with similar terminology used elsewhere in the application.
1623-1623: New Key for Generic Tooltip Label:
The key"tooltip": "工具提示"has been added to serve as a generic label for tooltips. Its translation is straightforward and aligns with typical user interface conventions.
1656-1656: New Key for Tooltip Helper Message:
The key"your_tooltip_here_recall_information_with": "您的工具提示在這裡。使用 @ 召回信息"is added to provide guidance where users can recall or reference information using the "@" symbol. The translation is clear; however, please verify that the term "召回信息" is consistent with any related terminology in the rest of the project.packages/lib/messages/pt-BR.json (3)
1555-1555: New Tooltip Removal Key
The"remove_tooltip": "Remover dica de ferramenta"key is concise and self-explanatory, fitting in well with the other localization keys. Verify that all components that allow removal of a tooltip are updated to reference this new key correctly.
1623-1623: Generic Tooltip Key Definition
The"tooltip": "Dica de ferramenta"key provides a generic label for tooltip displays. It is clear and should work well within the context of components that require a fallback or a simple tooltip label. Make sure that this key is not conflicting with any other similarly named keys in the project.
1656-1656: Tooltip Placeholder Text for Recall
The key"your_tooltip_here_recall_information_with": "Sua dica de ferramenta aqui. Lembre-se de informações com @"offers clear guidance to users. It is important to check its consistency with similar keys (for instance,"your_question_here_recall_information_with") and to ensure that the “@” hint correctly captures the intended recall mechanism in the UI.apps/web/modules/survey/editor/components/consent-question-form.tsx (3)
5-5: Appropriate imports for the tooltip feature implementation.The imports of
Button,PlusIcon, and i18n utility functions are correctly added to support the new tooltip functionality.Also applies to: 8-8, 10-10
37-37: Well-implemented language code extraction.The
surveyLanguageCodesvariable properly extracts language codes from the survey to support multi-language tooltips.
53-87: Good implementation of tooltip UI with proper i18n support.The implementation follows a clean pattern:
- Conditionally renders either an "Add tooltip" button or the tooltip input field
- Properly initializes an empty internationalized string when creating a new tooltip
- Correctly integrates with the existing form input components and i18n system
The UX is intuitive - users can add a tooltip when needed and edit it once it exists.
|
@mattinannt this adds quite some complexity (bigger surveys package, update of the surveys data model, etc.) - please make a decision on if it's worth adding that right now or if we can wrap it into the Survey Editor 2.0 It was requested by one or two users so far, but some competitors offer a similar functionality. For being quite a niche use case, it takes up too much room in the survey editor imo |
|
@gupta-piyush19 - please see comment above on added complexity. Have a look at the code and write up your assessment here :) |
|
Hey @Paribesh01 My name is Jakob, and I'm a design engineer at Formbricks. I'm reaching out because I am working on improving the interface and usability of our application. We've revamped the demo app and I was wondering if you would be willing to participate in a UX test? The test will take 30-45 minutes where you interact with a clickdummy of the new UI. This will help us to identify areas to improve the app. The test will be done within a google meet call. If you have any questions, feel free to contact me: jakob@formbricks.com Thank you for your time and consideration. |
|
@jakobsitory yeah sure, I have booked a time slot |
What does this PR do?
Fixes #4849
Loom: https://www.loom.com/share/874da8d8e6574256be024255ced59be1?sid=b321719a-0f2c-4d67-92ba-f59ded83cf02
How should this be tested?
Checklist
Required
pnpm buildconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
User Interface
Other