Table component

app/assets/tailwind/application.css

@@ -4,6 +4,8 @@
 @source "../../../app/javascript/**/*.js";
 @source "../../../app/views/**/*";
 
+@import "./components/table.css";
+
 @plugin "./daisyui.js" {
   themes: light --default, dark --prefersdark;
   prefix: "du-";

app/assets/tailwind/components/table.css

@@ -0,0 +1,46 @@
+/* Responsive table that displays as cards on mobile and table on desktop */
+.table-responsive {
+  @apply overflow-x-auto rounded-lg p-2 md:p-0; /* Container styling, no explicit bg, cards will have it. Padding for mobile. */
+}
+
+.table-responsive table {
+  @apply table-auto relative w-full border-collapse; /* Use table-auto for better column sizing */
+}
+
+.table-responsive thead {
+  @apply hidden lg:table-header-group;
+}
+
+.table-responsive thead th {
+  @apply text-sm font-semibold whitespace-nowrap px-4 py-3 text-left border-b border-base-content/20 bg-base-200/40 text-base-content; /* Thinner border */
+}
+
+.table-responsive tbody {
+  @apply block lg:table-row-group;
+}
+
+.table-responsive tr {
+  @apply block lg:table-row mb-3 lg:mb-0 overflow-hidden rounded-lg lg:rounded-none shadow-md lg:shadow-none border border-base-content/15 lg:border-x-0 lg:border-t-0 lg:border-b lg:border-base-content/10 bg-base-100 lg:bg-transparent;
+  @apply lg:even:bg-base-200/50 lg:hover:bg-base-300/50 transition-colors duration-150;
+  @apply lg:last:border-b-0; /* No bottom border for the last row in desktop table */
+}
+
+.table-responsive td {
+  @apply block lg:table-cell text-sm lg:text-left px-3 lg:px-4 pt-2 pb-2 lg:pt-3 lg:pb-3 align-middle;
+  @apply lg:flex-none; /* Ensure flex is not applied on larger screens if set below */
+  @apply border-t border-base-content/10 lg:border-t-0; /* Separator for card items */
+  @apply before:content-[attr(data-label)] before:font-semibold before:text-xs before:uppercase before:tracking-wider before:text-base-content/60 before:mr-2 lg:before:mb-0;
+  @apply lg:before:content-none;
+  /* On mobile, treat td as a flex container to align label and value */
+  @apply flex flex-row items-center lg:table-cell;
+}
+
+/* Adjust the ::before pseudo-element for flex alignment on mobile */
+.table-responsive td::before {
+  @apply lg:hidden flex-shrink-0;
+}
+
+/* First td in a card (mobile view) should not have a top border as the card 'tr' has its own border */
+.table-responsive tr td:first-child {
+  @apply border-t-0 lg:border-t-0; /* Keep lg:border-t-0 in case other rules apply it */
+} 

app/views/organizations/projects/index.html.erb

@@ -5,12 +5,28 @@
     <%= link_to t("shared.actions.new"), new_organization_project_path(@organization), data: { turbo_frame: :modal }, class: "du-btn du-btn-primary" %>
   <% end %>
 
-  <div id="projects" class="space-y-4">
-    <% @projects.each do |project| %>
-      <%= render project %>
-      <p>
-        <%= link_to "Show this project", [ @organization, project ], class: "du-btn du-btn-primary" %>
-      </p>
-    <% end %>
+  <div class="table-responsive">
+    <table class="min-w-full">
+      <thead>
+        <tr>
+          <th><%= Project.human_attribute_name(:name) %></th>
+          <th><%= Project.human_attribute_name(:created_at) %></th>
+          <th><%= Project.human_attribute_name(:updated_at) %></th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody id="projects">
+        <% @projects.each do |project| %>
+          <tr>
+            <td data-label="<%= Project.human_attribute_name(:name) %>"><%= project.name %></td>
+            <td data-label="<%= Project.human_attribute_name(:created_at) %>"><%= l project.created_at, format: :short %></td>
+            <td data-label="<%= Project.human_attribute_name(:updated_at) %>"><%= l project.updated_at, format: :short %></td>
+            <td>
+              <%= link_to t("shared.actions.show"), [ @organization, project ], class: "du-btn du-btn-sm du-btn-secondary" %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
   </div>
 <% end %>

lib/templates/erb/scaffold/index.html.erb.tt

@@ -5,12 +5,31 @@
     <%%= link_to t("shared.actions.new"), new_<%= singular_route_name %>_path, data: { turbo_frame: :modal }, class: "du-btn du-btn-primary" %>
   <%% end %>
 
-  <div id="<%= plural_table_name %>" class="space-y-4">
-    <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
-      <%%= render <%= singular_table_name %> %>
-      <p>
-        <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(singular_table_name) %>, class: "du-btn du-btn-secondary" %>
-      </p>
-    <%% end %>
+  <div class="table-responsive">
+    <table class="min-w-full">
+      <thead>
+        <tr>
+          <%% <%= model_class_name %>.attribute_names.each do |attr| %>
+            <th><%%= <%= model_class_name %>.human_attribute_name(attr) %></th>
+          <%% end %>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody id="<%= plural_table_name %>">
+        <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
+          <tr>
+            <%% <%= model_class_name %>.attribute_names.each do |attr| %>
+              <td data-label="<%%= <%= model_class_name %>.human_attribute_name(attr) %>">
+                <%%= <%= singular_table_name %>.send(attr) %>
+              </td>
+            <%% end %>
+            <td>
+              <%%= link_to t("shared.actions.show"), <%= model_resource_name(singular_table_name) %>, class: "du-btn du-btn-sm du-btn-secondary" %>
+              <%# Add other actions like edit and destroy here if needed %>
+            </td>
+          </tr>
+        <%% end %>
+      </tbody>
+    </table>
   </div>
 <%% end %>

test/controllers/users/omniauth_callbacks_controller_test.rb

@@ -3,6 +3,10 @@
 class Users::OmniauthCallbacksControllerTest < ActionDispatch::IntegrationTest
   include GoogleOauth2Helper
 
+  setup do
+    skip if Devise.omniauth_configs.keys.empty?
+  end
+
   test "oauth success" do
     assert_difference "User.count", 1 do
       login_with_google_oauth2_oauth

test/fixtures/google_oauth2.json

@@ -1,7 +1,7 @@
 {"provider": "google_oauth2",
  "uid": "820491782",
  "info": {"name": "Linwood Mann", "first_name": "Linwood", "last_name": "Mann", "email": "[email protected]", "image": "https://via.placeholder.com/300x300.png"},
- "credentials": {"token": "fbb07f2bbc76dd14165a699862c17146", "refresh_token": "e43ddadc06a27d5cee713b8d482ce9bb", "expires_at": 1754160940, "expires": true},
+ "credentials": {"token": "foo_123", "refresh_token": "bar_456", "expires_at": 1754160940, "expires": true},
  "extra":
   {
     "raw_info":