chore: refactor settings, general

Author: imorland

composer.json

@@ -36,8 +36,7 @@
         }
     ],
     "require": {
-        "flarum/core": "^1.5.0",
-        "fof/extend": "^1.0.0"
+        "flarum/core": "^1.7.0"
     },
     "replace": {
         "reflar/nightmode": "*"
@@ -82,6 +81,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/.yarn/releases/yarn-3.2.1.cjs

@@ -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/.yarnrc.yml

@@ -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/admin.js renamed to js/admin.ts

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