feat(home/document): Add delete method for documents, trashcan icon and notice with disappearing notifications on success

Author: imasharc

app/controllers/documents_controller.rb

@@ -45,4 +45,11 @@ def update
 
     redirect_to document_path(@document)
   end
+
+  def destroy
+    @document = Document.find(params[:id])
+    @document.destroy
+
+    redirect_to root_path, notice: "Document was successfully deleted!"
+  end
 end

app/javascript/controllers/flash_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="flash"
+export default class extends Controller {
+  connect() {
+    setTimeout(() => {
+      this.element.style.opacity = "0";
+
+      setTimeout(() => {
+        this.element.remove();
+      }, 500);
+    }, 3000);
+  }
+}

app/views/home/index.html.erb

@@ -17,27 +17,34 @@
 
     <% @documents.each do |document| %>
 
-      <a href="<%= document_path(document) %>" style="text-decoration: none; color: inherit; display: block; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; transition: box-shadow 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05);" onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)'" onmouseout="this.style.boxShadow='0 2px 5px rgba(0,0,0,0.05)'">
+      <div style="position: relative; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: white; transition: box-shadow 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05);" onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)'" onmouseout="this.style.boxShadow='0 2px 5px rgba(0,0,0,0.05)'">
 
-        <div style="height: 160px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center; overflow: hidden;">
-          <% if document.image_url.present? %>
-            <img src="<%= document.image_url %>" style="width: 100%; height: 100%; object-fit: cover; object-position: top;" alt="Thumbnail">
-          <% else %>
-            <span style="font-size: 40px; color: #ccc;">📄</span>
-          <% end %>
+        <div style="position: absolute; top: 10px; right: 10px; z-index: 10;">
+          <%= button_to "🗑️", document_path(document), method: :delete, data: { turbo_confirm: "Are you sure you want to permanently delete this document and all its pins?" }, style: "background: white; border: 1px solid #ff4d4f; color: #ff4d4f; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); font-size: 16px; transition: transform 0.1s;", onmouseover: "this.style.transform='scale(1.1)'", onmouseout: "this.style.transform='scale(1)'" %>
         </div>
 
-        <div style="padding: 15px; display: flex; align-items: center; gap: 10px;">
-          <div style="background-color: #4285f4; color: white; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 3px; font-size: 12px;">
-            ≡
+        <a href="<%= document_path(document) %>" style="text-decoration: none; color: inherit; display: block;">
+          
+          <div style="height: 160px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+            <% if document.image_url.present? %>
+              <img src="<%= document.image_url %>" style="width: 100%; height: 100%; object-fit: cover; object-position: top;" alt="Thumbnail">
+            <% else %>
+              <span style="font-size: 40px; color: #ccc;">📄</span>
+            <% end %>
           </div>
-          <div style="overflow: hidden;">
-            <h3 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><%= document.title %></h3>
-            <p style="margin: 0; font-size: 12px; color: #5f6368;">Opened <%= time_ago_in_words(document.updated_at) %> ago</p>
+
+          <div style="padding: 15px; display: flex; align-items: center; gap: 10px;">
+            <div style="background-color: #4285f4; color: white; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 3px; font-size: 12px;">
+              ≡
+            </div>
+            <div style="overflow: hidden;">
+              <h3 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><%= document.title %></h3>
+              <p style="margin: 0; font-size: 12px; color: #5f6368;">Opened <%= time_ago_in_words(document.updated_at) %> ago</p>
+            </div>
           </div>
-        </div>
 
-      </a>
+        </a>
+      </div>
 
     <% end %>
 

app/views/layouts/application.html.erb

@@ -23,6 +23,11 @@
   </head>
 
   <body>
+    <% if notice.present? %>
+      <div data-controller="flash" style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: #4caf50; color: white; padding: 12px 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; font-family: sans-serif; font-weight: bold; transition: opacity 0.5s ease;">        ✅ <%= notice %>
+      </div>
+    <% end %>
+
     <%= yield %>
   </body>
 </html>

config/routes.rb

@@ -3,7 +3,7 @@
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
   post "capture", to: "home#capture"
 
-  resources :documents, only: [:create, :show, :update] do
+  resources :documents, only: [:create, :show, :update, :destroy] do
     resources :pins, only: [:create]
   end