[REFACTOR] Simplify the DHAppearanceSettings (#1057)

Co-authored-by: Joaquin Pereyra <joaquinpereyra98@users.noreply.github.com>

lang/en.json

@@ -2152,20 +2152,43 @@
         "SETTINGS": {
             "Appearance": {
                 "FIELDS": {
-                    "displayFear": { "label": "Fear Display" },
-                    "dualityColorScheme": { "label": "Chat Style" },
-                    "hideAttribution": { "label": "Hide Attribution" },
+                    "displayFear": {
+                        "label": "Display Fear"
+                    },
+                    "showGenericStatusEffects": {
+                        "label": "Show Foundry Status Effects"
+                    },
+                    "hideAttribution": {
+                        "label": "Hide Attribution"
+                    },
                     "expandedTitle": "Auto-expand Descriptions",
-                    "extendCharacterDescriptions": { "label": "Characters" },
-                    "extendAdversaryDescriptions": { "label": "Adversaries" },
-                    "extendEnvironmentDescriptions": { "label": "Environments" },
-                    "extendItemDescriptions": { "label": "Items" },
-                    "expandRollMessage": "Auto-expand Message Sections",
-                    "expandRollMessageDesc": { "label": "Description" },
-                    "expandRollMessageRoll": { "label": "Formula" },
-                    "expandRollMessageDamage": { "label": "Damage/Healing" },
-                    "expandRollMessageTarget": { "label": "Target" },
-                    "showGenericStatusEffects": { "label": "Show Foundry Status Effects" }
+                    "extendCharacterDescriptions": {
+                        "label": "Characters"
+                    },
+                    "extendAdversaryDescriptions": {
+                        "label": "Adversaries"
+                    },
+                    "extendEnvironmentDescriptions": {
+                        "label": "Environments"
+                    },
+                    "extendItemDescriptions": {
+                        "label": "Items"
+                    },
+                    "expandRollMessage": {
+                        "title": "Auto-expand Message Sections",
+                        "desc": {
+                            "label": "Description"
+                        },
+                        "roll": {
+                            "label": "Formula"
+                        },
+                        "damage": {
+                            "label": "Damage/Healing"
+                        },
+                        "target": {
+                            "label": "Target"
+                        }
+                    }
                 },
                 "fearDisplay": {
                     "token": "Tokens",
@@ -2310,10 +2333,8 @@
                     "hint": "System ruler setup for displaying ranges in Daggerheart"
                 },
                 "appearance": {
-                    "title": "Appearance Settings",
                     "label": "Appearance Settings",
                     "hint": "Modify the look of various parts of the system",
-                    "name": "Appearance Settings",
                     "duality": "Duality Rolls",
                     "diceSoNice": {
                         "title": "Dice So Nice",

module/applications/settings/appearanceSettings.mjs

@@ -3,43 +3,48 @@ import { getDiceSoNicePreset } from '../../config/generalConfig.mjs';
 
 const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
 
+/**
+ * @import {ApplicationClickAction} from "@client/applications/_types.mjs"
+ */
+
 export default class DHAppearanceSettings extends HandlebarsApplicationMixin(ApplicationV2) {
-    constructor() {
-        super({});
-
-        this.settings = new DhAppearance(
-            game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance).toObject()
-        );
-    }
-
-    get title() {
-        return game.i18n.localize('DAGGERHEART.SETTINGS.Menu.title');
-    }
-
+    /**@inheritdoc */
     static DEFAULT_OPTIONS = {
         tag: 'form',
         id: 'daggerheart-appearance-settings',
         classes: ['daggerheart', 'dialog', 'dh-style', 'setting'],
         position: { width: '600', height: 'auto' },
         window: {
+            title: 'DAGGERHEART.SETTINGS.Menu.title',
             icon: 'fa-solid fa-gears'
         },
         actions: {
-            reset: this.reset,
-            save: this.save,
-            preview: this.preview
+            reset: DHAppearanceSettings.#onReset,
+            preview: DHAppearanceSettings.#onPreview
         },
-        form: { handler: this.updateData, submitOnChange: true }
+        form: {
+            closeOnSubmit: true,
+            handler: DHAppearanceSettings.#onSubmit
+        }
     };
 
     static PARTS = {
-        main: {
-            template: 'systems/daggerheart/templates/settings/appearance-settings.hbs'
-        }
+        header: { template: 'systems/daggerheart/templates/settings/appearance-settings/header.hbs' },
+        tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
+        main: { template: 'systems/daggerheart/templates/settings/appearance-settings/main.hbs' },
+        diceSoNice: { template: 'systems/daggerheart/templates/settings/appearance-settings/diceSoNice.hbs' },
+        footer: { template: "templates/generic/form-footer.hbs" }
     };
 
     /** @inheritdoc */
     static TABS = {
+        general: {
+            tabs: [
+                { id: 'main', label: 'DAGGERHEART.GENERAL.Tabs.general' },
+                { id: 'diceSoNice', label: 'DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.title' },
+            ],
+            initial: 'main'
+        },
         diceSoNice: {
             tabs: [
                 { id: 'hope', label: 'DAGGERHEART.GENERAL.hope' },
@@ -51,79 +56,137 @@ export default class DHAppearanceSettings extends HandlebarsApplicationMixin(App
         }
     };
 
-    changeTab(tab, group, options) {
-        super.changeTab(tab, group, options);
+    /**@type {DhAppearance}*/
+    setting;
 
-        this.render();
+    static #localized = false;
+
+    /** @inheritDoc */
+    async _preFirstRender(_context, _options) {
+        await super._preFirstRender(_context, _options);
+        if (!DHAppearanceSettings.#localized) {
+            foundry.helpers.Localization.localizeDataModel(this.setting.constructor);
+            DHAppearanceSettings.#localized = true;
+        }
     }
 
-    async _prepareContext(_options) {
-        const context = await super._prepareContext(_options);
-        context.settingFields = this.settings;
-
-        context.showDiceSoNice = game.modules.get('dice-so-nice')?.active;
-        if (game.dice3d) {
-            context.diceSoNiceTextures = game.dice3d.exports.TEXTURELIST;
-            context.diceSoNiceColorsets = game.dice3d.exports.COLORSETS;
-            context.diceSoNiceMaterials = Object.keys(game.dice3d.DiceFactory.material_options).map(key => ({
-                key: key,
-                name: `DICESONICE.Material${key.capitalize()}`
-            }));
-            context.diceSoNiceSystems = [];
-            for (const [key, system] of game.dice3d.DiceFactory.systems.entries()) {
-                context.diceSoNiceSystems.push({ key, name: system.name });
-            }
+    /** @inheritdoc */
+    _configureRenderParts(options) {
+        const parts = super._configureRenderParts(options);
+        if (!game.modules.get('dice-so-nice')?.active){
+            delete parts.diceSoNice;
+            delete parts.tabs;
         }
+        return parts;
+    }
 
-        context.diceTab = {
-            key: this.tabGroups.diceSoNice,
-            source: this.settings._source.diceSoNice[this.tabGroups.diceSoNice],
-            fields: this.settings.schema.fields.diceSoNice.fields[this.tabGroups.diceSoNice].fields
-        };
+    /**@inheritdoc */
+    async _prepareContext(options) {
+        const context = await super._prepareContext(options);
+        if (options.isFirstRender) this.setting = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance);
+
+        context.setting = this.setting;
+        context.fields = this.setting.schema.fields;
+
+        context.tabs = this._prepareTabs('general');
+        context.dsnTabs = this._prepareTabs('diceSoNice');
 
         return context;
     }
 
-    static async updateData(event, element, formData) {
-        const updatedSettings = foundry.utils.expandObject(formData.object);
+    /**@inheritdoc */
+    async _preparePartContext(partId, context, options) {
+        const partContext = await super._preparePartContext(partId, context, options);
+        if (partId in context.tabs) partContext.tab = partContext.tabs[partId];
+        switch (partId) {
+            case "diceSoNice":
+                await this.prepareDiceSoNiceContext(partContext);
+                break;
+            case "footer":
+                partContext.buttons = [
+                    { type: "button", action: "reset", icon: "fa-solid fa-arrow-rotate-left", label: "Reset" },
+                    { type: "submit", icon: "fa-solid fa-floppy-disk", label: "Save Changes" }
+                ];
+                break;
+        }
+        return partContext;
 
-        await this.settings.updateSource(updatedSettings);
-        this.render();
     }
 
-    static async preview() {
-        const source = this.settings._source.diceSoNice[this.tabGroups.diceSoNice];
-        let faces = 'd12';
-        switch (this.tabGroups.diceSoNice) {
-            case 'advantage':
-            case 'disadvantage':
-                faces = 'd6';
-        }
-        const preset = await getDiceSoNicePreset(source, faces);
-        const diceSoNiceRoll = await new Roll(`1${faces}`).evaluate();
+    /**
+     * Prepare render context for the DSN part.
+     * @param {ApplicationRenderContext} context
+     * @returns {Promise<void>}
+     * @protected
+     */
+    async prepareDiceSoNiceContext(context) {
+        context.diceSoNiceTextures = Object.entries(game.dice3d.exports.TEXTURELIST).reduce((acc, [k, v]) => ({
+            ...acc,
+            [k]: v.name
+        }), {});
+        context.diceSoNiceColorsets = Object.values(game.dice3d.exports.COLORSETS).reduce((acc, v) => ({
+            ...acc,
+            [v.id]: v.description
+        }), {});
+        context.diceSoNiceMaterials = Object.keys(game.dice3d.DiceFactory.material_options).reduce((acc, key) => ({
+            ...acc,
+            [key]: `DICESONICE.Material${key.capitalize()}`
+        }), {});
+        context.diceSoNiceSystems = Object.fromEntries([...game.dice3d.DiceFactory.systems].map(([k, v]) => [k, v.name]));
+
+        foundry.utils.mergeObject(context.dsnTabs, [
+            "hope",
+            "fear",
+            "advantage",
+            "disadvantage",
+        ].reduce((acc, key) => ({
+            ...acc,
+            [key]: {
+                values: this.setting.diceSoNice[key],
+                fields: this.setting.schema.getField(`diceSoNice.${key}`).fields,
+            }
+        }), {}));
+    }
+
+    /**
+     * Submit the configuration form.
+     * @this {DHAppearanceSettings}
+     * @param {SubmitEvent} event
+     * @param {HTMLFormElement} form
+     * @param {foundry.applications.ux.FormDataExtended} formData
+     * @returns {Promise<void>}
+     */
+    static async #onSubmit(event, form, formData) {
+        const data = this.setting.schema.clean(foundry.utils.expandObject(formData.object));
+        await game.settings.set(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance, data);
+    }
+
+    /* -------------------------------------------- */
+
+    /**
+     * Submit the configuration form.
+     * @this {DHAppearanceSettings}
+     * @type {ApplicationClickAction}
+     */
+    static async #onPreview(_, target) {
+        const formData = new foundry.applications.ux.FormDataExtended(target.closest("form"));
+        const { diceSoNice } = foundry.utils.expandObject(formData.object);
+        const { key } = target.dataset;
+        const faces = ['advantage', 'disadvantage'].includes(key) ? 'd6' : 'd12';
+        const preset = await getDiceSoNicePreset(diceSoNice[key], faces);
+        const diceSoNiceRoll = await new foundry.dice.Roll(`1${faces}`).evaluate();
         diceSoNiceRoll.dice[0].options.appearance = preset.appearance;
         diceSoNiceRoll.dice[0].options.modelFile = preset.modelFile;
-
         await game.dice3d.showForRoll(diceSoNiceRoll, game.user, false);
     }
 
-    static async reset() {
-        this.settings = new DhAppearance();
-        this.render();
-    }
-
-    static async save() {
-        await game.settings.set(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance, this.settings.toObject());
-
-        this.close();
-    }
-
-    _getTabs(tabs) {
-        for (const v of Object.values(tabs)) {
-            v.active = this.tabGroups[v.group] ? this.tabGroups[v.group] === v.id : v.active;
-            v.cssClass = v.active ? 'active' : '';
-        }
-
-        return tabs;
+    /**
+    * Reset the form back to default values.
+    * @this {DHAppearanceSettings}
+    * @type {ApplicationClickAction}
+    */
+    static async #onReset() {
+        this.setting = new this.setting.constructor();
+        this.render({ force: false });
     }
 }

module/data/settings/Appearance.mjs

@@ -1,100 +1,45 @@
-import { fearDisplay } from '../../config/generalConfig.mjs';
-
 export default class DhAppearance extends foundry.abstract.DataModel {
+    static LOCALIZATION_PREFIXES = ["DAGGERHEART.SETTINGS.Appearance"];
+
     static defineSchema() {
-        const fields = foundry.data.fields;
+        const { StringField, ColorField, BooleanField, SchemaField } = foundry.data.fields;
+
+        // helper to create dice style schema
+        const diceStyle = ({ fg, bg, outline, edge }) => new SchemaField({
+            foreground: new ColorField({ required: true, initial: fg }),
+            background: new ColorField({ required: true, initial: bg }),
+            outline: new ColorField({ required: true, initial: outline }),
+            edge: new ColorField({ required: true, initial: edge }),
+            texture: new StringField({ initial: 'astralsea', required: true, blank: false }),
+            colorset: new StringField({ initial: 'inspired', required: true, blank: false }),
+            material: new StringField({ initial: 'metal', required: true, blank: false }),
+            system: new StringField({ initial: 'standard', required: true, blank: false })
+        });
+
         return {
-            displayFear: new fields.StringField({
+            displayFear: new StringField({
                 required: true,
-                choices: fearDisplay,
-                initial: fearDisplay.token.value,
-                label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.displayFear.label'
+                choices: CONFIG.DH.GENERAL.fearDisplay,
+                initial: CONFIG.DH.GENERAL.fearDisplay.token.value,
             }),
-            diceSoNice: new fields.SchemaField({
-                hope: new fields.SchemaField({
-                    foreground: new fields.ColorField({ required: true, initial: '#ffffff' }),
-                    background: new fields.ColorField({ required: true, initial: '#ffe760' }),
-                    outline: new fields.ColorField({ required: true, initial: '#000000' }),
-                    edge: new fields.ColorField({ required: true, initial: '#ffffff' }),
-                    texture: new fields.StringField({ initial: 'astralsea' }),
-                    colorset: new fields.StringField({ initial: 'inspired' }),
-                    material: new fields.StringField({ initial: 'metal' }),
-                    system: new fields.StringField({ initial: 'standard' })
-                }),
-                fear: new fields.SchemaField({
-                    foreground: new fields.ColorField({ required: true, initial: '#000000' }),
-                    background: new fields.ColorField({ required: true, initial: '#0032b1' }),
-                    outline: new fields.ColorField({ required: true, initial: '#ffffff' }),
-                    edge: new fields.ColorField({ required: true, initial: '#000000' }),
-                    texture: new fields.StringField({ initial: 'astralsea' }),
-                    colorset: new fields.StringField({ initial: 'inspired' }),
-                    material: new fields.StringField({ initial: 'metal' }),
-                    system: new fields.StringField({ initial: 'standard' })
-                }),
-                advantage: new fields.SchemaField({
-                    foreground: new fields.ColorField({ required: true, initial: '#ffffff' }),
-                    background: new fields.ColorField({ required: true, initial: '#008000' }),
-                    outline: new fields.ColorField({ required: true, initial: '#000000' }),
-                    edge: new fields.ColorField({ required: true, initial: '#ffffff' }),
-                    texture: new fields.StringField({ initial: 'astralsea' }),
-                    colorset: new fields.StringField({ initial: 'inspired' }),
-                    material: new fields.StringField({ initial: 'metal' }),
-                    system: new fields.StringField({ initial: 'standard' })
-                }),
-                disadvantage: new fields.SchemaField({
-                    foreground: new fields.ColorField({ required: true, initial: '#000000' }),
-                    background: new fields.ColorField({ required: true, initial: '#b30000' }),
-                    outline: new fields.ColorField({ required: true, initial: '#ffffff' }),
-                    edge: new fields.ColorField({ required: true, initial: '#000000' }),
-                    texture: new fields.StringField({ initial: 'astralsea' }),
-                    colorset: new fields.StringField({ initial: 'inspired' }),
-                    material: new fields.StringField({ initial: 'metal' }),
-                    system: new fields.StringField({ initial: 'standard' })
-                })
+            diceSoNice: new SchemaField({
+                hope: diceStyle({ fg: '#ffffff', bg: '#ffe760', outline: '#000000', edge: '#ffffff' }),
+                fear: diceStyle({ fg: '#000000', bg: '#0032b1', outline: '#ffffff', edge: '#000000' }),
+                advantage: diceStyle({ fg: '#ffffff', bg: '#008000', outline: '#000000', edge: '#ffffff' }),
+                disadvantage: diceStyle({ fg: '#000000', bg: '#b30000', outline: '#ffffff', edge: '#000000' })
             }),
-            showGenericStatusEffects: new fields.BooleanField({
-                initial: true,
-                label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.showGenericStatusEffects.label'
+            extendCharacterDescriptions: new BooleanField(),
+            extendAdversaryDescriptions: new BooleanField(),
+            extendEnvironmentDescriptions: new BooleanField(),
+            extendItemDescriptions: new BooleanField(),
+            expandRollMessage: new SchemaField({
+                desc: new BooleanField(),
+                roll: new BooleanField(),
+                damage: new BooleanField(),
+                target: new BooleanField()
             }),
-            extendCharacterDescriptions: new fields.BooleanField({
-                initial: false,
-                label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.extendCharacterDescriptions.label'
-            }),
-            extendAdversaryDescriptions: new fields.BooleanField({
-                initial: false,
-                label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.extendAdversaryDescriptions.label'
-            }),
-            extendEnvironmentDescriptions: new fields.BooleanField({
-                initial: false,
-                label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.extendEnvironmentDescriptions.label'
-            }),
-            extendItemDescriptions: new fields.BooleanField({
-                initial: false,
-                label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.extendItemDescriptions.label'
-            }),
-            expandRollMessage: new fields.SchemaField({
-                desc: new fields.BooleanField({
-                    initial: false,
-                    label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.expandRollMessageDesc.label'
-                }),
-                roll: new fields.BooleanField({
-                    initial: false,
-                    label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.expandRollMessageRoll.label'
-                }),
-                damage: new fields.BooleanField({
-                    initial: false,
-                    label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.expandRollMessageDamage.label'
-                }),
-                target: new fields.BooleanField({
-                    initial: false,
-                    label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.expandRollMessageTarget.label'
-                })
-            }),
-            hideAttribution: new fields.BooleanField({
-                required: true,
-                initial: false,
-                label: 'DAGGERHEART.SETTINGS.Appearance.FIELDS.hideAttribution.label'
-            })
+            hideAttribution: new BooleanField(),
+            showGenericStatusEffects: new BooleanField({ initial: true }),
         };
     }
 }

module/systemRegistration/settings.mjs

@@ -72,7 +72,7 @@ const registerMenus = () => {
     });
 
     game.settings.registerMenu(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance, {
-        name: game.i18n.localize('DAGGERHEART.SETTINGS.Menu.appearance.title'),
+        name: game.i18n.localize('DAGGERHEART.SETTINGS.Menu.appearance.label'),
         label: game.i18n.localize('DAGGERHEART.SETTINGS.Menu.appearance.label'),
         hint: game.i18n.localize('DAGGERHEART.SETTINGS.Menu.appearance.hint'),
         icon: 'fa-solid fa-palette',

templates/settings/appearance-settings.hbs

@@ -1,116 +0,0 @@
-<div>
-    <header class="dialog-header">
-        <h1>{{localize 'DAGGERHEART.SETTINGS.Menu.appearance.name'}}</h1>
-    </header>
-
-    {{formGroup settingFields.schema.fields.hideAttribution value=settingFields._source.hideAttribution localize=true}}
-
-    <fieldset>
-        <legend>{{localize 'DAGGERHEART.GENERAL.fear'}}</legend>
-        {{formGroup settingFields.schema.fields.displayFear value=settingFields._source.displayFear localize=true}}
-        {{formGroup settingFields.schema.fields.showGenericStatusEffects value=settingFields._source.showGenericStatusEffects localize=true}}
-    </fieldset>
-
-    <fieldset>
-        <legend>{{localize 'DAGGERHEART.SETTINGS.Appearance.FIELDS.expandedTitle'}}</legend>
-        {{formGroup settingFields.schema.fields.extendCharacterDescriptions value=settingFields._source.extendCharacterDescriptions localize=true}}
-        {{formGroup settingFields.schema.fields.extendAdversaryDescriptions value=settingFields._source.extendAdversaryDescriptions localize=true}}
-        {{formGroup settingFields.schema.fields.extendEnvironmentDescriptions value=settingFields._source.extendEnvironmentDescriptions localize=true}}
-        {{formGroup settingFields.schema.fields.extendItemDescriptions value=settingFields._source.extendItemDescriptions localize=true}}
-    </fieldset>
-
-    <fieldset>
-        <legend>{{localize 'DAGGERHEART.SETTINGS.Appearance.FIELDS.expandRollMessage'}}</legend>
-        {{formGroup settingFields.schema.fields.expandRollMessage.fields.desc value=settingFields.expandRollMessage.desc localize=true}}
-        {{formGroup settingFields.schema.fields.expandRollMessage.fields.roll value=settingFields.expandRollMessage.roll localize=true}}
-        {{formGroup settingFields.schema.fields.expandRollMessage.fields.damage value=settingFields.expandRollMessage.damage localize=true}}
-        {{formGroup settingFields.schema.fields.expandRollMessage.fields.target value=settingFields.expandRollMessage.target localize=true}}
-    </fieldset>
-
-    {{#if showDiceSoNice}}
-        <fieldset>
-            <legend>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.title"}}</legend>
-            <div class="title-hint">{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.hint"}}</div>
-
-            <section class='tab-navigation'>
-                <div class='navigation-container'>
-                    <div class="navigation-inner-container">
-                        <line-div></line-div>
-                        <nav class='feature-tab sheet-tabs tabs' data-group='diceSoNice'>
-                            {{#each tabs as |tab|}}
-                                <a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
-                                    {{localize tab.label}}
-                                </a>
-                            {{/each}}
-                        </nav>
-                        <line-div></line-div>
-                    </div>
-                </div>
-            </section>
-
-            <div class="field-section">
-                <div class="label-container full-width">
-                    <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.system"}}</label>
-                    <select name="{{concat "diceSoNice." diceTab.key ".system"}}">
-                        {{selectOptions diceSoNiceSystems selected=diceTab.source.system valueAttr="key" labelAttr="name" localize=true}}
-                    </select>
-                </div>
-
-                <div class="split-section">
-                    <div class="label-container">
-                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.foreground"}}</label>
-                        {{formInput diceTab.fields.foreground value=diceTab.source.foreground localize=true}}
-                    </div>
-                    <div class="label-container">
-                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.background"}}</label>
-                        {{formInput diceTab.fields.background value=diceTab.source.background localize=true}}
-                    </div>
-                    <div class="label-container">
-                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.outline"}}</label>
-                        {{formInput diceTab.fields.outline value=diceTab.source.outline localize=true}}
-                    </div>
-                    <div class="label-container">
-                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.edge"}}</label>
-                        {{formInput diceTab.fields.edge value=diceTab.source.edge localize=true}}
-                    </div>
-                    <div class="label-container">
-                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.colorset"}}</label>
-                        <select name="{{concat "diceSoNice." diceTab.key ".colorset"}}">
-                            {{selectOptions diceSoNiceColorsets selected=diceTab.source.colorset labelAttr="description" localize=true}}
-                        </select>
-                    </div>
-                    <div class="label-container">
-                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.texture"}}</label>
-                        <select name="{{concat "diceSoNice." diceTab.key ".texture"}}">
-                            {{selectOptions diceSoNiceTextures selected=diceTab.source.texture labelAttr="name" localize=true}}
-                        </select>
-                    </div>
-                    <div class="label-container">
-                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.material"}}</label>
-                        <select name="{{concat "diceSoNice." diceTab.key ".material"}}">
-                            {{selectOptions diceSoNiceMaterials selected=diceTab.source.material valueAttr="key" labelAttr="name" localize=true}}
-                        </select>
-                    </div>
-                    <div class="button-container">
-                        <button data-action="preview">
-                            <i class="fa-solid fa-dice"></i>
-                            <span>{{localize "Preview"}}</span>
-                        </button>
-                    </div>
-               </div>
-            </div>
-        </fieldset>
-    {{/if}}
-
-    <footer class="form-footer">
-        <button data-action="reset">
-            <i class="fa-solid fa-arrow-rotate-left"></i>
-            <span>{{localize "Reset"}}</span>
-        </button>
-        <button data-action="save" >
-            <i class="fa-solid fa-floppy-disk"></i>
-            <span>{{localize "Save Changes"}}</span>
-        </button>
-    </footer>
-</div>
-  

templates/settings/appearance-settings/diceSoNice.hbs

@@ -0,0 +1,67 @@
+<section class="tab {{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
+  <fieldset>
+    <div class="title-hint">{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.hint"}}</div>
+
+    <section class='tab-navigation'>
+      <div class='navigation-container'>
+        <div class="navigation-inner-container">
+          <line-div></line-div>
+          <nav class='feature-tab sheet-tabs tabs' data-group='diceSoNice'>
+            {{#each dsnTabs as |tab|}}
+            <a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
+              {{localize tab.label}}
+            </a>
+            {{/each}}
+          </nav>
+          <line-div></line-div>
+        </div>
+      </div>
+    </section>
+    {{#each dsnTabs as |dsnTab|}}
+    <section class="tab {{#if dsnTab.active}} active{{/if}}" data-group="{{dsnTab.group}}" data-tab="{{dsnTab.id}}">
+      <div class="field-section">
+        <div class="label-container full-width">
+          <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.system"}}</label>
+          {{formInput fields.system value=values.system localize=true choices=@root.diceSoNiceSystems}}
+        </div>
+        <div class="split-section">
+          <div class="label-container">
+            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.foreground"}}</label>
+            {{formInput fields.foreground value=values.foreground localize=true}}
+          </div>
+          <div class="label-container">
+            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.background"}}</label>
+            {{formInput fields.background value=values.background localize=true}}
+          </div>
+          <div class="label-container">
+            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.outline"}}</label>
+            {{formInput fields.outline value=values.outline localize=true}}
+          </div>
+          <div class="label-container">
+            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.edge"}}</label>
+            {{formInput fields.edge value=values.edge localize=true}}
+          </div>
+          <div class="label-container">
+            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.colorset"}}</label>
+            {{formInput fields.colorset value=values.colorset choices=@root.diceSoNiceColorsets localize=true}}
+          </div>
+          <div class="label-container">
+            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.texture"}}</label>
+            {{formInput fields.texture value=values.texture choices=@root.diceSoNiceTextures localize=true}}
+          </div>
+          <div class="label-container">
+            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.material"}}</label>
+            {{formInput fields.material value=values.material choices=@root.diceSoNiceMaterials localize=true}}
+          </div>
+          <div class="button-container">
+            <button type="button" data-action="preview" data-key="{{dsnTab.id}}">
+              <i class="fa-solid fa-dice"></i>
+              <span>{{localize "Preview"}}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+    {{/each}}
+  </fieldset>
+</section>

templates/settings/appearance-settings/header.hbs

@@ -0,0 +1,3 @@
+    <header class="dialog-header">
+        <h1>{{localize 'DAGGERHEART.SETTINGS.Menu.appearance.label'}}</h1>
+    </header>

templates/settings/appearance-settings/main.hbs

@@ -0,0 +1,46 @@
+<section class="tab {{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
+    {{formGroup
+    fields.displayFear
+    value=setting.displayFear
+    localize=true}}
+    {{formGroup
+    fields.showGenericStatusEffects
+    value=setting.showGenericStatusEffects
+    localize=true}}
+    {{formGroup
+    fields.hideAttribution
+    value=setting.hideAttribution
+    localize=true}}
+
+    <fieldset>
+        <legend>{{localize 'DAGGERHEART.SETTINGS.Appearance.FIELDS.expandedTitle'}}</legend>
+        {{formGroup
+        fields.extendCharacterDescriptions
+        value=setting.extendCharacterDescriptions
+        localize=true}}
+        {{formGroup
+        fields.extendAdversaryDescriptions
+        value=setting.extendAdversaryDescriptions
+        localize=true}}
+        {{formGroup
+        fields.extendEnvironmentDescriptions
+        value=setting.extendEnvironmentDescriptions
+        localize=true}}
+        {{formGroup
+        fields.extendItemDescriptions
+        value=setting.extendItemDescriptions
+        localize=true}}
+    </fieldset>
+
+    <fieldset>
+        <legend>{{localize 'DAGGERHEART.SETTINGS.Appearance.FIELDS.expandRollMessage.title'}}</legend>
+        {{formGroup fields.expandRollMessage.fields.desc value=setting.expandRollMessage.desc
+        localize=true}}
+        {{formGroup fields.expandRollMessage.fields.roll value=setting.expandRollMessage.roll
+        localize=true}}
+        {{formGroup fields.expandRollMessage.fields.damage
+        value=setting.expandRollMessage.damage localize=true}}
+        {{formGroup fields.expandRollMessage.fields.target
+        value=setting.expandRollMessage.target localize=true}}
+    </fieldset>
+</section>