highlight currently selected list items

Author: Nicholas Newberry

app/views/collections/index.html.erb

@@ -1,7 +1,8 @@
 <div class="flex">
   <%= turbo_stream_from "collections" %>
 
-  <%= render "shared/collection_list", collections: @collections %>
+  <% selected = @collection || @document&.collection || @chunk&.document&.collection %>
+  <%= render "shared/collection_list", collections: @collections, selected: %>
 
   <%= render "shared/collection_area" do %>
     <%= render "shared/notice" %>

app/views/conversations/_conversation_list.html.erb

@@ -4,7 +4,7 @@
     <%= button_to "New conversation", conversations_path, class: "rounded-lg py-1 px-3 mb-4 my-2 text-center text-secondary-950 dark:text-secondary-950 block font-medium bg-primary-600 dark:bg-primary-400", data: { turbo: false } %>
     <div class="overflow-y-scroll flex-1 no-scrollbar">
       <% conversations.order(created_at: :desc).each do |conversation| %>
-        <%= render "conversation_list_item", conversation: %>
+        <%= render "conversation_list_item", conversation:, selected: %>
       <% end %>
     </div>
     <div class="w-full text-sm font-bold text-center my-1">

app/views/conversations/_conversation_list_item.html.erb

@@ -1,5 +1,12 @@
 <div id="<%= dom_id(conversation) %>">
-  <div class="container flex hover:bg-secondary-300 dark:hover:bg-secondary-700 rounded-md p-1">
+  <%
+    bg_class = if selected.id == conversation.id
+      "bg-secondary-200 dark:bg-secondary-600 hover:bg-secondary-200 dark:hover:bg-secondary-500"
+    else
+      "hover:bg-secondary-300 dark:hover:bg-secondary-700"
+    end
+  %>
+  <div class="container flex rounded-md p-1 <%= bg_class %>">
     <%= link_to conversation, class: "flex-1" do %>
       <div class="px-2 py-1 text-sm">
         <%= conversation.title %>

app/views/conversations/index.html.erb

@@ -1,5 +1,5 @@
 <div class="flex">
-  <%= render "conversation_list", conversations: @conversations %>
+  <%= render "conversation_list", conversations: @conversations, selected: @conversation %>
 
   <div class="overflow-y-scroll flex-1 p-5 h-screen w-100 bg-secondary-100 dark:bg-secondary-950 flextext-gray-700 dark:text-secondary-200">
     <div class="container flex justify-center w-full align-center">

app/views/shared/_collection_list.html.erb

@@ -6,7 +6,7 @@
     <%= button_to "New collection", collections_path, class: "rounded-lg py-1 mb-4 px-3 my-2 text-center text-secondary-100 dark:text-secondary-950 block font-medium bg-tertiary-600 dark:bg-tertiary-400", data: { turbo: false } %>
     <div class="container overflow-y-scroll flex-1 no-scrollbar">
       <% collections.order(created_at: :desc).each do |collection| %>
-        <%= render "shared/collection_list_item", collection: %>
+        <%= render "shared/collection_list_item", collection:, selected: %>
       <% end %>
     </div>
     <div class="w-full text-sm font-bold text-center my-1">

app/views/shared/_collection_list_item.html.erb

@@ -1,5 +1,12 @@
 <div id="<%= "#{dom_id(collection)}_list_item" %>">
-  <div class="container flex hover:bg-secondary-300 dark:hover:bg-secondary-700 rounded-md p-1">
+  <%
+    bg_class = if selected.id == collection.id
+      "bg-secondary-200 dark:bg-secondary-600 hover:bg-secondary-200 dark:hover:bg-secondary-500"
+    else
+      "hover:bg-secondary-300 dark:hover:bg-secondary-700"
+    end
+  %>
+  <div class="container flex rounded-md p-1 <%= bg_class %>">
     <%= link_to collection, class: "flex-1" do %>
       <div class="px-2 py-1 text-sm">
         <%= collection.name %>