From 971475e74715a2b2bad48b3a69a8a327a578b35e Mon Sep 17 00:00:00 2001
From: Andrew Brown <drusepth@gmail.com>
Date: Mon, 7 Jul 2025 20:52:25 -0700
Subject: [PATCH] more dashboard polish

---
 .../_tailwind_content_question.html.erb       |   3 +
 .../_recently_edited_pages.html.erb           |   6 -
 .../_serendipitous_question.html.erb          | 136 +++++++++++++-----
 app/views/main/dashboard.html.erb             |  19 ++-
 4 files changed, 115 insertions(+), 49 deletions(-)

diff --git a/app/views/cards/serendipitous/_tailwind_content_question.html.erb b/app/views/cards/serendipitous/_tailwind_content_question.html.erb
index 01dedae1..7e06ff91 100644
--- a/app/views/cards/serendipitous/_tailwind_content_question.html.erb
+++ b/app/views/cards/serendipitous/_tailwind_content_question.html.erb
@@ -1,4 +1,7 @@
 <%
+  # DEPRECATED: This partial has been merged into app/views/main/components/_serendipitous_question.html.erb
+  # and is no longer used. It's kept here temporarily for reference.
+  #
   # Partial locals: `content` to ask a question about, and `field` for the field being questioned
   include_quick_reference = defined?(include_quick_reference) && !!include_quick_reference
 %>
diff --git a/app/views/main/components/_recently_edited_pages.html.erb b/app/views/main/components/_recently_edited_pages.html.erb
index 8fdd0604..e7fd8ee1 100644
--- a/app/views/main/components/_recently_edited_pages.html.erb
+++ b/app/views/main/components/_recently_edited_pages.html.erb
@@ -21,12 +21,6 @@
                 <i class="material-icons text-xs">schedule</i>
                 <span>edited <%= time_ago_in_words page.updated_at %> ago</span>
               </span>
-              <% if page.cached_word_count.present? %>
-                <span class="flex items-center space-x-1">
-                  <i class="material-icons text-xs">description</i>
-                  <span><%= number_with_delimiter page.cached_word_count %> words</span>
-                </span>
-              <% end %>
               <% if page.respond_to?(:favorite?) && page.favorite? %>
                 <i class="material-icons text-xs text-yellow-500">star</i>
               <% end %>
diff --git a/app/views/main/components/_serendipitous_question.html.erb b/app/views/main/components/_serendipitous_question.html.erb
index bfef7836..f669588b 100644
--- a/app/views/main/components/_serendipitous_question.html.erb
+++ b/app/views/main/components/_serendipitous_question.html.erb
@@ -1,4 +1,4 @@
-<% if @content %>
+<% if @content && @attribute_field_to_question %>
   <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
     <!-- Hero Image -->
     <div class="relative h-48 overflow-hidden">
@@ -27,39 +27,109 @@
     </div>
     
     <!-- Question Content -->
-    <div class="p-6">
-      <% if @attribute_field_to_question %>
-        <%= render partial: 'cards/serendipitous/tailwind_content_question', locals: { 
-          content: @content, 
-          field: @attribute_field_to_question,
-          expand_by_default: true,
-          include_quick_reference: false
-        } %>
-        
-        <!-- Seamless clickable footer -->
-        <button type="submit" class="w-full px-4 py-3 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-blue-50 hover:to-blue-100 border border-t-0 border-gray-300 hover:border-blue-300 rounded-b-lg transition-all duration-300 ease-out group cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset hover:shadow-sm active:scale-[0.998] active:shadow-inner">
-          <div class="flex items-center justify-between text-sm text-gray-700 group-hover:text-blue-700 mb-1.5 transition-colors duration-200">
-            <span class="flex items-center font-medium">
-              <svg class="w-4 h-4 mr-2 opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+    <div class="p-6 pb-0">
+      <style>
+        /* Enhanced autosave visual feedback styles */
+        .js-enhanced-autosave.border-yellow-400 {
+          border-color: #fbbf24 !important;
+          box-shadow: 0 0 0 1px #fbbf24 !important;
+        }
+        .js-enhanced-autosave.border-green-400 {
+          border-color: #34d399 !important;
+          box-shadow: 0 0 0 1px #34d399 !important;
+        }
+        .js-enhanced-autosave.border-red-400 {
+          border-color: #f87171 !important;
+          box-shadow: 0 0 0 1px #f87171 !important;
+        }
+        .js-enhanced-autosave:focus.border-yellow-400 {
+          border-color: #fbbf24 !important;
+          box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2) !important;
+        }
+        .js-enhanced-autosave:focus.border-green-400 {
+          border-color: #34d399 !important;
+          box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2) !important;
+        }
+        .js-enhanced-autosave:focus.border-red-400 {
+          border-color: #f87171 !important;
+          box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2) !important;
+        }
+      </style>
+
+      <p class="text-4xl text-gray-900">
+        <%=
+          t(
+            "serendipitous_questions.attributes.#{@content.page_type.downcase}.#{@attribute_field_to_question.label.downcase}",
+            name: @content.name,
+            default: "What is #{@content.name}'s #{@attribute_field_to_question.label.downcase}?"
+          )
+        %>
+      </p>
+
+      <div class="mt-4">
+        <div class="flex items-center justify-between">
+          <label class="text-sm text-gray-500">
+            <span class="<%= @content.text_color %>"><%= link_to @content.name, @content.view_path %></span>
+            <span class="mx-1">&rsaquo;</span>
+            <%= @attribute_field_to_question.label %>
+          </label>
+          <div class="js-autosave-status text-xs text-gray-400 hidden">
+            <span class="js-status-text"></span>
+          </div>
+        </div>
+
+        <%= form_for @content, url: FieldTypeService.form_path_from_attribute_field(@attribute_field_to_question), method: :patch, html: { class: "serendipitous-question-form" } do |f| %>
+          <%= hidden_field(:override, :redirect_path, value: request.fullpath) %>
+          <%= hidden_field_tag "entity[entity_id]", @content.id %>
+          <%= hidden_field_tag "entity[entity_type]", @content.page_type %>
+          <%= hidden_field_tag "field[name]", @attribute_field_to_question[:id] %>
+          
+          <%
+            field_value = @attribute_field_to_question.attribute_values.find_by(
+              user: @content.user,
+              entity_type: @content.page_type,
+              entity_id: @content.id
+            ).try(:value)
+            
+            placeholder = I18n.translate "attributes.#{@content.page_type.downcase}.#{@attribute_field_to_question.label.downcase.gsub(/\s/, '_')}",
+              scope: :serendipitous_questions,
+              name: @content.name || "this #{@content.page_type.downcase}",
+              default: 'Write as little or as much as you want!'
+          %>
+          
+          <div class="relative mt-1">
+            <%=
+              text_area_tag "field[value]",
+                          field_value,
+                          class: "w-full rounded-t-lg focus:border-notebook-blue h-48 border-gray-300 js-enhanced-autosave js-can-mention-pages resize-none transition-all duration-200",
+                          placeholder: placeholder
+            %>
+          </div>
+          
+          <!-- Card Footer with Submit Button -->
+          <button type="submit" class="w-full px-4 py-3 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-blue-50 hover:to-blue-100 border border-t-0 border-gray-300 hover:border-blue-300 rounded-b-lg transition-all duration-300 ease-out group cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset hover:shadow-sm active:scale-[0.998] active:shadow-inner">
+            <div class="flex items-center justify-between text-sm text-gray-700 group-hover:text-blue-700 mb-1.5 transition-colors duration-200">
+              <span class="flex items-center font-medium">
+                <svg class="w-4 h-4 mr-2 opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Save answer & get next question
+              </span>
+              <svg class="w-4 h-4 opacity-50 group-hover:opacity-80 group-hover:translate-x-1 transition-all duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
               </svg>
-              Save answer & get next question
-            </span>
-            <svg class="w-4 h-4 opacity-50 group-hover:opacity-80 group-hover:translate-x-1 transition-all duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
-          </div>
-          <div class="flex items-center text-xs text-gray-500 group-hover:text-blue-600 transition-colors duration-200">
-            <i class="material-icons text-xs mr-1 opacity-80 group-hover:opacity-100 transition-opacity duration-200"><%= @content.icon %></i>
-            <span class="opacity-90 group-hover:opacity-100 transition-opacity duration-200">
-              Your answer will be automatically saved to your
-              <span class="<%= @content.text_color %> mx-1 font-medium"><%= @content.name %></span>
-              <%= @content.page_type.downcase %> page.
-            </span>
-          </div>
-        </button>
-        
-      <% end %>
+            </div>
+            <div class="flex items-center text-xs text-gray-500 group-hover:text-blue-600 transition-colors duration-200">
+              <i class="material-icons text-xs mr-1 opacity-80 group-hover:opacity-100 transition-opacity duration-200"><%= @content.icon %></i>
+              <span class="opacity-90 group-hover:opacity-100 transition-opacity duration-200">
+                Your answer will be automatically saved to your
+                <span class="<%= @content.text_color %> mx-1 font-medium"><%= @content.name %></span>
+                <%= @content.page_type.downcase %> page.
+              </span>
+            </div>
+          </button>
+        <% end %>
+      </div>
     </div>
   </div>
 <% end %>
\ No newline at end of file
diff --git a/app/views/main/dashboard.html.erb b/app/views/main/dashboard.html.erb
index b0571867..08ab7915 100644
--- a/app/views/main/dashboard.html.erb
+++ b/app/views/main/dashboard.html.erb
@@ -64,15 +64,17 @@
             <div class="lg:col-span-1 space-y-6">
               
               <!-- What's New Card -->
-              <div>                
-                <div class="bg-blue-50 border border-blue-200 rounded-md shadow-sm hover:shadow-lg transition-all duration-300">
-                  <div class="p-4">
-                    <h4 class="text-base font-semibold text-blue-900 mb-2">New Something</h4>
-                    <p class="text-sm text-blue-700 leading-relaxed">This is a little notice box about what's new. I can fit about 2 lines before I feel bad.</p>
-                    <div class="text-right">
-                      <%= link_to 'Dismiss', '#', class: 'text-blue-600 hover:text-blue-700 font-medium text-xs' %>
+              <div>
+                <%= link_to '#' do %>
+                  <div class="bg-blue-50 border border-blue-200 rounded-md shadow-sm hover:shadow-lg transition-all duration-300">
+                    <div class="p-4">
+                      <h4 class="text-base font-semibold text-blue-900 mb-2">New Something</h4>
+                      <p class="text-sm text-blue-700 leading-relaxed">This is a little notice box about what's new. I can fit about 2 lines before I feel bad.</p>
                     </div>
                   </div>
+                <% end %>
+                <div class="text-right">
+                  <%= link_to 'Dismiss this notice', '#', class: 'text-gray-400 hover:text-notebook-blue font-medium text-xs' %>
                 </div>
               </div>
               
@@ -112,9 +114,6 @@
             <i class="material-icons mr-3 text-gray-600 text-3xl">library_books</i>
             Most-Edited Pages
           </h2>
-          <%= link_to recent_content_path, class: "text-sm text-blue-600 hover:text-blue-700 font-medium" do %>
-            View more →
-          <% end %>
         </div>
         
         <!-- Horizontal Scrolling Content Grid -->