chore: refactor settings, general cleanup

.github/workflows/backend.yml

@@ -4,9 +4,10 @@ on: [workflow_dispatch, push, pull_request]
 
 jobs:
   run:
-    uses: flarum/framework/.github/workflows/REUSABLE_backend.yml@main
+    uses: flarum/framework/.github/workflows/REUSABLE_backend.yml@1.x
     with:
       enable_backend_testing: false
       enable_phpstan: true
+      php_versions: '["7.4", "8.0", "8.1", "8.2", "8.3"]'
 
       backend_directory: .

.github/workflows/frontend.yml

@@ -4,7 +4,7 @@ on: [workflow_dispatch, push, pull_request]
 
 jobs:
   run:
-    uses: flarum/framework/.github/workflows/REUSABLE_frontend.yml@main
+    uses: flarum/framework/.github/workflows/REUSABLE_frontend.yml@1.x
     with:
       enable_bundlewatch: false
       enable_prettier: true

composer.json

@@ -36,8 +36,8 @@
         }
     ],
     "require": {
-        "flarum/core": "^1.5.0",
-        "fof/extend": "^1.0.0"
+        "php": "^7.4 || ^8.0",
+        "flarum/core": "^1.7.0"
     },
     "replace": {
         "reflar/nightmode": "*"
@@ -82,6 +82,7 @@
         "analyse:phpstan": "Run static analysis"
     },
     "require-dev": {
-        "flarum/phpstan": "*"
+        "flarum/phpstan": "*",
+        "fof/default-user-preferences": "*"
     }
 }

extend.php

@@ -12,7 +12,6 @@
 namespace FoF\NightMode;
 
 use Flarum\Extend;
-use Flarum\Extension\ExtensionManager;
 use Flarum\Settings\SettingsRepositoryInterface;
 use FoF\DefaultUserPreferences\Extend\RegisterUserPreferenceDefault;
 
@@ -25,13 +24,14 @@
 
     (new Extend\Frontend('admin'))
         ->js(__DIR__.'/js/dist/admin.js')
+        ->css(__DIR__.'/resources/less/admin.less')
         ->content(Content\HideBody::class)
         ->content(Content\PatchUnsupportedAutoNightmode::class),
 
     new Extend\Locales(__DIR__.'/resources/locale'),
 
     (new Extend\ServiceProvider())
-        ->register(AssetsServiceProvider::class),
+        ->register(Provider\AssetsServiceProvider::class),
 
     (new Extend\User())
         ->registerPreference('fofNightMode', function ($value) {
@@ -45,6 +45,7 @@
 
     (new Extend\Settings())
         ->default('fof-nightmode.default_theme', 0)
+        ->default('fofNightMode.show_theme_toggle_on_header_always', false)
         ->serializeToForum('fofNightMode_autoUnsupportedFallback', 'theme_dark_mode', function ($val) {
             $val = (bool) $val;
 
@@ -55,10 +56,13 @@
 
             return 1;
         }, false)
-        ->serializeToForum('fofNightMode.showThemeToggleOnHeaderAlways', 'fofNightMode.show_theme_toggle_on_header_always', 'boolval', false)
+        ->serializeToForum('fofNightMode.showThemeToggleOnHeaderAlways', 'fofNightMode.show_theme_toggle_on_header_always', 'boolval')
         ->serializeToForum('fof-nightmode.default_theme', 'fof-nightmode.default_theme', 'intval'),
 
-    class_exists(RegisterUserPreferenceDefault::class) && resolve(ExtensionManager::class)->isEnabled('fof-default-user-preferences') ? (new RegisterUserPreferenceDefault())
-        ->default('fofNightMode', 0, 'number')
-        ->default('fofNightMode_perDevice', false, 'bool') : [],
+    (new Extend\Conditional())
+        ->whenExtensionEnabled('fof-default-user-preferences', fn () => [
+            (new RegisterUserPreferenceDefault())
+                ->default('fofNightMode', 0, 'number')
+                ->default('fofNightMode_perDevice', false, 'bool'),
+        ]),
 ];

js/package.json

@@ -1,23 +1,24 @@
 {
-    "private": true,
     "name": "@fof/nightmode",
+    "version": "0.0.0",
+    "private": true,
     "prettier": "@flarum/prettier-config",
     "dependencies": {
-        "@flarum/prettier-config": "^1.0.0",
-        "es-cookie": "^1.4.0",
-        "flarum-tsconfig": "^1.0.2",
-        "flarum-webpack-config": "^2.0.2",
-        "webpack": "^5.88.2",
-        "webpack-cli": "^5.1.4"
-    },
-    "scripts": {
-        "dev": "webpack --mode development --watch",
-        "build": "webpack --mode production",
-        "format": "prettier --write src",
-        "format-check": "prettier --check src"
+      "@flarum/prettier-config": "^1.0.0",
+      "flarum-tsconfig": "^1.0.2",
+      "flarum-webpack-config": "^2.0.2",
+      "webpack": "^5.88.1",
+      "webpack-cli": "^5.1.4",
+      "es-cookie": "^1.5.0"
     },
     "devDependencies": {
-        "prettier": "^3.0.3"
+      "prettier": "^3.0.0"
     },
-    "packageManager": "[email protected]"
-}
+    "scripts": {
+      "dev": "webpack --mode development --watch",
+      "build": "webpack --mode production",
+      "format": "prettier --write src",
+      "format-check": "prettier --check src"
+    }
+  }
+

js/src/admin/components/NightmodeSettingsPage.tsx

@@ -0,0 +1,77 @@
+import app from 'flarum/admin/app';
+import ExtensionPage from 'flarum/admin/components/ExtensionPage';
+import ItemList from 'flarum/common/utils/ItemList';
+import Themes from '../../common/Themes';
+import extractText from 'flarum/common/utils/extractText';
+import type Mithril from 'mithril';
+
+export default class NightmodeSettingsPage extends ExtensionPage {
+  content() {
+    return (
+      <div className="NightmodeSettingsPage">
+        <div className="container">
+          <div className="NightmodeSettingsTabPage NightmodeSettingsPage--settings">
+            <div className="Form">
+              {this.settingsItems().toArray()}
+              <div className="Form-group">{this.submitButton()}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  settingsItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'general',
+      <div className="Section">
+        <h3>{app.translator.trans('fof-nightmode.admin.settings.general.heading')}</h3>
+        <p className="helpText">{app.translator.trans('fof-nightmode.admin.settings.general.help')}</p>
+        {this.generalItems().toArray()}
+      </div>
+    );
+
+    return items;
+  }
+
+  generalItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'header-toggle',
+      this.buildSettingComponent({
+        label: app.translator.trans('fof-nightmode.admin.settings.modal.always_show_theme_toggle_on_header'),
+        setting: 'fofNightMode.show_theme_toggle_on_header_always',
+        type: 'switch',
+      })
+    );
+
+    items.add(
+      'default-theme',
+      this.buildSettingComponent({
+        label: app.translator.trans('fof-nightmode.admin.settings.modal.default_theme'),
+        help: app.translator.trans('fof-nightmode.admin.settings.modal.default_theme_helper'),
+        setting: 'fof-nightmode.default_theme',
+        type: 'select',
+        options: this.populateThemes(),
+      })
+    );
+
+    return items;
+  }
+
+  populateThemes(): Record<number, string> {
+    let options: Record<number, string> = {};
+
+    // add themes based on JS enum
+    Object.keys(Themes).forEach((theme, i) => {
+      if (theme === 'DEFAULT') return;
+
+      options[i] = extractText(app.translator.trans(`fof-nightmode.admin.settings.modal.theme_${theme.toLowerCase()}`));
+    });
+
+    return options;
+  }
+}

js/src/admin/components/index.ts

@@ -0,0 +1,5 @@
+import NightmodeSettingsPage from './NightmodeSettingsPage';
+
+export const components = {
+  NightmodeSettingsPage,
+};

js/src/admin/index.ts

@@ -0,0 +1,11 @@
+import app from 'flarum/admin/app';
+import setSelectedTheme from '../common/setSelectedTheme';
+import NightmodeSettingsPage from './components/NightmodeSettingsPage';
+
+export * from './components';
+
+app.initializers.add('fof-nightmode', () => {
+  app.extensionData.for('fof-nightmode').registerPage(NightmodeSettingsPage);
+
+  setSelectedTheme();
+});

js/src/common/Themes.js → js/src/common/Themes.ts

@@ -14,7 +14,7 @@ const Themes = {
   DARK: 2,
 
   // adds an "ultra default" of 0 if the admins don't set a default tsk tsk tsk
-  DEFAULT: () => app.forum.attribute('fof-nightmode.default_theme') || 0,
+  DEFAULT: () => app.forum.attribute<number>('fof-nightmode.default_theme') || 0,
 };
 
 export default Themes;

js/src/common/setSelectedTheme.js

@@ -7,15 +7,15 @@ import Themes from './Themes';
 import fixInvalidThemeSetting from '../forum/fixInvalidThemeSetting';
 import getTheme from '../forum/getTheme';
 
-export default () => {
+export default function setSelectedTheme() {
   extend(Page.prototype, 'oninit', setTheme);
 
   // Register setTheme() as the handler for 'prefers-color-scheme' media property
   // change. This allows to make sure the 'fofnightmodechange' event is dispatched
   // when this property changes, and that the correct stylesheets are loaded.
   const prefersColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)');
   prefersColorSchemeDark.addEventListener('change', setTheme);
-};
+}
 
 export function setTheme() {
   const { user } = app.session;

js/src/forum/addSettingsItems.js

@@ -109,11 +109,11 @@ export default function () {
             {currentTheme === Themes.AUTO
               ? trans('option_descriptions.auto')
               : currentTheme === Themes.LIGHT
-              ? trans('option_descriptions.day')
-              : currentTheme === Themes.DARK
-              ? trans('option_descriptions.night')
-              : // prevents nasty paragraph switching
-                LoadingIndicator.component()}
+                ? trans('option_descriptions.day')
+                : currentTheme === Themes.DARK
+                  ? trans('option_descriptions.night')
+                  : // prevents nasty paragraph switching
+                    LoadingIndicator.component()}
           </p>,
         ]
       )

js/src/forum/helpers/perDeviceSetting.js → js/src/forum/helpers/perDeviceSetting.ts

@@ -16,7 +16,7 @@ export const get = () => {
 export const set = (val) =>
   Cookies.set(KEY, val, {
     sameSite: 'lax',
-    secure: location.protocol === 'https:',
+    secure: location.protocol === 'https:' ? true : undefined,
   });
 
 export const remove = () => Cookies.remove(KEY);