Allow changing default toc view, and disabling view selector

app/assets/stylesheets/toc.css

@@ -20,7 +20,7 @@
     outline: none;
   }
 
-  .toc__container:where(:has(#toc-list:checked)) & {
+  .toc__container:where(:has(#toc-list:checked), .toc__container--force-list) & {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--block-space) * 0.3);
@@ -50,7 +50,7 @@
     display: inline-flex;
   }
 
-  .toc__container:where(:has(#toc-grid:checked)) & {
+  .toc__container:where(:has(#toc-grid:checked), .toc__container--force-grid) & {
     inset: calc(var(--icon-size) * -0.33) 0 auto calc(var(--icon-size) * -0.5);
     position: absolute;
   }
@@ -85,7 +85,7 @@
   scroll-margin-top: 8em;
   text-align: center;
 
-  .toc__container:where(:has(#toc-list:checked)) & {
+  .toc__container:where(:has(#toc-list:checked), .toc__container--force-list) & {
     align-items: center;
     column-gap: 1ch;
     flex-direction: row;
@@ -107,12 +107,12 @@
   text-decoration: none;
 
   .leaf--section &,
-  .toc__container:where(:has(#toc-grid:checked)) & {
+  .toc__container:where(:has(#toc-grid:checked), .toc__container--force-grid) & {
     font-weight: 700;
   }
 
   #sidebar &,
-  .toc__container:where(:has(#toc-list:checked)) & {
+  .toc__container:where(:has(#toc-list:checked), .toc__container--force-list) & {
     flex-direction: row;
     flex-grow: 1;
     font-size: inherit;
@@ -194,7 +194,7 @@
     }
   }
 
-  .toc__container:where(:has(#toc-list:checked)) & {
+  .toc__container:where(:has(#toc-list:checked), .toc__container--force-list) & {
     display: none;
   }
 
@@ -211,7 +211,7 @@
 .toc__wordcount {
   white-space: nowrap;
 
-  .toc__container:where(:has(#toc-list:checked)) & {
+  .toc__container:where(:has(#toc-list:checked), .toc__container--force-list) & {
     font-size: 0.8em;
   }
 }
@@ -232,7 +232,7 @@
     }
   }
 
-  .toc__container:where(:has(#toc-grid:checked)) & .btn {
+  .toc__container:where(:has(#toc-grid:checked), .toc__container--force-grid) & .btn {
     margin-block-end: calc(-0.5 * var(--btn-size));
     margin-inline: auto;
     position: relative;

app/controllers/books_controller.rb

@@ -67,7 +67,7 @@ def ensure_index_is_not_empty
     end
 
     def book_params
-      params.require(:book).permit(:title, :subtitle, :author, :cover, :remove_cover, :everyone_access, :theme)
+      params.require(:book).permit(:title, :subtitle, :author, :cover, :remove_cover, :everyone_access, :theme, :default_view, :allow_view_selector)
     end
 
     def update_accesses(book)

app/javascript/controllers/toc_view_controller.js

@@ -3,7 +3,7 @@ import { readCookie, setCookie } from "helpers/cookie_helpers"
 
 export default class extends Controller {
   static targets = [ "switch" ]
-  static values = { id: String }
+  static values = { id: String, default: String }
 
   connect() {
     this.#restoreViewPref(this.idValue)
@@ -15,9 +15,9 @@ export default class extends Controller {
   }
 
   #restoreViewPref(id) {
-    const viewType = readCookie(id) || "grid"
+    const viewType = readCookie(id) || this.defaultValue
     this.switchTargets.forEach(switchTarget => {
       switchTarget.checked = switchTarget.dataset.tocViewTypeValue === viewType
-    }
-  )}
+    })
+  }
 }

app/models/book.rb

@@ -8,6 +8,7 @@ class Book < ApplicationRecord
   scope :published, -> { where(published: true) }
 
   enum :theme, %w[ black blue green magenta orange violet white ].index_by(&:itself), suffix: true, default: :blue
+  enum :default_view, %w[ list grid ].index_by(&:itself), suffix: true, default: :grid
 
   def press(leafable, leaf_params)
     leaves.create! leaf_params.merge(leafable: leafable)

app/views/books/_form.html.erb

@@ -59,6 +59,46 @@
     </div>
   </div>
 
+  <div class="book-view-settings border-radius center pad-double fill-shade flex flex-column gap margin-block-double">
+    <div class="flex align-center gap txt-medium--responsive">
+      <%= image_tag "view-grid.svg", aria: { hidden: true }, size: 36, class: "colorize--black" %>
+
+      <div class="min-width">
+        <div class="overflow-ellipsis fill-shade"><strong>Default view</strong></div>
+      </div>
+
+      <hr class="flex-item-grow margin-none" aria-hidden="true" style="--border-style: dashed">
+
+      <div class="flex gap-half">
+        <% Book.default_views.keys.each do |view| %>
+          <label class="btn txt-small" title="<%= view.capitalize %> view">
+            <%= form.radio_button :default_view, view %>
+            <%= image_tag "view-#{view}.svg", aria: { hidden: true }, size: 20 %>
+            <span class="for-screen-reader"><%= view.capitalize %> view</span>
+          </label>
+        <% end %>
+      </div>
+    </div>
+
+    <hr class="full-width margin-block-start margin-block-end-half">
+
+    <div class="flex align-center gap txt-medium--responsive">
+      <%= image_tag "settings.svg", aria: { hidden: true }, size: 36, class: "colorize--black" %>
+
+      <div class="min-width">
+        <div class="overflow-ellipsis fill-shade"><strong>View selector</strong></div>
+      </div>
+
+      <hr class="flex-item-grow margin-none" aria-hidden="true" style="--border-style: dashed">
+
+      <label for="book_allow_view_selector" class="switch">
+        <%= form.check_box :allow_view_selector, class: "switch__input book-access__switch" %>
+        <span class="switch__btn"></span>
+        <span class="for-screen-reader">Allow users to switch between list and grid view</span>
+      </label>
+    </div>
+  </div>
+
   <div class="book-access border-radius center pad-double fill-shade flex flex-column gap margin-block-double">
     <div class="flex align-center gap txt-medium--responsive">
       <%= image_tag "eye.svg", aria: { hidden: true }, size: 36, class: "colorize--black" %>

app/views/books/show.html.erb

@@ -73,25 +73,27 @@
     </div>
   </aside>
 
-  <%= arrangement_tag @book, class: "arrangement__container toc__container full-width txt-align-center" do %>
+  <%= arrangement_tag @book, class: "arrangement__container toc__container full-width txt-align-center #{'toc__container--force-' + @book.default_view unless @book.allow_view_selector?}" do %>
     <h1 class="flex flex-column txt-tight-lines txt-align-start margin-block-end">
       <strong class="book__title txt-x-large--responsive"><%= @book.title %></strong>
       <span class="txt-large--responsive txt-normal"><%= @book.subtitle %></span>
       <span class="txt-large--responsive txt-normal"><%= @book.author %></span>
     </h1>
 
-    <div class="book__toolbar fill-white flex gap-half pad-block margin-block-end-half justify-center <%= "position-sticky" if @book.editable? %>" data-controller="toc-view" data-toc-view-id-value="<%= dom_id(@book) %>">
-      <label class="btn txt-medium disable-when-empty">
-        <input type="radio" name="view" id="toc-list" value="list" data-toc-view-target="switch" data-toc-view-type-value="list" data-action="toc-view#saveViewPref">
-        <%= image_tag "view-list.svg", aria: { hidden: true }, size: 24 %>
-        <span class="for-screen-reader">List view</span>
-      </label>
-
-      <label class="btn txt-medium flex-item-justify-start disable-when-empty">
-        <input type="radio" name="view" id="toc-grid" value="grid" checked="checked" data-toc-view-target="switch" data-toc-view-type-value="grid" data-action="toc-view#saveViewPref">
-        <%= image_tag "view-grid.svg", aria: { hidden: true }, size: 24 %>
-        <span class="for-screen-reader">Page view</span>
-      </label>
+    <div class="book__toolbar fill-white flex gap-half pad-block margin-block-end-half justify-center <%= "position-sticky" if @book.editable? %>" data-controller="toc-view" data-toc-view-id-value="<%= dom_id(@book) %>" data-toc-view-default-value="<%= @book.default_view %>">
+      <% if @book.allow_view_selector? %>
+        <label class="btn txt-medium disable-when-empty">
+          <input type="radio" name="view" id="toc-list" value="list" data-toc-view-target="switch" data-toc-view-type-value="list" data-action="toc-view#saveViewPref"<%= ' checked="checked"' if @book.default_view == 'list' %>>
+          <%= image_tag "view-list.svg", aria: { hidden: true }, size: 24 %>
+          <span class="for-screen-reader">List view</span>
+        </label>
+
+        <label class="btn txt-medium flex-item-justify-start disable-when-empty">
+          <input type="radio" name="view" id="toc-grid" value="grid" data-toc-view-target="switch" data-toc-view-type-value="grid" data-action="toc-view#saveViewPref"<%= ' checked="checked"' if @book.default_view == 'grid' %>>
+          <%= image_tag "view-grid.svg", aria: { hidden: true }, size: 24 %>
+          <span class="for-screen-reader">Page view</span>
+        </label>
+      <% end %>
 
       <% if @book.editable? %>
         <%= render "books/create_buttons", book: @book %>

db/migrate/20260317235838_add_view_settings_to_books.rb

@@ -0,0 +1,6 @@
+class AddViewSettingsToBooks < ActiveRecord::Migration[8.0]
+  def change
+    add_column :books, :default_view, :string, default: "grid", null: false
+    add_column :books, :allow_view_selector, :boolean, default: true, null: false
+  end
+end