From 657e08faecba490c9c30f0e46a3d07b8c87db8a9 Mon Sep 17 00:00:00 2001
From: viktorvsk <me@viktorvsk.com>
Date: Thu, 23 Apr 2026 04:56:03 +0000
Subject: [PATCH] feat: add progress bar to filter page

---
 app/views/filter/show.html.erb | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/views/filter/show.html.erb b/app/views/filter/show.html.erb
index 073fb1e..106f179 100644
--- a/app/views/filter/show.html.erb
+++ b/app/views/filter/show.html.erb
@@ -27,6 +27,12 @@
       <%= link_to "word list", words_path, class: "link-muted" %>
     </div>
 
+    <% if @total > 0 %>
+      <div class="progress-bar-wrap">
+        <div class="progress-bar-fill" style="width: <%= ((@total - @remaining).to_f / @total * 100).round %>%"></div>
+      </div>
+    <% end %>
+
     <div class="flashcard-wrap" data-controller="flashcard">
       <div class="flashcard" data-flashcard-target="card"
            data-action="touchstart->flashcard#touchstart touchend->flashcard#touchend click->flashcard#flip">
@@ -50,7 +56,7 @@
       <div class="card-actions">
         <%= form_with url: filter_learning_path(@word), method: :post, id: "form-left", class: "inline-form",
               data: { turbo_frame: "_top" } do |f| %>
-          <%= f.submit "Learning  ←", class: "btn btn-learning" %>
+          <%= f.submit "Learning ←", class: "btn btn-learning" %>
         <% end %>
 
         <%= form_with url: filter_skip_path(@word), method: :post, id: "form-skip", class: "inline-form",
@@ -60,14 +66,14 @@
 
         <%= form_with url: filter_known_path(@word), method: :post, id: "form-right", class: "inline-form",
               data: { turbo_frame: "_top" } do |f| %>
-          <%= f.submit "Known  →", class: "btn btn-known" %>
+          <%= f.submit "Known →", class: "btn btn-known" %>
         <% end %>
       </div>
 
       <div class="key-hint">
-        <kbd>←</kbd> Learning &nbsp;&nbsp;
+        <kbd>&larr;</kbd> Learning &nbsp;&nbsp;
         <kbd>Space</kbd> Flip &nbsp;&nbsp;
-        <kbd>→</kbd> Known &nbsp;&nbsp;
+        <kbd>&rarr;</kbd> Known &nbsp;&nbsp;
         <kbd>S</kbd> Skip
       </div>
     </div>