recourse 4.4.4 → 4.6.0

data/app/views/layouts/recourses.html.erb

@@ -15,7 +15,9 @@
     <%# Preloaded from the head instead of discovered at the end of the body, so the
         module the toast controller and the dismiss X import is already in flight. -%>
     <link rel='modulepreload' href='/recourse/bootstrap.bundle.min.js'>
-    <%# After the stylesheet, which is what makes it win: both selectors are `:root`. -%>
+    <%# After the Bootstrap link, which is what makes either win: every selector involved
+        is `:root`. The palette the host named, then the one the reader chose last time. -%>
+    <%= theme_stylesheet_link %>
     <%= render 'recourses/scheme' %>
     <%= primary_color_style %>
 
@@ -34,6 +36,7 @@
       import BookmarkController from '/recourse/bookmark_controller.js'
       import ClearController from '/recourse/clear_controller.js'
       import ComboboxController from '/recourse/combobox_controller.js'
+      import DensityController from '/recourse/density_controller.js'
       import DeselectController from '/recourse/deselect_controller.js'
       import LimitController from '/recourse/limit_controller.js'
       import PhoneController from '/recourse/phone_controller.js'
@@ -54,6 +57,7 @@
         window.Stimulus.register('bookmark', BookmarkController)
         window.Stimulus.register('clear', ClearController)
         window.Stimulus.register('combobox', ComboboxController)
+        window.Stimulus.register('density', DensityController)
         window.Stimulus.register('deselect', DeselectController)
         window.Stimulus.register('limit', LimitController)
         window.Stimulus.register('phone', PhoneController)
@@ -118,11 +122,9 @@
         .nav-link:hover:not(.active) { background-color: transparent; }
       }
 
-      /* The navbar stacks over the sidebar, and both over the main column: a menu
-         opened from a filter drops over the sidebar's row of links on a phone and over
-         the first rows of the table anywhere, rather than under either. */
-      .recourse-sidebar { position: relative; z-index: 2; }
-      .recourse-shell > nav { position: relative; z-index: 3; }
+      /* The navbar stacks over the content: a menu opened from a filter drops over the
+         first rows of the table rather than under them. */
+      .recourse-shell > nav { position: relative; z-index: 1; }
 
       /* An action column is as wide as a row is tall — an icon in a square — and a
          counter column starts at the same square, widening only when a figure like
@@ -203,43 +205,37 @@
         min-height: 0;
       }
 
-      /* A long page scrolls its content, not its chrome. Above the width the sidebar
-         becomes a column at, the shell is exactly the viewport and `main` is the only
-         thing inside it that scrolls, so the navbar and the sidebar stay where they
-         are however far down the table a reader is. Two things make it hold. Every step
-         between takes `min-height: 0`, a flex child being as tall as its content unless
-         told otherwise. And the row stops wrapping: a wrapped line is as tall as the
-         tallest thing on it, and stretching only ever grows an item to the line, never
-         shrinks it to one — so `main` kept its own height and took the page with it.
-         Below that width the sidebar is a band across the top, the row wraps to stack
-         the two, and the page scrolls as one, which is the only thing that reads on a
-         phone.
-         Named by the path down to it rather than as any `.row` in the shell: a show
-         page lays its values out in one and a form lays its fields out in another, and
-         `flex-wrap: nowrap` reaches those too as a descendant — which is three `col-6`
-         values squeezed onto one line instead of two rows of two. Only the row holding
-         the sidebar and the content is meant here, and only it is a child of the
-         container.
-         `main` is the only thing that scrolls inside the shell, and the sidebar
-         deliberately is not. A window dragged shorter than the sidebar itself is the one
-         case the viewport cannot hold, and there the sidebar is allowed to be taller
-         than the line it was stretched to, spill past the shell, and let the browser
-         scroll the page — which is what a reader expects of something taller than the
-         screen. Were it to scroll on its own instead, the same overflow would be hidden
-         inside it and the page would look whole while its foot was unreachable. */
+      /* The shell is three things — the sidebar, the navbar, the content — written in
+         the order a phone reads them: a row of icons at the very top, the trail and the
+         search under it, the page under that, scrolling as one. From the width the
+         sidebar becomes a column at, a grid seats them the other way round. The navbar
+         runs across the top, the sidebar takes the column under it and the content the
+         rest, the shell is exactly the viewport, and `main` is the only thing in it that
+         scrolls — so the navbar and the sidebar stay where they are however far down the
+         table a reader is. `minmax(0, 1fr)` is what lets the second row be shorter than
+         what is in it; a `1fr` alone is as tall as its content, and the page would scroll
+         after all.
+         The sidebar deliberately does not scroll. A window dragged shorter than the
+         sidebar itself is the one case the viewport cannot hold, and there the sidebar
+         is allowed to spill past the shell and let the browser scroll the page — which is
+         what a reader expects of something taller than the screen. Were it to scroll on
+         its own instead, the same overflow would be hidden inside it and the page would
+         look whole while its foot was unreachable. */
       @media (width >= 768px) {
-        .recourse-shell { min-height: 0; height: 100dvh; }
-        .recourse-shell > .container-fluid,
-        .recourse-shell > .container-fluid > .row { min-height: 0; }
-        .recourse-shell > .container-fluid > .row { flex-wrap: nowrap; }
-        .recourse-shell main { overflow-y: auto; }
-        /* Stretched to the line like any item, but never squeezed under its own
-           content: the floor is what carries the rule below down past the fold. */
-        .recourse-shell .recourse-sidebar { min-height: min-content; }
+        .recourse-shell {
+          display: grid;
+          grid-template-columns: auto minmax(0, 1fr);
+          grid-template-rows: auto minmax(0, 1fr);
+          grid-template-areas: 'nav nav' 'aside main';
+          height: 100dvh;
+        }
+        .recourse-shell > nav { grid-area: nav; }
+        .recourse-sidebar { grid-area: aside; }
+        .recourse-shell > main { grid-area: main; overflow-y: auto; }
       }
 
-      /* The sidebar rules off the content below it while it sits under the navbar,
-         and off the content beside it once it is a column again. v6 generates no
+      /* The sidebar rules off the navbar below it while it is the band at the top of a
+         phone, and off the content beside it once it is a column. v6 generates no
          responsive border utilities, so the switch is written out. */
       .recourse-sidebar {
         border-block-end: var(--bs-border-width) solid var(--bs-border-color);
@@ -265,6 +261,10 @@
          next to one, so it takes the line's height and not `.btn`'s own minimum —
          which would leave the row under every table taller than the words in it. */
       .recourse-limit { min-height: 0; }
+      /* The bookmark square is an icon in a row of text, not a control in a form, so it
+         takes the line's height too: `.btn`'s minimum made every row with one taller
+         than the rows without. */
+      .recourse-bookmark { min-height: 0; }
       /* Stacked, each control is a row of its own rather than a fragment of one:
          there is no second control beside it to share the line with. */
       @media (width < 768px) {
@@ -278,6 +278,13 @@
            small controls are 14px, and so is the body on a phone, so the controls say
            16px themselves and focusing one moves nothing. */
         .recourse-search .form-control { font-size: 16px; }
+        /* A page under a record has a trail two or three crumbs long, and what sat beside
+           the trail — the search, its filters, a button — was squeezed into what those
+           left: `Filter by na`. Under such a trail each takes a row of its own, the form
+           the whole width and every control in it a row in turn, and the margin that set
+           a button apart from the trail goes, there being no trail beside it. An index at
+           the top keeps its form beside its one crumb, where it fits. */
+        .recourse-trailed > :not(nav) { flex: 0 0 100%; margin-inline-start: 0; }
       }
 
       /* Held Option marks the letter each sidebar link answers to. Marked rather than
@@ -404,20 +411,29 @@
         .recourse-foot .nav-link:hover { background-color: var(--bs-bg-1); color: var(--bs-fg-body); }
       }
 
+      /* `.nav-item` ships `flex: auto`: in a row every entry would take an equal share
+         of the width and in a full-height column an equal share of the height, and the
+         foot's auto margin would never have anything left to push against. Every item is
+         its own size instead, in both directions. */
+      .recourse-sidebar .nav-item { flex: 0 0 auto; }
+
+      /* On a phone the sidebar is one row of icons across the top, centered, each entry
+         with less room around it than a column gives — a dozen have to fit — and wrapping
+         to a second line only where a host has more than a screen's width of them. */
+      @media (width < 768px) {
+        .recourse-sidebar .nav { justify-content: center; --bs-nav-link-padding-x: .5rem; }
+      }
+
       /* The foot sits at the bottom of the sidebar and stretches across it while the
          sidebar is a column, and is simply the last item of the row while it is not
-         — the query matches the `md:` the sidebar's own classes use. Both lines are
-         needed: `.nav-item` ships `flex: auto`, so every item would take an equal share
-         of a full-height nav and the auto margin would never have anything left to
-         push against. Pin the items to their own height and the foot takes the rest. */
+         — the query matches the `md:` the sidebar's own classes use. */
       @media (width >= 768px) {
         /* A floor rather than a height, and never wrapped. `.nav` ships `flex-wrap:
            wrap`, and a column that may wrap, whose items are pinned to their own height
-           by the line below, and which is told exactly how tall to be has one way to
-           place a link that does not fit: a second column. Which is what a short window
-           used to draw. The floor lets it be taller than the space it was given. */
+           above, and which is told exactly how tall to be has one way to place a link
+           that does not fit: a second column. Which is what a short window used to draw.
+           The floor lets it be taller than the space it was given. */
         .recourse-sidebar .nav { min-height: 100%; flex-wrap: nowrap; }
-        .recourse-sidebar .nav-item { flex: 0 0 auto; }
         /* And it rides at the foot of the screen, which the auto margin alone is
            enough to do: the nav's floor is the sidebar's full height, so while the
            links leave room the margin takes all of it and the foot sits on the fold,
@@ -434,31 +450,40 @@
         }
       }
 
-      /* A phone's card has room for a row of tabs only as pictures and figures: Show
-         and Edit are their icons, a counted tab its icon and its number. A tab with
-         neither keeps its word, there being nothing else to stand for it. */
-      @media (width < 768px) {
-        .recourse-tab-word { display: none; }
-      }
-
-      /* And the trail at the top: a resource's crumb is its icon alone on a phone, so the
-         search box and the button beside it have the row. A record's crumb has no icon
-         and keeps its words. */
+      /* A phone reads the chrome as pictures. A sidebar entry is its icon, a crumb its
+         icon, a tab its icon and its figure — `17` rather than `17 franchises` — and the
+         foot's controls their icons, so the sidebar is one row of squares and the trail
+         leaves the search its room. The words are there all the same, read but not seen
+         the way Bootstrap's `.visually-hidden` does it, and the arrows at the foot put
+         them back: the cookie they write has the server draw the shell `.recourse-expanded`,
+         and then none of this applies. A tab or a crumb with no icon keeps its word at
+         every width, there being nothing else to stand for it.
+         The same hiding, at every width, for the foot's words once the sidebar is a
+         column: there is room for an icon and not for a word beside it. */
+      .recourse-foot-word { margin-inline-start: .4em; }
       @media (width < 768px) {
-        .recourse-crumb-word { display: none; }
+        .recourse-shell:not(.recourse-expanded) :is(.recourse-nav-word, .recourse-crumb-word,
+                                                    .recourse-tab-word, .recourse-foot-word) {
+          position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+          overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+        }
       }
-
-      /* While the sidebar is a row its foot has room for words, so each icon is followed
-         by its own; as a column the words are read but not seen, the way Bootstrap's
-         `.visually-hidden` does it. */
-      .recourse-foot-word { margin-inline-start: .4em; }
       @media (width >= 768px) {
         .recourse-foot-word {
           position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
         }
+        /* Nothing to expand: a column has its words already. */
+        .recourse-density { display: none; }
       }
 
+      /* The arrows say where a tap goes, like the moon: parting, with `Expand`, while
+         the chrome is icons; meeting, with `Compact`, once the words are out. Both faces
+         are drawn and the shell's class picks, so the button needs no script to redraw. */
+      .recourse-density-expanded { display: none; }
+      .recourse-expanded .recourse-density-compact { display: none; }
+      .recourse-expanded .recourse-density-expanded { display: inline; }
+
       /* The toggle draws both icons and shows the one that names where a click
          would go: a moon on a light page, a sun on a dark one. Three states rather than
          two, because a page nobody has chosen for carries no attribute at all, and the
@@ -486,35 +511,32 @@
 
   <%# The reader's zone is told to the server here rather than from a page of its
       own: every screen the gem draws is one to read against their clock. -%>
-  <body class='recourse-shell d-flex flex-column min-vh-100'
+  <body class='<%= class_names 'recourse-shell', 'recourse-expanded': expanded? %>'
         data-controller='timezone' data-timezone-storage-value='<%= Recourse::ZONE_STORAGE %>'>
+    <%# First in the page, since a phone reads it first: the row of icons at the top,
+        above the trail. From 768px the layout's grid seats it beside the content instead,
+        under the navbar, whatever order it was written in. -%>
+    <aside class='recourse-sidebar py-3 px-3'>
+      <%= render 'recourses/sidebar' %>
+    </aside>
+
     <nav class='navbar border-bottom'>
       <%# `row-gap` rather than a margin on the search: a margin is there whether the
           form wrapped or not, and on the line it shares with the breadcrumb it drops
-          the field a few pixels below it. A row gap only exists between lines. -%>
-      <div class='container-fluid px-3 justify-content-start row-gap-2'>
+          the field a few pixels below it. A row gap only exists between lines. Under a
+          trail of more than one crumb a phone gives the form and the buttons rows of
+          their own, which `recourse-trailed` is what the stylesheet reads. -%>
+      <div class='<%= class_names 'container-fluid px-3 justify-content-start row-gap-2',
+                                  'recourse-trailed': resource_breadcrumbs.size > 1 %>'>
         <%= render 'recourses/breadcrumb' %>
         <%= yield :actions %>
         <%= yield :search %>
       </div>
     </nav>
 
-    <div class='container-fluid flex-grow-1 d-flex'>
-      <%# Stacked, the sidebar and the content are two lines of a wrapping flex row,
-          and `align-content: stretch` would hand each of them half the height the
-          page has left over — an empty gap under a dozen links. Packed to the top
-          below 768px, and stretched again above it, where the single line being full
-          height is what draws the sidebar's rule the whole way down. -%>
-      <div class='row flex-grow-1 align-content-start md:align-content-stretch'>
-        <aside class='recourse-sidebar col-12 md:col-auto py-3 px-3 mx-0'>
-          <%= render 'recourses/sidebar' %>
-        </aside>
-
-        <main class='col-12 md:col py-4 px-3'>
-          <%= yield %>
-        </main>
-      </div>
-    </div>
+    <main class='py-4 px-3'>
+      <%= yield %>
+    </main>
 
     <%= render 'recourses/flash' %>
     <%= render 'recourses/confirm' %>

data/app/views/recourses/_footer.html.erb

@@ -1,13 +1,14 @@
 <%# locals: (pagy:) %>
 <% if pagy %>
-  <%# A column on a phone, the sentence above the pages, and one row from `sm` up. -%>
+  <%# A column on a phone, the sentence centered above the pages the way the pages are
+      centered under it, and one row from `sm` up, the sentence at its start. -%>
   <div class='d-flex flex-column sm:flex-row sm:align-items-center' <%= tag.attributes data: limit_data(pagy) %>>
     <%# The gem's own sentence from pagy's public readers, every figure delimited —
         rewriting pagy's English with a regex delimited one figure, only in English.
         The switch follows it after a dot: how much of the table is showing, then the
         one other amount it could show. Only while there is a second page — a table
         that fits on one is not being paginated, and there is nothing to switch. -%>
-    <div class='ps-2 flex-grow-1'>
+    <div class='ps-2 flex-grow-1 text-center sm:text-start'>
       <% if pagy.last > 1 %>
         <%= t 'recourse.displaying_slice', from: number_with_delimiter(pagy.from),
                                            to: number_with_delimiter(pagy.to),

data/app/views/recourses/_scheme.html.erb

@@ -1,14 +1,28 @@
-<%# The mode a reader chose last time, back before anything is painted. Classic and
-    inline rather than a module or a Stimulus controller: both of those run after the
-    first paint, which would show the system's mode for an instant and then swap it. -%>
+<%# The palette and mode a reader chose last time, back before anything is painted.
+    Classic and inline rather than a module or a Stimulus controller: both of those run
+    after the first paint, which would show the palette the server chose for an instant
+    and then swap it. The name is checked against the shape a palette's name has before
+    it reaches a URL — the storage is the reader's own, but a value read back out of it
+    is still not a value to trust. -%>
 <script>
   (function () {
     var stored
     try { stored = JSON.parse(localStorage.getItem('<%= Recourse::SCHEME_STORAGE %>')) }
     catch (error) { return }
+    if (!stored) { return }
 
-    if (stored && (stored.mode === 'light' || stored.mode === 'dark')) {
+    if (stored.mode === 'light' || stored.mode === 'dark') {
       document.documentElement.dataset.bsTheme = stored.mode
     }
+    if (!/^[a-z_]+$/.test(stored.theme || '')) { return }
+
+    var link = document.querySelector('link[data-recourse-theme]')
+    if (!link) {
+      link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.dataset.recourseTheme = ''
+      document.head.appendChild(link)
+    }
+    link.href = '<%= Recourse::THEMES_PATH %>/' + stored.theme + '.css'
   })()
 </script>

data/app/views/recourses/_sidebar.html.erb

@@ -17,7 +17,24 @@
       is which of the two mode icons shows — the mode may be the system's, which only CSS
       knows, so both are drawn. -%>
   <li class='nav-item recourse-foot'>
-    <%# In a wrapper of its own, as the way out is in its form: the wrapper is the half
+    <%# For a phone alone, whose chrome is icons until a reader asks for the words: a tap
+        puts them back beside every icon, and the next takes them away. Both faces are
+        drawn — arrows parting to expand, meeting to compact — and the shell's class shows
+        the one that says where a tap goes, the way the moon and the sun are both drawn. -%>
+    <div class='recourse-density'>
+      <%= tag.button type: 'button', class: 'nav-link border-0 bg-transparent',
+                     data: density_data do %>
+        <span class='recourse-density-compact'>
+          <%= icon_tag :expand %>
+          <span class='recourse-foot-word'><%= t 'recourse.expand' %></span>
+        </span>
+        <span class='recourse-density-expanded'>
+          <%= icon_tag :collapse %>
+          <span class='recourse-foot-word'><%= t 'recourse.compact' %></span>
+        </span>
+      <% end %>
+    </div>
+    <%# In a wrapper of its own, as the way out is in its form: the wrapper is the share
         of the row, and the button is only as wide as its icon. -%>
     <div>
       <%= tag.button type: 'button', class: 'nav-link border-0 bg-transparent',

data/config/locales/recourse.en.yml

@@ -18,10 +18,11 @@ en:
     bookmark_removed: Bookmark removed
     cancel: Cancel
     clear: Clear search
+    compact: Compact
     create: Create
     created: "%{model} was created."
     created_error: "%{model} could not be created."
-    darken: Dark mode
+    darken: Dark
     delete: Delete %{model}
     deleted: "%{model} was deleted."
     exit: Exit
@@ -30,6 +31,7 @@ en:
       other: Displaying %{count} items
     displaying_slice: Displaying items %{from}-%{to} of %{total}
     edit: Edit
+    expand: Expand
     format: Please match the format %{example}
     from_now: "in %{distance}"
     # How many values a list holds, which is what its summary reads before anybody
@@ -37,7 +39,7 @@ en:
     items:
       one: 1 item
       other: "%{count} items"
-    lighten: Light mode
+    lighten: Light
     missing_model: You declared `recourses :%{name}` in your routes file, but this app
       has no %{model} model.
     nested: You nested `recourses %{names}` inside `resources :%{parent}`, which does
@@ -45,6 +47,7 @@ en:
     # What a menu with several picks reads as, the first named and the rest counted.
     more: "%{first} + %{count} more"
     new: New %{model}
+    new_tab: Open in a new tab
     no_results: No results found
     none: "No %{models}."
     optional: Optional
@@ -60,6 +63,8 @@ en:
     unbookmark: Remove bookmark
     unknown_color: "`Recourse.color` is one of %{colors}, or nil for Bootstrap's own
       blue. It cannot be %{color}."
+    unknown_theme: "`Recourse.theme` is one of %{themes}, or nil for Bootstrap's own
+      palette. It cannot be %{theme}."
     updated: "%{model} was updated."
     updated_error: "%{model} could not be updated."
     unset: None

data/lib/recourse/colors.rb

@@ -28,5 +28,11 @@ module Recourse
   end
 
   # Which text a family's 500 step carries, named as the token upstream spells it with.
-  def self.ink(family) = DARK_INKS.include?(family) ? 'gray-975' : 'white'
+  # A palette repaints the step, so it may move a family across the line and answers
+  # first where it does.
+  def self.ink(family)
+    inks = THEMES[theme] || DARK_INKS
+
+    inks.include?(family) ? 'gray-975' : 'white'
+  end
 end

data/lib/recourse/controllers.rb

@@ -1,16 +1,43 @@
 module Recourse
   # Defines the controller classes a host app has not written for itself.
   module Controllers
+    @held = []
+    @lock = Mutex.new
+
     # Creates a controller for the named resource unless the host app has one. The
     # name arrives with whatever namespace it was drawn in — `admin/contacts` — so
-    # the constant lands where Rails will look for it.
-    def self.define_missing(path, base = nil)
+    # the constant lands where Rails will look for it. A block names the superclass,
+    # `RecoursesController` by default, and is called only once the class is made.
+    def self.define_missing(path, &base)
       class_name = "#{path.camelize}Controller"
       # const_defined? is true for a Zeitwerk autoload, so files on disk count too.
       return if Object.const_defined? class_name
 
-      namespace(class_name.deconstantize).const_set class_name.demodulize,
-                                                    Class.new(base || RecoursesController)
+      booting? ? hold(class_name, base) : define(class_name, base)
+    end
+
+    # Makes the controllers held back while the app booted. The executor runs this
+    # ahead of the app's first request or job, once every class may be loaded.
+    def self.define_held
+      @lock.synchronize { define(*@held.shift) until @held.empty? }
+    end
+
+    private_class_method def self.define(class_name, base)
+      superclass = base ? base.call : RecoursesController
+      namespace(class_name.deconstantize).const_set class_name.demodulize, Class.new(superclass)
+    end
+
+    # Rails 8.2 warns when Action Controller is loaded during the boot of an app that
+    # will not eager load — a rake task's, which draws its routes before it is done
+    # and never dispatches to a controller — so the class waits for the first run.
+    private_class_method def self.booting?
+      app = Rails.application
+      app.present? && !app.config.eager_load && !app.initialized?
+    end
+
+    private_class_method def self.hold(class_name, base)
+      Rails.application.executor.to_run { Controllers.define_held } if @held.empty?
+      @held << [class_name, base]
     end
 
     # The module a namespaced controller belongs in, made where the host has none of

data/lib/recourse/densities.rb

@@ -0,0 +1,7 @@
+# Reopened for the one thing a reader says about how much a phone spells out.
+module Recourse
+  # Where a reader's say on a phone's chrome is kept: a cookie, since the server reads it
+  # back and draws the words in or leaves them out, rather than drawing and then hiding.
+  # `expanded` puts the words beside every icon; anything else, or nothing, is compact.
+  DENSITY_STORAGE = 'recourse-density'
+end

data/lib/recourse/engine.rb

@@ -23,7 +23,8 @@ module Recourse
     # prefix keeps its slash: without it `/recourses` would be served as a file.
     # Turbo answers first, by exact path — matched on the prefix alone, the statics
     # below would swallow it with a 404 instead of passing it on. Then vendored
-    # files, cascading so our own JavaScript shares the URL. All of it sits before
+    # files, then our own JavaScript, each cascading so the next shares the URL, and
+    # finally our own stylesheets — the palettes. All of it sits before
     # `Rails::Rack::Logger`, so fetching a stylesheet writes no `Started GET` line:
     # a file is not what a log is about, and placement says so without the gem
     # touching a host's logging.
@@ -38,7 +39,10 @@ module Recourse
                                    urls: STATIC_URLS, root: Engine.root.join('vendor'),
                                    cascade: true
       app.middleware.insert_before Rails::Rack::Logger, Rack::Static,
-                                   urls: STATIC_URLS, root: Engine.root.join('app/javascript')
+                                   urls: STATIC_URLS, root: Engine.root.join('app/javascript'),
+                                   cascade: true
+      app.middleware.insert_before Rails::Rack::Logger, Rack::Static,
+                                   urls: STATIC_URLS, root: Engine.root.join('app/stylesheets')
     end
   end
 end

data/lib/recourse/helpers/bookmarks.rb

@@ -50,13 +50,15 @@ module Recourse
 
       # Kept or not, one square either way: the same path with the verb reversed, so
       # the button toggles by flipping the method Rails already wrote into the form.
+      # `recourse-bookmark` takes back the height `.btn` claims, so the row stays as
+      # tall as one with no square in it.
       def bookmark_button(record)
         kept = bookmarked_ids.include? record.id
         label = t "recourse.#{kept ? 'unbookmark' : 'bookmark'}"
 
         button_to bookmark_icon(kept, label), bookmark_url(record),
                   method: kept ? :delete : :post, form_class: 'd-inline-block',
-                  class: 'btn btn-sm btn-link p-0 border-0 lh-1',
+                  class: 'btn btn-sm btn-link p-0 border-0 lh-1 recourse-bookmark',
                   **bookmark_data(kept, label)
       end
 

data/lib/recourse/helpers/densities.rb

@@ -0,0 +1,17 @@
+module Recourse
+  module Helpers
+    # Whether a phone reads the chrome as icons alone or as icons with their words.
+    module Densities
+    private
+
+      # Whether the reader asked for the words: the cookie the arrows write, read back so
+      # the page arrives expanded rather than compact and then widened by a script.
+      def expanded? = cookies[Recourse::DENSITY_STORAGE] == 'expanded'
+
+      # What the arrows need to switch: the class they toggle and the cookie they write.
+      def density_data
+        { controller: 'density', action: 'density#toggle', density_storage_value: Recourse::DENSITY_STORAGE }
+      end
+    end
+  end
+end

data/lib/recourse/helpers/formats.rb

@@ -79,15 +79,21 @@ module Recourse
         value.is_a?(String) && value.match?(WEB_URL)
       end
 
-      # Bootstrap's icon link, saying the value leads somewhere the way text cannot.
-      # What it reads is the host, and an ellipsis where the address goes further --
-      # a path is how a machine finds the page, and the href is already carrying it.
+      # The words lead where the value points, in this tab, the way any link does; the
+      # arrow after them — Bootstrap's icon link, stepping under the cursor — opens the
+      # same address in a new tab. Either reads as the host, and an ellipsis where the
+      # address goes further: a path is how a machine finds the page, and the href has it.
       def url_link(value)
         host, rest = value.match(WEB_URL).captures
         said = rest.delete_suffix('/').empty? ? host : "#{host}/…"
 
-        tag.a safe_join([said, icon_tag(:point_right)], ' '),
-              href: value, class: 'icon-link icon-link-hover'
+        safe_join [tag.a(said, href: value), new_tab_arrow(value)], ' '
+      end
+
+      def new_tab_arrow(value)
+        tag.a icon_tag(:point_right), href: value, target: '_blank', rel: 'noopener',
+                                      class: 'icon-link icon-link-hover',
+                                      aria: { label: t('recourse.new_tab') }
       end
     end
   end

data/lib/recourse/helpers/navigation.rb

@@ -54,13 +54,15 @@ module Recourse
         new_resource_path.nil? && routed_action?('create')
       end
 
-      # Label for a link to a resource: the icon its model picked, then its title,
-      # with the letter at `key` marked where the link answers to one.
+      # Label for a sidebar link: the icon its model picked, then its title, with the
+      # letter at `key` marked where the link answers to one. The words are wrapped where
+      # an icon stands beside them, so a phone can keep the icon and drop them.
       def resource_label(resource, title, key = nil)
         name = key ? shortcut_title(title, key) : title
         icon = Recourse.known_icon resource
+        return name unless icon
 
-        safe_join [icon && tag.i(class: "bi bi-#{icon}"), name].compact, ' '
+        safe_join [tag.i(class: "bi bi-#{icon}"), tag.span(name, class: 'recourse-nav-word')], ' '
       end
 
       # The same for a crumb, whose words a phone drops where the icon stands for them:

data/lib/recourse/helpers/themes.rb

@@ -0,0 +1,36 @@
+module Recourse
+  module Helpers
+    # The color scheme a host named, and the reader's own say in which one it is.
+    module Themes
+    private
+
+      # The stylesheet that repaints Bootstrap's ramps in `Recourse.theme`, or nothing at
+      # all where none is set — the stylesheet's own palette is already there. A file
+      # rather than a block in the page: it is the same bytes on every request, so a
+      # browser is asked for it once, and one attribute swap moves the whole page to
+      # another palette. After the Bootstrap link and never before it, both blocks being
+      # `:root`, so it wins on being later.
+      def theme_stylesheet_link
+        theme = Recourse.theme
+        return unless theme
+
+        tag.link rel: 'stylesheet', href: theme_stylesheet_path(theme),
+                 data: { recourse_theme: '' }
+      end
+
+      # Where one palette is served from.
+      def theme_stylesheet_path(theme) = "#{Recourse::THEMES_PATH}/#{theme}.css"
+
+      # What the sidebar's toggle needs to rotate: every palette there is, where they
+      # are served from, and where to keep what the reader picked.
+      def scheme_data
+        {
+          controller: 'scheme', action: 'scheme#rotate',
+          scheme_themes_value: Recourse::THEMES.keys.to_json,
+          scheme_path_value: Recourse::THEMES_PATH,
+          scheme_storage_value: Recourse::SCHEME_STORAGE,
+        }
+      end
+    end
+  end
+end