Make notifications look nice

app/controllers/notifications_controller.rb

@@ -5,11 +5,18 @@ class NotificationsController < ApplicationController
   before_action :set_notification, only: %i[show destroy]
 
   def index
-    @notifications = current_user.notifications.paginate(page: params[:page], per_page: 25)
+    @notifications =
+      current_user.notifications.order(created_at: :desc).paginate(page: params[:page], per_page: 20)
   end
 
   def show; end
 
+  def mark_as_read
+    current_user.notifications.unread.update_all(read_at: Time.zone.now)
+
+    redirect_to notifications_url, notice: 'All notifications marked as read.', status: :see_other
+  end
+
   def destroy
     @notification.destroy!
     redirect_to notifications_url, notice: 'Notification was successfully destroyed.', status: :see_other

app/views/imports/new.html.erb

@@ -35,5 +35,5 @@
 
   <%= render "form", import: @import %>
 
-  <%= link_to "Back to imports", imports_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to "Back to imports", imports_path, class: "btn mx-5 mb-5" %>
 </div>

app/views/notifications/_notification.html.erb

@@ -1,17 +1,16 @@
-<div role="<%= notification.kind %>" class="<%= notification.kind %> shadow-lg" id="<%= dom_id notification %>">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    class="stroke-info h-6 w-6 shrink-0">
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-  </svg>
-  <div>
-    <h3 class="font-bold"><%= link_to notification.title, notification, class: 'link hover:no-underline' %></h3>
-    <div class="text-s"><%= time_ago_in_words notification.created_at %> ago</div>
+<div role="<%= notification.kind %>" class="<%= notification.kind %> shadow-lg p-5 flex justify-between items-center mb-4 rounded-lg bg-neutral" id="<%= dom_id notification %>">
+  <div class="flex-1">
+    <h3 class="font-bold text-xl">
+      <%= link_to notification.title, notification, class: 'link hover:no-underline text-blue-600' %>
+    </h3>
+    <div class="text-sm text-gray-500"><%= time_ago_in_words notification.created_at %> ago</div>
+
+    <% if params[:action] == 'show' %>
+      <div class="mt-2">
+        <%= notification.content %>
+      </div>
+    <% end %>
+  </div>
+  <div class="badge badge-<%= notification.kind %> gap-2">
   </div>
 </div>

app/views/notifications/index.html.erb

@@ -1,10 +1,15 @@
 <% content_for :title, "Notifications" %>
-<div class="w-full">
-  <div class="flex justify-between items-center">
-    <h1 class="font-bold text-4xl">Notifications</h1>
+<div class="flex flex-col items-center w-full">
+  <div class="text-center mb-6">
+    <h1 class="font-bold text-4xl mb-4">Notifications</h1>
+    <div class="flex items-center justify-center mb-4">
+      <%= link_to "Mark all as read", mark_notifications_as_read_path, method: :post, data: { turbo_method: :post }, class: "btn btn-sm btn-primary" %>
+    </div>
+    <div class="mb-4">
+      <%= will_paginate @notifications %>
+    </div>
   </div>
-
-  <div id="notifications" class="min-w-full">
+  <div id="notifications" class="w-full max-w-2xl">
     <% @notifications.each do |notification| %>
       <%= render notification %>
     <% end %>

app/views/notifications/show.html.erb

@@ -1,14 +1,12 @@
 <div class="mx-auto md:w-2/3 w-full flex">
   <div class="mx-auto">
-    <% if notice.present? %>
-      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-    <% end %>
-
     <%= render @notification %>
 
-    <%= link_to "Back to notifications", notifications_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <div class="inline-block ml-2">
-      <%= button_to "Destroy this notification", @notification, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+    <div class='my-5'>
+      <%= link_to "Back to notifications", notifications_path, class: "btn btn-small" %>
+      <div class="inline-block ml-2">
+        <%= button_to "Destroy this notification", @notification, data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?", turbo_method: :delete }, method: :delete, class: "btn btn-small btn-warning" %>
+      </div>
     </div>
   </div>
 </div>

app/views/shared/_navbar.html.erb

@@ -66,17 +66,17 @@
               <span class="badge badge-xs badge-primary"></span>
             <% end %>
           </div>
-          <ul tabindex="0" class="dropdown-content z-100 menu p-2 shadow-lg bg-base-100 rounded-box min-w-52">
+          <ul tabindex="0" class="dropdown-content z-10 menu p-2 shadow-lg bg-base-100 rounded-box min-w-52">
             <% if @unread_notifications.any? %>
               <li><%= link_to 'See all', notifications_path %></li>
               <div class="divider p-0 m-0"></div>
             <% end %>
             <% @unread_notifications.first(10).each do |notification| %>
               <li>
-                <a>
+                <%= link_to notification do %>
                   <%= notification.title %>
-                  <span class="badge badge-xs justify-self-end badge-<%= notification.kind %>"></span>
-                </a>
+                  <div class="badge badge-xs justify-self-end badge-<%= notification.kind %>"></div>
+                <% end %>
               </li>
             <% end %>
           </ul>

config/routes.rb

@@ -24,6 +24,7 @@
     end
   end
   resources :notifications, only: %i[index show destroy]
+  post 'notifications/mark_as_read', to: 'notifications#mark_as_read', as: :mark_notifications_as_read
   resources :stats, only: :index do
     collection do
       post :update