From c6878c6626e14563cd25aa42e013e04b413cb34c Mon Sep 17 00:00:00 2001
From: Mia Sinek <mia@miasinek.com>
Date: Tue, 10 Dec 2024 19:29:19 +0100
Subject: [PATCH] Pimp up app show page

---
 app/helpers/dashboard_helper.rb               |  2 +-
 app/views/dashboard/show.html.erb             | 94 +++++++++++--------
 .../generated_apps/_generated_app.html.erb    | 18 ++--
 3 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/app/helpers/dashboard_helper.rb b/app/helpers/dashboard_helper.rb
index e87bd46..75a845b 100644
--- a/app/helpers/dashboard_helper.rb
+++ b/app/helpers/dashboard_helper.rb
@@ -15,7 +15,7 @@ def sort_link_to(name, column)
       status: params[:status],
       search: params[:search]
     ),
-      class: "group inline-flex items-center px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider",
+      class: "group inline-flex items-center py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider",
       data: { turbo_frame: "generated_apps_list" }
     ) do
       concat name
diff --git a/app/views/dashboard/show.html.erb b/app/views/dashboard/show.html.erb
index 0d1b77a..9e75a24 100644
--- a/app/views/dashboard/show.html.erb
+++ b/app/views/dashboard/show.html.erb
@@ -2,53 +2,71 @@
 <%= turbo_stream_from [ :notification_badge, current_user.id ] %>
 
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-  <div class="bg-white rounded-t-lg border border-gray-200 p-8 mt-8">
-    <h1 class="text-2xl font-semibold text-gray-900">
-      Welcome <%= current_user.github_username %>!
-    </h1>
-    <p class="mt-2 text-base text-gray-600">
-      What will you build today?
-    </p>
-  </div>
-
-  <% if @generated_apps.any? %>
-    <div class="container mx-auto px-4 py-8">
-      <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold">My Generated Apps</h1>
-        <%= form_tag dashboard_path, method: :get, data: { turbo_frame: "generated_apps_list" } do %>
-          <%= text_field_tag :search, params[:search],
-              placeholder: "Search generated apps...",
-              class: "rounded-lg border-gray-300",
+  <div class="flex justify-between items-center bg-white rounded-t-lg border-t border-l border-r border-gray-200 p-8 mt-8">
+    <div class="">
+      <h1 class="text-2xl font-semibold text-gray-900">
+        Welcome <%= current_user.github_username %>!
+      </h1>
+      <p class="mt-2 text-base text-gray-600">
+        What will you build today?
+      </p>
+    </div>
+    <% if @generated_apps.any? %>
+      <div class="sm:flex sm:items-center justify-end">
+        <%= form_with url: dashboard_path,
+            method: :get,
+            data: { turbo_frame: "generated_apps_list" } do |f| %>
+          <%= f.text_field :search,
+              value: params[:search],
+              placeholder: "Search...",
+              class: "text-sm rounded-lg border-gray-300",
               data: {
                 controller: "autosubmit",
                 action: "input->autosubmit#submit",
                 autosubmit_target: "input"
               } %>
         <% end %>
-      </div>
-      <%= turbo_frame_tag "generated_apps_list" do %>
-        <div class="bg-white rounded-lg shadow">
-          <table class="min-w-full">
-            <thead>
-              <tr>
-                <th class="py-3 text-left"><%= sort_link_to "Name", :name %></th>
-                <th class="px-2 py-3 text-left"><%= sort_link_to "Status", :status %></th>
-                <th class="px-2 py-3 text-left"><%= sort_link_to "Created", :created_at %></th>
-                <th class="px-2 py-3 text-left">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <%= render @generated_apps %>
-            </tbody>
-          </table>
-        </div>
 
-        <!-- Pagination TODO - fix this for more and disable it for less than 2 pages -->
-        <%# <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
-        <div class="flex justify-center mt-6">  
-          <%== pagy_nav(@pagy) %>
+        <div class="mt-4 sm:ml-4 sm:mt-0 sm:flex-none">
+          <button type="button"
+                  class="block rounded-md bg-[#ac3b61] px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-[#993351] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#993351]">
+            Generate new app
+          </button>
         </div>
+      </div>
+    <% end %>
+  </div>
 
+  <% if @generated_apps.any? %>
+    <div class="py-12 px-4 sm:px-6 lg:px-8 bg-white rounded-b-lg border-l border-r border-b border-b border-gray-200">
+      <%= turbo_frame_tag "generated_apps_list" do %>
+        <div class="mt-8 flow-root">
+          <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+              <table class="min-w-full divide-y divide-gray-300">
+                  <tr>
+                    <th scope="col"
+                        class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
+                        <%= sort_link_to "Name", :name %>
+                    </th>
+                    <th scope="col"
+                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                        <%= sort_link_to "Status", :status %>
+                    </th>
+                    <th scope="col"
+                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                        <%= sort_link_to "Created", :created_at %>
+                    </th>
+                    <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0"></th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200">
+                  <%= render @generated_apps %>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
       <% end %>
     </div>
   <% else %>
diff --git a/app/views/generated_apps/_generated_app.html.erb b/app/views/generated_apps/_generated_app.html.erb
index ec5d2ef..eb461be 100644
--- a/app/views/generated_apps/_generated_app.html.erb
+++ b/app/views/generated_apps/_generated_app.html.erb
@@ -1,15 +1,19 @@
-<tr class="border-t" id="generated_app_<%= generated_app.id %>">
-  <td class="px-6 py-4"><%= generated_app.name %></td>
-  <td class="px-6 py-4">
+<tr id="generated_app_<%= generated_app.id %>">
+  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
+    <%= generated_app.name %>
+  </td>
+  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
     <span class="px-2 py-1 rounded-full text-sm <%= status_color(generated_app.status) %>">
       <%= generated_app.status %>
     </span>
   </td>
-  <td class="px-6 py-4"><%= time_ago_in_words(generated_app.created_at) %> ago</td>
-  <td class="px-6 py-4 flex gap-2">
+  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+    <%= time_ago_in_words(generated_app.created_at) %> ago
+  </td>
+  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
     <%= link_to generated_app_path(generated_app),
-      class: "text-blue-600 hover:text-blue-800",
-      data: { turbo_frame: "_top" } do %>
+        class: "text-indigo-600 hover:text-indigo-900",
+        data: { turbo_frame: "_top" } do %>
       <div class="flex items-center">
         <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />