Added styling

app/controllers/application_controller.rb

@@ -81,7 +81,6 @@ class ApplicationController < ActionController::Base
   end
 
   def pack?(data, pack_name)
-    return false unless data
     if data['pack'].is_a?(Hash) && data['pack'].key?(pack_name)
       return true if data['pack'][pack_name].is_a?(String) || data['pack'][pack_name].is_a?(Hash)
     end
@@ -90,17 +89,16 @@ class ApplicationController < ActionController::Base
 
   def nil_pack(data, pack_name, skin = 'default')
     {
-      common: pack_name == 'common' ? nil : resolve_pack(!data || data['name'] ? Themes.instance.flavour(current_flavour) : Themes.instance.core, 'common', skin),
+      common: pack_name == 'common' ? nil : resolve_pack(data['name'] ? Themes.instance.flavour(current_flavour) : Themes.instance.core, 'common', skin),
-      flavour: data ? data['name'] : nil,
+      flavour: data['name'],
       pack: nil,
       preload: nil,
       skin: nil,
-      supported_locales: data ? data['locales'] : nil,
+      supported_locales: data['locales'],
     }
   end
 
   def resolve_pack(data, pack_name, skin = 'default')
-    return nil_pack(data, pack_name, skin) unless data
     result = pack(data, pack_name, skin)
     unless result
       if data['name'] && data.key?('fallback')
@@ -156,14 +154,13 @@ class ApplicationController < ActionController::Base
   end
 
   def current_flavour
-    return params[:use_flavour].to_s if Themes.instance.flavours.include? params[:use_flavour].to_s
+    return Setting.default_settings['flavour'] unless Themes.instance.flavours.include? current_user&.setting_flavour
-    return current_user.setting_flavour if Themes.instance.flavours.include? current_user&.setting_flavour
+    current_user.setting_flavour
-    Setting.default_settings['flavour']
   end
 
   def current_skin
-    return current_user.setting_skin if Themes.instance.skins_for(current_flavour).include? current_user&.setting_skin
+    return 'default' unless Themes.instance.skins_for(current_flavour).include? current_user&.setting_skin
-    'default'
+    current_user.setting_skin
   end
 
   def cache_collection(raw, klass)

app/controllers/home_controller.rb

@@ -7,7 +7,6 @@ class HomeController < ApplicationController
 
   def index
     @body_classes = 'app-body'
-    redirect_to "/$#{current_flavour}/#{params[:glob] || ''}" unless Themes.instance.flavours.include?(params[:use_flavour].to_s) or request.path.start_with?("/$#{current_flavour}")
   end
 
   private
@@ -59,7 +58,7 @@ class HomeController < ApplicationController
   end
 
   def default_redirect_path
-    if request.path.start_with?('/web') || request.path.match?(/\A\$[\w-]+/)
+    if request.path.start_with?('/web')
       new_user_session_path
     elsif single_user_mode?
       short_account_path(Account.first)

app/controllers/settings/flavours_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Settings::FlavoursController < Settings::BaseController
+
+  def index
+    redirect_to action: 'show', flavour: current_flavour
+  end
+
+  def show
+    unless Themes.instance.flavours.include?(params[:flavour]) or params[:flavour] == current_flavour
+      redirect_to action: 'show', flavour: current_flavour
+    end
+
+    @listing = Themes.instance.flavours
+    @selected = params[:flavour]
+  end
+
+  def update
+    user_settings.update(user_settings_params(params[:flavour]).to_h)
+    redirect_to action: 'show', flavour: params[:flavour]
+  end
+
+  private
+
+  def user_settings
+    UserSettingsDecorator.new(current_user)
+  end
+
+  def user_settings_params(flavour)
+    params.require(:user).merge({ setting_flavour: flavour }).permit(
+      :setting_flavour,
+      :setting_skin
+    )
+  end
+end

app/controllers/settings/preferences_controller.rb

@@ -39,8 +39,6 @@ class Settings::PreferencesController < Settings::BaseController
       :setting_reduce_motion,
       :setting_system_font_ui,
       :setting_noindex,
-      :setting_flavour,
-      :setting_skin,
       notification_emails: %i(follow follow_request reblog favourite mention digest),
       interactions: %i(must_be_follower must_be_following)
     )

app/javascript/core/settings.js

@@ -37,7 +37,3 @@ delegate(document, '#account_header', 'change', ({ target }) => {
 
   header.style.backgroundImage = `url(${url})`;
 });
-
-delegate(document, '#user_setting_flavour, #user_setting_skin', 'change', ({ target }) => {
-  target.form.submit();
-});

app/javascript/flavours/glitch/containers/mastodon.js

@@ -57,7 +57,7 @@ export default class Mastodon extends React.PureComponent {
     return (
       <IntlProvider locale={locale} messages={messages}>
         <Provider store={store}>
-          <BrowserRouter basename='/$glitch'>
+          <BrowserRouter basename='/web'>
             <ScrollContext>
               <Route path='/' component={UI} />
             </ScrollContext>

app/javascript/flavours/glitch/names.yml

@@ -1,6 +1,8 @@
 en:
   flavours:
-    glitch: Glitch Edition
+    glitch:
+      description: The default flavour for GlitchSoc instances.
+      name: Glitch Edition
   skins:
     glitch:
       default: Default

app/javascript/flavours/glitch/packs/common.js

@@ -1 +1,4 @@
 import 'flavours/glitch/styles/index.scss';
+
+//  This ensures that webpack compiles our images.
+require.context('../images', true);

app/javascript/flavours/glitch/service_worker/web_push_notifications.js

@@ -17,7 +17,7 @@ const notify = options =>
         icon: '/android-chrome-192x192.png',
         tag: GROUP_TAG,
         data: {
-          url: (new URL('/$glitch/notifications', self.location)).href,
+          url: (new URL('/web/notifications', self.location)).href,
           count: notifications.length + 1,
           message: options.data.message,
         },

app/javascript/flavours/glitch/styles/admin.scss

@@ -246,6 +246,22 @@
   }
 }
 
+.flavour-screen {
+  display: block;
+  margin: 10px auto;
+  max-width: 100%;
+}
+
+.flavour-description {
+  display: block;
+  font-size: 16px;
+  margin: 10px 0;
+
+  & > p {
+    margin: 10px 0;
+  }
+}
+
 .report-accounts {
   display: flex;
   flex-wrap: wrap;

app/javascript/flavours/glitch/theme.yml

@@ -26,6 +26,12 @@ pack:
 #  language tags and whose default exports are a messages object.
 locales: locales
 
+#  (OPTIONAL) A file to use as the preview screenshot for the flavour,
+#  or an array thereof. These filenames must be unique across all
+#  images (regardless of path), so it's a good idea to namespace them
+#  to your theme. It's up to you to let webpack know to compile them.
+screenshot: glitch-preview.jpg
+
 #  (OPTIONAL) The directory which contains the pack files.
 #  Defaults to the theme directory (`app/javascript/themes/[theme]`),
 #  which should be sufficient for like 99% of use-cases lol.

app/javascript/flavours/glitch/util/main.js

@@ -12,8 +12,8 @@ function main() {
   if (window.history && history.replaceState) {
     const { pathname, search, hash } = window.location;
     const path = pathname + search + hash;
-    if (!(/^\/\$glitch[$/]/).test(path)) {
+    if (!(/^\/web[$/]/).test(path)) {
-      history.replaceState(null, document.title, `/$glitch${path}`);
+      history.replaceState(null, document.title, `/web${path}`);
     }
   }
 

app/javascript/flavours/vanilla/names.yml

@@ -1,6 +1,8 @@
 en:
   flavours:
-    vanilla: Vanilla Mastodon
+    vanilla:
+      description: The theme used by vanilla Mastodon instances. This theme might not support all of the features of GlitchSoc.
+      name: Vanilla Mastodon
   skins:
     vanilla:
       default: Default

app/javascript/flavours/vanilla/theme.yml

@@ -24,6 +24,12 @@ pack:
 #  the flavour, relative to this directory.
 locales: ../../mastodon/locales
 
+#  (OPTIONAL) A file to use as the preview screenshot for the flavour,
+#  or an array thereof. These filenames must be unique across all
+#  images (regardless of path), so it's a good idea to namespace them
+#  to your theme. It's up to you to let webpack know to compile them.
+screenshot: screenshot.jpg
+
 #  (OPTIONAL) The directory which contains the pack files.
 #  Defaults to this directory (`app/javascript/flavour/[flavour]`),
 #  but in the case of the vanilla Mastodon flavour the pack files are

app/javascript/mastodon/containers/mastodon.js

@@ -57,7 +57,7 @@ export default class Mastodon extends React.PureComponent {
     return (
       <IntlProvider locale={locale} messages={messages}>
         <Provider store={store}>
-          <BrowserRouter basename='/$vanilla'>
+          <BrowserRouter basename='/web'>
             <ScrollContext>
               <Route path='/' component={UI} />
             </ScrollContext>

app/javascript/mastodon/main.js

@@ -12,8 +12,8 @@ function main() {
   if (window.history && history.replaceState) {
     const { pathname, search, hash } = window.location;
     const path = pathname + search + hash;
-    if (!(/^\/\$vanilla[$/]/).test(path)) {
+    if (!(/^\/web[$/]/).test(path)) {
-      history.replaceState(null, document.title, `/$vanilla${path}`);
+      history.replaceState(null, document.title, `/web${path}`);
     }
   }
 

app/javascript/mastodon/service_worker/web_push_notifications.js

@@ -102,16 +102,16 @@ const findBestClient = clients => {
 const openUrl = url =>
   self.clients.matchAll({ type: 'window' }).then(clientList => {
     if (clientList.length !== 0) {
-      const webClients = clientList.filter(client => /\/\$vanilla\//.test(client.url));
+      const webClients = clientList.filter(client => /\/web\//.test(client.url));
 
       if (webClients.length !== 0) {
         const client       = findBestClient(webClients);
         const { pathname } = new URL(url);
 
-        if (pathname.startsWith('/$vanilla/')) {
+        if (pathname.startsWith('/web/')) {
           return client.focus().then(client => client.postMessage({
             type: 'navigate',
-            path: pathname.slice('/$vanilla/'.length - 1),
+            path: pathname.slice('/web/'.length - 1),
           }));
         }
       } else if ('navigate' in clientList[0]) { // Chrome 42-48 does not support navigate

app/javascript/styles/win95.scss

@@ -1054,23 +1054,23 @@ body.admin {
   }
 }
 
-.column-link[href="/$vanilla/timelines/public"] {
+.column-link[href="/web/timelines/public"] {
   background-image: url("~images/icon_public.png");
   &:hover { background-image: url("~images/icon_public.png"); }
 }
-.column-link[href="/$vanilla/timelines/public/local"] {
+.column-link[href="/web/timelines/public/local"] {
   background-image: url("~images/icon_local.png");
   &:hover { background-image: url("~images/icon_local.png"); }
 }
-.column-link[href="/$vanilla/pinned"] {
+.column-link[href="/web/pinned"] {
   background-image: url("~images/icon_pin.png");
   &:hover { background-image: url("~images/icon_pin.png"); }
 }
-.column-link[href="/$vanilla/favourites"] {
+.column-link[href="/web/favourites"] {
   background-image: url("~images/icon_likes.png");
   &:hover { background-image: url("~images/icon_likes.png"); }
 }
-.column-link[href="/$vanilla/blocks"] {
+.column-link[href="/web/blocks"] {
   background-image: url("~images/icon_blocks.png");
   &:hover { background-image: url("~images/icon_blocks.png"); }
 }

app/lib/themes.rb

@@ -14,17 +14,27 @@ class Themes
     result = Hash.new
     Dir.glob(Rails.root.join('app', 'javascript', 'flavours', '*', 'theme.yml')) do |path|
       data = YAML.load_file(path)
-      name = File.basename(File.dirname(path))
+      dir = File.dirname(path)
-      if data['locales']
+      name = File.basename(dir)
       locales = []
-        Dir.glob(File.join(File.dirname(path), data['locales'], '*.{js,json}')) do |locale|
+      screenshots = []
+      if data['locales']
+        Dir.glob(File.join(dir, data['locales'], '*.{js,json}')) do |locale|
           localeName = File.basename(locale, File.extname(locale))
           locales.push(localeName) unless localeName.match(/defaultMessages|whitelist|index/)
         end
-        data['locales'] = locales
+      end
+      if data['screenshot']
+        if data['screenshot'].is_a? Array
+          screenshots = data['screenshot']
+        else
+          screenshots.push(data['screenshot'])
+        end
       end
       if data['pack']
         data['name'] = name
+        data['locales'] = locales
+        data['screenshot'] = screenshots
         data['skin'] = { 'default' => [] }
         result[name] = data
       end

app/views/settings/flavours/show.html.haml

@@ -0,0 +1,19 @@
+- content_for :page_title do
+  = t "flavours.#{@selected}.name", default: @selected
+
+= simple_form_for current_user, url: settings_flavour_path(@selected), html: { method: :put } do |f|
+  = render 'shared/error_messages', object: current_user
+
+  - Themes.instance.flavour(@selected)['screenshot'].each do |screen|
+    %img.flavour-screen{ src: asset_pack_path(screen) }
+
+  .flavour-description
+    = t "flavours.#{@selected}.description", default: ''
+
+  %hr/
+
+  .fields-group
+    = f.input :setting_skin, collection: Themes.instance.skins_for(@selected), label_method: lambda { |skin| I18n.t("skins.#{@selected}.#{skin}", default: skin) }, wrapper: :with_label, include_blank: false
+
+  .actions
+    = f.button :button, t('generic.use_this'), type: :submit

app/views/settings/preferences/show.html.haml

@@ -26,10 +26,6 @@
   %h4= t 'preferences.web'
 
   .fields-group
-    - if Themes.instance.flavours.size > 1
-      = f.input :setting_flavour, collection: Themes.instance.flavours, label_method: lambda { |flavour| I18n.t("flavours.#{flavour}", default: flavour) }, wrapper: :with_label, include_blank: false
-      = f.input :setting_skin, collection: Themes.instance.skins_for(current_flavour), label_method: lambda { |skin| I18n.t("skins.#{current_flavour}.#{skin}", default: skin) }, wrapper: :with_label, include_blank: false
-
     = f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label
     = f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
     = f.input :setting_favourite_modal, as: :boolean, wrapper: :with_label

config/locales/en.yml

@@ -424,6 +424,7 @@ en:
     changes_saved_msg: Changes successfully saved!
     powered_by: powered by %{link}
     save_changes: Save changes
+    use_this: Use this
     validation_errors:
       one: Something isn't quite right yet! Please review the error below
       other: Something isn't quite right yet! Please review %{count} errors below
@@ -587,6 +588,7 @@ en:
     development: Development
     edit_profile: Edit profile
     export: Data export
+    flavours: Flavours
     followers: Authorized followers
     import: Import
     keyword_mutes: Muted keywords

config/locales/simple_form.en.yml

@@ -13,7 +13,6 @@ en:
         note:
           one: <span class="note-counter">1</span> character left
           other: <span class="note-counter">%{count}</span> characters left
-        setting_flavour: Affects how Mastodon looks when you're logged in from any device
         setting_noindex: Affects your public profile and status pages
         setting_skin: Reskins the selected Mastodon flavour
       imports:
@@ -47,7 +46,6 @@ en:
         setting_default_sensitive: Always mark media as sensitive
         setting_delete_modal: Show confirmation dialog before deleting a toot
         setting_favourite_modal: Show confirmation dialog before favouriting
-        setting_flavour: Flavour
         setting_noindex: Opt-out of search engine indexing
         setting_reduce_motion: Reduce motion in animations
         setting_skin: Skin

config/navigation.rb

@@ -17,6 +17,12 @@ SimpleNavigation::Configuration.run do |navigation|
       settings.item :follower_domains, safe_join([fa_icon('users fw'), t('settings.followers')]), settings_follower_domains_url
     end
 
+    primary.item :flavours, safe_join([fa_icon('paint-brush fw'), t('settings.flavours')]), settings_flavours_url do |flavours|
+      Themes.instance.flavours.each do |flavour|
+        flavours.item flavour.to_sym, safe_join([fa_icon('star fw'), t("flavours.#{flavour}.name", default: flavour)]), settings_flavour_url(flavour)
+      end
+    end
+
     primary.item :invites, safe_join([fa_icon('user-plus fw'), t('invites.title')]), invites_path, if: proc { Setting.min_invite_role == 'user' }
 
     primary.item :development, safe_join([fa_icon('code fw'), t('settings.development')]), settings_applications_url do |development|

config/routes.rb

@@ -102,6 +102,8 @@ Rails.application.routes.draw do
       end
     end
 
+    resources :flavours, only: [:index, :show, :update], param: :flavour
+
     resource :delete, only: [:show, :destroy]
     resource :migration, only: [:show, :update]
 
@@ -309,8 +311,7 @@ Rails.application.routes.draw do
     end
   end
 
-  get '/web/(*glob)', to: 'home#index', as: :web
+  get '/web/(*any)', to: 'home#index', as: :web
-  get "/$:use_flavour/(*glob)", to: 'home#index'
 
   get '/about',      to: 'about#show'
   get '/about/more', to: 'about#more'