rework streak displays

This commit is contained in:
Echo 2025-06-22 14:27:33 -04:00
parent 370196d731
commit 8a4cc23987
No known key found for this signature in database
5 changed files with 86 additions and 27 deletions

View file

@ -71,8 +71,8 @@ class User < ApplicationRecord
end
def streak_days_formatted
if streak_days > 7
"7+"
if streak_days > 30
"30+"
elsif streak_days < 1
nil
else

View file

@ -66,14 +66,13 @@
<% end %>
</span>
<% end %>
<% if entry.streak_count > 7 %>
<span class="super" title="7+ daily streak">
🔥 7+
</span>
<% elsif entry.streak_count > 0 %>
<span class="super" title="<%= entry.streak_count %> day streak">
🔥 <%= entry.streak_count %>
</span>
<% if entry.streak_count > 0 %>
<%= render "static_pages/streak",
user: entry.user,
streak_count: entry.streak_count,
turbo_frame: false,
icon_size: 16,
show_super_class: true %>
<% end %>
</span>
<span class="time"><%= short_time_detailed entry.total_seconds %></span>

View file

@ -87,14 +87,13 @@
<% end %>
</span>
<% end %>
<% if entry.streak_count > 7 %>
<span class="super" title="7+ daily streak">
🔥 7+
</span>
<% elsif entry.streak_count > 0 %>
<span class="super" title="<%= entry.streak_count %> day streak">
🔥 <%= entry.streak_count %>
</span>
<% if entry.streak_count > 0 %>
<%= render "static_pages/streak",
user: entry.user,
streak_count: entry.streak_count,
turbo_frame: false,
icon_size: 16,
show_super_class: true %>
<% end %>
</span>
<span class="time"><%= short_time_detailed entry.total_seconds %></span>

View file

@ -6,9 +6,9 @@
</div>
<% end %>
<% if current_user %>
<div class="ml-2 px-2 rounded">
<%= render "shared/user_mention", user: current_user %>
<%= turbo_frame_tag "streak", src: streak_static_pages_path %>
<div class="px-2 rounded flex flex-col items-center gap-1">
<%= render "shared/user_mention", user: current_user %>
<%= render "static_pages/streak", user: current_user, show_text: true, turbo_frame: false %>
</div>
<% else %>
<div class="m-2 px-2 py-1 rounded">

View file

@ -1,7 +1,68 @@
<%= turbo_frame_tag "streak" do %>
<% if current_user.streak_days_formatted %>
<p title="🔥 <%= current_user.streak_days_formatted %> day streak">
<%= current_user.streak_days_formatted %> 🔥
</p>
<%
user = local_assigns[:user] || current_user
streak_count = local_assigns[:streak_count] || user&.streak_days_formatted
use_turbo_frame = local_assigns.fetch(:turbo_frame, true)
icon_size = local_assigns[:icon_size] || 24
show_super_class = local_assigns.fetch(:show_super_class, false)
show_text = local_assigns.fetch(:show_text, false)
c = streak_count.to_i
if c >= 30
bg = "from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20"
hbg = "hover:from-blue-100 hover:to-indigo-100 dark:hover:from-blue-800/30 dark:hover:to-indigo-800/30"
bc = "border-blue-200 dark:border-blue-700"
ic = "text-blue-500 dark:text-blue-400 group-hover:text-blue-600 dark:group-hover:text-blue-300"
tc = "text-blue-700 dark:text-blue-300 group-hover:text-blue-800 dark:group-hover:text-blue-200"
tm = "text-blue-600 dark:text-blue-400"
elsif c >= 7
bg = "from-red-50 to-orange-50 dark:from-red-900/20 dark:to-orange-900/20"
hbg = "hover:from-red-100 hover:to-orange-100 dark:hover:from-red-800/30 dark:hover:to-orange-800/30"
bc = "border-red-200 dark:border-red-700"
ic = "text-red-500 dark:text-red-400 group-hover:text-red-600 dark:group-hover:text-red-300"
tc = "text-red-700 dark:text-red-300 group-hover:text-red-800 dark:group-hover:text-red-200"
tm = "text-red-600 dark:text-red-400"
else
bg = "from-orange-50 to-yellow-50 dark:from-orange-900/20 dark:to-yellow-900/20"
hbg = "hover:from-orange-100 hover:to-yellow-100 dark:hover:from-orange-800/30 dark:hover:to-yellow-800/30"
bc = "border-orange-200 dark:border-orange-700"
ic = "text-orange-500 dark:text-orange-400 group-hover:text-orange-600 dark:group-hover:text-orange-300"
tc = "text-orange-700 dark:text-orange-300 group-hover:text-orange-800 dark:group-hover:text-orange-200"
tm = "text-orange-600 dark:text-orange-400"
end
%>
<% content = capture do %>
<% if streak_count && streak_count.to_i > 0 %>
<div class="inline-flex items-center gap-1 px-2 py-1 bg-gradient-to-r <%= bg %> border <%= bc %> rounded-lg transition-all duration-200 <%= hbg %> group <%= 'super' if show_super_class %>"
title="<%= streak_count.to_i > 30 ? '30+ daily streak' : "#{streak_count} day streak" %>">
<svg xmlns="http://www.w3.org/2000/svg"
width="<%= icon_size %>"
height="<%= icon_size %>"
viewBox="0 0 24 24"
class="<%= ic %> transition-colors duration-200 group-hover:animate-pulse">
<path fill="currentColor" d="M10 2c0-.88 1.056-1.331 1.692-.722c1.958 1.876 3.096 5.995 1.75 9.12l-.08.174l.012.003c.625.133 1.203-.43 2.303-2.173l.14-.224a1 1 0 0 1 1.582-.153C18.733 9.46 20 12.402 20 14.295C20 18.56 16.409 22 12 22s-8-3.44-8-7.706c0-2.252 1.022-4.716 2.632-6.301l.605-.589c.241-.236.434-.43.618-.624C9.285 5.268 10 3.856 10 2"/>
</svg>
<span class="text-sm font-semibold <%= tc %> transition-colors duration-200">
<%= streak_count.to_i > 30 ? '30+' : streak_count %>
<% if show_text %>
<span class="ml-1 text-xs font-normal <%= tm %>">
<%= streak_count.to_i > 30 ? 'day streak' : (streak_count.to_i == 1 ? 'day streak' : 'day streak') %>
</span>
<% end %>
</span>
</div>
<% end %>
<% end %>
<% end %>
<% if use_turbo_frame %>
<%= turbo_frame_tag "streak" do %>
<% if streak_count && streak_count.to_i > 0 %>
<div class="flex items-center justify-center">
<%= content %>
</div>
<% end %>
<% end %>
<% else %>
<%= content %>
<% end %>