Skip to content
This repository was archived by the owner on Jul 25, 2025. It is now read-only.

Commit b597578

Browse files
ShpigfordShpigford
committed
Refactor FAQs index and show views for improved search and category display
- Removed category filtering from the index action to simplify the FAQ listing. - Enhanced the index view to display search results prominently and group FAQs by category when no search query is present. - Updated the show view to display the FAQ category as a non-clickable label for better user experience.
1 parent b503ceb commit b597578

3 files changed

Lines changed: 68 additions & 64 deletions

File tree

‎app/controllers/faqs_controller.rb‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,12 @@ class FaqsController < ApplicationController
1717
# GET /faqs?q=budget&category=planning
1818
def index
1919
@query = params[:q]
20-
@selected_category = params[:category]
2120

2221
@faqs = Faq.alphabetical
2322

2423
# Apply search if query parameter is present
2524
@faqs = @faqs.search(@query) if @query.present?
2625

27-
# Apply category filtering if parameter is present
28-
@faqs = @faqs.by_category(@selected_category) if @selected_category.present?
29-
30-
# Get all available categories for filtering
31-
@categories = Faq.categories
32-
3326
# Add pagination
3427
@pagy, @faqs = pagy(@faqs, items: 12)
3528

‎app/views/faqs/index.html.erb‎

Lines changed: 66 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -11,73 +11,84 @@
1111
<p class="text-xl leading-[1.4] text-gray-400">Get answers to frequently asked questions about personal finance, investing, budgeting, and wealth management.</p>
1212
</div>
1313

14-
<%= form_with method: :get, html: {class: "relative mb-4 max-w-[450px] mx-auto"}, data: { controller: "auto-submit-form", turbo_frame: "faqs_list" } do |f| %>
14+
<%= form_with method: :get, local: true, html: {class: "relative mb-4 max-w-[450px] mx-auto"} do |f| %>
1515
<%= f.text_field :q, value: @query,
1616
class: "w-full py-2.5 px-3 pl-10 bg-white border border-gray-300 shadow-xs rounded-xl text-base leading-[1.4]",
17-
placeholder: "Search FAQs...",
18-
data: { auto_submit_form_target: "auto" } %>
17+
placeholder: "Search FAQs..." %>
1918
<%= lucide_icon "search", class: "absolute top-3 left-3 w-5 h-5 text-gray-500 pointer-events-none" %>
2019
<% end %>
21-
22-
<!-- Category Filter -->
23-
<% if @categories.any? %>
24-
<div class="mb-8">
25-
<div class="flex flex-wrap gap-2 justify-center">
26-
<%= link_to "All", faqs_path,
27-
class: "px-4 py-2 rounded-full text-sm font-medium transition-colors #{@selected_category.blank? ? 'bg-gray-900 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}" %>
28-
<% @categories.each do |category| %>
29-
<%= link_to category, faqs_path(category: category),
30-
class: "px-4 py-2 rounded-full text-sm font-medium transition-colors #{@selected_category == category ? 'bg-gray-900 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}" %>
31-
<% end %>
32-
</div>
33-
</div>
34-
<% end %>
3520
</div>
3621

37-
<turbo-frame id="faqs_list" target="_top">
38-
<% if @faqs.any? %>
39-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
40-
<% @faqs.each do |faq| %>
41-
<%= link_to faq_path(faq), class: "block bg-white p-6 rounded-lg border shadow-xs hover:shadow-sm transition-shadow duration-200" do %>
42-
<h3 class="text-lg font-semibold mb-3 text-gray-900 leading-tight">
43-
<%= faq.question %>
44-
</h3>
45-
<% if faq.category.present? %>
46-
<div class="mb-3">
47-
<span class="inline-block px-3 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-full">
48-
<%= faq.category %>
49-
</span>
22+
<% if @faqs.any? %>
23+
<% if @query.present? %>
24+
<!-- Search Results -->
25+
<div class="mb-6">
26+
<h2 class="text-2xl font-semibold mb-4">Search Results for "<%= @query %>"</h2>
27+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
28+
<% @faqs.each do |faq| %>
29+
<%= link_to faq_path(faq), class: "block bg-white p-6 rounded-lg border shadow-xs hover:shadow-sm transition-shadow duration-200" do %>
30+
<h3 class="text-lg font-semibold mb-3 text-gray-900 leading-tight">
31+
<%= faq.question %>
32+
</h3>
33+
<% if faq.category.present? %>
34+
<div class="mb-3">
35+
<span class="inline-block px-3 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-full">
36+
<%= faq.category %>
37+
</span>
38+
</div>
39+
<% end %>
40+
<p class="text-sm text-gray-600 leading-relaxed">
41+
<%= truncate(strip_tags(faq.answer), length: 120, separator: ' ') %>
42+
</p>
43+
<div class="mt-4 flex items-center text-sm font-medium text-gray-900">
44+
Read answer
45+
<%= lucide_icon "chevron-right", class: "ml-1 w-4 h-4" %>
5046
</div>
5147
<% end %>
52-
<p class="text-sm text-gray-600 leading-relaxed">
53-
<%= truncate(strip_tags(faq.answer), length: 120, separator: ' ') %>
54-
</p>
55-
<div class="mt-4 flex items-center text-sm font-medium text-gray-900">
56-
Read answer
57-
<%= lucide_icon "chevron-right", class: "ml-1 w-4 h-4" %>
58-
</div>
5948
<% end %>
60-
<% end %>
49+
</div>
6150
</div>
62-
63-
<!-- Pagination -->
64-
<% if @pagy.pages > 1 %>
65-
<div class="flex justify-center mt-12">
66-
<%== pagy_nav(@pagy) %>
51+
<% else %>
52+
<!-- FAQs Grouped by Category -->
53+
<% faqs_grouped = @faqs.group_by { |faq| faq.category.present? ? faq.category : "General" } %>
54+
<% faqs_grouped.sort.each do |category_name, category_faqs| %>
55+
<div class="mb-12">
56+
<h2 class="text-2xl font-semibold mb-6 text-gray-900"><%= category_name %></h2>
57+
<div class="space-y-4">
58+
<% category_faqs.each do |faq| %>
59+
<%= link_to faq_path(faq), class: "block bg-white p-6 rounded-lg border shadow-xs hover:shadow-sm transition-shadow duration-200" do %>
60+
<h3 class="text-lg font-semibold mb-3 text-gray-900 leading-tight">
61+
<%= faq.question %>
62+
</h3>
63+
<p class="text-sm text-gray-600 leading-relaxed">
64+
<%= truncate(strip_tags(faq.answer), length: 120, separator: ' ') %>
65+
</p>
66+
<div class="mt-4 flex items-center text-sm font-medium text-gray-900">
67+
Read answer
68+
<%= lucide_icon "chevron-right", class: "ml-1 w-4 h-4" %>
69+
</div>
70+
<% end %>
71+
<% end %>
72+
</div>
6773
</div>
6874
<% end %>
69-
<% else %>
70-
<div class="py-56 mx-auto text-center max-w-96">
71-
<%= lucide_icon "search-x", class: "w-6 h-6 mx-auto text-gray-500" %>
72-
<p class="mt-4 text-sm font-medium">No FAQs found</p>
73-
<% if @query.present? %>
74-
<p class="mt-2 text-sm text-gray-500">We didn't find any FAQs matching "<%= @query %>".</p>
75-
<% elsif @selected_category.present? %>
76-
<p class="mt-2 text-sm text-gray-500">No FAQs found in the "<%= @selected_category %>" category.</p>
77-
<% else %>
78-
<p class="mt-2 text-sm text-gray-500">No FAQs available yet.</p>
79-
<% end %>
75+
<% end %>
76+
77+
<!-- Pagination -->
78+
<% if @pagy.pages > 1 %>
79+
<div class="flex justify-center mt-12">
80+
<%== pagy_nav(@pagy) %>
8081
</div>
8182
<% end %>
82-
</turbo-frame>
83+
<% else %>
84+
<div class="py-56 mx-auto text-center max-w-96">
85+
<%= lucide_icon "search-x", class: "w-6 h-6 mx-auto text-gray-500" %>
86+
<p class="mt-4 text-sm font-medium">No FAQs found</p>
87+
<% if @query.present? %>
88+
<p class="mt-2 text-sm text-gray-500">We didn't find any FAQs matching "<%= @query %>".</p>
89+
<% else %>
90+
<p class="mt-2 text-sm text-gray-500">No FAQs available yet.</p>
91+
<% end %>
92+
</div>
93+
<% end %>
8394
</div>

‎app/views/faqs/show.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@
4545

4646
<% if @faq.category.present? %>
4747
<div class="mt-4 mb-6">
48-
<%= link_to faqs_path(category: @faq.category), class: "inline-block px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors no-underline" do %>
48+
<span class="inline-block px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">
4949
<%= @faq.category %>
50-
<% end %>
50+
</span>
5151
</div>
5252
<% end %>
5353

0 commit comments

Comments
 (0)