Add a partial for "currently hacking" dropdown (#63)

* Add a partial for "currently hacking" dropdown

* Improve currently hacking styles

app/assets/stylesheets/currently_hacking.css

@@ -0,0 +1,69 @@
+/* Currently hacking styles */
+.currently-hacking-container {
+  position: fixed;
+  top: 0px;
+  right: 20px;
+  width: 300px;
+  max-height: 80vh;
+  background: white;
+  border-radius: 8px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.currently-hacking {
+  padding: 8px;
+  background: white;
+}
+
+.currently-hacking-header {
+  cursor: pointer;
+  user-select: none;
+  color: var(--black);
+}
+
+.currently-hacking-list {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 8px;
+  background: white;
+  display: none;
+}
+
+.currently-hacking-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.currently-hacking-list li {
+  margin-bottom: 8px;
+  background: white;
+}
+
+.currently-hacking-list li:last-child {
+  margin-bottom: 0;
+}
+
+/* Show list when parent has visible class */
+.currently-hacking.visible > .currently-hacking-list {
+  display: block;
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  .currently-hacking-container,
+  .currently-hacking,
+  .currently-hacking-list,
+  .currently-hacking-list li {
+    background: rgb(30, 30, 30);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .currently-hacking-header {
+    color: white;
+  }
+} 

app/controllers/static_pages_controller.rb

@@ -98,6 +98,19 @@ class StaticPagesController < ApplicationController
     }
   end
 
+
+  def currently_hacking
+    # Get all users who have heartbeats in the last 15 minutes
+    users = Rails.cache.fetch("currently_hacking", expires_in: 1.minute) do
+      user_ids = Heartbeat.where("time > ?", 5.minutes.ago.to_f)
+                          .distinct
+                          .pluck(:user_id)
+
+      User.where(id: user_ids)
+    end
+
+    render partial: "currently_hacking", locals: { users: users }
+
   def 🃏
     redirect_to root_path unless current_user&.slack_uid
 

app/views/layouts/application.html.erb

@@ -28,6 +28,14 @@
       <%= yield %>
     </main>
 
+    <div class="currently-hacking-container">
+      <%= turbo_frame_tag "currently_hacking", src: currently_hacking_static_pages_path do %>
+        <%# <div class="loading">
+          Loading currently hacking...
+        </div> %>
+      <% end %>
+    </div>
+
     <footer>
       <div class="container">
         <p>

app/views/shared/_nav.html.erb

@@ -54,4 +54,4 @@
       <% end %>
     <% end %>
   </ul>
-</aside> 
+</aside>

app/views/shared/_user_mention.html.erb

@@ -3,7 +3,11 @@
                 size: "32x32",
                 class: "avatar",
                 alt: "#{user.username}'s avatar" if user.avatar_url %>
-  <%= user.display_name %>
+  <% if user.slack_uid.present? %>
+    <%= link_to "@#{user.display_name}", "https://slack.com/app_redirect?channel=#{user.slack_uid}", target: "_blank" %>
+  <% else %>
+    <%= user.display_name %>
+  <% end %>
   <% unless current_user == user %>
     <% admin_tool('', 'span') do %>
       <%= link_to impersonate_user_path(user), class: "impersonate-link" do %>

app/views/static_pages/_currently_hacking.erb

@@ -0,0 +1,25 @@
+<%= turbo_frame_tag "currently_hacking" do %>
+  <%= cache ["currently_hacking"], expires_in: 1.second do %>
+    <% if users.any? %>
+      <div class="currently-hacking" onclick="this.classList.toggle('visible')">
+        <div class="currently-hacking-header">
+          <span><%= pluralize(users.count, "person") %> currently hacking</span>
+          <%# live recording indicator  %>
+        </div>
+        <div class="currently-hacking-list">
+          <hr>
+          <ul>
+            <% users.each do |user| %>
+              <%= render "shared/user_mention", user: user %>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    <% else %>
+      <div class="currently-hacking">
+        <p>No one is currently hacking</p>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
+

config/routes.rb

@@ -34,6 +34,7 @@ Rails.application.routes.draw do
     collection do
       get :project_durations
       get :activity_graph
+      get :currently_hacking
       get "🃏", to: "static_pages#🃏", as: :wildcard
     end
   end