fix turbo streams

app/assets/stylesheets/cafe_car/themes/cool.css

@@ -6,7 +6,7 @@
     --color: rgb(24, 36, 51);
     --dim: #6c7a91;
 
-    --link: rgb(6, 111, 209);
+    --accent: rgb(6, 111, 209);
     --border: #e6e8ec;
     --background: #f6f8fa;
     --input: #f6f8fa;
@@ -27,6 +27,6 @@
 
         --card: #192433;
         --border: #1f2e42;
-        --link: #6aa9e3;
+        --accent: #6aa9e3;
     }
 }

app/assets/stylesheets/cafe_car/themes/defaults.css

@@ -1,5 +1,8 @@
 :root {
     color-scheme: light dark;
+    accent-color: var(--accent);
+
+    --link: var(--accent);
 
     --font: -apple-system, menu, sans-serif;
     --error: var(--red);
@@ -17,5 +20,6 @@
 
     --max-width: 720px;
     --page-width: 1024px;
+    --aside-width: 20vw;
     --modal-width: 720px;
 }

app/assets/stylesheets/cafe_car/themes/warm.css

@@ -6,7 +6,7 @@
     --color: rgb(24, 36, 51);
     --dim: #6c7a91;
 
-    --link: rgb(6, 111, 209);
+    --accent: rgb(6, 111, 209);
     --border: #e6e8ec;
     --background: #2c1d15;
     --input: #f6f8fa;
@@ -26,6 +26,6 @@
 
         --card: #192433;
         --border: #1f2e42;
-        --link: #6aa9e3;
+        --accent: #6aa9e3;
     }
 }

app/assets/stylesheets/ui/Card.css

@@ -6,8 +6,8 @@
 
 .Card_Head,
 .Card_Foot {
-    gap: var(--gap);
     display: flex;
+    gap: var(--gap);
     align-items: center;
 }
 
@@ -31,7 +31,7 @@
     border-top: 1px solid var(--border);
 }
 
-.Card:not(:has(.Card_Section)) {
+.Card:not(:has(.Card_Section, .Card_Head, .Card_Foot)) {
     padding: var(--gap);
 }
 

app/assets/stylesheets/ui/Modal.css

@@ -1,16 +1,15 @@
 .Modal {
+    z-index: 1;
     inset: 0;
-    display: flex;
+    display: grid;
+    grid-template-columns: fit-content(var(--modal-width));
     background: var(--backdrop);
     overscroll-behavior: contain;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
     backdrop-filter: blur(8px);
-    padding: var(--gap);
-}
-
-.Modal_Body {
-    margin: auto;
-    padding: var(--gap) 0;
-    max-width: var(--max-width);
+    padding: calc(var(--gap) * 2);
 }
 
 .Modal_Close {

app/assets/stylesheets/ui/Page.css

@@ -1,6 +1,10 @@
+.Page-wide {
+    /*--page-width: 80vw;*/
+}
+
 .Page {
     display: grid;
-    grid: auto-flow / auto minmax(auto, var(--page-width)) auto;
+    grid: auto-flow / var(--aside-width) minmax(auto, var(--page-width)) var(--aside-width);
     gap: var(--gap);
     margin: var(--gap);
 }

app/javascript/cafe_car.js

@@ -1,18 +1,22 @@
-Object.assign(Turbo.StreamActions, {
-    dialog() {
-        this.removeDuplicateTargetChildren();
-        this.targetElements.forEach(e => e.remove())
+function last(arr) {
+    return arr[arr.length - 1];
+}
 
-        let content = this.templateContent
-        let dialog = content.querySelector('dialog')
-        dialog.onclose = dialog.oncancel = () => dialog.remove()
-        this.ownerDocument.body.append(dialog)
-        dialog.showModal()
+document.addEventListener("click", event => {
+    if (event.target.matches(".Modal_Close")) {
+        event.preventDefault()
+        event.target.closest(".Modal").remove()
+    } else if (event.target.matches(".Modal")) {
+        event.preventDefault()
+        event.target.remove()
     }
 })
 
-document.addEventListener("click", event => {
-    if (!event.target.matches(".Modal_Close")) return
-    event.preventDefault()
-    event.target.closest(".Modal").remove()
+document.addEventListener("keydown", event => {
+    switch (event.key) {
+        case "Escape":
+            let modal = event.target.closest(".Modal") ||
+                last(document.querySelectorAll(".Modal-fixed"))
+            modal?.remove()
+    }
 })

app/javascript/cafe_car/lib.js

@@ -0,0 +1,3 @@
+export function last(arr) {
+    return arr[arr.length - 1];
+}

app/views/application/_debug.html.haml

@@ -1,2 +1,3 @@
-= ui.card do
-  %pre= parsed_params.to_unsafe_h.pretty_inspect
+= ui.card title: "Debug" do |card|
+  = card.section do
+    %pre= request.params.pretty_inspect

app/views/application/_form.html.haml

@@ -1,14 +1,10 @@
-- title   ||= nil
-- actions ||= nil
-
 = form_for object do |f|
-  = ui.card title:, actions: do |card|
-    = card.section do
-      = render "fields", f:
+  = card.section do
+    = render "fields", f:
 
-    = card.section class: "row" do
-      = render("extra_fields", f:)
+  = card.section class: "row" do
+    = render("extra_fields", f:)
 
-    = card.foot do
-      = render "submit", f:
-      = render("errors", f:)
+  = card.foot do
+    = render "submit", f:
+    = render("errors", f:)

app/views/application/edit.html.haml

@@ -10,8 +10,9 @@
         = card.section do
           =  ui(object).attributes :updated_at, :created_at, try: true
 
-      = ui.card title: "Actions" do
-        = render('actions')
+    = ui.card title: "Actions" do
+      = render('actions')
 
   = page.body do
-    = render 'form'
+    = ui.card do |card|
+      = render 'form', card:

app/views/application/edit.turbo_stream.haml

@@ -1,2 +1,8 @@
-= turbo_stream.dialog_for object, :edit do
-  = render "form", title: "Edit #{model_name.human}", actions: dialog_close
+- if action.edit?
+  = turbo_stream.append_all("body") do
+    = ui.modal :fixed do |m|
+      = ui.card title: "Edit #{model_name.human}", actions: m.close("✕") do |card|
+        = render "form", card:
+- else
+  = turbo_stream.replace(dom_id(object, :edit)) do
+    = render "form", card: ui.card.context

app/views/application/index.html.haml

@@ -1,10 +1,11 @@
 - title = title model_name.human(count: :all)
 - actions = render "index_actions"
 
-= ui.page title:, actions: do |page|
+= ui.page :wide, title:, actions: do |page|
   = page.left do
     = render "debug" if params.key?(:debug)
     = render "filters"
 
   = page.body do
     = render "index"
+    = yield :debug

app/views/application/new.html.haml

@@ -3,4 +3,5 @@
 
 = ui.page title:, actions: do |page|
   = page.body do
-    = render "form"
+    = ui.card do |card|
+      = render "form", card:

app/views/application/new.turbo_stream.haml

@@ -1,2 +1,8 @@
-= turbo_stream.dialog_for object, :new do
-  = render "form", title: "New #{model_name.human}", actions: dialog_close
+- if action.new?
+  = turbo_stream.append_all("body") do
+    = ui.modal :fixed do |m|
+      = ui.card title: "New #{model_name.human}", actions: m.close("✕") do |card|
+        = render "form", card:
+- else
+  = turbo_stream.replace(dom_id(object, :new)) do
+    = render "form", card: ui.card.context

app/views/application/show.html.haml

@@ -9,10 +9,10 @@
       = card.section do
         =  ui(object).attributes :updated_at, :created_at, try: true
 
-      = ui.card title: "Actions" do
-        = render("actions")
+    = ui.card title: "Actions" do
+      = render("actions")
 
-      = yield :left
+    = yield :left
 
   = page.body do
     - if tab = params[:tab]

app/views/application/update.turbo_stream.haml

@@ -0,0 +1 @@
+= turbo_stream.refresh(request_id: nil)

app/views/ui/_card.html.haml

@@ -4,6 +4,6 @@
 = card.wrapper(*flags, **options) do
   = card.head do
     = card.title(tag: :h2) { title }
-    = card.actions(safe_join([*actions]))
+    = card.actions { safe_join([*actions]) }
 
   = yield

lib/cafe_car/policy.rb

@@ -10,10 +10,8 @@ def info(method)
     @info[method] ||= CafeCar[:FieldInfo].new(object:, method:)
   end
 
-  def title_attributes = %i[title name to_s]
-
   def title_attribute
-    @title_attribute ||= model.tap(&:define_attribute_methods) && title_attributes.find { model.method_defined? _1 }
+    @title_attribute ||= displayable_attributes.first
   end
 
   def displayable_attributes

lib/cafe_car/turbo_tag_builder.rb

@@ -1,10 +1,4 @@
 module CafeCar
   module TurboTagBuilder
-    def dialog_for(record, prefix = :dialog, **, &)
-      id = @view_context.dom_id(record, prefix)
-      action(:dialog, id, **) do
-        @view_context.tag.dialog(id:, class: @view_context.ui_class(:dialog), &)
-      end
-    end
   end
 end

test/dummy/config/environments/development.rb

@@ -1,21 +1,11 @@
 require "active_support/core_ext/integer/time"
 
 Rails.application.configure do
-  # Settings specified here will take precedence over those in config/application.rb.
-
-  # In the development environment your application's code is reloaded any time
-  # it changes. This slows down response time but is perfect for development
-  # since you don't have to restart the web server when you make code changes.
-  config.enable_reloading = true
-
-  # Do not eager load code on boot.
-  config.eager_load = false
-
-  # Show full error reports.
+  config.hosts << ".ts.net"
+  config.enable_reloading            = true
+  config.eager_load                  = false
   config.consider_all_requests_local = true
-
-  # Enable server timing
-  config.server_timing = true
+  config.server_timing               = true
 
   # Enable/disable caching. By default caching is disabled.
   # Run rails dev:cache to toggle caching.
@@ -29,45 +19,25 @@
     }
   else
     config.action_controller.perform_caching = false
-
-    config.cache_store = :null_store
+    config.cache_store                       = :null_store
   end
 
   # Store uploaded files on the local file system (see config/storage.yml for options).
   config.active_storage.service = :local
 
-  # Don't care if the mailer can't send.
-  config.action_mailer.raise_delivery_errors = false
-
-  config.action_mailer.perform_caching = false
+  config.action_mailer.raise_delivery_errors = true
+  config.action_mailer.perform_caching       = false
 
-  # Print deprecation notices to the Rails logger.
-  config.active_support.deprecation = :log
-
-  # Raise exceptions for disallowed deprecations.
-  config.active_support.disallowed_deprecation = :raise
-
-  # Tell Active Support which deprecation messages to disallow.
+  config.active_support.deprecation                     = :log
+  config.active_support.disallowed_deprecation          = :raise
   config.active_support.disallowed_deprecation_warnings = []
 
-  # Raise an error on page load if there are pending migrations.
-  config.active_record.migration_error = :page_load
-
-  # Highlight code that triggered database queries in logs.
+  config.active_record.migration_error    = :page_load
   config.active_record.verbose_query_logs = true
 
-  # Highlight code that enqueued background job in logs.
   config.active_job.verbose_enqueue_logs = true
 
-
-  # Raises error for missing translations.
-  # config.i18n.raise_on_missing_translations = true
-
-  # Annotate rendered view with file names.
-  # config.action_view.annotate_rendered_view_with_filenames = true
-
-  # Uncomment if you wish to allow Action Cable access from any origin.
-  # config.action_cable.disable_request_forgery_protection = true
+  config.action_view.annotate_rendered_view_with_filenames = true
 
   # Raise error when a before_action's only/except options reference missing actions
   config.action_controller.raise_on_missing_callback_actions = true