Function renderAppearanceTab

src/settings/tabs/appearanceTab.ts:52–904

(
	container: HTMLElement,
	plugin: TaskNotesPlugin,
	save: () => void
)

 * Renders the Appearance & UI tab - visual customization settings
 */
export function renderAppearanceTab(
	container: HTMLElement,
	plugin: TaskNotesPlugin,
	save: () => void
): void {
	container.empty();

	const translate = (key: TranslationKey, params?: Record<string, string | number>) =>
		plugin.i18n.translate(key, params);

	// Task Cards Section
	const availableProperties = getAvailableProperties(plugin);
	const currentProperties = plugin.settings.defaultVisibleProperties || [];
	const currentLabels = getPropertyLabels(plugin, currentProperties);

	createSettingGroup(
		container,
		{
			heading: translate("settings.appearance.taskCards.header"),
			description: translate("settings.appearance.taskCards.description"),
		},
		(group) => {
			group.addSetting((setting) => {
				setting
					.setName(
						translate("settings.appearance.taskCards.defaultVisibleProperties.name")
					)
					.setDesc(
						translate(
							"settings.appearance.taskCards.defaultVisibleProperties.description"
						)
					)
					.addButton((button) => {
						button.setButtonText("Configure").onClick(() => {
							const modal = new PropertySelectorModal(
								plugin.app,
								availableProperties,
								currentProperties,
								async (selected) => {
									plugin.settings.defaultVisibleProperties = selected;
									save();
									new Notice("Default task card properties updated");
									// Re-render to update display
									renderAppearanceTab(container, plugin, save);
								},
								"Select Default Task Card Properties",
								"Choose which properties to display in task cards (views, kanban, etc.). Selected properties will appear in the order shown below."
							);
							modal.open();
						});
					});
			});

			// Show currently selected properties
			group.addSetting((setting) => {
				setting.setDesc(`Currently showing: ${currentLabels.join(", ")}`);
				setting.settingEl.addClass("settings-view__group-description");
			});