From c4f2f9209a87f0fcf2ba12c4008a4575e02c01bc Mon Sep 17 00:00:00 2001
From: Paul Kuruvilla <rohitpaulk@gmail.com>
Date: Tue, 22 Apr 2025 17:25:30 -0700
Subject: [PATCH] feat: add feedback section with upvote/downvote functionality
 refactor(feedback): increase animation duration for voting feedback fix:
 improve feedback section text clarity and consistency feat: add tooltips to
 feedback buttons for clarity feat(tooltip): add delay to tooltips for
 improved usability

---
 .../community-solution-card/content.hbs       |  4 +-
 .../feedback-section.hbs                      | 46 +++++++++++++++
 .../feedback-section.ts                       | 59 +++++++++++++++++++
 .../community-solution-card/header.hbs        |  5 +-
 4 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 app/components/course-page/course-stage-step/community-solution-card/feedback-section.hbs
 create mode 100644 app/components/course-page/course-stage-step/community-solution-card/feedback-section.ts

diff --git a/app/components/course-page/course-stage-step/community-solution-card/content.hbs b/app/components/course-page/course-stage-step/community-solution-card/content.hbs
index cb676ac9b2..8cc57ef80d 100644
--- a/app/components/course-page/course-stage-step/community-solution-card/content.hbs
+++ b/app/components/course-page/course-stage-step/community-solution-card/content.hbs
@@ -84,4 +84,6 @@
       </div>
     </:header>
   </FileContentsCard>
-{{/each}}
\ No newline at end of file
+{{/each}}
+
+<CoursePage::CourseStageStep::CommunitySolutionCard::FeedbackSection class="pt-6 pb-3" />
\ No newline at end of file
diff --git a/app/components/course-page/course-stage-step/community-solution-card/feedback-section.hbs b/app/components/course-page/course-stage-step/community-solution-card/feedback-section.hbs
new file mode 100644
index 0000000000..5cbb61bdd8
--- /dev/null
+++ b/app/components/course-page/course-stage-step/community-solution-card/feedback-section.hbs
@@ -0,0 +1,46 @@
+<div class="flex flex-col items-center gap-2" ...attributes>
+  <AnimatedContainer class="w-full">
+    <div class="text-sm text-gray-700 dark:text-gray-300 text-center w-full">
+      {{#animated-if this.tempHasVotedRecently use=this.transition duration=200}}
+        <p class="text-teal-500 font-medium">
+          Thanks for your feedback!
+        </p>
+      {{else}}
+        <p>
+          Was this example helpful?
+        </p>
+      {{/animated-if}}
+    </div>
+  </AnimatedContainer>
+
+  <div class="flex items-center gap-1.5 flex-wrap">
+    <TertiaryButton
+      {{on "click" this.handleUpvoteButtonClick}}
+      class={{if this.tempHasDownvoted "opacity-50 hover:opacity-100 transition-opacity duration-200"}}
+    >
+      <div class="flex items-center gap-1">
+        {{svg-jar "thumb-up" class=(concat "w-5 " (if this.tempHasUpvoted "text-teal-500" "text-gray-400 dark:text-gray-600"))}}
+
+        <span class={{if this.tempHasUpvoted "text-teal-500" "text-gray-500"}}>
+          Helpful
+        </span>
+      </div>
+
+      <EmberTooltip @text="Your feedback helps us surface better examples." @side="bottom" @delay={{250}} />
+    </TertiaryButton>
+    <TertiaryButton
+      {{on "click" this.handleDownvoteButtonClick}}
+      class={{if this.tempHasUpvoted "opacity-50 hover:opacity-100 transition-opacity duration-200"}}
+    >
+      <div class="flex items-center gap-1">
+        {{svg-jar "thumb-down" class=(concat "w-5 " (if this.tempHasDownvoted "text-red-600" "text-gray-400 dark:text-gray-600"))}}
+
+        <span class={{if this.tempHasDownvoted "text-red-600" "text-gray-500"}}>
+          Not helpful
+        </span>
+      </div>
+
+      <EmberTooltip @text="Your feedback helps us identify examples that need review." @side="bottom" @delay={{250}} />
+    </TertiaryButton>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/course-page/course-stage-step/community-solution-card/feedback-section.ts b/app/components/course-page/course-stage-step/community-solution-card/feedback-section.ts
new file mode 100644
index 0000000000..d266c8bcf2
--- /dev/null
+++ b/app/components/course-page/course-stage-step/community-solution-card/feedback-section.ts
@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
+import fade from 'ember-animated/transitions/fade';
+import { action } from '@ember/object';
+
+interface Signature {
+  Element: HTMLDivElement;
+}
+
+export default class CommunitySolutionCardFeedbackSectionComponent extends Component<Signature> {
+  transition = fade;
+
+  @tracked tempHasVotedRecently = false;
+  @tracked tempHasUpvoted = false;
+  @tracked tempHasDownvoted = false;
+
+  @action
+  handleDownvoteButtonClick() {
+    // No feedback if the user is "reversing" their vote
+    if (this.tempHasDownvoted) {
+      this.tempHasDownvoted = false;
+      this.tempHasVotedRecently = false;
+
+      return;
+    }
+
+    this.flashSuccessMessageTask.perform();
+    this.tempHasUpvoted = false;
+    this.tempHasDownvoted = true;
+  }
+
+  @action
+  handleUpvoteButtonClick() {
+    // No feedback if the user is "reversing" their vote
+    if (this.tempHasUpvoted) {
+      this.tempHasUpvoted = false;
+      this.tempHasVotedRecently = false;
+
+      return;
+    }
+
+    this.flashSuccessMessageTask.perform();
+    this.tempHasDownvoted = false;
+    this.tempHasUpvoted = true;
+  }
+
+  flashSuccessMessageTask = task({ keepLatest: true }, async () => {
+    this.tempHasVotedRecently = true;
+    await timeout(1500);
+    this.tempHasVotedRecently = false;
+  });
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::CourseStageStep::CommunitySolutionCard::FeedbackSection': typeof CommunitySolutionCardFeedbackSectionComponent;
+  }
+}
diff --git a/app/components/course-page/course-stage-step/community-solution-card/header.hbs b/app/components/course-page/course-stage-step/community-solution-card/header.hbs
index bda8b6756b..55633511ca 100644
--- a/app/components/course-page/course-stage-step/community-solution-card/header.hbs
+++ b/app/components/course-page/course-stage-step/community-solution-card/header.hbs
@@ -20,11 +20,12 @@
   </div>
 
   <div class="flex items-center shrink-0">
-    {{#unless (eq @solution.user this.authenticator.currentUser)}}
+    {{! Remove, replace with buttons at the bottom of the card }}
+    {{!-- {{#unless (eq @solution.user this.authenticator.currentUser)}}
       <CoursePage::CourseStageStep::CommunitySolutionCard::UpvoteButton @solution={{@solution}} @metadata={{@metadataForUpvote}} class="mr-2" />
       <CoursePage::CourseStageStep::CommunitySolutionCard::DownvoteButton @solution={{@solution}} @metadata={{@metadataForDownvote}} />
       <div class="w-px h-3 bg-gray-200 dark:bg-white/5 mx-2"></div>
-    {{/unless}}
+    {{/unless}} --}}
 
     {{#if (gt @solution.approvedCommentsCount 0)}}
       <div class="flex items-center">