Feedback page (#1160)

* Add feedback page

* Only show latest release on changelog

* Constrain changelog height

* Ignore sanitization warning for Github content

* Add cassette for Github release notes

* Lint fix

app/controllers/pages_controller.rb

@@ -31,7 +31,7 @@ class PagesController < ApplicationController
   end
 
   def changelog
-    @releases_notes = Provider::Github.new.fetch_latest_releases_notes
+    @release_notes = Provider::Github.new.fetch_latest_release_notes
   end
 
   def feedback

app/models/provider/github.rb

@@ -40,23 +40,24 @@ class Provider::Github
     end
   end
 
-  def fetch_latest_releases_notes
+  def fetch_latest_release_notes
     begin
-      Rails.cache.fetch("latest_github_releases_notes", expires_in: 2.hours) do
-        releases = Octokit.releases(repo)
-        releases.map do |release|
+      Rails.cache.fetch("latest_github_release_notes", expires_in: 2.hours) do
+        release = Octokit.releases(repo).first
+        if release
           {
             avatar: release.author.avatar_url,
             name: release.name,
             published_at: release.published_at,
             body: Octokit.markdown(release.body, mode: "gfm", context: repo)
           }
+        else
+          nil
         end
       end
-
     rescue => e
-      Rails.logger.error "Failed to fetch latest GitHub releases notes: #{e.message}"
-      []
+      Rails.logger.error "Failed to fetch latest GitHub release notes: #{e.message}"
+      nil
     end
   end
 

app/views/pages/changelog.html.erb

@@ -2,29 +2,29 @@
   <%= render "settings/nav" %>
 <% end %>
 
-<div class="space-y-4">
+<div class="space-y-4 flex flex-col h-full">
   <h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".title") %></h1>
-  <div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
-    <% @releases_notes.each do |release_notes| %>
-      <div class="flex justify-between gap-4 mb-12 last:mb-0">
-        <div class="w-1/3">
-          <div class="px-3 flex items-center gap-3">
-            <div class="text-white shrink-0 w-9 h-9">
-              <%= image_tag release_notes[:avatar], class: "rounded-full w-full h-full object-cover" %>
-            </div>
-            <div>
-              <div class="text-gray-900 font-medium text-sm"><%= release_notes[:name] %></div>
-              <div class="text-gray-500 text-sm"><%= release_notes[:published_at].strftime("%B %d, %Y") %></div>
-            </div>
+  <div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4 flex-grow overflow-y-auto">
+    <div class="flex justify-between gap-4 mb-12 last:mb-0">
+      <div class="w-1/3">
+        <div class="px-3 flex items-center gap-3">
+          <div class="text-white shrink-0 w-9 h-9">
+            <%= image_tag @release_notes[:avatar], class: "rounded-full w-full h-full object-cover" %>
+          </div>
+          <div>
+            <div class="text-gray-900 font-medium text-sm"><%= @release_notes[:name] %></div>
+            <div class="text-gray-500 text-sm"><%= @release_notes[:published_at].strftime("%B %d, %Y") %></div>
           </div>
         </div>
-        <div class="w-2/3 text-gray-500 text-sm prose prose--github-release-notes">
-          <h2 class="mb-5 text-xl text-gray-900"><%= release_notes[:name] %></h2>
-          <%= release_notes[:body].html_safe %>
-        </div>
       </div>
-    <% end %>
+      <div class="w-2/3 text-gray-500 text-sm prose prose--github-release-notes">
+        <h2 class="mb-5 text-xl text-gray-900"><%= @release_notes[:name] %></h2>
+        <%= @release_notes[:body].html_safe %>
+      </div>
+    </div>
   </div>
 
-  <%= settings_nav_footer %>
+  <div class="mt-auto">
+    <%= settings_nav_footer %>
+  </div>
 </div>

app/views/pages/feedback.html.erb

@@ -5,8 +5,23 @@
 <div class="space-y-4">
   <h1 class="text-gray-900 text-xl font-medium mb-4">Feedback</h1>
   <div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
-    <div class="flex justify-center items-center py-20">
-      <p class="text-gray-500">Feedback coming soon...</p>
+    <h2 class="text-lg font-medium text-gray-900 mb-1">Leave feedback</h2>
+    <p class="text-sm text-gray-500 mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
+    <div class="flex gap-2">
+      <%= link_to "https://github.com/maybe-finance/maybe/discussions/categories/feature-requests", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
+        <%= image_tag "github-icon.png", class: "w-8 h-8 mb-2" %>
+        <span class="text-sm font-medium text-gray-900">Write a feature request</span>
+      <% end %>
+
+      <%= link_to "https://github.com/maybe-finance/maybe/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
+        <%= image_tag "github-icon.png", class: "w-8 h-8 mb-2" %>
+        <span class="text-sm font-medium text-gray-900">File a bug report</span>
+      <% end %>
+
+      <%= link_to "https://link.maybe.co/discord", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
+        <%= image_tag "discord-icon.png", class: "w-8 h-8 mb-2" %>
+        <span class="text-sm font-medium text-gray-900">Discuss Maybe with others</span>
+      <% end %>
     </div>
   </div>