FEATURE: Initial themes config area with grid (#28828)

* UX: More additions

* UX: more

* DEV: Add admin/config/themes route

* UX: Use admin config card

* syntax merge fixes

* cleanup

* cleanup

* checkbox

* more

* error

* save on click

* more

* fix setter

* DEV: Implement vanilla checkbox

* cleanup

* UX: save themes as default

* DEV: Add component list to card

* DEV: Add placeholder for no screenshots

* DEV: Fix default theme reactivity

Also add content/optionalAction yields to config area
card and put the theme user selectable checkbox there,
along with adding styles.

* DEV: Change to generic "look and feel" config area

* DEV: Auto redirect to themes on base look and feel route

* UX: Remove computed from sorted themes

* linting

* UX: Turn update icon into button that routes to settings

* DEV: remove unused function

* UX: center icons with title

* DEV: Lint

* UX: Hook up theme preview button

* DEV: Minor fixes

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

config/locales/client.en.yml

@@ -5665,6 +5665,18 @@ en:
             title: "More options"
             move_up: "Move up"
             move_down: "Move down"
+        look_and_feel:
+          title: "Look & Feel"
+          description: "Themes, components, and color schemes can be used to customise and brand your Discourse site, giving it a distinctive style."
+          themes:
+            title: "Themes"
+            themes_intro: "Install a new theme to get started, or create your own from scratch using these resources."
+            themes_intro_img_alt: "New theme placeholder"
+            set_default_theme: "Set default"
+            default_theme: "Default theme"
+            themes_description: "Themes are expansive customizations that change multiple elements of the style of your forum design, and often also include additional front-end features."
+            new_theme: "New theme"
+            user_selectable: "User selectable"
       plugins:
         title: "Plugins"
         installed: "Installed plugins"
@@ -5837,6 +5849,8 @@ en:
           theme_name: "Theme name"
           component_name: "Component name"
           themes_intro: "Select an existing theme or install a new one to get started"
+          themes_intro_new: "Install a new theme to get started, or create your own from scratch using these resources."
+          themes_intro_img_alt: "New theme placeholder"
           beginners_guide_title: "Beginner’s guide to using Discourse Themes"
           developers_guide_title: "Developer’s guide to Discourse Themes"
           browse_themes: "Browse community themes"
@@ -5884,6 +5898,9 @@ en:
           convert_theme_alert_generic: "Are you sure you want to convert this theme to component?"
           convert_theme_tooltip: "Convert this theme to component"
           inactive_themes: "Inactive themes:"
+          set_default_theme: "Set default"
+          default_theme: "Default theme"
+          set_default_success: "Default theme set to %{theme}"
           inactive_components: "Unused components:"
           selected:
             one: "%{count} selected"

config/routes.rb

@@ -401,6 +401,13 @@ Discourse::Application.routes.draw do
         resources :about, constraints: AdminConstraint.new, only: %i[index] do
           collection { put "/" => "about#update" }
         end
+
+        resources :look_and_feel,
+                  path: "look-and-feel",
+                  constraints: AdminConstraint.new,
+                  only: %i[index] do
+          collection { get "/themes" => "look_and_feel#themes" }
+        end
       end
 
       get "section/:section_id" => "section#show", :constraints => AdminConstraint.new